React Native View, Text, Image, ScrollView, TextInput — వంటి కోర్ కాంపోనెంట్ల సమితిని అందించుకుంటుంది, ఇవి నేటివ్ UI ఎలిమెంట్లకు మ్యాప్ చేయబడతాయి. అవి React Native UIs యొక్క ప్రాథమిక నిర్మాణ యూనిట్లు, వెబ్ HTML ఎలిమెంట్ల బదులుగా ఉపయోగించబడతాయి.
React Native uses its OWN components (mapping to native views), NOT HTML:
VIEW → a container (like a <div>) — the basic layout building block
TEXT → display text (ALL text must be inside a <Text>, unlike web)
IMAGE → display images (local or remote)
TEXTINPUT → text input field (like an <input>)
SCROLLVIEW → a scrollable container
FLATLIST → an efficient scrollable LIST (for long lists — renders lazily)
TOUCHABLEOPACITY / PRESSABLE → handle taps (touchable areas)
BUTTON → a basic button
import { View, Text, Image, TextInput, TouchableOpacity } from 'react-native';
function Profile() {
return (
<View style={styles.container}> {/* container (like a div) */}
<Image source={{ uri: 'https://...' }} style={styles.avatar} />
<Text style={styles.name}>Ann</Text> {/* text MUST be in <Text> */}
<TextInput placeholder="Email" />
<TouchableOpacity onPress={() => {}}>
<Text>Submit</Text>
</TouchableOpacity>
</View>
);
}
✓ Use <View> not <div>, <Text> not <p>/<span>; ALL text must be in <Text>
✓ No CSS classes/files — STYLING via a style prop (JS objects, StyleSheet) — see styling
✓ Touchables/Pressable for interactions (not onClick on divs)
✓ FlatList for long lists (efficient) — not mapping over everything
కోర్ కాంపోనెంట్లను అర్థం చేసుకోవడం React Native డెవలప్మెంట్కు ప్రాథమికమైనది ఎందుకంటే అవి ప్రతి React Native UI యొక్క నిర్మాణ యూనిట్లు — మీరు ఇంటర్ఫేస్లను నిర్మించడానికి వాటిని కంపోజ్ చేస్తారు, కాబట్టి ఇది తప్పనిసరిగా తెలుసుకోవలసిన ఫౌండేషనల్ జ్ఞానం.
React Native వెబ్ HTML ఎలిమెంట్ల కంటే నేటివ్ వ్యూలకు మ్యాప్ చేసే స్వంత కాంపోనెంట్లను అందించుకుంటుంది, మరియు ఎవరైనా React Native UI నిర్మించటానికి అవసరమైన ఎసెన్షియల్లను అర్థం చేసుకోవడం — View (కంటైనర్, div లాంటిది), Text (సమస్త టెక్స్ట్కు, ఎక్కువ ముఖ్యమైన నియమం ఏ టెక్స్ట్ も Text కాంపోనెంట్ లోపల ఉండాలి, వెబ్ కాకుండా), Image, TextInput, ScrollView, FlatList (సమర్థవంతమైన లాంగ్ లిస్ట్ల కోసం), మరియు టచేబల్లు/Pressable (ట్యాప్లను హ్యాండిల్ చేయడానికి) — ఏ React Native UI నిర్మించాలీ అవసరమైనది.
వెబ్/React డెవలపర్ల కోసం React Native కు బదిలీ చేయడానికి వెబ్ నుండి కీలక వ్యత్యాసాలను అర్థం చేసుకోవడం ప్రత్యేకంగా ముఖ్యమైనది: div బదులుగా View ను మరియు p/span బదులుగా Text ను ఉపయోగించడం (సమస్త-టెక్స్ట్-ఇన్-టెక్స్ట్ నియమంతో), CSS క్లాస్లు/ఫైల్ల బదులుగా స్టైల్ ప్రాపర్టీ ద్వారా స్టైలింగ్ చేయడం, onClick బదులుగా ఇంటరঅ్యాక్షన్ల కోసం టచేబల్లు/Pressable ను ఉపయోగించడం, మరియు సమస్త లిస్ట్లను మ్యాప్ చేయడం బదులుగా FlatList ను లాంగ్ లిస్ట్ల కోసం ఉపయోగించడం (ఇది సమర్థవంతంగా/నిల్నీకి రెండర్ చేస్తుంది) — ఈ వ్యత్యాసాలు సాధారణ ఎదురుదెబ్బలు, కోర్ కాంపోనెంట్లను అర్థం చేసుకోవడం స్పష్టం చేస్తుంది.
కాంపోనెంట్లు UIs నిర్మించటానికి (React లాగా) కంపోజ్ చేస్తాయి, View ఫౌండేషనల్ కంటైనర్గా ఉంటుంది.
కోర్ కాంపోనెంట్లు ప్రతి React Native UI యొక్క నిర్మాణ యూనిట్లు కనుక (మీరు ఇంటర్ఫేస్లను నిర్మించటానికి నిరంతరం వాటిని ఉపయోగిస్తారు) మరియు వాటిని మరియు అవి ఎలా వెబ్ HTML నుండి భిన్నంగా ఉన్నాయో అర్థం చేసుకోవడం React Native అనువర్తనాలను నిర్మించటానికి ప్రాథమికమైనది (ముఖ్యంగా వెబ్ డెవలపర్ల కోసం), కోర్ కాంపోనెంట్లను అర్థం చేసుకోవడం ఎసెన్షియల్, ఫౌండేషనల్ React Native జ్ఞానం — React Native UI యొక్క ప్రాథమిక పదజాలం, ఏ ఇంటర్ఫేస్ను నిర్మించటానికీ నేటివ్ కాంపోనెంట్ మోడల్కు వెబ్ React జ్ఞానాన్ని సమన్వయించటానికీ అవసరమైనది, React Native డెవలప్మెంట్కు కోర్ దక్షత.