Reports

-- Edit -- statusBarTranslucent: {true} simply makes the native status bar translucent. It does not prevent the view from being pushed by the keyboard.

The other solutions (KeyboardAwareScrollView and avoidKeyboard: {false} ) did not work for me, but this fixed it for my situation:

import { Keyboard } from 'react-native';
// this code is from https://docs.expo.dev/guides/keyboard-handling/
export const ReactiveModal ...
  const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);

    useEffect(() => {
      const showSubscription = Keyboard.addListener('keyboardDidShow', handleKeyboardShow);
      const hideSubscription = Keyboard.addListener('keyboardDidHide', handleKeyboardHide);

      return () => {
        showSubscription.remove();
      };
    }, []);

    const handleKeyboardShow = event => {
      setIsKeyboardVisible(true);
    };

    const handleKeyboardHide = event => {
      setIsKeyboardVisible(false);
    };
// end of code from expo docs
return (
<Modal
      isVisible={isVisible}
      swipeDirection={['down']}
      style= {isKeyboardVisible ? styles.modalEditing : styles.modal} // this is important
      propagateSwipe
      statusBarTranslucent={true}
>
//more code...
</Modal>
)


const styles = StyleSheet.create({
  modal: {
    justifyContent: 'flex-end',
    margin: 0,
  },
  modalEditing: {
      justifyContent: 'flex-start',
      margin: 0,
    },
//more styling and export ReactiveModal

This solution adds a dynamic layout to the modal depending on whether the keyboard is open. In my situation, modal does not take up the entire page but rather about 75% of the bottom of the screen when it's open.

flex-end forces the modal to be at the bottom of the view and flex-startforces it to be at the top of the view.

This is the best solution I could find as the keyboard kept pushing the content up in the modal despite setting softwareKeyboardLayoutMode: "pan"

79574389