I have a simple app structure of a View segment, a ScrollView segment, and a View segment, arranged vertically. The last View segment contains a TextInput. I've spent so much time on this, but on iOS, the keyboard behaves fine, and the ScrollView decreases in height while the input View moves up to accomodate the keyboard. On Android, the entire screen pans up, causing the top View to disappear out of the screen. Is there any way to mimic the behavior of the iOS keyboard on Android? I want all three Views to be visible, and the keyboard's space should be given up by the ScrollView which resizes.
Simplified code:
<View>
<SafeAreaView>
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : ''} className={`h-full justify-start flex-col px-5`}>
{Platform.OS === 'android' && (
<View style={{
height: StatusBar.currentHeight
}}></View>
)}
<View className={'flex-row justify-between py-2'}>
<TouchableOpacity className={`px-3 py-3 rounded-3xl`}>
</TouchableOpacity>
<TouchableOpacity className={`px-3 py-3 rounded-3xl`}>
</TouchableOpacity>
</View>
<ScrollView keyboardShouldPersistTaps={'handled'} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} className={`flex-1 mt-2 mb-3 rounded-3xl`} contentContainerStyle={{flexGrow: 1}}>
<View className={`px-5 py-2.5 flex-1 justify-start`}>
<OtherStuff />
</View>
</ScrollView>
<View className={`my-2.5 px-5 py-4 rounded-3xl`}>
<TextInput className={`rounded-3xl w-full text-xl border px-5 py-3 my-4`} />
</View>
</KeyboardAvoidingView>
</SafeAreaView>
</View>
</KeyboardAvoiderProvider>

