I'm looking for a navigation library for a new React Native project. I've read information on this 3 main libraries:
react-native-router-flux
react-native-navigation
"Standard" react native navigation system
I have read that the "standard" system is very buggy, is it true?
What is your favorite navigation library to date?
The most used navigation library for react is react-navigation as it is kind of simple to use, has a lot of features and can be customise at will.
react-native-router-flux is a wrapper over react-navigation, it is really simple to use and allows you to write a lot less code than with react-navigation, however if you want to implement complex features it might not be the best choice.
react-native-navigation aims to do the same things as react-navigation but... misses the point, as it clearly lakes some complex features that react-navigation has.
I suggest you to read https://medium.com/#ian.mundy/choosing-a-routing-library-for-react-native-604f97e58729 if you can, although that article is from 2017 it is still relevant !
You should give the Navigation router a try. It provides 100% native navigation on iOS and Android. It isn’t like React Native Navigation because it doesn’t require any native setup and has a JavaScript array representation of the native stack of screens.
Related
Background
Native export some components and want to use in react native with some props. How to receive react native props in swift ui?
Try
Seems RCT_EXPORT_VIEW_PROPERTY not working
Don't know how to use other macro. There are no detailed tutorial.
Read the article react native meets swift ui, but it's example has some problems, Article here, actually don't know how to deal with other type.
I was exited to hear about the possibility to use native navigation in React-Navigation.
In the respective blog post however, it only speaks of native Stack-Navigations. We are using a bottomTabNavigation, so I wonder if the use of react-native-screens is also useful when using tab navigation?
It's used in bottom tabs to improve memory usage by detaching unfocused screens. But the tab bar itself is made in JS.
Since the bottom tab navigator doesn't implement any animations or gestures, native implementation is not necessary to achieve good performance.
Which navigation is best to use in react native with redux
react navigation
react native navigation
react native router flux
Is here anything best rather than this ?
I would go with react navigation for redux. It is pretty easy, there is a good number of tutorials as well as their documentation I would say is pretty clear: https://reactnavigation.org/docs/en/redux-integration.html
You should give the Navigation router a try. It provides 100% native navigation on iOS and Android. It doesn’t require you to do anything special to integrate with Redux. Wrap the top level component in a Redux Provider component and away you go. I’ve written a Redux example to get you started
React-Navigation itself answers your question here
I've been digging deep in React Native for the past week to decide if I and the team should adopt it. And I gotta say it seems promising. I've also learned about its ability to integrate with existing native projects and its incremental adoption to change existing native projects.
My question is what are the cases/reasons that would make me wanna convert my completed old native projects (iOS/Android) into React Native?
Edit: Just to clarify, our team is currently building native apps only.
It depends on what type of app you are building. But you can always use bits of code from native or react native. Since you all can code in native, anything you cannot find you could make a native component.
The advantages of React Native show up with code reuse between iOS and Android so that your team can iterate faster working together. Many big apps have achieved 80% or more code reuse.
You will find flexbox so easy to quickly create views to specs and to change quickly with styles. Plus they are all in code and that plays nice with git.
See edit below:
Now in saying this I have never used React Native inside a native project but to call actions and such you would need to expose functions to call from the JavaScript side. I don't know if a singleton is generally used or just an import of the controller functions or delegated you want to expose but it has to call back to the native application . It is easy to use a native component inside a React native application and I have done this so I am sure it can work the other way.
Edit: Out of curiosity I added some react native views to a test project and it works surprisingly well. No singleton needed Javascript maps the view tag and the exported functions. Crazy. The concerns below still exist but I think if you are changing to change that is wrong but if you have UI changes you want to make then it could definitely benefit as your reuse can grow across your platforms.
Drawbacks I have seen- sometimes transition animations can be laggy if you are not using the native navigation methods. Using both native and React Native adds size to your app so you would need to keep an eye on that. Also start up time can hurt and so monitor that as well.
With all that said I have built a fair bit with React Native lately and it is, at times, beautiful and frustrating for a native developer.
Here is a great article on Instagram and React Native.
Also AirBnb heavily uses RN. They may be completely RN now but I am not sure. They do drive a lot of the outside frameworks in RN for example the maps component in RN. They also just released Lottie and it is very cool. Here is an article about AirBnb.
Just look through fb's document.
What is different between navigator and navigatorIOS in react-native?
There used to be a comparision between the two in the official docs. Not sure why it is removed since 0.31. You can still get it from google the cached version though:
Navigator Comparison
The differences between Navigator and NavigatorIOS are a common source
of confusion for newcomers.
Both Navigator and NavigatorIOS are components that allow you to
manage the navigation in your app between various "scenes" (another
word for screens). They manage a route stack and allow you to pop,
push, and replace states. In this way, they are similar to the html5
history API. The primary distinction between the two is that
NavigatorIOS leverages the iOS UINavigationController class, and
Navigator re-implements that functionality entirely in JavaScript as a
React component. A corollary of this is that Navigator will be
compatible with Android and iOS, whereas NavigatorIOS will only work
on the one platform. Below is an itemized list of differences between
the two.
Navigator #
Extensive API makes it completely customizable from JavaScript.
Under active development from the React Native team.
Written in JavaScript.
Works on iOS and Android.
Includes a simple navigation bar component similar to the default NavigatorIOS bar: Navigator.NavigationBar, and another with
breadcrumbs called Navigator.BreadcrumbNavigationBar.
See the UIExplorer demo to try them out and see how to use them. Currently animations are good and improving, but they are still less
refined than Apple's, which you get from NavigatorIOS.
You can provide your own navigation bar by passing it through the navigationBar prop.
NavigatorIOS #
Small, limited API makes it much less customizable than Navigator in its current form.
Development belongs to open-source community - not used by the React Native team on their apps. A result of this is that there is
currently a backlog of unresolved bugs, nobody who uses this has
stepped up to take ownership for it yet.
Wraps UIKit, so it works exactly the same as it would on another native app. Lives in Objective-C and JavaScript. Consequently, you
get the animations and behaviour that Apple has developed. iOS only.
Includes a navigation bar by default; this navigation bar is not a React Native view component and the style can only be slightly
modified.
Based on my experience, navigatorIOS is pretty buggy for now and I would suggest using Navigator instead. If you take a look at the Facebook F8 app, they were using Navigator rather than navigatorIOS.
Navigator is a transition between different scenes in your app, it can be regarded as an animation.
NavigatorIOS wraps UIKit navigation, it will push or pop a controller and behave more like an Native navigation.