ReactNative : Getting white space between keyboard and comment-box input field

Question

I am getting white space between the keyboard and input box. I have used KeyBoardAvoiding view in my code.

Here is the piece of code:

const [isKeyboardVisible, setKeyboardVisible] = useState(false);
 const [offsetValue, setOffsetValue] = useState(0);
 useEffect(() => {
    const keyboardDidShowListener = Keyboard.addListener("keyboardDidShow", () => {
      setKeyboardVisible(true);
    });
    const keyboardDidHideListener = Keyboard.addListener("keyboardDidHide", () => {
      setKeyboardVisible(false);
    });
    if (appState === "active") {
      isKeyboardVisible && Keyboard.dismiss();
    }
    return () => {
      keyboardDidHideListener.remove();
      keyboardDidShowListener.remove();
    };
  }, []);

useEffect(() => {
    if (isKeyboardVisible) {
      setOffsetValue(0);
    } else {
      setOffsetValue(80);
    }
  }, [isKeyboardVisible]);

 <KeyboardAvoidingView
            behavior={Platform.OS === "ios" ? "padding" : "height"}
            keyboardVerticalOffset={Platform.OS === "ios" ? offsetValue : 0}
          >
            <ScrollView
              contentContainerStyle={styles.scrollViewContainer}
              alwaysBounceVertical={false}
              keyboardShouldPersistTaps={"handled"}
            >
              <View style={styles.chatInputBoxWrapper}>
                <AvyCommentLinearInput
                  inputRef={props.setInputRef}
                  value={props.inputValue}
                  isVideoCaptureEnabled={true}
                  imageUrl={""}
                  onSubmit={(value) => props.onChatSubmit(value)}
                />
              </View>
            </ScrollView>
          </KeyboardAvoidingView>

export default StyleSheet.create({
  scrollViewStyle: {
    marginHorizontal: 16,
    borderRadius: 4,
    marginBottom: 8,
    marginTop: 8,
  },
  chatInputBoxWrapper: {
    ...shadowStyle,
    flex: 1,
  },
  scrollViewContainer: { flexGrow: 1 },
});

Video link of the issue I am facing: https://www.dropbox.com/s/6ydwxhaq06dpfaf/RPReplay_Final1674132226.MP4?dl=0

Any help would be Appreciated!!!

Answer 1

My recommendation - use React Native Avoid SoftInput https://mateusz1913.github.io/react-native-avoid-softinput/

A lot of examples https://github.com/mateusz1913/react-native-avoid-softinput/tree/main/packages/app/src/screens