Connecting Data to Details Screen

Now we want to show real item data on the details screen. At this point, you already pass the selected item when the user presses on a product in the list. Now the details screen needs to receive that data and display it.

Update your DetailsScreen.js:

// screens/DetailsScreen.js
import { View, Text, Image, StyleSheet } from 'react-native';

export default function DetailsScreen({ route }) {
  const { item } = route.params;

  console.log(item);

  return (
    <View style={styles.container}>
      <Image source={{ uri: item.thumbnail }} style={styles.image} />

      <Text style={styles.title}>{item.title}</Text>
      <Text style={styles.price}>${item.price}</Text>
      <Text style={styles.description}>{item.description}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20
  },
  image: {
    width: '100%',
    height: 220,
    borderRadius: 12,
    marginBottom: 15
  },
  title: {
    fontSize: 22,
    fontWeight: 'bold',
    marginBottom: 8
  },
  price: {
    fontSize: 18,
    marginBottom: 12
  },
  description: {
    fontSize: 16,
    color: 'gray'
  }
});

Here:

• route.params contains the data passed from the previous screen;
• item gives you access to the selected product;
• The screen now shows the real title, image, price, and description.

This is an important step. Your second screen is no longer static. It now changes based on what the user selects. That is how multi-screen apps usually work: one screen shows a list, and another shows full details for the chosen item.