Now we'll build our first own, reusable component: ProductCard. It becomes the foundation for our product catalog, which we'll keep extending through the rest of the tutorial. Our project gets its first own subfolder file here.

What are props?

"Props" (short for "properties") are how a component receives data from the outside – comparable to HTML attributes like <img src="..." alt="...">, except that with React components you decide yourself which props exist and what they mean.

The ProductCard component

In your project folder, create a new subfolder components/ with the file ProductCard.js inside it:

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

function ProductCard({ name, price, imageUrl, onPress }) {
  return (
    <TouchableOpacity style={styles.card} onPress={onPress}>
      <Image source={{ uri: imageUrl }} style={styles.image} />
      <View style={styles.info}>
        <Text style={styles.name}>{name}</Text>
        <Text style={styles.price}>${price.toFixed(2)}</Text>
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  card: {
    flexDirection: 'row',
    padding: 12,
    marginBottom: 8,
    backgroundColor: '#f9fafb',
    borderRadius: 8,
    alignItems: 'center',
  },
  image: { width: 60, height: 60, borderRadius: 4 },
  info: { marginLeft: 12, flex: 1 },
  name: { fontSize: 16, fontWeight: '600' },
  price: { fontSize: 14, color: '#6b7280' },
});

export default ProductCard;

{{ name, price, imageUrl, onPress }} is "destructuring" – the component pulls these four named values out of the props object it's given when used. The curly-brace expression {{name}} in JSX means: "insert the value of the JavaScript variable name here" – comparable to a template engine like Twig or Blade in the PHP world ({{ '{{ name }}' }}), except real JavaScript is behind it here.

Updating App.js: using the component

Now let's replace the entire content of App.js, import ProductCard, and give it real sample data:

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

export default function App() {
  return (
    <View style={styles.container}>
      <ProductCard
        name="Hiking Boots"
        price={89.99}
        imageUrl="https://picsum.photos/200"
        onPress={() => Alert.alert('Tapped!', 'Hiking Boots')}
      />
    </View>
  );
}

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

produktkatalog-app/
├── App.js                     (updated: imports ProductCard)
├── app.json
├── package.json
├── components/
│   └── ProductCard.js         ← NEW
└── assets/

Save both files and check your phone: you'll now see a real, tappable product card. Now you can use as many <ProductCard /> as you like with different props – just like you'd use multiple <img> tags in HTML with different src values, except here a whole small component with layout, image, and click behavior is being reused.