๐ŸŒ
GitHub
github.com โ€บ wix โ€บ react-native-navigation
GitHub - wix/react-native-navigation: A complete native navigation solution for React Native ยท GitHub
A complete native navigation solution for React Native - wix/react-native-navigation
Starred by 13.2K users
Forked by 2.6K users
Languages ย  MDX 38.3% | Objective-C++ 18.0% | TypeScript 13.3% | Java 13.1% | Kotlin 9.9% | Objective-C 3.8%
๐ŸŒ
Detox
wix.github.io โ€บ react-native-navigation โ€บ docs โ€บ before-you-start
Before you start | React Native Navigation
React Native Navigation is a module, dependent on and intended to be used alongside React Native, so some experience with it and knowledge of core concepts is required. If you feel the need, you can start with their getting started tutorial, and then come back here when you're ready.
Discussions

Wix/React-native-navigation
It took us a month to switch to v1 of it from using the old deprecated internal React Native navigator. However we've had many bugs since then. Some problems you may or may not encounter: Every screen is encapsulated, you can't have a parent wrapper with shared UI. So if you currently have anything like that, or if you have any global event listeners that you need to run throughout the application, be prepared to refactor. v1 of the library is now not maintained by Wix and is no longer taking PRs, but the v2 API is incomplete. What that means is there's really no safe option right now. V1 has some bugs that may never be fixed without a fork and v2 is not really production ready. the library is fragile when it comes to React native updates. There's currently a crash that occurs with both versions of the library that is unpatchable in RN57 because Facebook removed an API was that was necessary to fix the crash. It's hopefully going to be addressed in 58. But right now we're having to live with occasional crashes because we had to update to 57 for other reasons. If you plan to have any async navigation (e.g. chaining navigation to a home screen after login) be careful. The library can't navigate when the app is in the background on Android and it'll just noop. This can cause issues because you never know if the user will put the app in the bg immediately before a nav call. the API of v1 is missing some methods other libraries have, like popTo. You can't pop multiple screens at once with only a single transition, so if you have anything like that, be careful. on android, v1 of the library stops the 'Main Activity' and starts a 'Navigation Activity'. This breaks the standard startup flow that other native libraries expect and you may run into integration issues. There are all sorts of things we've ran into. The majority of issues are on android. I've spent a lot of time debugging in Java code, which is not my sweet spot. If I was you I'd really stop and question how important getting better performance on old devices is. I think we made a terrible mistake and I would love to switch to React Navigation now but our project manager doesn't have the time for another switch. More on reddit.com
๐ŸŒ r/reactnative
15
7
October 27, 2018
What is your preferred Navigation solution for react native?
react navigation is basically the only one at this point. React-native-navigation exists but I don't thnk anyonne picks it. expo-router is built on react-navigation and it's basically the same except it uses file based routing and why wouldn't you use it if you are on expo? More on reddit.com
๐ŸŒ r/reactnative
30
7
February 9, 2024
hook - How to use react native navigation wix with context to share data from provider to all components? - Stack Overflow
2 How to pass data from one screen to another in wix react native navigation More on stackoverflow.com
๐ŸŒ stackoverflow.com
Do you actually prefer react-navigation over wix/react-native-navigation?
There used to be more advantages that Wix RNN had over RN. Since RN has native backed screens with react-native-screens now there are less advantages. That being said we've been using Wix RNN at work for about a year. We started a project when RN was in between a lot of stuff(api wise) and the react-native-screens wasn't mature, so Wix RNN was the right choice at the time. For most projects now I think RN is fine. I would personally still recommend Wix RNN because of these reasons. Advantages I like the imperative API in Wix RNN to be honest. Makes more sense to me for navigation Button configuration for navigation bar is also easier than react-navigation-header-buttons. You just give an array of objects to leftButtons or rightButtons and everything is correct and spaced for both platforms. I just haven't had good luck with configuring header buttons on RN. Before they allowed configuring event handlers in the component it was a nightmare sharing data. Before buttons had to be declared statically. Native tab bar. Having the native tab bar is nice, for translucent, blur etc. Everything just lines up perfectly on both platforms as far as icons and text too, because it's actually native. This can be achieved in RN but by default all screens in Wix RNN get regular props in the component. You don't have the navigation api to just get params. By default all rendering is delayed in Wix RN, meaning all navigation is responsive by default and screens navigate instantly. You're essentially instantiating new react apps on every screen. This can be achieved in RN too with InteractionManager, bu I noticed it's kind of wonky when you want to delay render but also configured navigation buttons. I might be missing something here. Downsides You can't use context api because each screen is a new app essentially. This isn't a downside for us because we wouldn't use context for any kind of global state management since it's pretty awful at that. Still developers are obsessed with trying to shoehorn it into that. Just use a good state management library like Mobx or Redux Toolkit that uses a singleton to hold state. Use react-query or local state for everything else. If you like declaratively defining navigation. RN is used by more people More on reddit.com
๐ŸŒ r/reactnative
5
6
July 12, 2020
๐ŸŒ
Medium
medium.com โ€บ wix-engineering โ€บ react-native-navigation-v2-is-here-5b7c87f002a
React Native Navigation V2 is Here! | by Dror Biran | Wix Engineering | Medium
May 27, 2019 - React Native Navigation V2 is Here! Building a simple app navigation using React Native Navigation V2 Note: For the most updated version of this tutorial you can check out the official React Native โ€ฆ
๐ŸŒ
Detox
wix.github.io โ€บ react-native-navigation โ€บ docs โ€บ installing
Installation | React Native Navigation
The following diff demonstrates changes needed to be made to index.js, initialized by react-native init. +import { Navigation } from "react-native-navigation";
๐ŸŒ
GitHub
github.com โ€บ wix โ€บ react-native-navigation โ€บ releases
Releases ยท wix/react-native-navigation
A complete native navigation solution for React Native - wix/react-native-navigation
Author ย  wix
๐ŸŒ
Detox
wix.github.io โ€บ react-native-navigation โ€บ docs โ€บ basic-navigation
Basic navigation | React Native Navigation
We've learned the basics of navigation with React Native Navigation by implementing a stack and pushing screens into it.
๐ŸŒ
npm
npmjs.com โ€บ package โ€บ react-native-navigation
react-native-navigation - npm
2 weeks ago - npm i react-native-navigation ยท github.com/wix/react-native-navigation ยท github.com/wix/react-native-navigation ยท 22,284 ยท 8.8.8 ยท MIT ยท 2 days ago ยท artald ยท noamco ยท guyca ยท d4vidi ยท wix.mobile ยท yogevbd ยท yaroslavs ยท Analyze security with SocketCheck bundle sizeView package healthExplore dependencies ยท
      ยป npm install react-native-navigation
    
Published ย  Jun 08, 2026
Version ย  8.8.8
Find elsewhere
๐ŸŒ
Medium
medium.com โ€บ react-native-training โ€บ explanation-of-react-native-navigation-wix-with-redux-deabcee8edfc
Explanation of React-Native-Navigation Wix with Redux | by Alvin Chau | React Native Training | Medium
October 12, 2018 - I needed a way to change the overall appโ€™s navigation-type, from a single screen navigation to a tab screen navigation and React-Native-Navigation by Wix worked out for me.
๐ŸŒ
Medium
medium.com โ€บ react-native-training โ€บ react-native-navigation-v2-by-wix-getting-started-7d647e944132
React Native Navigation (V2) by Wix โ€” Getting Started | by Nader Dabit | React Native Training | Medium
August 1, 2018 - A first look at building React Native apps with React Native Navigation. To view the final code for this project, click here. Wix recently released a stable version 2 of their React Native Navigation library.
๐ŸŒ
Detox
wix.github.io โ€บ react-native-navigation โ€บ docs โ€บ meta-contributing
Contributing | React Native Navigation
Install React-Native-Navigation as you'll usually do in your project, using yarn add react-native-navigation or npm install --save react-native-navigation. Add the following configuration to the react-native.config.js file, at the root of your project. ... Clone the project using git clone ...
๐ŸŒ
Reddit
reddit.com โ€บ r/reactnative โ€บ wix/react-native-navigation
r/reactnative on Reddit: Wix/React-native-navigation
October 27, 2018 -

Hi guys, currently developing pretty huge app , currently i using react-navigation for navigation , it works fine , it's really flexible , starting from setup till customising it's been really simple, but there is few perfomance issues on low versions of android, is it worth to convert to wix's native navigation? how about time how much it would take avrg or how about flexibility or setup time etc, please tell me about everything this lib if u have any experience with it.

Top answer
1 of 5
10
It took us a month to switch to v1 of it from using the old deprecated internal React Native navigator. However we've had many bugs since then. Some problems you may or may not encounter: Every screen is encapsulated, you can't have a parent wrapper with shared UI. So if you currently have anything like that, or if you have any global event listeners that you need to run throughout the application, be prepared to refactor. v1 of the library is now not maintained by Wix and is no longer taking PRs, but the v2 API is incomplete. What that means is there's really no safe option right now. V1 has some bugs that may never be fixed without a fork and v2 is not really production ready. the library is fragile when it comes to React native updates. There's currently a crash that occurs with both versions of the library that is unpatchable in RN57 because Facebook removed an API was that was necessary to fix the crash. It's hopefully going to be addressed in 58. But right now we're having to live with occasional crashes because we had to update to 57 for other reasons. If you plan to have any async navigation (e.g. chaining navigation to a home screen after login) be careful. The library can't navigate when the app is in the background on Android and it'll just noop. This can cause issues because you never know if the user will put the app in the bg immediately before a nav call. the API of v1 is missing some methods other libraries have, like popTo. You can't pop multiple screens at once with only a single transition, so if you have anything like that, be careful. on android, v1 of the library stops the 'Main Activity' and starts a 'Navigation Activity'. This breaks the standard startup flow that other native libraries expect and you may run into integration issues. There are all sorts of things we've ran into. The majority of issues are on android. I've spent a lot of time debugging in Java code, which is not my sweet spot. If I was you I'd really stop and question how important getting better performance on old devices is. I think we made a terrible mistake and I would love to switch to React Navigation now but our project manager doesn't have the time for another switch.
2 of 5
4
No, stick with react navigation. While react native navigation does improve performance, we found it was so lacking in functionality it was t worth using.
๐ŸŒ
Detox
wix.github.io โ€บ react-native-navigation โ€บ docs โ€บ showcases
Showcases | React Native Navigation
The playground example is a place where we showcase and test all features of react-native-navigation. git clone https://github.com/wix/react-native-navigation
Top answer
1 of 1
1

it's weird that the value is not showing at all as your code snippet should display value. I've created an example below to demonstrate integrating React Context with react-native-navigation but unfortunately as react-native-navigation is not a single root application (each registered screen is a "root") the regular Context pattern would not work as expected.

// CounterContext.js
import React from 'react

const initialCounterState = {
  count: 0
}

const counterContextWrapper = (component) => ({
  ...initialCounterState,
  increment: () => {
    initialCounterState.count += 1
    component.setState({ context: contextWrapper(component) })
  },
  decrement: () => {
    initialCounterState.count -= 1
    component.setState({ context: contextWrapper(component) })
  },
})

export const CounterContext = React.createContext({})

export class CounterContextProvider extends React.Component {
  state = {
    context: counterContextWrapper(this)
  }

  render() {
    return (
      <CounterContext.Provider value={this.state.context}>
        {this.props.children}
      </CounterContext.Provider>
    )
  }
}
// index.js
import { Navigation } from 'react-native-navigation
import { CounterContextProvider } from './CounterContext
import { Main } from './Main

Navigation.registerComponent(
  'Main', 
  () => props => (
    <CounterContextProvider>
      <Main {...props} />
    </CounterContextProvider>
  ),
  () => CounterReactContextScreen
)
// Main.js
import React from 'react'
import { Button, Text, View } from 'react-native'
import { CounterContext } from './CounterContext'

export const Main = () => {
  const { count, increment, decrement } = React.useContext(CounterContext)

  return (
    <View>
      <Text>{`Clicked ${count} times!`}</Text>
      <Button title="Increment" onPress={increment} />
      <Button title="Decrement" onPress={decrement} />
    </View>
  )
}

This should all work, however the caveat is if you register 2 screens with the same Context Provider (for example, Main as your root and Pushed as a screen that gets pushed from Main) if you update the value on Pushed screen, it would not re-render Main screen to show the updated value.

I'd recommend to use MobX if you want Context like API. You could checkout my boilerplate project https://github.com/jinshin1013/rnn-boilerplate.

๐ŸŒ
SitePoint
sitepoint.com โ€บ blog โ€บ javascript โ€บ getting started with the react native navigation library
Getting Started with the React Native Navigation Library โ€” SitePoint
November 15, 2024 - In this tutorial, weโ€™ll be looking at the React Native Navigation library by Wix, an alternative navigation library for those who are looking for a smoother navigation performance for their React Native apps.
๐ŸŒ
Mono
mono.software โ€บ 2019 โ€บ 07 โ€บ 28 โ€บ native-navigation-react-native
Native navigation in React Native (and a few additional features)
class Screen extends Component { constructor(props) { super(props); this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this)); } static navigatorButtons = { rightButtons: [ { title: 'Edit', id: 'edit', buttonColor: 'black', buttonFontSize: 14, buttonFontWeight: '600' }] } onNavigatorEvent(event) { if (event.type == 'NavBarButtonPress') { if (event.id == 'edit') { this.props.navigator.push({ screen: 'GenericScreen', title: 'Edit', passProps: { color: { backgroundColor: 'yellow', flex: 1 } } }); } } } Wix, in addition to its standard navigation, offers plenty of other features that can be utilized.
๐ŸŒ
Medium
medium.com โ€บ wix-engineering โ€บ react-native-at-wix-the-architecture-ii-deep-dive-9cfcb3c2822c
React Native at Wix โ€” The Architecture II (Deep dive) | by Omri Bruchim | Wix Engineering | Medium
July 8, 2024 - When it comes to mobile app development using React Native, one of the most important steps is choosing the right navigation library for your project. Navigation serves as the backbone of an app and has a big impact on user experience. In my example, I chose react-native-navigation by Wix to achieve a fully native navigation experience.
๐ŸŒ
Detox
wix.github.io โ€บ react-native-navigation โ€บ api โ€บ component
Component | React Native Navigation
The component itself is a traditional React component extending React.Component or React.PureComponent. It can also be a HOC to provide context (or a Redux store) or a functional component. Similar to React Native's AppRegistry.registerComponent. Navigation.registerComponent(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);Copy
๐ŸŒ
Reddit
reddit.com โ€บ r/reactnative โ€บ do you actually prefer react-navigation over wix/react-native-navigation?
r/reactnative on Reddit: Do you actually prefer react-navigation over wix/react-native-navigation?
July 12, 2020 -

I have been using react-navigation for my project now and even though I like their declarative API (JSX Tags for Screens and Navigators) and the type safety you can achieve, there is a serious problem with making navigation JS based, and that's performance. I have a shared element transition between my "main" and "details" screens which is slow and stuttering a lot because it's not native.

I'm currently looking into wix/react-native-navigation and even though it's not the "official" (react-navigation is community, but recommended by react native) navigation lib it looks promising. It's weird to write since it's not JS based anymore, but having a fully native & complete suite of navigation is a big plus. (complete suite includes shared element transitions for me)

What are you using and why?

Top answer
1 of 2
5
There used to be more advantages that Wix RNN had over RN. Since RN has native backed screens with react-native-screens now there are less advantages. That being said we've been using Wix RNN at work for about a year. We started a project when RN was in between a lot of stuff(api wise) and the react-native-screens wasn't mature, so Wix RNN was the right choice at the time. For most projects now I think RN is fine. I would personally still recommend Wix RNN because of these reasons. Advantages I like the imperative API in Wix RNN to be honest. Makes more sense to me for navigation Button configuration for navigation bar is also easier than react-navigation-header-buttons. You just give an array of objects to leftButtons or rightButtons and everything is correct and spaced for both platforms. I just haven't had good luck with configuring header buttons on RN. Before they allowed configuring event handlers in the component it was a nightmare sharing data. Before buttons had to be declared statically. Native tab bar. Having the native tab bar is nice, for translucent, blur etc. Everything just lines up perfectly on both platforms as far as icons and text too, because it's actually native. This can be achieved in RN but by default all screens in Wix RNN get regular props in the component. You don't have the navigation api to just get params. By default all rendering is delayed in Wix RN, meaning all navigation is responsive by default and screens navigate instantly. You're essentially instantiating new react apps on every screen. This can be achieved in RN too with InteractionManager, bu I noticed it's kind of wonky when you want to delay render but also configured navigation buttons. I might be missing something here. Downsides You can't use context api because each screen is a new app essentially. This isn't a downside for us because we wouldn't use context for any kind of global state management since it's pretty awful at that. Still developers are obsessed with trying to shoehorn it into that. Just use a good state management library like Mobx or Redux Toolkit that uses a singleton to hold state. Use react-query or local state for everything else. If you like declaratively defining navigation. RN is used by more people
2 of 2
2
I moved to wix RNN from RN. RN has a lot of visual artifacts when app screen rotates transitioning from landscape to portrait mode.