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.
Related
The recent release of Expo makes it simple, or at least possible, to add support for web to a React Native app. Assuming one is using RNW and React Navigation, what are best practices for building an app that will work as both a mobile app and a web app? At what point(s) in the code should one branch the logic between mobile app and web?
I'm providing a partial answer and a few resources below. Additional resources and responses are appreciated.
Here are a partial answer, important considerations, and possible starting points for further research.
Screen Size
Unless you have the resources to create completely separate views for small and large screens, one way to make your app look reasonable on a desktop/laptop screen is to add horizontal margins. This can be accomplished by wrapping your
app Navigator with a View like:
<View
onLayout={this._handleLayout}
style={[styles.appContainer, this.state.isWide && styles.wide]}>
and
_handleLayout = ({ nativeEvent }) => {
const { width } = nativeEvent.layout;
this.setState(() => ({ isWide: width > 600 }));
};
Tab bar, Header, and other navigation elements
React Navigation has built-in support for headers and tab bars, however, a standard mobile layout with on a desktop/laptop screen looks ugly. Since you are probably using navigator components designed for mobile, like createBottomTabNavigator and createDrawerNavigator, one option is to make custom navigator(s) for the desktop layout. This may require some work since there are no standard navigator components for desktop layouts.
Another problem is that you may want your header bar to be different, since there's more space to add navigation elements, search bar, etc. React Navigation doesn't provide examples on how to do this, so it may be difficult.
Web URLs, router, server rendering, etc.
React Navigation 3.x docs say that web support should be considered experimental and provides sparse guidance on these issues. The react-navigation/web module provides "Tools for react-navigation on web browsers and servers" but little documentation. An example for setting up a simple web app using SwitchRouter can be found here. However, I could not find any info on using URL parameters with routes.
Hello Guys is this a good stuff in React native Environment I create all Scenes as Components and being rendering it without using react navigator or something like that ?
It depends on the size of app. If it's a very simple ui and functionality then it's ok but not good. Bu if it has so much screens and have complex functionalities, then break it down to different screens and use navigation. In fact it would be a good practice to use different screens and navigation. It also is good practice for memory management.
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.
Context:
I am using ReactNavigation to implement the navigation on my React Native app. All my views so far have no styles defined for them, and look just fine if I access them directly, without any routing. When accessed through the library's StackNavigator, however, they get extremely distorted, to the point where all components collapse into one. I suspect this is happening due to the cascading of the navigator's styling.
Question:
Is there any way to disable style cascading for a particular component in ReactNative?
I'm considering a navigator for a new react-native project
I think the best 2 options are react navigation and react native navigation
Which one is more flexible in terms of defining custom navbars (for example a toggle searchbar) and overriding the default back button handler (for example: to prompt a 'save changes?' warning)?
I would say react-navigation is a better choice, in terms of its flexible api.
Also check out this post from Eric Vicenti, if you are trying to choose the way to go in terms of navigation and navigation animations;
https://medium.com/#ericvicenti/playing-with-react-navigation-and-airbnbs-native-navigation-4e49fc765489