键盘识别滚动视图在Android上不起作用

Question

I want to use react-native-keyboard-aware-scroll-view (Github :

It works very well on iOS but on Android, I have this problem :

All my view is in this special scroll view and it works on iOS so I don't know why...

There is my code :

<KeyboardAwareScrollView  contentContainerStyle={{flex : 1}} scrollEnabled={false}>
            <StatusBar translucent={true} backgroundColor={"rgba(0, 0, 0, 0)" } barStyle="light-content" />
            <ImageBackground style={{flex : 1}} source={require("../../../resources/background.jpeg")}>
            <LinearGradient style={styles.mainstyle} colors={['rgba(255, 117, 0, 0.9)', 'rgba(255, 0, 48, 0.9)']} start={{x: 0.5, y: 1}} end={{x: 0.75, y: 0.5}}>

                <Text style={styles.logo}>TOTO</Text>


                <View style={{width : "100%", height : "10%", alignItems: "center", flexDirection: "row", marginTop : "35%", justifyContent:"center"}}>
                    <Image style={{width : "10%", height : "50%", marginTop : "5%", marginRight: "6%"}} source={require("../../../resources/whiteUser.png")}/>
                    <TextInput
                        style={{width: "70%", height : "60%", borderBottomWidth: 1, borderBottomColor : "white", }}

                        placeholder={"Pseudo ou e-mail"}
                        placeholderTextColor={"#fff"}
                        keyboardType={'email-address'}
                        autoCapitalize={'none'}
                        underlineColorAndroid='rgba(0,0,0,0)'

                        spellCheck={false}
                        autoCorrect={false}

                        onChangeText={(text) => {this.loginChanged(text)}}/>
                </View>


                <View style={{width : "100%", height : "10%", alignItems: "center", flexDirection: "row", marginTop : "5%", justifyContent:"center"}}>

                    <Image style={{width : "10%", height : "55%", marginRight: "6%"}} source={require("../../../resources/whiteLock.png")}/>

                    <TextInput
                        secureTextEntry={true}
                        style={{width: "70%", height : "60%", borderBottomWidth: 1, borderBottomColor : "white"}}
                        placeholder={"Mot de passe"}
                        placeholderTextColor={"#fff"}
                        autoCapitalize={'none'}
                        underlineColorAndroid='rgba(0,0,0,0)'
                        onChangeText={(text) => {this.passwordChanged(text)}}/>
                </View>
            <TouchableOpacity onPress={() => {this.sendLoginData()}} style={styles.whiteButton}>
                <Text style={{textAlign:"center", fontSize:25, color:"#FF0030"}}>Connexion</Text>
            </TouchableOpacity>
            </LinearGradient>

            </ImageBackground>
        </KeyboardAwareScrollView>

And all my stylesheet :

const styles = StyleSheet.create({
mainstyle: {
    flex:1,
    flexDirection: 'column',
    alignItems: 'center',
    backgroundColor : "rgba(0, 0, 0, 0)"
},
whiteButton : {
    borderWidth:1,
    marginTop: "3%",
    backgroundColor:"white",
    width:"80%",height:"8%",
    borderRadius : 30,
    borderColor:"white",
    marginBottom:10,
    overflow: "hidden",
    padding : 4
},
logo : {
    height : "7%",
    marginTop : "40%",
    fontSize: 40,
    color : "white",
    fontFamily : "Bjorn"

}
}

)

I was thinking that maybe it's my stylesheet or my way to use containers but it works perfectly on iOS so I don't have a clue

Answer 1

I had some problems using the library in Android. I solved it by setting windowSoftInputMode to adjustPan in AndroidManifest.xml .

For more info about the accepted values for windowSoftInputMode check the docs .