Props, Composition & Reusable Components

Props pass data and callbacks from parent to child. Composition — nesting children inside components — is preferred over inheritance. Build small, focused components and assemble screens from them.

Building reusable UI

Typed props with TypeScript

type ProductCardProps = {
  title: string;
  price: number;
  imageUrl: string;
  onPress: () => void;
};

export function ProductCard({ title, price, imageUrl, onPress }: ProductCardProps) {
  return (
    <Pressable onPress={onPress} style={styles.card}>
      <Image source={{ uri: imageUrl }} style={styles.image} />
      <Text style={styles.title}>{title}</Text>
      <Text style={styles.price}>₹{price}</Text>
    </Pressable>
  );
}

Composition with children

export function Screen({ children }: { children: React.ReactNode }) {
  return (
    <SafeAreaView style={styles.safe}>
      <View style={styles.content}>{children}</View>
    </SafeAreaView>
  );
}