admin管理员组文章数量:1336656
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;
本文标签: javascriptHow do I prevent keyboard from pushing overlay view upStack Overflow
版权声明:本文标题:javascript - How do I prevent keyboard from pushing overlay view up? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742249705a2440520.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论