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.
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>
);
}
TextInputs at the bottom of the screen in a FlatList automatically and immediately dismiss the keyboard on focus, making it impossible to write anything in it.
The issue is reproducible easily on a blank react-native init project. I tested it in Nexus 5x simulator and real device. I reproduce the bug every time on 0.61.
Related to https://github.com/facebook/react-native/issues/13745
Just add one props in your FlatList as below:
<FlatList
keyboardDismissMode={'none'}
.....
</FlatList>
Chears.!
Just don't give the component reference to the Flatlist footer because when we update state of the component then arrow function creates a new reference that's why TextInput loses it's focus. Just return direct View to the Flatlist footer.
<FlatList
data={...}
ListFooterComponent={renderYourFooter()}
/>
or
<FlatList
data={...}
ListFooterComponent={<View>
<TextInput/>
</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
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?
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