Why Props passing in React Native? - Purpose & Use Cases

The Big Idea

Discover how passing props can save you from endless copying and keep your app neat and smart!

The Scenario

Imagine you are building a mobile app with many screens and components. You want to show a user's name on different parts of the app. Without props, you would have to rewrite the same data inside each component manually.

The Problem

This manual way is slow and causes mistakes. If the user's name changes, you must update it everywhere. It is easy to forget one place, leading to inconsistent app data and a poor user experience.

The Solution

Props passing lets you send data from one component to another easily. You write the data once and pass it down as props. This keeps your app organized, consistent, and easy to update.

Before vs After

✗ Before

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

function UserName() {
  return <Text>John</Text>;
}

function Greeting() {
  return <Text>Hello John!</Text>;
}

✓ After

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

function UserName({name}) {
  return <Text>{name}</Text>;
}

function Greeting({name}) {
  return <Text>Hello {name}!</Text>;
}

What It Enables

Props passing enables dynamic, reusable components that adapt to different data without rewriting code.

Real Life Example

In a shopping app, you can pass product details as props to a product card component. This way, the same card layout shows different products smoothly.

Key Takeaways

Props passing helps share data between components easily.

It avoids repeating data and keeps your app consistent.

It makes components reusable and flexible.