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 toreact-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 iOSUINavigationController. The library currently includes a JavaScript implementation of navigation components such as the header, animations, and swipe-back gesture.
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.
In the world of React Native, we deserve the best of both worlds. JavaScript implementations allow complete customizability and portability of code, because they doesn’t depend on native features that may be missing on different platforms. However, it is often critical for UX to utilize the native navigation views. Fortunately, React Navigation allows you to opt in to the best of each system.
