https://github.com/jacquesikot/react-native-navigation-container
Enhanced Navigation Container for React Native
https://github.com/jacquesikot/react-native-navigation-container
assets expo fonts load navigation react react-native
Last synced: 3 months ago
JSON representation
Enhanced Navigation Container for React Native
- Host: GitHub
- URL: https://github.com/jacquesikot/react-native-navigation-container
- Owner: jacquesikot
- License: mit
- Created: 2021-06-01T00:42:03.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-06-29T11:57:56.000Z (about 5 years ago)
- Last Synced: 2025-06-29T18:52:24.220Z (about 1 year ago)
- Topics: assets, expo, fonts, load, navigation, react, react-native
- Language: TypeScript
- Homepage:
- Size: 4.83 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-native-navigation-container
[](https://badge.fury.io/js/react-native-navigation-container)
[](https://github.com/prettier/prettier)
## Table of Contents
- [About](#about)
- [Usage](#usage)
- [Contributing](./CONTRIBUTING.md)
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](https://github.com/jacquesikot/React-Native-Fashion-App)
## 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`.
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](https://reactnavigation.org/docs/navigation-container/).
1. Import react-native-navigation-container:
```javascript
import NavigationContainer from 'react-native-navigation-container';
```
2. Wrap root navigation with Navigation container:
```javascript
export default function App() {
return (
);
}
```
3. Prepare fonts and assets to be loaded:
```javascript
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:
```javascript
export default function App() {
return (
);
}
```
5. Optionally set the `stickyNav` prop:
```javascript
export default function App() {
return (
);
}
```
## A complete example
```javascript
import React from 'react';
import NavigationContainer from 'react-native-navigation-container;
import { RootNav } from './src/navigation';
export default function App() {
return (
);
}
```
## Available props
| 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 |