React Native Props Example Tutorial

In our previous react native tutorial, we looked at how to configure react native development environment and how to set up a new project in react native. If you are a beginner and have not set up a react native project for android or iOS before, I will suggest you go through my tutorial on setting up react native on Windows for android project.

If you are starting with react native, you must have heard the word props in react. Props is like parameter in React components and it is use to customized react component when it is created.

For those familiar to html, react native props is similar to HTML element attributes.

Components in react native may either contain a props or not. But every component must contain a render function which returns the data of the component.

React native props comes in handy when you want to assign different props to different instances of a component.

Don’t worry for now we will learn all this concept through some example code.

First, we will take a look at react native default component like the Image component.

<Image source={pic} style={{width: 193, height: 110}}/>

You can see from the above code that source is an example of a props. You can use the same Image component in different or the same parent component and pass different image source path to it and it will still display the different image.

It is important to know that react native props is immutable and top-down. This implies that you can pass a props values from a parent component to its children but you cannot change or modify a parent or its child props. What you can do is to change the state of a component which will be discuss in the next tutorial or you can as well use the receive props value to set the state of a component.

Now let create some simple code snippet to highlight what we have been explaining above.

Follow the link above to learn how to create a new react native project we will use in this example.

Once your are done with creating your project, you can copy and paste the code below to your index.js file.

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

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component<{}> {

  
  render() {
    let imagePath = { uri: 'https://cdn.pixabay.com/photo/2017/10/30/17/44/eclairs-2903027_960_720.jpg'};
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Image source={imagePath} style={{width: 250, height: 200}} />
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
        <FoodPictures imageName="Food For Dinner"/>
      </View>
    );
  }
}

class FoodPictures extends Component{

  render(){

    let foodImage = {uri: 'https://cdn.pixabay.com/photo/2017/10/20/17/45/goulash-2872112_960_720.jpg'};
    return(
      <View style={styles.dinnerBox}>
      <Text style={styles.dinnerText}> {this.props.imageName} </Text>
      <Image source={foodImage} style={{width: 250, height: 200}} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },

  dinnerBox: {
    marginTop: 40
  },

  dinnerText: {
    fontSize: 20,
    color: '#000000',
    fontWeight: 'bold' 
  }
});

As you can see from the code above, we first use a custom component to show an example of a props and thereafter, we created our own component and add it to the default component.

The part of the code that shows this.props.imageName is used to access the value of the props imageName.

The screen shot of the modification is as shown below.

react native props

Before we end our tutorial on react native props, we will have a look on how we can control the type of data that we can pass to the props.

When we work on a large enterprise application, it is hard for a developer to assume that other developers working on the same project will know what type of value is expected to pass to a props.

Since Javascript is not a strictly type language, using props without type definition might end up being a source of hard to identified bug in the software.

Lucky enough, react native has a provision for it. We will dive into react PropTypes.

 

React Native PropTypes

As previously stated, we can use propTypes as a type-checking tool in our react native application. PropTypes is a property of react native component which we can access using the dot notation with component name. PropTypes supports different types of data type in Javascript as shown in the example below.

class FoodPictures extends Component{

  render(){

    let foodImage = {uri: 'https://cdn.pixabay.com/photo/2017/10/20/17/45/goulash-2872112_960_720.jpg'};
    return(
      <View style={styles.dinnerBox}>
      <Text style={styles.dinnerText}> {this.props.imageName} </Text>
      <Image source={foodImage} style={{width: 250, height: 200}} />
      </View>
    );
  }
}

FoodPictures.propTypes = {
  imageName: PropTypes.string
};

This link  contains a list of examples on how you can use react native PropTypes in your project type-checking. This will let you know how you can use PropTypes with Style, Children, Elements and so on.

Remember that you can also create a PropTypes inside react native component using as a static property by using the static keyword as shown below.

static PropTypes = {
    imageName : PropTypes.string.required
}

Also, you can use the default PropTypes which means that if a value is not passed to the props, the default value will be used. You can achieve this by using defaultProps property of a component.

FoodPictures.defaultProps = {
  imageName: 'Next Dinner'
}

This brings us to the end of this tutorial. Feel free to ask any question using the comment box below. In the next tutorial, we will look at react native state.

You can subscribe to our blog to be among the first people to be notified once a new post is published.

One Response

Add a Comment