I want to implement a parent to child transition in a FlatList (in a StackNavigator with a DrawerNavigator as root).
I see react-navigation have custom Transitioner. That could be the way to accomplish that. This article (april 2017) is a tutorial to do exactly that, but it needs some native customization.
I'm currently in Expo env, so I cannot do it. There is an alternative way to accomplish this transition in react-navigation?
Related
I am thinking of using Bottom Tab Bar or a Bottom Sheet, but I am unable to make it visible on all screens of my Stack Navigator.
Any idea or suggestion will be hugely appreciated.
You probably need to use redux, and modal from react-native and wrap your component to the root.
if you use component in the root then you can use it anywhere with the help of redux.
as written in the react-navigation page:
Warning: in the next major version of React Navigation, to be released in Fall 2018, we will no longer provide any information about how to integrate with Redux and it may cease to work.
In the next version of react-navigation it could be hard to use redux with react-navigation.
My question is: what can I do to use states (and passing states between screens) in a react-navigation app without using redux?
For children of navigator
react-navigation gives you an withNavigation HOC, so you can easily wrap the component inside it to access the navigation state and navigate.
Why you integrate react navigation with redux?
For me, I want to be able to perform navigation actions from outside of my components(screens). Eg: Redux-saga. If we don't integrate, we can't navigate via redux-saga.
For a task like that we don't need to integrate react-navigation and redux. We just need to use NavigationService.
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
Is there a light box component that works with react navigation?
I tried react-native-lightbox but it requires the Navigator instance which isn't handily available when you use react-navigation.
Just use withNavigation to make sure it always gets passed in.
https://reactnavigation.org/docs/with-navigation.html
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.