React Native Components

Introduction

To start with react-native, there are a few essential components a newbie needs to learn. Some of them are - View, Text, Image, ScrollView, and TextInput. Let's learn them one by one :

View -

The View component in React Native is a container for other components and is used to define the layout and structure of an app. It acts as a rectangular area on the screen and can contain other components such as text, images, buttons, and more.

It is like a container view for mobile developers and for web developers, it is like <div>. Also, we can nest them the same way we do with <div>.

Text -

The Text component is used to display text on the screen. It acts as a container for text content and can be styled and customized to meet the needs of the app.

It is similar to that of <p> tag in HTML which is used to render the text on the screen.

Example :

import React from 'react';

import {
    View, 
    Text
} from 'react-native';

function App() {
  return (
    <View>
      <Text>Hello World!</Text>
    </View>
  );
}

export default App;

In this example, a Text component is rendered within a View component, which serves as a container for the text.

TextInput -

The TextInput component is used to provide a way for the user to input text in a mobile app. It acts as a text field for receiving text input from the user.

import React from 'react';
import {
    TextInput, 
    View
} from 'react-native';

function App() {
  return (
    <View>
      <TextInput defaultValue="You can type here" />
    </View>
  );
}

export default App;

ScrollView -

The ScrollView component is used to provide scrolling and panning functionality for a view. It acts as a container for a scrolling list of items, such as images, text, or other components.

Image -

The Image component is used to display images in a mobile app. It acts as a container for a single image, which can be loaded from a local file, a network resource, or a data source.

Example :

import React from 'react';
import {
    ScrollView, 
    Image, 
    Text, 
    View} from 'react-native';

function App() {
  return (
    <ScrollView>
      <View>
        <Image source={{ uri: 'https://unsplash.com/photos/Ajoi6Qsmz1M'}} />
        <Text>Image 1</Text>
      </View>
      <Image source={{ uri: 'https://unsplash.com/photos/Ajoi6Qsmz1M'}} />
      <Text>Image 2</Text>
      <Image source={{ uri: 'https://unsplash.com/photos/Ajoi6Qsmz1M'}} />
      <Text>Image 3</Text>
    </ScrollView>
  );
}

export default App;

---

Hope you learned something from this.

Happy Learning !😀