I have a simple screen with a video player and a chat box overlay at the bottom (chatbox position absolute).
Here's a simple example of what I am doing.
Code:
<View style={{flex: 1}}>
<ScrollView>
<Video style={{ height: Dimensions.get('window').height }} />
</ScrollView>
<ChatBox />
</View>
I use Scrollview to avoid video shrinking when the keyboard appears on android.
ChatBox:
<View style={{
position: 'absolute',
bottom: 0,
}}>
<FlatList
data={messages}
keyExtractor={(_, index) => index.toString()}
renderItem={({item}) => <Message item={item} />}
/>
<TextInput />
</View>
When I wrap ChatBox with KeyboardAvoidingView it doesn't work on ios, android is fine.
ChatBox TextInput remains under keyboard on ios.
I tried making KeyboardAvoidingView to absolutely positioned then adding behavior='padding', it didn't work also.
<KeyboardAvoidingView style={{
position: 'absolute',
bottom: 0,
}} behavior='padding' >
<FlatList
data={messages}
keyExtractor={(_, index) => index.toString()}
renderItem={({item}) => <Message item={item} />}
/>
<TextInput />
</KeyboardAvoidingView>
Sorry for my bad English and Thanks in advance.