Props in Functional Components

Props are a core concept in React Native that allow you to pass data from one component to another. Props—short for "properties"—enable you to customize components by providing them with different values. This makes your components flexible and reusable, because you can control their behavior and appearance from the outside, rather than hardcoding values inside the component itself. When you use props, you can create generic components that work with any data you provide, making your code cleaner and easier to maintain.

Suppose you want to display a personalized greeting. Instead of creating a separate component for every possible name, you can create a single, reusable Greeting component that takes a name prop. Here is how you might do it:

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

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

You can use this component like so:

<Greeting name="Alice" />
<Greeting name="Bob" />

Each time you use the Greeting component, you pass a different value for the name prop. The component then displays a unique message for each name provided. This approach means you only need to write the greeting logic once, and you can reuse it as many times as you need, simply by changing the prop value.