KeyboardAvoidingView not working as expected on IOS - ios

Question

I am using keyboardavoidingview in the following scroll to move up keyboard so that the submit button is always visible. But it seems to not work on ios properly, despite setting the property behavior to padding, please help me sort this out.
I have already referred to numerous posts on SO and Github but since the use case varies, nothing has been able to help me at all.
As the official documentation for keyboardavoidingview also says to add behaviour, so i did.
But the view is not shifting up, also i cannot use jutifycontent-center since i need the view to start from top only.
refer
///Code
render() {
return (
<SafeAreaView style={{flex:1}}>
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : null}
style={styles.container}
keyboardVerticalOffset={Platform.select({ios: 0, android: Header.HEIGHT + 20})}
>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View>
<StatusBar backgroundColor="#7c8500" barStyle="light-content" />
<View>
<Text style={styles.holdertext}>Name:</Text>
</View>
<TextInput
style={styles.inputBox}
underlineColorAndroid="rgba(0,0,0,0)"
value={this.state.username}
editable={true}
placeholderTextColor="rgba(0,0,0,0.3)"
onChangeText={value => this.setState({ username: value })}
/>
<View style={styles.bottomView}>
<Text style={styles.holdertext}>Phone:</Text>
</View>
<TextInput
style={styles.inputBox}
underlineColorAndroid="rgba(0,0,0,0)"
value={this.state.phonenumber}
placeholder="Phone"
placeholderTextColor="rgba(0,0,0,0.3)"
maxLength={10}
keyboardType="phone-pad"
clearButtonMode="always"
onChangeText={value => this.setState({ phonenumber: value })}
/>
<View>
<Text style={styles.holdertext}>Comment:</Text>
</View>
<TextInput
style={styles.commentbox}
returnKeyType="next"
underlineColorAndroid="rgba(0,0,0,0)"
value={this.state.comment}
placeholder="Comment"
placeholderTextColor="rgba(0,0,0,0.3)"
textAlign={"left"}
numberOfLines={10}
multiline={true}
clearButtonMode="always"
onChangeText={value => this.setState({ comment: value })}
/>
<TouchableOpacity style={styles.button} onPress={this.callFun}>
<Text style={styles.buttonText}>SUBMIT</Text>
</TouchableOpacity>
</View>
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#ffffff",
},
holdertext: {
fontSize: 16,
fontWeight: "bold",
marginTop: 5,
marginLeft: 8,
textAlign: "left"
},
inputBox: {
width: null,
height: 40,
backgroundColor: "rgba(229,229,229,0.3)",
color: "#000000",
paddingVertical: 10,
paddingLeft: 10,
margin: 10,
marginLeft: 10,
fontSize: 18,
borderWidth: 0.3,
borderRadius: 20,
borderColor: "rgba(175,180,43,0.8)"
},
commentbox: {
width: null,
height:100,
backgroundColor: "rgba(229,229,229,0.3)",
fontSize: 12,
color: "#000000",
paddingVertical: 10,
paddingLeft: 10,
margin: 10,
marginLeft: 10,
fontSize: 18,
borderWidth: 0.3,
borderRadius: 20,
textAlignVertical: "top",
borderColor: "rgba(175,180,43,0.8)"
},
button: {
width: null,
backgroundColor: "#1c313a",
borderRadius: 25,
margin: 15,
paddingVertical: 15
},
buttonText: {
fontSize: 16,
fontWeight: "500",
color: "#ffffff",
textAlign: "center"
}
});

Answer 1

Forget about the native component, it is very buggy.
Use this one: https://github.com/APSL/react-native-keyboard-aware-scroll-view