react-native-navigation-container

Table of Contents

• About
• Usage
• Contributing

About

The goal of react-native-navigation-container is to provide a convinient method to load static fonts and assets during the app splash screen and provide a development navigation that remains unchanged after app refresh.

First gif is without preloading assets using NavigationContainer. Second gif uses NavigationContainer to preload assets and it shows immediately after splash screen is done.

If you're interested in the implementations of the animations above visit this link

Features

• Load static images and fonts while splash screen is showing.
• Maintain navigation state after app refresh while in development mode.

Setup

This library is available on npm, install it with: npm i react-native-navigation-container or yarn add react-native-navigation-container.

Usage

Since react-native-navigation-container is an extension of the original react navigation NavigationContainer, it works in a similar fashion as react navigation - navigation container.

1. Import react-native-navigation-container:

import NavigationContainer from 'react-native-navigation-container';

2. Wrap root navigation with Navigation container:

export default function App() {
  return (
    <NavigationContainer>
      <RootNav />
    </NavigationContainer>
  );
}

3. Prepare fonts and assets to be loaded:

const fonts = {
  'SofiaPro-Black': require('../../assets/fonts/SofiaProBlack.otf'),
  'SofiaPro-BlackItalic': require('../../assets/fonts/SofiaProBlackItalic.otf'),
};

const assets = [
  require('../../assets/images/img1.png'),
  require('../../assets/images/img2.png'),
];

4. Add fonts and assets to navigation container:

export default function App() {
  return (
    <NavigationContainer fonts={fonts} assets={assets}>
      <RootNav />
    </NavigationContainer>
  );
}

5. Optionally set the stickyNav prop:

export default function App() {
  return (
    <NavigationContainer fonts={fonts} assets={assets} stickyNav={true}>
      <RootNav />
    </NavigationContainer>
  );
}

A complete example

import React from 'react';
import NavigationContainer from 'react-native-navigation-container;

import { RootNav } from './src/navigation';

export default function App() {
  return (
    <NavigationContainer fonts={fonts} assets={assets} stickyNav={true}>
        <RootNav />
    </NavigationContainer>
  );
}

Available props