The most important core components in react native are as follows −
| React Native component | Android Native View | IOS Native View | Web Browser | Description |
|---|---|---|---|---|
| View - <View> | When the app is seen in Android device the <View> component will be changed to <ViewGroup> | when the app is seen in IOS device the <View> component will be changed to <UIView> | When seen in a web browser the <View> component will be changed to <div> tag | It is the core container that supports flexbox layout. It also manages touch handling. |
| Text - <Text> | When the app is seen in Android device the <Text> component will be changed to <TextView> | when the app is seen in IOS device the <Text> component will be changed to <UITextView> | When seen in a web browser the <Text> component will be changed to <p> tag | Used to display text to the user. It also handles styling and touch events. |
| Image - <Image> | When the app is seen in Android device the <Image> component will be changed to <ImageView> | When the app is seen in an IOS device the <Image> component will be changed to <UIImageView> | When seen in a web browser the <Image> component will be changed to <img> tag | Used to display images. |
| Scrollview - <ScrollView> | When the app is seen in Android device the <ScrollView> component will be changed to <ScrollView> | when the app is seen in IOS device the <ScrollView> component will be changed to <UIScrollView> | When seen in a web browser the <ScrollView> component will be changed to <div> tag | Scrolling container that has components and views. |
| TextInput - <TextInput> | When the app is seen in Android device the <TextInput> component will be changed to <EditText> | When the app is seen in an IOS device the <TextInput> component will be changed to <UITextField> | When the is seen inside a web browser the <TextInput> component will be changed to <input type="text"> tag. | Input element where the user can enter the text |
Example
Following is the working example with <View>, <Text>, <Image>, <ScrollView> and <TextInput>
To work with Text, View, Image, ScrollView, TextInput, you need to import the components from react -native as shown below −
import { View, Text, Image, ScrollView, TextInput } from 'react-native';The View component is mainly used to hold the text, button, Image, etc. The component is used as follows −
<View>
<Text style={{ padding:"10%", color:"red" }}>Inside View Container</Text>
<Image
source={{
uri: 'https://www.tutorialspoint.com/react_native/images/logo.png',
}}
style={{ width: 311, height: 91 }}
/>
</View>It has Text and Image component in it. The ScrollView component behaves like a parent component that handles the View, Text, Image, Button and other React Native Component.
import React from 'react';
import { View, Text, Image, ScrollView, TextInput } from 'react-native';
const App = () => {
return (
<ScrollView>
<Text style={{ padding:"10%", color:"green", "fontSize":"25" }}>Welcome to TutorialsPoints!</Text>
<View>
<Text style={{ padding:"10%", color:"red" }}>Inside View Container</Text>
<Image
source={{
uri:'https://www.tutorialspoint.com/react_native/images/logo.png',
}}
style={{ width: 311, height: 91 }}
/>
</View>
<TextInput
style={{
height: 40,
borderColor: 'black',
borderWidth: 1
}}
defaultValue="Type something here"
/>
</ScrollView>
);
}
export default App;Output
