How to Use State and Props in React Native

Props
When components are created most components can be customized, with different parameters. These creation parameters are called props.

For example, Image is a basic React Native component. You can use a prop named source to control what image it shows when you create an image.

import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';

export default class Fruit extends Component {
  render() {
    let pic = {
      uri: 'https://image.shutterstock.com/image-photo/fresh-fruitsassorted-fruits-colorful-background-260nw-252338818.jpg'
    };
    return (
      <Image source={pic} style={{width: 193, height: 110}}/>
    );
  }
}

Embed the variable pic into JSX like this braces surrounding {pic}. Inside braces, in JSX you can put any JavaScript expression.

Props can be used by your own components can. A single component that is used in many different places in your mobile app, with slightly different properties in each place. In your render function just refer to this .props. Here's an example for prop:

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

class Greeting extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Text>Hello {this.props.name}!</Text>
      </View>
    );
  }
}

export default class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center', top: 40}}>
        <Greeting name='Vik' />
        <Greeting name='Pick' />
        <Greeting name='dras' />
      </View>
    );
  }
}

Lets us customize the greeting component using name as a prop, so we can reuse component for each of our greetings. The Greeting component in JSX use in this example, just like the built-in components. This is the power to do what makes React so cool - you had a different set of UI primitives to work with, you just invent new ones.

Here is the View component another new thing. For other components a View is useful as a container, to help control layout and style.

With props and the basic Image, Text, and View components, you can build a wide and unique variety of static screens. 

State
Props and State these are two types of data that control a component. By the parent, props are set and they are fixed throughout the lifetime of a component. We have to use state. For data that is going to change.

In the constructor, you should initialize state, and then call setState when you want to change it.

For example, we want to design a text that blinks all the time. When the blinking component gets created the text itself gets set once, so the text itself is a prop. 

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

class Blink extends Component {

  componentDidMount(){
    // Toggle state every second
    setInterval(() => (
      this.setState(previousState => (
        { isShowingText: !previousState.isShowingText }
      ))
    ), 1000);
  }

  //state object
  state = { isShowingText: true };

  render() {
    if (!this.state.isShowingText) {
      return null;
    }

    return (
      <Text>{this.props.text}</Text>
    );
  }
}

export default class BlinkApp extends Component {
  render() {
    return (
      <View>
        <Blink text='Blink text' />
        <Blink text='Blinking is working great' />
     
      </View>
    );
  }
}

In your real application, you probably won't be setting state with a timer. When you have new data from the server you might set state or from user input.  A state container like Redux or Mobx to control your data flow you can also use. In that case, you would use Mobx or Redux to modify your state rather than calling setState directly.

BlinkApp will re-render its Component When setState is called. By calling setState within the Timer,  every time the Timer ticks when a component will re-render.

In case of React, State works the same way.

Thanks