Master React Navigation V5

Stack Navigator: Basic Setup

Stack Navigator Docs

App/config/navigation.js

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import ContactsList from '../screens/ContactsList';
import ContactDetails from '../screens/ContactDetails';

const ContactsStack = createStackNavigator();
const ContactsStackScreen = () => (
  <ContactsStack.Navigator>
    <ContactsStack.Screen name="ContactsList" component={ContactsList} />
    <ContactsStack.Screen name="ContactDetails" component={ContactDetails} />
  </ContactsStack.Navigator>
);

export default () => (
  <NavigationContainer>
    <ContactsStackScreen />
  </NavigationContainer>
);

App/index.js

import React from 'react';
import Navigation from './config/navigation';

export default () => <Navigation />;

App/screens/ContactDetails.js

import React from 'react';
import { Text } from 'react-native';

export default ({ route }) => {
  const contactInfo = route.params.contact;

  return <Text>{JSON.stringify(contactInfo, null, 2)}</Text>;
};

App/screens/ContactsList.js

import React from 'react';
import { FlatList } from 'react-native';

import { Row, Separator } from '../components/Row';
import users from '../data/users';

export default ({ navigation }) => (
  <FlatList
    data={users}
    keyExtractor={item => {
      return `${item.id.value}-${item.phone}`;
    }}
    renderItem={({ item }) => {
      const name = `${item.name.first} ${item.name.last}`;

      return (
        <Row
          image={{ uri: item.picture.thumbnail }}
          title={name}
          subtitle={item.email}
          onPress={() => navigation.push('ContactDetails', { contact: item })}
        />
      );
    }}
    ItemSeparatorComponent={Separator}
    ListHeaderComponent={() => <Separator />}
    ListFooterComponent={() => <Separator />}
    contentContainerStyle={{ paddingVertical: 20 }}
  />
);

Want to track your progress? Create an account with React Native School!

Continue

Join the email list to be notified of all new lessons and classes!