Props

Props (properties) are how you pass data from parent to child components.

Passing Props

// Parent
const App = () => (
  <View>
    <Greeting name="Alice" age={25} />
    <Greeting name="Bob" age={30} />
  </View>
)

// Child
const Greeting = (props) => (
  <Text>Hello {props.name}, you are {props.age}!</Text>
)

Destructuring Props

const Greeting = ({ name, age }) => (
  <Text>Hello {name}, you are {age}!</Text>
)

Pure Functions Rule

Components should be pure functions: given the same props, they should always render the same output and have no side effects.

Children Prop

const Card = ({ children, style }) => (
  <View style={[styles.card, style]}>
    {children}
  </View>
)

// Usage:
<Card>
  <Text>Content inside card</Text>
</Card>