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
Related
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 have a code like this:
<View>
<View></View>
<ScrollView>
<View>
<TextInput/>
</View>
</ScrollView>
<View></View>
</View>
How can I handle it to response correctly to keyboard?
Both android and ios???
i have 2 permenant views top and bottom of the screen, this views pushed up on keyboard show
Your question is really unclear, but what I think you need is KeyboardAvoidingView.
It's a built-in React Native component that resizes based on the keyboard height.
To make sure the keyboard is not overlapping any important bits of your layout such as your text Input wrap your whole screen in KeyboardAvoidingView
https://facebook.github.io/react-native/docs/keyboardavoidingview
Solved!!
I solved it by handling the display of elements (views) on keyboard show and hide by keyboard in react native docs
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 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.
I am showing pictures gallery in full screen mode. I am using scrollview in horizontal for scrolling the pictures. Right now I can scroll the pictures by swiping left or right and I using the pagingEnabled enabled props.
But I want to add more gesture, where when user tap on left or right ( a distance from the edge) , it will automatically mapping the swapping gesture. How can I do this?
I assume your scroll view looks like this with pagingEnabled and horizontal props.
<ScrollView
horizontal={true}
pagingEnabled={true}
onMomentumScrollEnd={event => {
this.setState({xOffset: event.nativeEvent.contentOffset.x })
}}>
// Content
</ScrollView>
The position can be calculated with :
this.state.xOffset/ DeviceSize.width
onMomentumScrollEnd is called each time you scroll an item in the ScrollView
(the content must be full width in this case)
Get a ref to the <ScrollView> then to scrollToEnd() or use scrollTo methods - https://facebook.github.io/react-native/docs/scrollview.html#scrollto
To calculate page number, you would use onLayout to calculate sizes of your pages. If it's the width of the device then that's easy, just use Dimensions.get('window').width then feed that to the x in scrollTo.