I have a long form, longer than a screen height, so it needs a scroll view.When focusing on a TextInput, I want the content to move so it's not behind the keyboard.
I managed to handle this on iOS using react-native-keyboard-aware-scroll-view package.But for android, I can't get over the native behavior, which is almost ok, the problem is that the header gets out of the screen.
Please note that I'm using expo, so for android the windowSoftInputMode is set to adjustPan in AndroidManifest.xml and I can't change it.
Look here for the visual on iOS and Android
I tried to set enableOnAndroid:true as a prop of react-native-keyboard-aware-scroll-view but nothing changes.
I tried many, many things with ```KeyboardAvoidingView````
Here is my code :
import React from 'react'import { View, Text, TextInput, ScrollView, StyleSheet } from 'react-native'import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'const TextInputPage = () => { const textInputArray = [1, 2, 3, 4, 5, 6, 7, 8] return (<View style={styles.screen}><View style={styles.header}><Text bold={true}>HEADER</Text></View><KeyboardAwareScrollView style={styles.container} extraScrollHeight={85} enableOnAndroid={true}><ScrollView contentContainerStyle={styles.content}> {textInputArray.map((inputIndex) => (<View key={inputIndex} style={{ ...styles.item }}><View style={styles.label}><Text style={styles.labelText}>Text Input {inputIndex}</Text></View><TextInput style={styles.textInput} multiline={true} value={'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.' } /></View> ))}</ScrollView></KeyboardAwareScrollView></View> )}const styles = StyleSheet.create({ screen: { flex: 1, }, header: { height: 98, justifyContent: 'center', alignItems: 'center', backgroundColor: 'cornflowerblue', paddingTop: 44, zIndex: 2, }, container: { flex: 1, paddingTop: 10, paddingHorizontal: 10, }, content: { //flex: 1, //justifyContent: 'flex-end', }, item: { marginBottom: 20, }, label: { alignItems: 'center', marginBottom: 5, }, labelText: { fontSize: 12, color: 'deepskyblue', }, textInput: { borderColor: 'grey', borderWidth: 1, padding: 5, },})export default TextInputPage
- I tried to setup a snack to share but it doesn't behave in the same way, so it is useless
