Playing with React Navigation and Airbnb’s Native Navigation
tldr: Apps built with React Navigation will be able to run on Airbnb’s native-navigation without invasive changes. Scroll down for the demo video.
One of React Native’s most notorious issues is the lack of a clear solution to navigation. I contribute to
react-navigation, which aims to consolidate several JS navigation libraries into one flexible yet easy-to-use solution. React Navigation is a great long-term solution for any app that previously used RN’s Navigator or NavigationExperimental components, or third party JS navigators such as Ex-Navigation or react-native-router-flux.
The loudest feedback we’ve heard for React Navigation is the lack of support for native navigation components such as the iOS
However, the JS implementation is imperfect, and currently resides in the uncanny valley where the user can somehow feel that something isn’t right. One approach is to avoid the uncanny valley by delivering interactions which feel great but do not attempt to be entirely identical to the platform. Seasoned mobile developers often advise against this approach. To make an app feel 100% “native” to the user, it is best to utilize the navigation frameworks provided by iOS and Android.
Unfortunately, it can be tricky to integrate a React Native app with the native navigation systems. This is why many people in the community are excited about
native-navigation, which Leland Richardson introduced at ReactConf last week. Airbnb uses it in production for their ‘brown-field’ native app, and it enables easy navigation between native and React screens.
Until now, the community has only managed to produce one cross-platform solution to this problem. Last year, Tal Kol and his team at Wix open-sourced the first 3rd party native navigation solution, react-native-navigation, which is now used by a large portion of the community. Most of the development is happening in the v2 branch, which is approaching stability.
It is critical for young apps to avoid locking themselves in to a navigation solution which may lose support over time. React Navigation allows your app to opt-in to new navigation solutions as they become available.
In the following video, I demo a way to run a React Navigation app with the native navigation views on iOS, backed by Airbnb new
native-navigation. This is doable today with a few minor modifications, and full-fledged support is on our roadmap.