React Native KeyboardAvoidingView on absolute positioned component not working on ios

Viewed 475

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.

0 Answers
Related