'React-native White square when keyboard dismiss
I could use a little help here. I made a form to register a trip, it works, that's cool. But when I want to use the keyboard and then dismiss it, it leaves a white space on the bottom of page (as you can see next)
I don't really get where it goes wrong... I thought maybe it was ondropdownshow or ondropdownclose but it doesn't seem to be there... I'm sorry if it's obvious for you but I don't know what to try.
Thanks for your time and help.
return (
<ImageBackground
source={require("../../assets/images/background.jpg")}
style={styles.backgroundImage}
>
<Header
backgroundImage={require("../../assets/images/bg-header.png")}
centerComponent={{
text: i18n.t("tripsform.title").toUpperCase(),
style: styles.headerComponentStyle
}}
containerStyle={styles.headerContainerStyle}
statusBarProps={{ barStyle: "light-content" }}
/>
<View style={styles.container}>
<View style={styles.myForm}>
<View style={[styles.container, styles.autocompletesContainer]}>
<SafeAreaView
style={{
flexDirection: "row",
marginVertical: 10,
marginHorizontal: 20
}}
>
{autocompletes.map(() => (
<Autocomplete
key={shortid.generate()}
containerStyle={{}}
inputStyle={{
borderColor: "transparent",
borderBottomColor: "#FFF",
width: 250,
fontFamily: "FunctionLH"
}}
placeholder={i18n.t("tripsform.action.departure")}
placeholderColor="#FFF"
scrollToInput={ev => {}}
handleSelectItem={(item, id) =>
this.handleSelectItemStart(item, id)
}
// onDropdownClose={() => onDropdownClose()}
onDropdownShow={() => onDropdownShow()}
pickerStyle={{ backgroundColor: "transparent" }}
fetchDataUrl={apiUrlWeeCoop+this.state.form.query_start}
initialValue={this.state.form.query_start}
minimumCharactersCount={2}
highlightText
valueExtractor={item => item.name}
rightContent
rightTextExtractor={item => item.properties}
/>
))}
<DatePicker
date={this.state.datetimeS}
mode="datetime"
format="YYYY-MM-DD HH:mm"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
hideText={true}
showIcon={true}
onChange={datetime => {
this.setDateTimeS(datetime);
}}
/>
</SafeAreaView>
<SafeAreaView
style={{
flexDirection: "row",
marginVertical: 10,
marginHorizontal: 20
}}
>
{autocompletes.map(() => (
<Autocomplete
key={shortid.generate()}
containerStyle={{}}
inputStyle={{
borderColor: "transparent",
borderBottomColor: "#FFF",
width: 250,
fontFamily: "FunctionLH"
}}
placeholder={i18n.t("tripsform.action.arrival")}
placeholderColor="#FFF"
scrollToInput={ev => {}}
handleSelectItem={(item, id) =>
this.handleSelectItemArrival(item, id)
}
onChange={() => onTripChange()}
onDropdownClose={() => onDropdownClose()}
onDropdownShow={() => onDropdownShow()}
pickerStyle={{ backgroundColor: "transparent" }}
fetchDataUrl={apiUrlWeeCoop+this.state.form.query_arrival}
initialValue={this.state.form.query_arrival}
minimumCharactersCount={2}
highlightText
valueExtractor={item => item.name}
rightContent
rightTextExtractor={item => item.properties}
/>
))}
<DatePicker
date={this.state.datetimeA}
mode="datetime"
format="YYYY-MM-DD HH:mm"
hideText={true}
confirmBtnText="Confirm"
cancelBtnText="Cancel"
showIcon={true}
onChange={datetime => {
this.setDateTimeA(datetime);
console.log("datetimeA");
}}
/>
</SafeAreaView>
</View>
<View style={styles.collapseScrollView}>
<TouchableOpacity onPress={this.toggleExpanded}>
<View style={styles.buttonView2}>
<View style={styles.touchable2}>
<View style={styles.view2}>
<Text style={styles.textimg2}>
{i18n.t("tripsform.action.plus")}
</Text>
</View>
<Image
source={require("../../assets/images/btn-background.png")}
style={styles.tripsimg2}
/>
</View>
</View>
</TouchableOpacity>
<Collapsible collapsed={this.state.collapsed} align="center">
<View style={styles.content}>
<TextInput
style={styles.input}
placeholder={i18n.t("tripsform.item.family")}
autoCapitalize="none"
placeholderTextColor="#fff"
onChangeText={val => this.onChangeText("family", val)}
/>
{/*<TextInput
style={styles.input}
placeholder={i18n.t("tripsform.item.product")}
autoCapitalize="none"
placeholderTextColor="#fff"
onChangeText={val => this.onChangeText("product", val)}
/>*/}
<TextInput
style={styles.input}
placeholder={i18n.t("tripsform.item.reference")}
autoCapitalize="none"
type="string"
placeholderTextColor="#fff"
onChangeText={val =>
this.onChangeText("reference", val)
}
/>
<TextInput
style={styles.input}
placeholder="Description"
autoCapitalize="none"
type="string"
placeholderTextColor="#fff"
onChangeText={val => this.onChangeText("description", val)}
/>
<TextInput
style={styles.input}
placeholder={i18n.t("tripsform.item.weight")}
autoCapitalize="none"
keyboardType = 'numeric'
placeholderTextColor="#fff"
onChangeText={val => this.onChangeText("weight", val)}
/>
{/*<TextInput
style={styles.input}
placeholder={i18n.t("tripsform.item.packing")}
autoCapitalize="none"
placeholderTextColor="#fff"
onChangeText={val => this.onChangeText("packing", val)}
/>*/}
<TextInput
style={styles.input}
placeholder={i18n.t("tripsform.item.dist")}
autoCapitalize="none"
placeholderTextColor="#fff"
onChangeText={val => this.onChangeText("dist", val)}
/>
<TextInput
style={styles.input}
placeholder={i18n.t("tripsform.item.type")}
autoCapitalize="none"
placeholderTextColor="#fff"
onChangeText={val => this.onChangeText("type", val)}
/>
<TextInput
style={styles.input}
placeholder={i18n.t("tripsform.item.plane")}
autoCapitalize="none"
placeholderTextColor="#fff"
onChangeText={val => this.onChangeText("plane", val)}
/>
<TextInput
style={styles.input}
placeholder={i18n.t("tripsform.item.sit")}
autoCapitalize="none"
placeholderTextColor="#fff"
onChangeText={val => this.onChangeText("sit", val)}
/>
<TextInput
style={styles.input}
placeholder={i18n.t("tripsform.item.price")}
autoCapitalize="none"
keyboardType = 'numeric'
placeholderTextColor="#fff"
onChangeText={val => this.onChangeText("price", val)}
/>
<TextInput
style={styles.input}
placeholder={i18n.t("tripsform.item.company")}
autoCapitalize="none"
placeholderTextColor="#fff"
onChangeText={val => this.onChangeText("company", val)}
/>
<TextInput
style={styles.input}
placeholder={i18n.t("tripsform.item.visit")}
autoCapitalize="none"
type="string"
placeholderTextColor="#fff"
onChangeText={val => this.onChangeText("visit", val)}
/>
</View>
</Collapsible>
</View>
</View>
{this.state.form_success == true ? (
<Text style={[styles.formMessage, styles.formMessageSuccess]}>
Succesfully...
</Text>
) : null}
{this.state.form_error.length > 0 ? (
<Text style={[styles.formMessage, styles.formMessageError]}>
{this.state.form_error}
</Text>
) : null}
<View style={styles.container}>
<TouchableOpacity
style={styles.touchable}
onPress={this.handleSubmit}
>
<View style={styles.view}>
<Text style={styles.textimg}>
{i18n.t("tripsform.action.add")}
</Text>
</View>
<Image
source={require("../../assets/images/btn-background.png")}
style={styles.tripsimg}
/>
</TouchableOpacity>
<TouchableOpacity
style={styles.touchable}
onPress={() => this.props.navigation.navigate("MyTrips")}
>
<View style={styles.view}>
<Text style={styles.textimg}>
{i18n.t("tripsform.action.back")}
</Text>
</View>
<Image
source={require("../../assets/images/btn-background.png")}
style={styles.tripsimg}
/>
</TouchableOpacity>
</View>
</View>
</ImageBackground>
);
}
}
export default withKeyboardAwareScrollView(Options);
Solution 1:[1]
I removed export default withKeyboardAwareScrollView(Options) and the bug is solved.
Solution 2:[2]
I had the same problem when using Expo. This is how I fixed it. If you are using expo
in your app.json add "android": { "softwareKeyboardLayoutMode": "pan", ...(other properties) }
This is where I found the solution github issue #2839
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Kimako |
| Solution 2 | Kevin Caster |