I'm using React Native 0.14.0 to develop an Android application. Currently I'm using the ToolbarAndroid component to add a toolbar on top of my scene, but it is not kept between scenes. I found that the Navigator has a navigationBar property, which can be set to a Navigator.NavigationBar component, which should include an object dealing with the title and left and right buttons of the navigation bar. See the official example to understand what I mean. As there is little documentation on this part, I have to rely on the example to set the navigationBar properly.
This Navigator.NavigationBar is not as powerful as the ToolbarAndroid, as itdoesn't automatically have space for the logo, for example.
Is there any way to use ToolbarAndroid with the navigationBar property of the Navigator?
Not really. The closest you could probably get is to wrap the ToolbarAndroid in a component and map the navigator left, right methods to the onIconClicked functions. But that defeats the purpose as you are probably most interested in the ToolbarAndroid's UI.
You need to pass a component that will behave something like the Navigator.NavigationBar. If you can drop in a component that will play nice and provide some of the expected props then it'll work.
Related
I am trying to implement a custom navigator based on the TabRouter with React Navigation with custom complex animations and behavior, more or less in the fashion of a swipeable CoverFlow.
There are examples out there of how to do that using a StackRouter, but none of them work when changing to a TabRouter.
So far, I have understood that to get a navigator like the TabNavigator I would need a function like:
(routeConfigs, config = {}) => (
createNavigationContainer(
createNavigator(TabRouter(routeConfigs, config))(MyNavigationView)
)
);
with how to implement MyNavigationView being my main interrogation.
The docs are extremely superficial on each component of a navigator, keeping the description to a single sentence most of the time. So, what is precisely, and what is the role of:
a router
a navigation view
the Transitioner (should I use one ?)
Should I (and how) render all the scenes in my _renderScene function ?
How do I hide the scenes not displayed at the moment ?
I think I should use a PanResponder from inside the MyNavigationView to handle the swipe gesture. Should I (and, if yes, how to) update the router's state when the user swiped to a new scene ?
Also, I do not want to use the AnimatedTabView from react-native-tab-view that the TabNavigator is using internally as it doesn't work for me on iOS (conflict between ScrollView and PanResponder which likely won't be fixed for a while)
That is a lot of questions, but I am a little bit lost. I have been looking a lot at the sources of React Navigation, but they still leave me confused.
Even a partial answer would help.
I think this can help: https://github.com/react-navigation/react-navigation/blob/master/examples/NavigationPlayground/js/CustomTabs.js
So maybe you can update your function like this?
createNavigationContainer(
createNavigator(MyNavigationView, TabRouter(routeConfigs, config), {})
)
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.
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 would like to have two buttons on the right side of the navbar. I am using the React Native Navigator component. I know I can put a button to the right side of the navbar but how can I put more than one?
Something like that.
On Android if you are using ToolbarAndroid you can pass an array of items to actions prop.
https://facebook.github.io/react-native/docs/toolbarandroid.html#actions
On iOS if you are using NavigatorIOS unfortunately there is no way you can do such a thing but if you are using Navigator you can design it yourself
https://facebook.github.io/react-native/docs/navigator.html#navigation-bar
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.