Props in React Native

Props ("properties") are the only way a parent component passes data to a child component – they work in React Native EXACTLY like in React for the web, but here explored through typical native use cases.

1. Description

Props are read-only from the receiving component's point of view – they are never modified directly, only replaced by new values from the parent component. Besides simple values, FUNCTIONS can also be passed as props ("callback props"), letting children report events back up to the parent.

2. Short example

function Greeting({ name, color = 'black' }) {
  return <Text style={{ color }}>Hello, {name}!</Text>;
}

<Greeting name="Anna" color="blue" />

3. Complete project: a reusable rating card

npx create-expo-app props-demo
cd props-demo

components/RatingCard.js

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

// children: text/elements placed between the opening/closing tags
// onDetails: a callback prop - the card doesn't know what it does, only calls it
function RatingCard({ title, stars = 0, children, onDetails }) {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>{title}</Text>
      <Text style={styles.stars}>{'★'.repeat(stars)}{'☆'.repeat(5 - stars)}</Text>
      {children}
      {onDetails && (
        <Text style={styles.link} onPress={onDetails}>
          View details
        </Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  card: { backgroundColor: '#f3f4f6', padding: 16, borderRadius: 10, marginBottom: 12 },
  title: { fontSize: 16, fontWeight: 'bold' },
  stars: { color: '#f59e0b', marginVertical: 4 },
  link: { color: '#2563eb', marginTop: 8 },
});

export default RatingCard;

App.js

import { View, Text, Alert, StyleSheet } from 'react-native';
import RatingCard from './components/RatingCard';

export default function App() {
  return (
    <View style={styles.container}>
      <RatingCard
        title="Hiking Boots"
        stars={4}
        onDetails={() => Alert.alert('Details', 'More info about the hiking boots.')}
      >
        <Text style={styles.text}>Comfortable on long tours.</Text>
      </RatingCard>

      <RatingCard title="Rain Jacket" stars={5}>
        <Text style={styles.text}>Waterproof up to 10,000mm.</Text>
      </RatingCard>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 60, paddingHorizontal: 16 },
  text: { color: '#374151' },
});

4. Explanation

stars = 0 in the function parameter's destructuring pattern – a DEFAULT value for a prop the caller is allowed to omit.
children is a SPECIAL, automatically populated prop – everything between <RatingCard>...</RatingCard> ends up here, without needing to be explicitly passed as children={{...}}.
onDetails is a CALLBACK prop – the card itself knows nothing about Alert.alert(), it only calls the function it was given; that makes the component reusable for ANY kind of "details" action.
The second card doesn't pass onDetails – thanks to {{onDetails && (...)}}, the link is then automatically NOT rendered, instead of throwing an error.

5. Outputs

Ausgabe

Two gray cards. Card 1 ("Hiking Boots"): four filled stars, one empty, text "Comfortable on long tours.", below it a blue "View details" link that opens a native alert box when tapped. Card 2 ("Rain Jacket"): five filled stars, text "Waterproof up to 10,000mm.", NO details link.