Skip to main content

Configure Navigation

This guide will help you to configure the app to navigate between screens. UI Kitten has built-in components to fit React Navigation API. Let's use it to complete this guide with a simple 3 steps.

Installation​

Let's start with installing React Navigation and its required dependencies.

Please refer to the official documentation to complete this step, since it may differ for Expo and Bare React Native projects.

Create Screens​

Let's start from the basics and create a simple example with 2 screens and configure navigation between them.

Home Screen​

Create a home.component.js file and paste the code below.

import React from 'react';
import { SafeAreaView } from 'react-native';
import { Button, Divider, Layout, TopNavigation } from '@ui-kitten/components';

export const HomeScreen = ({ navigation }) => {

  const navigateDetails = () => {
    navigation.navigate('Details');
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <TopNavigation title='MyApp' alignment='center'/>
      <Divider/>
      <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Button onPress={navigateDetails}>OPEN DETAILS</Button>
      </Layout>
    </SafeAreaView>
  );
};

The code above demonstrates the basic example of how to create screens in React Native. It already includes a header and a button to navigate to the second screen. Currently, this will not affect your app. We still need to create the Details screen and connect it with Home using React Navigation. But let's take additional attention for some details:

  • SafeAreaView is the root element of the screen. This helps us to avoid drawing UI over the notches on physical devices.
  • TopNavigation is the header of our application.
  • Layout includes the main content of the screen.

Notice the navigation argument passed to HomeScreen. It comes from React Navigation when navigator is configured and can be used to perform navigation between screens. By pressing Open Details button it will perform navigation to the Details screen, so let's focus on its implementation.

Details Screen​

Create a details.component.js file and paste the code below.

import React from 'react';
import { SafeAreaView } from 'react-native';
import { Divider, Icon, Layout, Text, TopNavigation, TopNavigationAction } from '@ui-kitten/components';

const BackIcon = (props) => (
  <Icon {...props} name='arrow-back' />
);

export const DetailsScreen = ({ navigation }) => {

  const navigateBack = () => {
    navigation.goBack();
  };

  const BackAction = () => (
    <TopNavigationAction icon={BackIcon} onPress={navigateBack}/>
  );

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <TopNavigation title='MyApp' alignment='center' accessoryLeft={BackAction}/>
      <Divider/>
      <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text category='h1'>DETAILS</Text>
      </Layout>
    </SafeAreaView>
  );
};

The code above demonstrates the same structure as a Home screen, but with a few changes:

  • TopNavigationAction is used to render a back arrow.
  • navigateBack function is called when TopNavigationAction is pressed and navigates back to the Home screen.

That's it! All we need to do is to connect Home and Details screens using React Navigation.

Create Navigator​

Create a navigation.component.js file and paste the code below.

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { HomeScreen } from './home.component';
import { DetailsScreen } from './details.component';

const { Navigator, Screen } = createStackNavigator();

const HomeNavigator = () => (
  <Navigator screenOptions={{headerShown: false}}>
    <Screen name='Home' component={HomeScreen}/>
    <Screen name='Details' component={DetailsScreen}/>
  </Navigator>
);

export const AppNavigator = () => (
  <NavigationContainer>
    <HomeNavigator/>
  </NavigationContainer>
);

With the code above we used createStackNavigator function to create stack navigation between Home and Details screens. We also used NavigationContainer component to create AppNavigator - the root component of your app.

Now, the one thing we have to do is to render AppNavigator.

Configure Application Root​

Go back to the App.js and paste the following code.

import React from 'react';
import * as eva from '@ui-kitten/eva';
import { ApplicationProvider, IconRegistry } from '@ui-kitten/components';
import { EvaIconsPack } from '@ui-kitten/eva-icons';
import { AppNavigator } from './navigation.component';

export default () => (
  <>
    <IconRegistry icons={EvaIconsPack}/>
    <ApplicationProvider {...eva} theme={eva.light}>
      <AppNavigator/>
    </ApplicationProvider>
  </>
);

That's it! By this guide, you learned how to create screens and perform simple navigation between them. Reload your app to review changes.

Other navigation components​

UI Kitten includes much more components that can be used with React Navigation:

Note on the other navigation libraries​

React Navigation is not the only routing solution. React Native Navigation by Wix works too, with one structural difference that matters for UI Kitten: every screen you register is a separate React root, so there is no single component above all screens where one ApplicationProvider could live.

Wrap each registered screen in its own ApplicationProvider instead. The cost is negligible: the mapping is compiled lazily per component and cached, so the second provider does not process anything the first one already did.

import React from 'react';
import { Navigation } from 'react-native-navigation';
import * as eva from '@ui-kitten/eva';
import { ApplicationProvider, IconRegistry } from '@ui-kitten/components';
import { EvaIconsPack } from '@ui-kitten/eva-icons';

const withProviders = (Screen) => (props) => (
  <>
    <IconRegistry icons={EvaIconsPack} />
    <ApplicationProvider {...eva} theme={eva.light}>
      <Screen {...props} />
    </ApplicationProvider>
  </>
);

Navigation.registerComponent('Home', () => withProviders(HomeScreen));
Navigation.registerComponent('Details', () => withProviders(DetailsScreen));

Select, Autocomplete, Datepicker, Popover, Tooltip, OverflowMenu and Modal present their content through the panel of the nearest ApplicationProvider, which with this setup is the screen that opened them. Sharing one provider across screens is what used to put a Select list on the wrong screen: the panel belonged to whichever root mounted first. If a screen must not carry a provider of its own, render <ModalPanelContext.Provider value={null}> around it so overlays fall back to rendering at the call site; see where modal content renders.

Conclusion​

In this guide, we used React Navigation library to configure routing within React Native app. Consider reading the documentation to become more familiar with it as it is most popular solution in the React world.

By moving to the next guide, you will learn how to change theme in runtime using UI Kitten.