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!!