React Native Props

React Native Props

This post will give you an Understanding of Props in React Native. React Native components have some Props which are helpful to customize the component. For example placeholder, value, style, etc are props. Parent view sets React Native Props and they are fixed throughout the lifetime of a component.

Presentational components should get all data by passing Props. Only container components should have State.

As we all know React is a component-based language. So here everything you make will become a component. React Native has some basic components like Text, InputText, Button, etc. You can explore more in the Introduction of Basic React Native Components post. But other than that everything you make with the combination of those components will also become the component.

Basic components have some props defined like style, autoCorrect, onPress, Size, Color, etc. which very helpful to customise according to need. For example, We can put TextInput anywhere just by defining the prop placeholder. TextInput remains the same, just placeholder changes. Similarly, when we make our custom component we need to make something dynamic so that we can use the same component, again and again, we just need to pass some dynamic values and props will handle all other stuff.

Understanding of Props in React native

In this example we will make a component MyCustomTextWith which shows first name and last name in the single sentence. If we want the same thing to use everywhere will treat this as a component and though we want to use this component, again and again, need to make the first name and last name dynamic so that we can use it for the different first name and last name. This can be easily done with Props.

While making our custom component everything we want to make dynamic should be set with props that can be passed from the master container components.

Code

Here is the example code to understand it more easily

App.js

// React Native Props
// https://aboutreact.com/react-native-props/

// import React in our code
import React from 'react';

// import all the components we are going to use
import {SafeAreaView, Text, View} from 'react-native';

const MyCustomTextWith = (props) => {
  return (
    <Text>
      Your First Name is {props.firstname}!
      and Last name is {props.secondname}
    </Text>
  );
};

const App = () => {
  return (
    <SafeAreaView style={{flex: 1}}>
      <View
        style={{
          justifyContent: 'center',
          alignItems: 'center',
          flex: 1
        }}>
        {/*Use of our custom component MyCustomTextWith*/}
        <MyCustomTextWith
          firstname="fName1"
          secondname="lname1"
        />
        {/*We are setting the props dynamically from the main UI 
           where we want to use it. We candynamically set the value 
           using props from master every time*/}
        <MyCustomTextWith
          firstname="fName2"
          secondname="lname2"
        />
      </View>
    </SafeAreaView>
  );
};

export default App;

Output Screenshot

Output in Online Emulator

Hope you understand the Props. As props and state are very important topics to cover before going further so we planned to describe in between the basic element series.

That was the React Native Props. If you have any doubts or you want to share something about the topic you can comment below or contact us here. The remaining components will be covered in the next article. Stay tuned!

Hope you liked it. 🙂