Understanding Props

What Are Props?

Props (short for properties) are how you pass data from one component to another. Think of them as function arguments — when you call a function, you pass values that the function uses. Similarly, when you use a component, you pass props that the component uses to render itself.

Props flow in one direction: from parent to child. A parent component passes props down, and child components receive and use them. Child components cannot modify their own props — they're read-only. This unidirectional flow makes your app's data predictable and easier to debug.

Passing Props

Here's how you pass props to a component:

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

// This component receives props
function UserCard({ name, age, isOnline }) {
  return (
    <View style={styles.card}>
      <Text style={styles.name}>{name}</Text>
      <Text style={styles.detail}>Age: {age}</Text>
      <Text style={{ color: isOnline ? 'green' : 'gray' }}>
        {isOnline ? 'Online' : 'Offline'}
      </Text>
    </View>
  );
}

// Parent component passes props
function App() {
  return (
    <View>
      <UserCard name="Alice" age={25} isOnline={true} />
      <UserCard name="Bob" age={30} isOnline={false} />
    </View>
  );
}

const styles = StyleSheet.create({
  card: { padding: 20, margin: 10, backgroundColor: '#f5f5f5', borderRadius: 8 },
  name: { fontSize: 20, fontWeight: 'bold' },
  detail: { fontSize: 16, marginTop: 5 },
});

export default App;

Notice how UserCard receives name, age, and isOnline as props. We destructure them in the function parameters for cleaner code. The same component is used twice with different data, which is the power of reusable components.

Default Props

Sometimes you want props to have default values. If a prop isn't provided, the component uses the default. This makes your components more flexible and reduces the number of props you need to pass every time.

function UserCard({ name = 'Anonymous', age = 0, isOnline = false }) {
  return (
    <View>
      <Text>{name}</Text>
      <Text>Age: {age}</Text>
      <Text>{isOnline ? 'Online' : 'Offline'}</Text>
    </View>
  );
}

// These all work:
<UserCard />                        // Uses all defaults
<UserCard name="Alice" />           // Only name is set
<UserCard name="Bob" age={30} />    // name and age are set

Default props are defined using destructuring defaults in the function parameters. This is the modern way to handle defaults in React and React Native. It's clean, readable, and TypeScript-friendly.

Children Prop

The children prop is special — it contains whatever you put between a component's opening and closing tags. It's how you create wrapper components.

function Card({ title, children }) {
  return (
    <View style={{ padding: 20, backgroundColor: '#f5f5f5', borderRadius: 8 }}>
      <Text style={{ fontSize: 20, fontWeight: 'bold', marginBottom: 10 }}>
        {title}
      </Text>
      {children}
    </View>
  );
}

function App() {
  return (
    <Card title="My Card">
      <Text>This is the card content</Text>
      <Text>It can include any components</Text>
    </Card>
  );
}

The children prop lets you create flexible wrapper components. You don't need to know what content the card will contain — just wrap it. This pattern is incredibly useful for layouts, modals, cards, and any component that wraps other content.