What is Props in React Native?

In react native, when we create a component, we can customize it using various different properties, and these properties are called props.

Do you know Why we use props in ReactJS? If not, then let's learn it.

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.

Props in React

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:

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.

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:

Code Explanation:

In the above code, we define two files one is App.js which 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 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.

Conclusion

That's all for this tutorial, we have seen what are Props in React, props (short for "properties") are a way to pass data from a parent component to a child component.

They are used to communicate and share data between different parts of a React application, allowing for dynamic and interactive user interfaces.

Frequently Asked Questions(FAQs)

1. What are props and state in React?

The state is a local storage that is managed by a component and it allows it to update of its own code while Props are used to pass data between the parent component and child component that allows sharing between components of React application.

2. What is the type of React props?

Here are the types of React Props -

3. What are props used for?

Props are often used to customize and configure child components, allowing for dynamic and interactive user interfaces. Props can be used to pass various types of data, such as strings, numbers, objects, or functions, and can be used to trigger events, set styles, or populate content in a component.

You may also like:

• Basics of React Native - Hello World Program!

• How to create Components in React Native?

• Set Height and Width in React Native

• Image Component in React Native