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), {})
)
Related
Wondering if there's a simple way to overlay react-navigation's Stack and MaterialTopTabNavigator components within individual screens. I need to overlay both when displaying components such as loading overlays and dialog/prompt components.
I understand I could define these components within the same root file as the navigation, however this means I have to track the state of the dialog within redux or some other shared state, which I would prefer to avoid in an effort to be more declarative/functional.
Can't find any good solutions, and I'm combing through react-navigation's source code, but if someone else has already solved this it would save me a lot of time. Thanks!
Edit: I also don't want to use react-native's modal or react-native-modal. Would like to implement a custom component myself.
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'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.
i am troubling using of NavigatorIOS in react native,
<NavigatorIOS
style={styles.navigator}
initialRoute={{
title:'xxx',
component:xxx
}}
navigationBarHidden={true} />
here component xxx is my starting file here i don’t want navigator,after this i am using login screen there also i don’t want navigator after completion of the these screens,I need a navigator in my screen.
for hiding i used above code but to show it in child screen i wrote like this but not showing
this.props.navigator.push({
component:xxxx
title:’xxxx’,
navigationBarHidden:false
})
any help much appreciated
There are a lot of issues when using NavigatorIos. You have 2 options:
Dump NavigatorIos and move to Navigator. I was in the same scenario as you. I was using NavigatorIos and I wanted to completely replace the scene. It was a known issue and since Facebook stopped developing it and moved completely to Navigator, I was pretty much forced to make the change.
Here is more info: Navigator comparison
You can use a custom navigator like this one by Kureev. However, you should take into consideration that the way he implemented it, the navigator bar is part of your view, so when you move to a new scene, the whole page shifts, including your navigator.
I tried both option #1 and #2, and ultimately went with #1 and never looked back. It feels much more native and there is growing support for it.
Hope that helps.