Usage - view

Depending on the navigation setup you have, check the navigation's library documentation for correct way to run some actions when the screen gains/loses focus.

The following example assumes react-navigation is used as a navigation:

import * as React from "react";
import { Button, Modal, ScrollView, TextInput, View } from "react-native";
import { AvoidSoftInputView } from "react-native-avoid-softinput";
import { useFocusEffect } from "@react-navigation/native";

export const ModalExample: React.FC = () => {
  const [ modalVisible, setModalVisible ] = React.useState(false);

  function closeModal() {
    setModalVisible(false);
  }

  function openModal() {
    setModalVisible(true);
  }

  return <View>
    <Button
      onPress={openModal}
      title="Open modal"
    />
    <Modal
      onRequestClose={closeModal}
      visible={modalVisible}
    >
      <View>
        <View>
          <View>
            <Button onPress={closeModal} title="X" />
          </View>
          <AvoidSoftInputView>
            <ScrollView>
              <View>
                <TextInput placeholder="Single line" />
                <TextInput placeholder="Multiline" />
                <Button
                  onPress={closeModal}
                  title="Submit"
                />
              </View>
            </ScrollView>
          </AvoidSoftInputView>
        </View>
      </View>
    </Modal>
  </View>;
};