1. Introduction

Props and State are two of the most important concepts in React Native development.

They help developers manage data and create dynamic, interactive mobile applications.

For example, consider a student management application:

• A student's name can be passed from one component to another using Props.

• A student's attendance count can change when the user presses a button using State.

Both concepts work together to make React Native applications dynamic.

2. What Are Props in React Native?

Props stands for Properties.

Props are used to pass data from a parent component to a child component.

They allow developers to reuse components with different data.

Example: Passing Props

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

function Student(props) {
  return (
    <View>
      <Text>Student Name: {props.name}</Text>
      <Text>Course: {props.course}</Text>
    </View>
  );
}

export default function App() {
  return (
    <View>
      <Student
        name="Rahul"
        course="React Native"
      />

      <Student
        name="Amit"
        course="Core PHP"
      />
    </View>
  );
}

Output:

Student Name: Rahul
Course: React Native

Student Name: Amit
Course: Core PHP

Explanation

1. Student is a child component.

2. App is the parent component.

3. name and course are props.

4. The parent passes values to the child.

5. The child displays those values using props.name and props.course.

3. Passing Props Using Destructuring

Instead of writing props.name and props.course, we can use JavaScript destructuring.

function Student({ name, course }) {
  return (
    <View>
      <Text>Name: {name}</Text>
      <Text>Course: {course}</Text>
    </View>
  );
}

This approach makes components cleaner and easier to understand.

4. Different Types of Props

React Native components can receive different types of data through props.

String Props

<Student name="Rahul" />

Number Props

<Student age={21} />

Boolean Props

<Student isActive={true} />

Array Props

<Student subjects={['JavaScript', 'React Native', 'PHP']} />

Object Props

<Student
  details={{
    name: 'Rahul',
    age: 21,
    course: 'React Native',
  }}
/>

Function Props

You can also pass a function from a parent component to a child component.

function Student({ onPress }) {
  return (
    <Button
      title="View Student"
      onPress={onPress}
    />
  );
}

Function props are useful when a child component needs to notify its parent about a user action.

5. Important Rules of Props

• Props are read-only from the receiving component's perspective.

• A child component should not directly modify its props.

• Props are passed from parent to child.

• Props help create reusable components.

• A parent can pass new props when its data changes.

Remember: Use Props when a component needs to receive information from another component.

6. What Is State in React Native?

State is data that a component manages and that can change over time.

For example:

• Counter values

• Login status

• Form input values

• Selected items

• Menu visibility

• Shopping cart quantities

When state changes, React renders the component again to reflect the updated data.

In modern React Native applications, functional components commonly use the useState Hook.

7. Understanding the useState Hook

The useState Hook allows developers to create and update state variables.

Basic syntax:

const [state, setState] = useState(initialValue);

Here:

• state stores the current value.

• setState updates the value.

• initialValue is the starting value.

Example: Simple Counter

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

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>Count: {count}</Text>

      <Button
        title="Increase"
        onPress={() => setCount(count + 1)}
      />
    </View>
  );
}

How it works:

1. Initially, the count is 0.

2. The user presses the Increase button.

3. setCount() updates the state.

4. React renders the component with the new value.

5. The updated count appears on the screen.

8. Updating State Using Previous State

Sometimes, the next state depends on the previous state.

In that situation, use the functional update form.

const [count, setCount] = useState(0);

const increaseCount = () => {
  setCount(previousCount => previousCount + 1);
};

This approach is particularly useful when multiple state updates are queued.

9. Working with Different State Data Types

The useState Hook can manage different types of data.

String State

const [name, setName] = useState('Rahul');

setName('Amit');

Number State

const [age, setAge] = useState(20);

setAge(21);

Boolean State

const [isLoggedIn, setIsLoggedIn] = useState(false);

setIsLoggedIn(true);

Array State

const [students, setStudents] = useState([
  'Rahul',
  'Amit',
]);

setStudents(previousStudents => [
  ...previousStudents,
  'Priya',
]);

Object State

const [student, setStudent] = useState({
  name: 'Rahul',
  age: 20,
});

setStudent(previousStudent => ({
  ...previousStudent,
  age: 21,
}));

Important: Never directly modify an array or object stored in state. Create a new array or object when updating it.

10. Difference Between Props and State

Simple example:

• Student name passed from a parent: Props.

• Button click count: State.

11. Using Props and State Together

Props and State can work together in the same application.

For example, a parent component can manage a counter using State and pass the current count to a child component using Props.

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

function CounterDisplay({ count }) {
  return (
    <Text style={{ fontSize: 24 }}>
      Current Count: {count}
    </Text>
  );
}

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <View style={{ padding: 30 }}>
      <CounterDisplay count={count} />

      <Button
        title="Increase Counter"
        onPress={() =>
          setCount(previousCount => previousCount + 1)
        }
      />
    </View>
  );
}

Explanation

• App manages the counter state.

• CounterDisplay receives the count through props.

• When the parent updates the state, the child receives the updated prop.

• The child displays the latest counter value.

This is an example of one-way data flow in React.

12. Complete Practical Project: Student Management App

Now let's build a practical application using both Props and State.

Project objective:

Create a student management screen that:

• Displays student information.

• Passes student data through Props.

• Maintains attendance using State.

• Increases attendance when a button is pressed.

• Decreases attendance when a button is pressed.

• Resets attendance to zero.

Step 1: Create the Student Component

function StudentCard({ name, course, attendance }) {
  return (
    <View>
      <Text>Student Name: {name}</Text>
      <Text>Course: {course}</Text>
      <Text>Attendance: {attendance}</Text>
    </View>
  );
}

Step 2: Manage Attendance Using State

const [attendance, setAttendance] = useState(0);

Step 3: Create Attendance Buttons

<Button
  title="Mark Attendance"
  onPress={() =>
    setAttendance(previous => previous + 1)
  }
/>

<Button
  title="Remove Attendance"
  onPress={() =>
    setAttendance(previous => Math.max(0, previous - 1))
  }
/>

<Button
  title="Reset Attendance"
  onPress={() => setAttendance(0)}
/>

Step 4: Complete Project Code

Replace the content of your current screen file, such as app/index.tsx in an Expo Router project or App.js in a suitable project template.

import React, { useState } from 'react';

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

function StudentCard({ name, course, attendance }) {
  return (
    <View style={styles.card}>
      <Text style={styles.name}>{name}</Text>

      <Text>Course: {course}</Text>

      <Text style={styles.attendance}>
        Attendance: {attendance}
      </Text>
    </View>
  );
}

export default function App() {
  const [attendance, setAttendance] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.heading}>
        Student Management
      </Text>

      <StudentCard
        name="Rahul Sharma"
        course="React Native Development"
        attendance={attendance}
      />

      <View style={styles.button}>
        <Button
          title="Mark Attendance"
          onPress={() =>
            setAttendance(previous => previous + 1)
          }
        />
      </View>

      <View style={styles.button}>
        <Button
          title="Remove Attendance"
          onPress={() =>
            setAttendance(previous => Math.max(0, previous - 1))
          }
        />
      </View>

      <View style={styles.button}>
        <Button
          title="Reset Attendance"
          onPress={() => setAttendance(0)}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
    backgroundColor: '#f1f5f9',
  },

  heading: {
    fontSize: 25,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 25,
  },

  card: {
    backgroundColor: '#ffffff',
    padding: 20,
    borderRadius: 12,
    marginBottom: 25,
  },

  name: {
    fontSize: 21,
    fontWeight: 'bold',
    marginBottom: 10,
  },

  attendance: {
    fontSize: 18,
    color: 'green',
    marginTop: 10,
  },

  button: {
    marginBottom: 12,
  },
});

Step 5: Test the Application

1. Start your Expo development server.

2. Open the application using Expo Go or an Android emulator.

3. Check the student details.

4. Press Mark Attendance.

5. Observe the attendance count increase.

6. Press Remove Attendance.

7. Observe the attendance count decrease.

8. Press Reset Attendance to return it to zero.

Expected Result

BunkBuddy APK for Android - Download

The application displays student information and updates attendance instantly when the user interacts with the buttons.

13. Common Mistakes in Props and State

Mistake 1: Modifying Props Directly

Incorrect:

props.name = 'Amit';

Correct: Pass the updated value from the parent component.

Mistake 2: Updating State Directly

Incorrect:

count = count + 1;

Correct:

setCount(previous => previous + 1);

Mistake 3: Forgetting to Import useState

Incorrect:

const [count, setCount] = useState(0);

Correct:

import React, { useState } from 'react';

Mistake 4: Calling useState Outside a Component

Incorrect:

const [count, setCount] = useState(0);

function App() {
  return <Text>{count}</Text>;
}

Correct: Declare Hooks at the top level of the component function.

Mistake 5: Mutating State Objects Directly

Incorrect:

student.age = 21;
setStudent(student);

Correct:

setStudent(previous => ({
  ...previous,
  age: 21,
}));

14. Best Practices

• Use Props to pass information between components.

• Use State for data that changes over time.

• Never directly modify Props.

• Update State using its setter function.

• Use functional updates when the next value depends on the previous value.

• Keep components reusable and independent.

• Avoid unnecessary state variables.

• Use meaningful names for Props and State.

• Pass only the data that a child component needs.

15. Conclusion

Props and State are essential concepts in React Native development.

Props help transfer information between parent and child components, while State manages changing data inside a component.

By combining these concepts, developers can create reusable, dynamic, and interactive mobile applications.

The Student Management practical project demonstrates how Props and State work together in a real application.

16. Frequently Asked Questions

Q1. What are Props in React Native?

Props are properties used to pass data from a parent component to a child component.

Q2. What is State in React Native?

State is component-managed data that can change over time and trigger a re-render.

Q3. Can we change Props inside a child component?

No. Props should be treated as read-only by the receiving component.

Q4. What is useState?

useState is a React Hook that allows functional components to manage state.

Q5. What happens when State changes?

React schedules a re-render so the interface can display the updated state.

Q6. Can State store arrays and objects?

Yes. State can store strings, numbers, Booleans, arrays, objects, and other JavaScript values.

Q7. Can Props and State be used together?

Yes. A parent component can manage State and pass its current value to child components through Props.

Q8. What is the main difference between Props and State?

Props are received from a parent component, whereas State is managed by the component itself.