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
- Load static images and fonts while splash screen is showing.
- Maintain navigation state after app refresh while in development mode.
This library is available on npm, install it with: npm i react-native-navigation-container
or yarn add react-native-navigation-container
.
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.
- Import react-native-navigation-container:
import NavigationContainer from 'react-native-navigation-container';
- Wrap root navigation with Navigation container:
export default function App() {
return (
<NavigationContainer>
<RootNav />
</NavigationContainer>
);
}
- 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'),
];
- Add fonts and assets to navigation container:
export default function App() {
return (
<NavigationContainer fonts={fonts} assets={assets}>
<RootNav />
</NavigationContainer>
);
}
- Optionally set the
stickyNav
prop:
export default function App() {
return (
<NavigationContainer fonts={fonts} assets={assets} stickyNav={true}>
<RootNav />
</NavigationContainer>
);
}
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>
);
}
Name | type | Description |
---|---|---|
fonts | object | Fonts to be loaded into app |
assets | array | Static assets to be loaded into app |
stickyNav | bool | Maintains navigation state after app refresh - only in dev mode |