@nguyentc21/react-native-modal-view

React native Modal view

Installation

yarn add @nguyentc21/react-native-modal-view

Usage

In your root-level component.

import ModalView from '@nguyentc21/react-native-modal-view';
// ...
const App = () => {
  return (
    // ...
    // This will contain all your nested modals
    <ModalView // should be on bottom
      visible={true}
      // containerStyle={{}}
    />
  );
};
// ...

Other View

// ...
import { NestedModal, Modal } from '@nguyentc21/react-native-modal-view';
// ...

const ModalContent = () => {
  const [count, setCount] = useState(0);
  return (
    <>
      <Text>
        Otherwise, change Inside-Count will make modal content re-render, but not NiceView
        Inside-Count: {count}
      </Text>
      <View>
        <Pressable
          onPress={() => { setCount((_count) => _count + 1) }}
        >
          Inside-Count + 1
        </Pressable>
      </View>
    </>
  )
}

const NiceView = (props: Props) => {
  const [nestedModalVisible, setNestedModalVisible] = useState(false);
  const [customModalVisible, setCustomModalVisible] = useState(false);
  const [count, setCount] = useState(0);
  // ...
  return (
    // ...
    <NestedModal
      visible={nestedModalVisible}
      close={() => { setNestedModalVisible(false )}}
      containerStyle={{ backgroundColor: 'grey', padding: 50 }}
      // extraData={dynamicValue} // change value will help this modal re-render
    >
      <Text>
        This is your app modal
      <Text>
      <Text>
        Change Outside-Count will make NiceView re-render, but not the modal content
        Outside-Count: {count}
      </Text>
      <View>
        <Pressable
          onPress={() => { setCount((_count) => _count + 1) }}
        >
          Outside-Count + 1
        </Pressable>
      </View>
      <ModalContent />
    </NestedModal>

    <Modal
      // modalType={"slide"}
      visible={customModalVisible}
      close={() => { setCustomModalVisible(false )}}
      containerStyle={{ backgroundColor: 'blue', padding: 10 }}
    >
      <Text>
        This is your inside-component modal
      <Text>
    </Modal>
    // ...
  )
}

Props

| Name | Type | Default | description | |----------------|-------------------------------------------|------------------------------------|-------------------------------------------------------------------------------------------| | modalType | 'fade' | 'slide' | 'fade' | | | visible | boolean | REQUIRED | | | close | () => void | | Function help close modal. Called when the backdrop is pressed and "blurToClose" is true. | | blurToClose | boolean | true | true: On press backdrop will call the "close" function. | | maxHeight | ViewStyle['maxHeight'] | Fade modal: 60%; Slide modal: 90%; | | | onOpen | (id?: string) => void | | Called when the modal start show animation begins | | onDidOpen | (id?: string) => void | | Called when the modal is completely visible | | onClose | (id?: string) => void | | Called when the modal is completely hidden | | children | ReactNode | | Your modal content | | containerStyle | ViewStyle | | | | backdropStyle | ViewStyle | | |

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library