List the important core components of React Native

React NativeJavascriptMobile Development

The most important core components in react native are as follows −

React Native componentAndroid Native ViewIOS Native ViewWeb BrowserDescription
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

raja
Published on 01-Jul-2021 07:02:42
Advertisements