Props, short for properties, are used to pass data from a parent component to a child component. Props make React Native components reusable because the same component can display different data.
Props are values passed from one component to another component. They allow a component to receive information from its parent.
function Greeting({ name }) {
return (
<Text>
Hello {name}
</Text>
);
}function Student({ name }) {
return (
<Text>
Student: {name}
</Text>
);
}
export default function App() {
return (
<Student name="Rahul" />
);
}
The parent passes name to the Student
component.
function Course({ title }) {
return (
<Text>
{title}
</Text>
);
}
<Course title="React Native" />A string can be passed directly as a prop.
Numbers are passed inside curly braces.
function Course({ fee }) {
return (
<Text>
Fee: ₹{fee}
</Text>
);
}
<Course fee={15000} />The curly braces allow JavaScript expressions to be used in JSX.
function Status({ active }) {
return (
<Text>
{active
? 'Active'
: 'Inactive'}
</Text>
);
}
<Status active={true} />function Student({
name,
course,
age
}) {
return (
<View>
<Text>
Name: {name}
</Text>
<Text>
Course: {course}
</Text>
<Text>
Age: {age}
</Text>
</View>
);
}
<Student
name="Rahul"
course="React Native"
age={21}
/>Instead of destructuring props in the function parameter, you can receive the complete props object.
function Greeting(props) {
return (
<Text>
Hello {props.name}
</Text>
);
}
<Greeting name="Rahul" />Destructuring makes it easier to access individual props.
function Student({
name,
course
}) {
return (
<Text>
{name} - {course}
</Text>
);
}This is commonly used in functional components.
Default values can be provided using JavaScript default parameters.
function Greeting({
name = 'Student'
}) {
return (
<Text>
Hello {name}
</Text>
);
}
<Greeting />
If the parent does not provide name, the component
uses Student.
Props should not be directly changed inside the child component. They are values provided by the parent.
function Student({ name }) {
// Do not directly change name
return (
<Text>
{name}
</Text>
);
}If data needs to change inside a component, state is generally used for that purpose.
function ProfileImage({
source
}) {
return (
<Image
source={source}
style={{
width: 100,
height: 100,
borderRadius: 50
}}
/>
);
}
<ProfileImage
source={require('./assets/user.jpg')}
/>Props can be used to customize which image a component displays.
function StudentCard({
student
}) {
return (
<View>
<Text>
{student.name}
</Text>
<Text>
{student.course}
</Text>
</View>
);
}
const student = {
name: 'Rahul',
course: 'React Native'
};
<StudentCard
student={student}
/>function StudentList({
students
}) {
return (
<View>
{students.map(
student => (
<Text
key={student}
>
{student}
</Text>
)
)}
</View>
);
}
const students = [
'Rahul',
'Amit',
'Priya'
];
<StudentList
students={students}
/>A function can be passed to a child component through props.
function ActionButton({
onPress
}) {
return (
<Pressable
onPress={onPress}
>
<Text>
Save
</Text>
</Pressable>
);
}function App() {
const handleSave = () => {
console.log(
'Data saved'
);
};
return (
<ActionButton
onPress={handleSave}
/>
);
}The parent defines the function and passes it to the child.
function Welcome({
loggedIn
}) {
return (
<View>
{loggedIn ? (
<Text>
Welcome Back!
</Text>
) : (
<Text>
Please Login
</Text>
)}
</View>
);
}Props can determine which style should be applied.
function Status({
active
}) {
return (
<Text
style={{
color: active
? 'green'
: 'red'
}}
>
{active
? 'Active'
: 'Inactive'}
</Text>
);
}function CustomButton({
title,
onPress
}) {
return (
<Pressable
style={styles.button}
onPress={onPress}
>
<Text
style={styles.buttonText}
>
{title}
</Text>
</Pressable>
);
}The same button component can display different titles and perform different actions.
function CourseCard({
title,
duration,
fee
}) {
return (
<View style={styles.card}>
<Text style={styles.title}>
{title}
</Text>
<Text>
Duration: {duration}
</Text>
<Text>
Fee: {fee}
</Text>
</View>
);
}
<CourseCard
title="React Native"
duration="6 Months"
fee="₹15000"
/><CourseCard
title="React Native"
duration="6 Months"
fee="₹15000"
/>
<CourseCard
title="JavaScript"
duration="4 Months"
fee="₹8000"
/>
<CourseCard
title="Python"
duration="6 Months"
fee="₹12000"
/>One component can display many different records by changing its props.
The children prop contains content placed between a
component's opening and closing tags.
function Card({
children
}) {
return (
<View style={styles.card}>
{children}
</View>
);
}
<Card>
<Text>
Student Details
</Text>
</Card>Props and state serve different purposes. Props come from the parent, while state is managed by the component.
function Counter({
start
}) {
const [count, setCount] =
useState(start);
return (
<View>
<Text>
Count: {count}
</Text>
<Button
title="Increase"
onPress={() =>
setCount(count + 1)
}
/>
</View>
);
}
<Counter start={5} />function CourseList({
courses
}) {
return (
<View>
{courses.map(course => (
<Text
key={course.id}
>
{course.name}
</Text>
))}
</View>
);
}
const courses = [
{
id: '1',
name: 'React Native'
},
{
id: '2',
name: 'JavaScript'
}
];
<CourseList
courses={courses}
/>function StudentList({
students
}) {
return (
<FlatList
data={students}
keyExtractor={
item => item.id
}
renderItem={({
item
}) => (
<Text>
{item.name}
</Text>
)}
/>
);
}Props can be used to provide list data to a reusable list component.
import React from 'react';
import {
View,
Text,
Pressable,
StyleSheet
} from 'react-native';
function CourseCard({
title,
duration,
fee,
onStart
}) {
return (
<View style={styles.card}>
<Text style={styles.title}>
{title}
</Text>
<Text>
Duration: {duration}
</Text>
<Text style={styles.fee}>
Fee: {fee}
</Text>
<Pressable
style={styles.button}
onPress={onStart}
>
<Text style={styles.buttonText}>
Start Course
</Text>
</Pressable>
</View>
);
}
export default function App() {
const handleStart = () => {
console.log(
'Course started'
);
};
return (
<View style={styles.container}>
<Text style={styles.heading}>
Available Course
</Text>
<CourseCard
title="React Native"
duration="6 Months"
fee="₹15000"
onStart={handleStart}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20
},
heading: {
fontSize: 26,
fontWeight: 'bold',
marginBottom: 20
},
card: {
padding: 20,
backgroundColor: 'white',
borderRadius: 12,
borderWidth: 1,
borderColor: '#E2E8F0'
},
title: {
fontSize: 22,
fontWeight: 'bold',
marginBottom: 10
},
fee: {
fontSize: 18,
fontWeight: 'bold',
marginTop: 10
},
button: {
marginTop: 15,
padding: 14,
borderRadius: 8,
backgroundColor: '#2563EB',
alignItems: 'center'
},
buttonText: {
color: 'white',
fontWeight: 'bold'
}
});This example uses multiple props and passes a function from the parent to the child component.
| Props | State |
|---|---|
| Passed from parent to child | Managed by the component |
| Read-only inside the child | Can be updated using a state setter |
| Used to configure a component | Used for changing data |
| Can contain strings, numbers, objects, arrays and functions | Can store changing application data |
Create Parent Component
↓
Create Child Component
↓
Identify Required Data
↓
Pass Data as Props
↓
Receive Props in Child
↓
Use Props in UI
↓
Pass Functions for Events
↓
Reuse Component
↓
Use State for Changing Data
↓
Build Complete UIProps are one of the most important concepts in React Native. They allow parent components to provide data and behavior to child components, making UI components reusable, configurable and easier to maintain.
children prop contains nested component content.Question: What is the main purpose of props in React Native?