I'm developing project on react-native, my problem is that modal is over the drawer navigator, I tried set zIndex but it is useless.
My modal:
<Modal visible={isVisible} animationType={'fade'} transparent={true}>
<Animated.View style={{ marginTop: marginTop, zIndex: 0 }}>
...
</Animated.View>
</Modal>
My drawer:
<DrawerContentScrollView {...props} style={{ marginTop: -5 }}>
<ImageBackground source={back} style={{...s.drawerContainer, zIndex: 100}}>
...
</ImageBackground>
</DrawerContentScrollView>
here is screenshot, I need to set drawer over this modal
The modal is natively on top of everything, check this question as well: Bring View on top of Modal using zIndex style with React-Native
You cannot put the drawer above it unfortunately.
Related
I need some help. So scenario is that I am using ScrollView component in react native whose props have horizontal for horizontal scrolling. And I have two button whose purpose is to control to scroll to next card and previous card. Now I want to disable swipe gesture only for ScrollView. User should/could not scroll content with swipe gesture but they can only scroll with help of button only. As I try using ScrollView's available props as well which is scrollEnabled={false}. But It will helps me to stop swipe gesture but also button controller to scroll is stop working. Here is my method for button controller.
const scrollToNextInfo = () => {
if (scrollViewRef) {
scrollViewRef?.current?.scrollTo({
x: selectScreenWidth + widthOfCard,
y: 0,
animated: true,
});
}
};
And ScrollView Component Looks as:
<ScrollView
ref={scrollViewRef}
horizontal
pagingEnabled
// scrollEnabled={false}
showsHorizontalScrollIndicator={false}
>
// Card Component with width as widthOfCard
</ScrollView>
{/** Button Controller Component **/}
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}>
<TouchableOpacity
style={styles.previousButton}
onPress={scrollToNextInfo}
>
<LeftIcon />
</TouchableOpacity>
</View>
Hoping for positive response. Thank you in advance. :)
In my app keyboard covers only bottom part of the text input. I have tried several ways to solve this by changing styles by adding padding or margin, and also KeyboardAvoidingView didn't help.
Another problem is that keyboard shifts the whole screen and header becomes invisible as it goes above.
Edit: It works fine on IOS devices.
How can I fix these problems?
Thanks
Code:
<>
<CustomHeader title={item.title}
leftChild={<SvgImageComp name={MENU_ICON}/>}
centerChild={
<TextComp text={'Title'} style={compStyle.title}/>
}
/>
<View style={{
flex: 1,
justifyContent: 'flex-end'
}}>
<KeyboardAvoidingView
behavior={"height"}
>
<TextInputComp fontFamily={NUNITO_SANS_REGULAR}
fontSize={15}
lineHeight={20}
autoFocus={true}
style={{
paddingVertical: 10,
paddingHorizontal: 20,
borderWidth: 1,
borderColor: '#000',
borderRadius: 200,
}}
/>
</KeyboardAvoidingView>
</View>
</>
For Android you don't need to pass behavior to KeyboardAvoidingView. For IOS you need to pass behavior="position" and keyboardVerticalOffset=[height of your input].
<KeyboardAvoidingView
{...(Platform.OS === 'ios'
? {
behavior: 'position' ,
keyboardVerticalOffset: [inputHeight], // calculate height using onLayout callback method
}
: {})}>
I avoid this issue by wrapping the screen in <ScrollView contentContainerStyle={flexGrow: 1}><ScrollView> This will make the whole screen turn into a scroll view once the keyboard opens. Allowing the box to be out of the way of the keyboard. This also has the added benefit of allowing you to scroll to other sections of the screen for reference while the keyboard stays open.
I have an app with three tabs! In the first tab which displays all my product i would like to be able to drag and refresh all products from database!
I tried using the refresh control but it doesn't work.. It didn't even drag down!
NOTE: In the tab I have a stack navigator with other screens i'm just trying to refresh the initial screen of the stack navigator in a Tab navigator in a stack navigator Stack Nav -> Tab Nav -> Stack Nav -> Products Screen
My code
The Scroll View:
<SafeAreaView style={{ flex: 1 }}>
<Header searchFunction={showSearch} />
{/* <Text style={GlobalStyles.title}>Home Screen</Text> */}
<ScrollView
style={GlobalStyles.container}
showsVerticalScrollIndicator={false}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={() => {
console.log("Working");
}}
/>
}
>
...
</ScrollView>
</SafeAreaView>
GlobalStyles.container:
container: {
flex: 1,
backgroundColor: color.light,
padding: 10,
},
It's hard to debug something like this without enough information, I would suggest that you remove everything else you have so you can figure out if the ScrollView is the one that's not working or the elements that you put inside of it.
Im new at react native and I'm trying to do a simple aplication.
I just put a text and this is result in Nexus 5:
I understood that putting SaveAreaView this would be fixed but it dosen't.
return (
<SafeAreaView style={{flex: 1}}>
<Text style={styles.principalTitle}>Just a text</Text>
</SafeAreaView>
);
How I can control the top bar for the text apears in a visible zone? Thank you.
The purpose of SafeAreaView is to render content within the safe area
boundaries of a device. It is currently only applicable to iOS devices
with iOS version 11 or later. - SafeAreaView
In your case the SafeAreaView has no effect, but you can pass a marginTop to the view or directly to your text. E.g. :
return (
<SafeAreaView style={{flex: 1, marginTop: 20 }}>
<Text style={styles.principalTitle}>Just a text</Text>
</SafeAreaView>
);
Following Tim reference answer I improved him code.
With React Native you can control status bar height:
import {... , StatusBar} from 'react-native';
return (
<SafeAreaView style={{flex: 1, paddingTop: StatusBar.currentHeight }}>
<Text style={styles.principalTitle}>Just a text</Text>
</SafeAreaView>
);
I prefered padding for conserve Background.
Thank you!
I use the keyboardAvoidingView, to display inputs and used next focus. But, when i click in first input ( print label 1623 - Acidez ), this is hidden. How make show this?
<ReactNative.View key={this.state.selectedTabIndex}>
<ReactNative.ScrollView style={{ height: this.props.styles.height - 40 }}>
<ReactNative.KeyboardAvoidingView
keyboardVerticalOffset={0}
behavior="position"
contentContainerStyle={{ paddingTop: this.state.size }}
>
{this.tabs[this.state.selectedTabIndex].render()}
</ReactNative.KeyboardAvoidingView>
</ReactNative.ScrollView>
</ReactNative.View>
if you increase 'keyboardVerticalOffset' to bigger value like '100' of KeyboardAvoidingView to some bigger amount it would scroll up from keyboard thus avoiding it.I also spent much time in finding the right solution on internet but finally figure it out myself for 'react-native' version '0.50.4'.I got it working like this
<View style={…..}>
<ScrollView>
<KeyboardAvoidingView style={{ flex: 1 }}
keyboardVerticalOffset={100} behavior={"position"}>
</KeyboardAvoidingView>
</ScrollView>
</View>
keyboardVerticalOffset should be the distance between the top of the screen and the top of the KeyboardAvoidingView. If you're using flex, that number is going to be different depending on the size of the device you're viewing the app on.
The simplest approach I have found is to simply wrap the whole page with KeyboardAvoidingView. By making it your top-level wrapper, you will never have to worry about the keyboardVerticalOffset.
Experiment with the three behavior options from there until you get something that works.
What works today for me - on android - was..
<KeyboardAvoidingView
key={2}
keyboardVerticalOffset={0}
behavior={"padding"}
style={{
flex: 1,
overflow: "hidden",
height: "100%",
paddingTop: 0,
marginTop: 0,
borderTopWidth: 0,
}}
windowSize={1}
enabled
>
(...)
</KeyboardAvoidingView>