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

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>