/react-native-advanced-navigation

Some useful patterns to build React Native apps quickly and easily

Primary LanguageJavaScript

React Native Advanced Navigation

This example app shows some patterns I came up with when writing RN apps. The goal was to make my life easier and be quicker by avoiding to loose time with navigation.

All the core logic is in src/navigation. src/archi is an abstraction on top of it to make the real app code (/src/containers) really easy. I released it as an app example but it may become a npm module if it meets demand. All of this is made using the builtin < Navigator /> Component. So it works with Android too.


Lazy Rendering

Scene are rendered for the first time when they have the focus (when scene transition is over). It can be disabled by removing the waitForFocus property.

It avoids to :

  • mount all scenes (accessible from the nav bar) at the same time. App is directly responsive.
  • break the push animation if the view is hard to render.

I still need to implement the api to specifiy a custom loader component to render in the meantime.

Lazy rendering

App Patterns

App patterns

Scene Binding

Lazy rendering

In App navigation

Transitions

Big List

Big list


Some todos

  • ability to show/hide the bar(s) every time. currently it’s only possible between views transition.
  • api to specify custom loader component for lazyrendered view
  • add other navigation patterns
  • assert that there is only ONE NavigationSetting per route.
  • Update list example with what come up from facebook/react-native#4359 to handle more than 100 shuffling rows
  • Modal patterns
  • Tests/cleanup