Table of contents
1.
Introduction
2.
What are props in React Native?
3.
Hands-on Examples
4.
Frequently Asked Questions
4.1.
What are props in React Native?
4.2.
How do props work in React Native?
4.3.
How to pass data with props in React Native?
4.4.
Are props mutable in React Native?
4.5.
Can we pass props to functional components?
5.
Conclusion
Last Updated: Mar 27, 2024

React Native Props

Author Prakriti
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

React Native is an open-source User Interface framework that helps build applications on various platforms like Android, iOS, etc. It solved the problem of duplicate code and hence is used widely. It is a boon for mobile app developers. Microsoft, Tesla, and Walmart are some companies that use React Native. Let us dive deeper into props in React Native.

What are props in React Native?

Props are the short form for properties. In React Native, we can customize and modify the properties of components by passing parameters that are referred to as props during component creation. These immutable props cannot be changed after the component is created.

Example - For the image component in React Native, we can use a prop named source to set the image displayed.

Hands-on Examples

Below is a beautiful example illustrating prop usage for the image component to set the image displayed!

import React from 'react';

import { Image } from 'react-native';



const Codingninjas = () => {

    let pic = {

      uri: 'https://www.codingninjas.com/blog/wp-content/uploads/2020/04/LOGO-05.png'

    };

    return (

      <Image source={pic} style={{width: 200, height: 100, marginTop:50, marginLeft:40}}/>

    );

}



export default Codingninjas;

 

Output

So, we can change the image as per our requirement by revising the link.

 

Let us see another example using our component. Observe how we are using the props below.

import React from 'react';

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



const Greeting = (props) => {

    return (

      <View style={{alignItems: 'center'}}>

        <Text>Hii {props.name}!</Text>

      </View>

    );

}



export default LotsOfGreetings = () => {

    return (

      <View style={{top: 30}}>

        <Greeting name='Positivity!' />

        <Greeting name='Happiness!' />

        <Greeting name='Life!' />

      </View>

    );

}

Output

Observe how using the name prop, we are customizing our Greeting component.

Also see,  React Native Reanimated

Recommended Topic, React Native Paper, React devtools

Frequently Asked Questions

What are props in React Native?

Props are the properties in react native. These are used to modify and customize the properties of components.

How do props work in React Native?

In react native, props are used to pass data from one component to another component.

How to pass data with props in React Native?

We call an alert method in the child to the parent function. We then pass that function to the child function as a prop.

Are props mutable in React Native?

No, props are immutable in React Native.

Can we pass props to functional components?

Yes, we can pass props to a functional component.

Conclusion

This article discussed props in React Native.

Hoping this blog has helped you enhance your knowledge regarding props in React Native. To learn more about React Native, view our React Native course, curated by experts.

Check out our fantastic interview preparation course for your dream companies and a complete preparation guide.

Upvote our blog to help other ninjas grow! 

Happy Learning!!

Live masterclass