I need to use the Tab navigator but need to customize its tab bar. Here's what I'm trying to achieve:
The middle button is not a screen in the tab bar. It's a custom button which opens a floating menu. Now I have already created this component but unable to attach it to my tab bar. All I want to do is to navigate to screens through this tab bar.
The app's code looks like this:
<View style={{ flex: 1, backgroundColor: '#f3f3f3' }}>
<MainTabNavigator /> // The tabbar created from react-navigation
<TabBar navigation={tabNavigation} /> // My custom tabbar
</View>
I tried to use the NavigationActions navigate function. It didn't work. I tried to pass the navigation props from a tab screen to my redux store, pass it back to my custom tab bar and used it's navigating function. The function gets passed but nothing happens. Yes, the last thing I did is a bit stupid. Can anyone please help me fix this?
Related
Woking with react-navigation v5. Made custom tab bar from docs example. I put in ads banner inside the bottom tab bar. Now I want after purchase event to remove ads banner. But I am not sure how to do it. How to remove my banner right after purchase event?
This my custom tab bar code:
I really dont read your code entirely so i dont know wich part is the ads part. But you can use a conditional rendering to decide when render or not your ads component. Something like this:
render(){
return(
<View>
{this.state.ads && // <-- Start of the conditional part
<Text style={{ color: 'red' }}>ads here</Text>
} // <-- End of the conditional part
</View>
);
}
I'm using React Navigation and I have a DrawerNavigator and I want the drawer to be below the status bar. This is an example:
In the drawer configuration I have setted a contentComponent with a View inside, I tried changing the view height, margin, top, etc por the View is actually inside the drawer so it doesn't affect the white box.
I know It's late now but may some others can take benefit from this.
<DrawerContentScrollView {...props} contentContainerStyle={{paddingTop: 10}}>
contentContainerStyle property has by default some paddingTop so you can over right.
Thanks
Is it possible to extend the tab view (image) all the way to the top of the screen and have the tab bar overlay it? Tab bars' backgroundColor is "transparent". Using createMaterialTopTabNavigator from React Navigation v3. There seems to have been something along the lines of displayUnderTabBar option in the earlier versions but I can't seem to find it in the documentation anywhere.
What you do is create a custom component for the tabs and position it absolutely over the screens.
<Tab.Navigator tabBar={props => <MyCustomComponent {...props} />}>
{...}
</Tab.Navigator>
Check out the example of a custom tabBar component here.
In the above example, make the positioned absolutely to top. Note that if you do this, however, you will need to change TouchableOpacity to TouchableWithoutFeedback because of the problem noted in this question question.
In order to do this, following styles need to be applied to the custom Tab Bar component that's passed in to the createMaterialTopTabNavigator:
style={{
...
position: "absolute",
zIndex: 1,
width: '100%'
...
}}>
I am using React Native Router and want to have a back button on the component at the root of the navigation and override its action.
Is it possible to enable the back button without writing my own with renderBackButton? I'd rather use the one provided with the library to ensure consistency between other screens and avoid writing a new component.
I tried with hideBackImage={false}, but it doesn't seem to work.
You can't. Since you're at the root of your application, you only have one scene in your stack.
But why do you want a back button on your first application screen? It makes no sense...
However, it's pretty easy to render a back button with a custom action. For example :
<Scene key='root'
...
renderLeftButton={this.renderCustomButton()}
...
/>
With
renderCustomButton() {
return () => (
<TouchableOpacity>
<Icon name="back" size={30} color="#900" />
</TouchableOpacity>
);
}
Then you just add your action or whatever you want to do with the onLeft prop
<Scene key='root'
...
renderLeftButton={this.renderCustomButton()}
onLeft={**YOUR ACTION**}
...
/>
You can also add it on the TouchableOpacity onPress prop.
I usually use react-native-vector-icons for my custom navbar icons https://github.com/oblador/react-native-vector-icons
I have a multi-screen form flow. I would like to display a progress bar at the top of all screens.
Currently, scene transitions bring in a new progress bar element and cover the old one.
I am looking for a way to have the progress bar remain static while the new scene slides in.
The code for what #MattAft is trying to say would be:
render(){
return(
<View style={{flex:1}}>
<ProgressBar props={your.props}/>
<AppNavigator />
</View>
)
}
Both the ProgressBar and the AppNavigator would be components that you made. The AppNavigator component will have inside it the Navigator component that you are currently using.
One way to do it would be to move the progress bar out of the navigator to prevent the scene transitions from affecting it and to keep it static. If you're using redux, you can create an action that updates the progress bar as you transition through the scenes.