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.
Related
i tried react-navigation-collapsible but it does not support tabs due to react-native#21801
similar question Animating a single View based on multiple ScrollView(s)
React native animation scrollview onScroll event not working with external method
You can use this one for having tabs in the header.
https://github.com/netguru/sticky-parallax-header
It can be implemented in this way.
https://snack.expo.io/#waheed25/89a9dc
You can follow this one.
https://medium.com/#andi.gu.ca/a-collapsing-navbar-with-tabs-in-react-native-e80790588830
How to use ReactNavigator (https://reactnavigation.org) in pair with ReactNative Interactable(https://github.com/wix/react-native-interactable) for animated transiotion between Navigator states ?
Has anyone tried this ?
In general I need to create a component, which takes routes config like StackNavigator proposes from React Navigator library and this component should gets left/right/top/bottom screens views and show then on swipe from left/right/top/bottom sides of the phone respectively.
So StackNavigator is suitable for me. But I need to switch between routes with screen custom animation. And I need to has a possibility to swipe from the any side of the phone device!
Help please!! Thanks!
I'm using React Navigation (https://reactnavigation.org) to handle navigation in my React Native app. The app structure consists of a StackNavigator with a bunch of nested menus. All the menus use the same MenuScreen component.
When I navigate through 2+ menus, then press the back button, the navigation bar title doesn't change back. It gets stuck on the title set by the "furthest" menu reached.
This makes sense, since I set the static navigationOptions property in the constructor of each successive MenuScreen, but never change it back. What is the best practice for fixing this?
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
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.