Hurry! Try our new Interactive Courses for FREE. 🥳   🚀
Written By:
yashpal
5 minute read
ReactNativeReactNative PropsMobile Application

What is Props in React Native?

Posted in Programming   LAST UPDATED: SEPTEMBER 1, 2021

In react native, when we create a component, we can customize it using various different properties, and these properties are called props. Every component has its own props but we can also define and use our own props. And all these props that we define can be made available to all the components.

The props in React Native

A prop is an immutable thing that cannot be changed after declaring the component. We can't change it in the future.

For example, to load an image in react native, we need to define a source that is a built-in property or props for the Image component. Apart from that, we can also set up our own props on an image like we define an Image component in a separate function and whenever we call that file, we can pass an image URL that can be used by image source props.

Let's understand what props mean using a few examples:

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
const New = (props) => {
  return (
    <View>
      <Text style={styles.text}>Hello, I am {props.name}!</Text>
    </View>
  );
}
const App = () => {
  return (
    <View style={styles.container}>
      <New name="React Native" />
    </View>
  );
}
export default App;
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 30,
  },
});

Output:

props in react native

Code Explanation:

In the above code, we define two components New and App. By default, we export the App component.

In the New component, we pass the props by default as a parameter and then we return a View component in which we have a Text component that is using the value of the name property. Here name is a prop. So whenever we call this New component we need to pass a value as a name prop that can be used by the New component. If we don't send any prop while calling the New component then it will just print a Null value.

In the App component, we define a View and inside it, we called our New component using the value name="React Native". So it then prints the Hello, I am React Native! text.

Also Read: How to create a component in React Native?

In react native, using props, we can call one component using different values and reuse the same component as many times as we want. It saves a lot of effort and can minimize our code complexity and size of our app.

Sending Props to a component in a different JS file

Now let's define a new file App.js:

import React from 'react';
import { View, StyleSheet } from 'react-native';
import New from './New';
const App = () => {
  return (
    <View style={styles.container}>
      <New name="React Native" />
      <New name="React JS" />
      <New name="Javascript" />
    </View>
  );
}
export default App;
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent: 'center',
  },
  
});

We have used the New component in the App.js file, hence let's define it.

And, another file New.js:

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

const New = (props) => {
  return (
    <View>
      <Text style={styles.text}>Hello, I am {props.name}!</Text>
    </View>
  );
}

export default New;

const styles = StyleSheet.create({
    text: {
      fontSize: 30,
    },
});

Output:

props in react native

Code Explanation:

In the above code, we define two files one is App.js that is the default file and the second is New.js in which we declare a New component that returns a View containing the Text component that uses the value of a property called name. So, whenever we call this New component from the New.js file, we need to pass the property.

In the App.js file, we first import the New.js file using the import statement. Here, we don't need to include the .js extension when we import the New.js file, because react-native by default uses the .js file extension. In the App component, we call the New component three times using different values of the name prop.

Note: This feature of calling a component with different props is so powerful. Like, think about a scenario where you have an application and in which you have a feature to download the images. So you don't need to make a different component for downloading each file, just make a separate component accept an image source as props, and download that image.

You may also like:


IF YOU LIKE IT, THEN SHARE IT

RELATED POSTS