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
Related
I need disable a recent button. It is possible to implement this functionality when using react native?
About disable recent button when use react native i didn't find any thing. The difficulty is that my project uses expo, therefore i don't can use native modules Image for the button which must to be disabled
As I understand your question, you want to hide android navigation bar. There are 2 ways to achieve that:
Use React Native libraries: There are some libraries supporting you to hide navigation bar.
Hide Android Navigation Bar in React Native
How to hide React Native NavigationBar
How to hide android system' s bottom navigation bar in React Native App without changing MainActivity? Maybe through AndroidManifest?
Write a simple native module to do that: First, you need to read React Native document about Native Modules for Android. If you know how to use that, you can start searching: "android hide navigation bar". For example: How to hide navigation bar permanently in android activity?
In case you have any problems about creating native modules, just provide information about them.
i am currently working on an App for Android and iOS - i am using react native.
Is there any way to hide the navigation bar dynamically in react-navigation or should i rather switch to react native router flux?
When the user changes to landscape i want to hide the navigation bar, when he goes back to Portrait, i want to show it again.
I know how to change it statically by using {header: null} in the navigation Options, but this does not help me in this case, at least i did not find a way to solve this.
Thanks in advance!
This is sort of a hack but I think you can replace the provided header component from React navigation with your own, then add a redux state that controls its visibility.
Either wrap your screens with a view that contains an onLayout event that will trigger redux action to set the visibility of your custom header.
I have created a View where the NavigationBar comes from Obj-c(Native code) and the rest of the view comes from React Native.
Now in the react native view, i have a link which should show the content in a new screen with the navigation experience. I am able to show the content but unable to find a way to change navBar title and show back button on the navBar.
Can you please let me know how we can get access to NavigationBar(Obj-c) in ReactNative?
I don't believe React Native supports this. You cannot take an object created in one language and access it in another. It would be a better idea to create your navigation bar in your JS and use it throughout your app. That even allows you to propagate that UI to your android apps.
I'm building a react-native app and I would like new users to experience one of those slider walkthroughs that explains the app and how to use it, but then never show it again.
What is the best approach to achieve this functionality?
You can use Navigator to achieve this. Push the sliding view into the Navigator, then when you want to exit out of it then use replace(route) function of the Navigator.
The replace(route) method of navigator replaces the current scene with the new route
replace(route) - Replace the current scene with a new route
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.