I don't want the keyboard to push the view up when typing. There's enough space for the keyboard to not push the overlay but it's still doing it. I've tried using keyboardavoidingview positioning and padding in and outside of the overlay but no luck.
render() {
return (
<Overlay
isVisible={this.state.isVisible}
width="auto"
height="auto"
overlayStyle={{ width: "90%", height: "50%", marginBottom: "70%" }}
>
<View>
<Text>Schedule</Text>
<TextInput
label="Event"
style={{ width: "95%", margin: "3%" }}
theme={{ colors: { primary: Themes.primaryTheme } }}
/>
<TextInput
label="Date & Time"
style={{ width: "95%", margin: "3%" }}
theme={{ colors: { primary: Themes.primaryTheme } }}
/>
<TextInput
label="Location"
style={{ width: "95%", margin: "3%" }}
theme={{ colors: { primary: Themes.primaryTheme } }}
/>
<View style={{ flexDirection: "row" }}>
<Button
mode="text"
style={{ width: "40%", margin: "3%" }}
onPress={() => this.setState({ isVisible: false })}
>
Cancel
</Button>
<Button
mode="contained"
style={{ width: "40%", margin: "3%" }}
onPress={() => this.setState({ isVisible: false })}
>
Create
</Button>
</View>
</View>
</Overlay>
);
}
I don't want the keyboard to push the view up when typing. There's enough space for the keyboard to not push the overlay but it's still doing it. I've tried using keyboardavoidingview positioning and padding in and outside of the overlay but no luck.
render() {
return (
<Overlay
isVisible={this.state.isVisible}
width="auto"
height="auto"
overlayStyle={{ width: "90%", height: "50%", marginBottom: "70%" }}
>
<View>
<Text>Schedule</Text>
<TextInput
label="Event"
style={{ width: "95%", margin: "3%" }}
theme={{ colors: { primary: Themes.primaryTheme } }}
/>
<TextInput
label="Date & Time"
style={{ width: "95%", margin: "3%" }}
theme={{ colors: { primary: Themes.primaryTheme } }}
/>
<TextInput
label="Location"
style={{ width: "95%", margin: "3%" }}
theme={{ colors: { primary: Themes.primaryTheme } }}
/>
<View style={{ flexDirection: "row" }}>
<Button
mode="text"
style={{ width: "40%", margin: "3%" }}
onPress={() => this.setState({ isVisible: false })}
>
Cancel
</Button>
<Button
mode="contained"
style={{ width: "40%", margin: "3%" }}
onPress={() => this.setState({ isVisible: false })}
>
Create
</Button>
</View>
</View>
</Overlay>
);
}
Share Improve this question edited Dec 1, 2019 at 5:09 Wes asked Dec 1, 2019 at 4:22 WesWes 1,9452 gold badges19 silver badges33 bronze badges 3
-
1
There is weird behaviour of
keyboardavoidingview
in android, you can create a customkeyboardavoidingview
and use a simpleView
for android. – Pooya Haratian Commented Dec 1, 2019 at 4:53 - @PooyaHaratian How would I do that? Would it be more of a hassle? – Wes Commented Dec 1, 2019 at 4:56
-
Yeah, I always have some trouble with keyboard stuff. I'm not sure if
Overlay
usesKeyboardAvoidingView
inside or not (if it has I guess you should forget about it). If not, you can try check device os, and useKeyboardAvoiding
for ios, and useView
for android. or just try to find a proper behavior for each of them. The main problem is that they don't work similar in each os. – Pooya Haratian Commented Dec 1, 2019 at 5:03
2 Answers
Reset to default 4My solution to this problem :
import React , {Component} from 'react';
import {View , Dimensions,ScrollView} from 'react-native';
const windowHeight = Dimensions.get('window').height;
export default class Items extends Component {
render(){
return(
<View style={{flex:1}}>
<ScrollView style={{flex:1}}>
<View style={{width:'100%', height:windowHeight }}>
/*Every thing inside this will shift up with out changing style */
</View>
</ScrollView>
</View>
)
}
}
import {KeyboardAvoidingView} from 'react-native'
<KeyboardAvoidingView style={styles.container}
behavior={Platform.OS == "ios" ? "padding" : "height"} enabled={false}>
use it at the top of you render();
add prop enable={false} to it;
and behavior like so;