? React Native Props

? Quick Overview

Props (short for properties) are used to pass data from one component to another in React Native. They make components reusable, dynamic, and configurable.

? Key Concepts

• Props are read-only
• Passed from parent to child
• Help create reusable UI components
• Accessed using props object

? Syntax / Theory

Props are passed to a component as attributes and received as a parameter.

// Passing props to a component
<MyComponent title="Hello World" />

? Code Example(s)

// Child component receiving props
import React from "react";
import { Text, View } from "react-native";

const Greeting = (props) => {
return (
<View>
<Text>Hello {props.name}</Text>
</View>
);
};

export default Greeting;

// Parent component passing props
import React from "react";
import { View } from "react-native";
import Greeting from "./Greeting";

const App = () => {
return (
<View>
<Greeting name="Meghraj" />
</View>
);
};

export default App;

? Live Output / Explanation

? Interactive Example

Simulate passing props! Edit the inputs below (Parent) to see how the component (Child) updates instantly.

? Use Cases

• Passing text, numbers, or objects to components
• Creating reusable UI components
• Configuring buttons, cards, and lists
• Sending event handlers to child components