This tutorial shows you how to use the same screen for different data.

We'll assume you know how to make custom components in React Native; you may see some modern JavaScript syntax, like destructuring, that may be new to you, but I'll explain how it works. We'll also assume you already have a multi-screen app with a screen whose records are drawn from a source such as JSON, in my case an app to find lost pets.

In general, to make things easier to understand, this tutorial will emphasize simplicity of code rather than optimizing performance.

Note: this draft presents only a synopsis of this tutorial. Please watch the video for details.

Add details to JSON

We'll need some details to show in our detail screen. In its final release, an app would likely download its data from a database. In the version I'm working with today, all the data come from JSON, so we'll start by adding some content to each record that might be too long to fit in our list of records.

• In my case, I'll add a paragraph description of each cat with a property called petDescription.

[
	{
	   "id": "grumpy_cat",
	   "petName": "Grumpy Cat",
	   "petImage": "grumpy_thu.png",
	   "petLink": "wikipedia.org/wiki/Grumpy_Cat",
	   "petDescription": "An American Internet celebrity known for her permanently cranky demeanor."
	},
	{
	   "id": "nyan_cat",
	   "petName": "Nyan Cat",
	   "petImage": "example.com/nyan_cat_animated.gif",
	   "petLink": "wikipedia.org/wiki/Nyan_Cat",
	   "petDescription": "An animated cartoon cat with a Pop-Tart body that flies through space with a rainbow contrail."
	},
	...
]

Make a detail screen

• We'll start modifying the app itself by making a functional component called PetDetailScreen.js. For now, we'll hard-code some generic cat information (name, description, and image) so we can style the component.

import React from "react";
import { StyleSheet, View, Image, Text } from "react-native";
const PetDetailScreen = () => {
  return (
    <View style={ styles.detailScreen }>
		<Text>Missing pet details</Text>
		<Image source={{ uri: "wikipedia.org/wiki/Morris_the_Cat" }} />
		<Text>My pet's name</Text>
		<Text>Here's a long description of a very interesting pet. It's missing--can you help me find it?</Text>
    </View>
  );
};
export default PetDetailScreen;

Add the detail screen to your App navigation stack

Normally you wouldn't be able to see the screen or your edits until you created a way to navigate to it. So let's add it to the navigation stack as the first screen to make it easier to style or debug.

• 🎗 Don't forget to add your new detail screen to your navigation stack in App.js.
• First you have to import the component.

import PetDetailScreen from "./screens/PetDetailScreen";

• and then add the stack. I'll call the screen "Pet detail."
• To make PetDetailScreen.js easier to style, let's set it as the first screen you encounter on opening the app.

<NavigationContainer>
  <Stack.Navigator initialRouteName="PetDetail">
    ...
    <Stack.Screen
      name="PetDetail"
      component={ PetDetailScreen }
      options={{ title: "Pet detail" }}
    />
  </Stack.Navigator>
</NavigationContainer>

Style your detail screen

• I'll give the containing <View> a background color, and set its flex value to 1 to fill the screen. I want to center the "Missing pet details" title horizontally, so I'll add alignItems: "center" to its containing <View>.

const styles = StyleSheet.create({
	detailScreen: {
		flex: 1,
		backgroundColor: "darkslategray",
		alignItems: "center"
	}
}

• However, I don't want to center all the other text, so I'll create another <View> to hold those, with a style called petDetailRow. I'm using the word "row" because I'm going to lay out the information in this block horizontally, as we'll see.

...
return (
    <View style={ styles.detailScreen }>
      <Text>Missing pet details</Text>
      <View style={ styles.petDetailRow }>
		<Image source={{ uri: "wikipedia.org/wiki/Morris_the_Cat" }} />
		<Text>My pet's name</Text>
		<Text>Here's a long description of a very interesting pet. It's missing--can you help me find it?</Text>
      </View>
    </View>
);

• I want the elements in this <View> to sit side-by-side, so I'll give them flexDirection: row.
• Instead of setting a specific width, I'll give this detail row alignSelf: "stretch". This will scale better for different screen sizes.

const styles = StyleSheet.create({
	detailScreen: {
		flex: 1,
		alignItems: "center",
		justifyContent: "flex-start",
		backgroundColor: "darkslategray"
	},
	petDetailRow: {
		flexDirection: "row",
	  	alignSelf: "stretch"
	}
)

• Inside this <View>, let's position our image on the left and stack the various text snippets on the right. This is easiest to do by wrapping those <Text> components in a <View> with a vertical flex direction. So I'll give that <View> a style called petDetailColumn.
• Fortunately, we don't have to specify flexDirection: column, because that's the default direction for React Native.
• We do need to set the width of <petDetailColumn> so our text will wrap nicely.
• justifyContent will add some nice vertical spacing to our column.

<View style={ styles.detailScreen }>
	<Text>Missing pet details</Text>
	<View style={ styles.petDetailRow }>
		<Image source={{ uri: "wikipedia.org/wiki/Morris_the_Cat" }} />
		<View style={ styles.petDetailColumn }>
			<Text>My pet's name</Text>
			<Text>Here's a long description of a very interesting pet. It's missing--can you help me find it?</Text>
		</View>
	</View>
</View>
...
petDetailRow: {
   flexDirection: "row",
   alignSelf: "stretch"
},
petDetailColumn: {
    width: 186,
    justifyContent: "space-between"
}

In fact, nesting <Views> that alternate between flex direction row and column is a common layout pattern for detail screens, as exemplified by our layout so far.

<View style={flexDirection: "column"}>
	<View style={flexDirection: "row"}>
		<View style={flexDirection: "column"}>
		</View>
	</View>
</View>

• This approach can be summed up visually in the diagram at right.
• Now we'll add styles for the image and various text components.

import React from "react";
import { StyleSheet, View, Image, Text, Button, Linking } from "react-native";
const PetDetailScreen = () => {
  const { petName, petImage, petDescription, petLink } = screen.route.params;
  return (
    <View style={ styles.detailScreen }>
      <Text style={ styles.petHeading }>Missing pet details</Text>
      <View style={ styles.petDetailRow }>
        <Image source={{ uri: "wikipedia.org/wiki/Morris_the_Cat" }} style={ styles.image } />
        <View style={ styles.petDetailColumn }>
          <Text style={ styles.petName }>My pet's name</Text>
          <Text style={ styles.petDescription }>Here's a long description of a very interesting pet. It's missing--can you help me find it?</Text>
         </View>
      </View>
    </View>
  );
};
export default PetDetailScreen;
const styles = StyleSheet.create({
  detailScreen: {
    flex: 1,
    alignItems: "center",
    backgroundColor: "darkslategray"
  },
  petHeading: {
    fontSize: 27,
    marginVertical: 20,
    color: "paleturquoise",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 1,
    shadowRadius: 2
  },
  petDetailRow: {
    flexDirection: "row",
    alignSelf: "stretch",
    marginHorizontal: 20,
    padding: 10,
    backgroundColor: "teal",
    borderRadius: 15,
    borderWidth: 1,
    borderColor: "paleturquoise",
    justifyContent: "space-between"
  },
  image: {
    width: 100,
    height: 100
  },
  petDetailColumn: {
    width: 186,
    justifyContent: "space-between"
  },
  petName: {
    fontSize: 18,
    fontWeight: "bold",
    color: "paleturquoise"
  },
  petDescription: {
    fontSize: 16,
    marginVertical: 4,
    color: "paleturquoise"
  }
});

Add a link to more information to the detail screen

• We can make use of the petLink property by creating a link out to an external web page with more info about our pet.
• For this we'll use a simple default Button component with the word "More..."
• We'll also need the Linking React Native API, which allows us to open a URL in the device's default browser.

import { View, Image, Text, Button, Linking } from "react-native";

• <Button> takes an onPress listener, which we can set to Linking.openURL when it's clicked. Make sure to wrap the onPress value in an arrow function so it waits to be tapped before loading the URL.
• Unfortunately, you can't apply many styles to a default React Native button. But you can add a color attribute directly in the <Button>, which will render as the foreground text color on iOS and the background color on Android.
• Our button is on a dark background, so let's make it white.

const PetDetailScreen = () => {
  const { petName, petImage, petDescription, petLink } = screen.route.params;
  return (
    <View style={ styles.detailScreen }>
      <Text style={ styles.petHeading }>Missing pet details</Text>
      <View style={ styles.petDetailRow }>
        <Image source={{ uri: "wikipedia.org/wiki/Morris_the_Cat" }} style={ styles.image } />
        <View style={ styles.petDetailColumn }>
          <Text style={ styles.petName }>My pet's name</Text>
          <Text style={ styles.petDescription }>Here's a long description of a very interesting pet. It's missing--can you help me find it?</Text>
          <Button
            title="More..."
            color="white"
            onPress={
				() => Linking.openURL( "wikipedia.org/wiki/Morris_the_Cat" }
			}
          />
        </View>
      </View>
    </View>
  );
};
...

Streamlined approach to navigating to a custom screen

🆕 The technique below follows the tutorial, but see this update for a streamlined way to handle the following tasks in React Native 50 and higher.

Pass pet data out of the list screen

In the screen that lists my records, I am already passing most of the properties I need to the <Card>. However, since users will navigate by tapping each card to the next (detail) screen, I also need to pass the navigation too.

const renderPets = () => {
  return pets.map(pet => (
    <Card
      navigation={navigation}
      petName={pet.petName}
      petImage={pet.petImage}
      petLink={pet.petLink}
      petDescription={pet.petDescription}
    />
  ));
};

Pass pet data through each card

We now have the details screen in the stack, but there's still no way for a user to get to it. The most intuitive interface is for the user to be able to tap on a card in our list and go to that record.

I have a few levels to my components: my PetsScreen.js contains <Card> components, each of which in turn contains an <InfoButton> component. So I'm going to have to pass the navigation properties through this chain.

• As we know, you can pass data from parent to child components via their attributes.
• I'll start by editing Cards.js to pass information into its <InfoButton> component.
• Note the use of our friend props to carry content from the parent to child component.

const Card = props => {
	return (
		...
		<InfoButton
			navigation={ props.navigation }
			petName={ props.petName }
			petImage={ props.petImage }
			petLink={ props.petLink }
			petDescription={ props.petDescription }
		/>

• It looks a little weird to set a property name on the left to the same name on the right. You can really call these properties anything that makes their meaning clearer to you. What's important is that we're passing the pet information from PetsScreen.js to Card.js.
• Later we'll see how destructuring can help reduce this redundancy, but only in pure JavaScript--not in JSX, as in this example.

Add screen navigation to the button in each card

Next I'll accept the <Card>'s data into each <InfoButton>. Since this is the last component in my chain, InfoButton.js is where I'll add the navigate method for jumping from one screen to another.

• Note that navigation was passed as part of props, so we have to add that object in the call for the method.
• As we know, React Navigation only requires the name of the screen to perform this transition, which in this case is "PetDetail."

import React from "react";
import { Text, TouchableOpacity } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
const InfoButton = props => {
	return (
		<TouchableOpacity
			onPress={
				() => props.navigation.navigate(
					"PetDetail"
				)
			}
			style={ styles.button }
		>
			<Text style={ styles.buttonText }>i</Text>
		</TouchableOpacity>
	);
};
export default InfoButton;

Reset to the welcome screen

• At this point you have a way to navigate to the detail screen, so you can switch the stack so that the app opens with your welcome screen in App.js.

	<NavigationContainer>
	  <Stack.Navigator initialRouteName="Welcome">
	

Pass pet data into each button

If I test my app, this will bring me to the detail screen--yay! Unfortunately, that screen always shows my dummy text instead of details for the pet I clicked on.

To make the app show pet-specific data, I have to pass them into InfoButton.js just as I did into the Card.js, and then into the new detail screen.

• The React Navigation API lets me do this as an additional argument to the navigate method: an object that follows the name of the screen with any parameters I want to pass.
• I have a couple of choices for syntax here. The first is to use our friend the props keyword, which I can mirror in each line of the navigate parameters.

import React from "react";
import { Text, TouchableOpacity } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
const InfoButton = props => {
	return (
		<TouchableOpacity
			onPress={
				() => props.navigation.navigate(
					"PetDetail",
					{
						petName: props.petName,
						petImage: props.petImage,
						petLink: props.petLink,
						petDescription: props.petDescription
					}
				)
			}
			style={ styles.button }
		>
			<Text style={ styles.buttonText }>i</Text>
		</TouchableOpacity>
	);
};
export default InfoButton;

• The second option is to exploit a trick of modern JavaScript to make the syntax a little simpler. First we'll "destructure" the props object in a strange syntax that extracts properties as variables with the same names from the object. Make sure to add extra braces {} around your list of variables.
• Then, in place of typing five seemingly redundant assignments like petName: props.petName, you can just type petName for each.

import React from "react";
import { Text, TouchableOpacity } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
const InfoButton = props => {
	const { petName, petImage, petLink, petDescription } = props ;
	return (
		<TouchableOpacity
			onPress={
				() => props.navigation.navigate(
					"PetDetail",
					{
						petName,
						petImage,
						petLink,
						petDescription
					}
				)
			}
			style={ styles.button }
		>
			<Text style={ styles.buttonText }>i</Text>
		</TouchableOpacity>
	);
};
export default InfoButton;

• Either way works.

Pass navigation parameters to the detail screen

Finally we're ready to specify which pet to show in our detail screen. Regardless of which syntax we choose in InfoButton.js, we can write the parameters set there into PetDetailScreen.js.

• The React Navigation API accepts the name of the screen followed by the parameters ("params").

const PetDetailScreen = ( screen, params ) => {

• The syntax for React Navigation is a bit odd, but we can access the parameters through the route property.
• (Note that the React Navigation syntax changes from time to time, but the principle of passing parameters is the same.)

const petName = screen.route.params.petName ;
const petImage = screen.route.params.petImage ;
const petDescription = screen.route.params.petDescription ;
const petLink = screen.route.params.petLink ;

• Again, modern JavaScript gives us a more condensed way to write this. JavaScript's so-called "destructuring" syntax allows us to declare a number of variables at once by putting them in braces and setting them equal to the object they are properties of. It looks weird, but destructuring reduces the four lines above to this single line.

const { petName, petImage, petDescription, petLink } = screen.route.params;

Replace the dummy text with the pet-specific properties

• Now we replace our canned text with these new variables.
• Make sure to enclose petName and petDescription in braces {}, as you always do with JavaScript variables lurking in JSX.
• petImage and petLink don't need extra braces; they are already inside JavaScript embedded in JSX.
• Our final PetDetailScreen.js looks like this.

import React from "react";
import { StyleSheet, View, Image, Text, Button, Linking } from "react-native";
const PetDetailScreen = ( screen, params ) => {
  const { petName, petImage, petDescription, petLink } = screen.route.params;
  return (
    <View style={ styles.detailScreen }>
      <Text style={ styles.petHeading }>Missing pet details</Text>
      <View style={ styles.petDetailRow }>
        <Image source={{ uri: petImage }} style={ styles.image } />
        <View style={ styles.petDetailColumn }>
          <Text style={ styles.petName }>{ petName }</Text>
          <Text style={ styles.petDescription }>{ petDescription }</Text>
          <Button
            title="More..."
            color="white"
            onPress={
				() => Linking.openURL( petLink }
			}
          />
        </View>
      </View>
    </View>
  );
};
export default PetDetailScreen;
const styles = StyleSheet.create({
  detailScreen: {
    flex: 1,
    alignItems: "center",
    backgroundColor: "darkslategray"
  },
  petHeading: {
    fontSize: 27,
    marginVertical: 20,
    color: "paleturquoise",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 1,
    shadowRadius: 2
  },
  petDetailRow: {
    flexDirection: "row",
    alignSelf: "stretch",
    marginHorizontal: 20,
    padding: 10,
    backgroundColor: "teal",
    borderRadius: 15,
    borderWidth: 1,
    borderColor: "paleturquoise",
    justifyContent: "space-between"
  },
  image: {
    width: 100,
    height: 100
  },
  petDetailColumn: {
    width: 186,
    justifyContent: "space-between"
  },
  petName: {
    fontSize: 18,
    fontWeight: "bold",
    color: "paleturquoise"
  },
  petDescription: {
    fontSize: 16,
    marginVertical: 4,
    color: "paleturquoise"
  }
});

Test it and we can see that different cards yield different detail data--all rendered from the same screen, thanks to passing properties with React Navigation.