React Native Props Example

This tutorial explains how to create react native props in react native application. This props helps to pass the information from one component to another component. React and React Native is component based. We divide the complex UI into basic components. After developing the basic components we again adds all these components to create a complex UI which also called as complex component. React and React Native controls the data flow in the components with state and props. The data in states and props are used to render the Component with dynamic data.

Understanding ReactJS Props :

• In React we use props to send data to components.
• In React every component is treated as a pure javascript function.
• In React props are equivalent to parameters of a pure javascript function.
• Props are immutable. Because these are developed in the concept of pure functions. In pure functions we cannot change the data of parameters. So, also cannot change the data of a prop in React.

What is Props in React Native ?

In React props is short for properties. They are single values or objects containing a set of values that are passed to React Components on creation using a naming convention similar to HTML-tag attributes.The primary purpose of props in React is to provide following component functionality:

1. Pass custom data to your React component.
2. Trigger "state" changes (more on this later).
3. Use via this.props.reactProps inside component's render() method.

Lets see the below example in react native, where we have created custom component names as ShowText Component and passing data to custom component with the help of props from App component.

App.js

Lets see the complete source code that helps to pass the information from one component to another component with the help of props.

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, Button } from 'react-native';

class ShowText extends Component {
  render() {
    return (
      <Text style={{marginTop : 20, fontWeight: 'bold'}}>{this.props.text} </Text>
    );
  }
}


export default class App extends Component {  

  render() {

    return (
      <View style={styles.container}>
        <ShowText text="Welcome to skptricks.com" />
        <ShowText text="Learn React native" />
        <ShowText text="Learn various programming language" />
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems : 'center'
  },
});

Screenshot :

This is all about React Native Props Example. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.