Getting started

If this is your first time setting up React Native, head over to their docs first: https://facebook.github.io/react-native/docs/getting-started

The supported peer dependencies versions for this library are:

"react": ">=16",
"react-native": ">=0.60",
"react-native-gesture-handler": "^1.4.1",
"react-native-reanimated": "^1.3.0",
"react-native-screens": "^2.0.0-alpha.6"

Installation

In order to get started, there are a few packages that need to be installed:

yarn add navigation-components
# expo provides these packages by default -- you might already have them!
yarn add react-native-reanimated
yarn add react-native-gesture-handler
yarn add react-native-screens

These dependencies are used to provide better animation and gesture performance. They have native implementations so if you are running an iOS build you'll also need to install their Pods:

cd ios && pod install

react-native-gesture-handler has some additional setup on Android as well:

https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html

Verifying it's working

Add the following boilerplate to your entry file and swipe away!

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

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

import { Navigator, Tabs } from 'navigation-components';

const App = () => {
  return (
    <AppContainer>
      <MyNavigator />
    </AppContainer>
  );
};

function MyNavigator() {
  return (
    <Navigator>
      <Tabs>
        <Screen>
          <Text style={styles.title}>Step 1</Text>
        </Screen>
        <Screen>
          <Text style={styles.title}>Step 2</Text>
        </Screen>
        <Screen>
          <Text style={styles.title}>Step 3</Text>
        </Screen>
      </Tabs>
    </Navigator>
  );
}

function AppContainer({ children }: any) {
  return <SafeAreaView style={styles.container}>{children}</SafeAreaView>;
}

function Screen({ children }: any) {
  return <View style={styles.screen}>{children}</View>;
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },

  screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: StyleSheet.hairlineWidth,
    borderRadius: 10,
    marginHorizontal: 10,
  },

  title: {
    fontSize: 24,
    fontWeight: '600',
  },
});

export default App;

As you can see, we've imported a few components from navigation-components and verified that they work. We'll go more in depth on what these are in the next section!