React Native Sticky Footer Input got covered by Keyboard even using KeyboardAvoidingView - css

Question

I have a basic chat application and when I open the keyboard I want the Sticky Chat Footer to persist at the top of the keyboard but its still being covered even when I use KeyboardAvoidingView.
Here is the image below:
And here is the image when keyboard is open:
Here is my component code below:
<SafeAreaView style={styles.scrollWrapper}>
<KeyboardAvoidingView
style={styles.scrollWrapper}
behavior="height"
keyboardVerticalOffset={headerHeight + 20}
>
<View style={styles.chatBar}>
<IconButton Icon={ButtonAdd} size={32} onPress={() => {}} />
{isKeyboardVisible ? (
<>
<RoundedInput
ref={inputRef}
itemStyle={styles.chatInput}
placeholder="type something here..."
RightComponent={(
<IconButton
Icon={EmojiIcon}
size={normalize(16.5)}
onPress={() => {}}
/>
)}
/>
<TouchableOpacity
activeOpacity={0.4}
onPress={handleKeyboardVisibility}
>
<Icon
style={styles.icon}
name="send-circle"
size={normalize(34)}
color="#F48C2D"
/>
</TouchableOpacity>
</>
) : (
<>
<IconButton
Icon={KeyboardIcon}
size={32}
onPress={handleKeyboardVisibility}
/>
<IconButton Icon={ChatCamera} size={32} onPress={() => {}} />
<IconButton Icon={GalleryIcon} size={32} onPress={() => {}} />
<IconButton Icon={GifIcon} size={32} onPress={() => {}} />
<IconButton Icon={LocationIcon} size={32} onPress={() => {}} />
</>
)}
</View>
</KeyboardAvoidingView>
</SafeAreaView>
and here is my style
const styles = StyleSheet.create({
header: {
...headerStyles.homeHeaderWrapper,
backgroundColor: '#F9F9F9',
borderBottomColor: '#D0D1D1',
},
scrollWrapper: {
flexGrow: 1,
backgroundColor: 'white',
},
dateWrapper: {
marginTop: normalize(12),
...helpers.center,
},
dateTxt: {
...fontHelper(10, typographyFonts.openSansRegular, '#212121', 0).font,
},
messageWrapper: {
flexDirection: 'row',
padding: normalize(12),
},
image: {
height: normalize(33),
width: normalize(33),
overflow: 'hidden',
borderRadius: 100,
alignSelf: 'center',
marginTop: normalize(12),
},
chatBubble: {
marginLeft: normalize(8),
maxWidth: '75%',
// height: normalize(77),
backgroundColor: '#F2F5F8',
borderRadius: 14,
// ...helpers.center,
padding: normalize(12),
marginVertical: normalize(5),
},
chatMsg: {
...fontHelper(13, typographyFonts.openSansRegular, '#212121', 0).font,
},
chatBar: {
height: normalize(65),
shadowOffset: { width: normalize(0), height: normalize(-1.25) },
// borderWidth: 5,
// borderBottomColor: 'red',
borderTopWidth: normalize(0.3),
borderTopColor: colors.alternative,
shadowColor: 'rgba(186,190,214,0.70)',
shadowOpacity: normalize(0.2),
shadowRadius: 2,
elevation: 5,
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-around',
zIndex: 999,
},
chatInput: {
height: normalize(35),
backgroundColor: '#FFFFFF',
borderColor: '#F48C2D',
borderWidth: 1,
width: '70%',
},
icon: {
width: normalize(34),
height: normalize(34),
},
});
I also already tried using react-native-keyboard-aware-scrollview but it didn't help as well.
Appreciate if someone could help.

Answer 1

I got the same issue.
Try this workaround.
You need to position your component on the top of the keyboard,
but it will depend on the size of device keyboard
import { Keyboard, Animated } from 'react-native'
...
useEffect(() => {
Keyboard.addListener('keyboardWillShow', _keyboardWillShow);
Keyboard.addListener('keyboardWillHide', _keyboardWillHide);
return () => {
Keyboard.removeListener('keyboardWillShow', _keyboardWillShow);
Keyboard.removeListener('keyboardWillHide', _keyboardWillHide);
}
}, []);
const _keyboardWillShow = (event) => {
const height = event.endCoordinates.height;
posComponent(height);
};
const _keyboardWillHide = (event) => {
posComponent(0);
};
const animateButton = (value) => {
Animated.spring(your_variable, {
toValue: value,
tension: 50,
friction: 10,
}).start();
}
then on your view component chatbar
<Animated.View style={{
...styles.chatBar,
...(Platform.OS === 'ios' && { bottom: your_variable })}>
...
</Animated.View>