How I did navigation in React Native is not so terrible
During the development of mobile applications on React Native, I tried several standard libraries for navigation, but when using each of them, I experienced just awful, hellish pain. They were made so inconvenient and not obvious that the development of even the simplest seemingly features, turned into an extraordinary quest.
Using react-navigation or react-native-router-flux if you need to make a screen that can be accessed from several different places, it will be very difficult for you to create a hierarchy of nested routes so that everything works as it should. Or if you need any screen to appear with non-default animation, then you also have to puff. Also, these libraries embodied the harmful and destructive idea of including UI components there, like the top navigation bar and tabs. This is a direct violation of the unix-way approach, when one library performs one and only one function, but qualitatively. Because of such a close connection of UI components with navigation, bugs very often occur - several navigation bars appear on the screen, one of which may have a back button and the name of the screen on another.
Having had enough of grief with standard libraries, I decided to develop my navigator. The main objectives during the development were the simplicity of the API, the absence of a rigid nesting screen structure and the separation of animations from content. This is how react-native-easy-router came into being.
In those navigators that I used earlier, the parameters passed to the screen could only be obtained via a complex path like `router.state.params.name`. In my navigator, I pass the parameters directly to the screen component. In some cases, this may lead to name conflicts, but I decided to neglect the solution to this problem. Also in the code below you can see that routs do not have a clear structure and you can add any new screen from any other screen.
It's even easier to work with animation. If it was necessary to dodge in react-navigation and react-native-router-flux to make a non-default animation for some specific screen, then the react-native-easy-router screen can fly in with different animations, and moreover, the screen can fly in and fly out with different animations. For example, in the example below, the screen will fly in from the bottom, and fly to the right.
You can even add your own custom animations. Maybe you want the screen to fly out of the lower right corner and tumble when doing so. An example of how to do this can be found here .
The developed navigator is already used in several of our commercial projects, and has received little distribution and warm feedback among some React Native developers. If you want to see more examples of use and decide whether you can use this navigator in your project, you can rummage through the project repository .
Using react-navigation or react-native-router-flux if you need to make a screen that can be accessed from several different places, it will be very difficult for you to create a hierarchy of nested routes so that everything works as it should. Or if you need any screen to appear with non-default animation, then you also have to puff. Also, these libraries embodied the harmful and destructive idea of including UI components there, like the top navigation bar and tabs. This is a direct violation of the unix-way approach, when one library performs one and only one function, but qualitatively. Because of such a close connection of UI components with navigation, bugs very often occur - several navigation bars appear on the screen, one of which may have a back button and the name of the screen on another.
Having had enough of grief with standard libraries, I decided to develop my navigator. The main objectives during the development were the simplicity of the API, the absence of a rigid nesting screen structure and the separation of animations from content. This is how react-native-easy-router came into being.
The simplicity of the API and the absence of a rigid structure
In those navigators that I used earlier, the parameters passed to the screen could only be obtained via a complex path like `router.state.params.name`. In my navigator, I pass the parameters directly to the screen component. In some cases, this may lead to name conflicts, but I decided to neglect the solution to this problem. Also in the code below you can see that routs do not have a clear structure and you can add any new screen from any other screen.
import React from'react'import Router from'react-native-easy-router'import { Text, View } from'react-native'const First = ({ router }) => (
<Viewstyle={{backgroundColor: 'white', flex:1 }}><Text>First screen</Text><TextonPress={() => router.push.Second({ name: 'John' })}>Go forward</Text></View>
)
const Second = ({ router, name }) => (
<Viewstyle={{backgroundColor: 'pink', flex:1 }}><Text>Second screen</Text><Text>Hello {name}!</Text><TextonPress={() => router.pop()}>Go back</Text></View>
)
const routes = { First, Second }
exportdefault () => <Routerroutes={routes}initialRoute="First" />Animations
It's even easier to work with animation. If it was necessary to dodge in react-navigation and react-native-router-flux to make a non-default animation for some specific screen, then the react-native-easy-router screen can fly in with different animations, and moreover, the screen can fly in and fly out with different animations. For example, in the example below, the screen will fly in from the bottom, and fly to the right.
import React from'react'import Router from'react-native-easy-router'import { Text, View } from'react-native'const First = ({ router }) => (
<Viewstyle={{backgroundColor: 'white', flex:1 }}><Text>First screen</Text><TextonPress={() => router.push.Second({}, {type:'bottom'})}>Go to second screen</Text></View>
)
const Second = ({ router }) => (
<Viewstyle={{backgroundColor: 'pink', flex:1 }}><Text>Second screen</Text><TextonPress={() => router.pop({type:'right'})}>Go back</Text></View>
)
exportdefault () => <Routerroutes={{Screen1, Screen2 }} initialRoute="Screen1" />You can even add your own custom animations. Maybe you want the screen to fly out of the lower right corner and tumble when doing so. An example of how to do this can be found here .
Conclusion
The developed navigator is already used in several of our commercial projects, and has received little distribution and warm feedback among some React Native developers. If you want to see more examples of use and decide whether you can use this navigator in your project, you can rummage through the project repository .