@raulmax319/react-native-modal

A fully animated and customizable rn-modal made using the animation library Reanimated v2. (project is still in W.I.P) critics and contributions are welcome.

Installation

Compatibility

Modal Version	RN Version
0.5.0	>= 0.62

There are some checks before you start using this library.

• Make sure the react-native version is at least 0.62+ as it uses the Hermes engine.
• Have installed the library react-native-reanimated v2. You can do so by adding it to your project using the command: yarn add react-native-reanimated
• Follow the installation steps for the reanimated v2 by following This link.

yarn add @raulmax319/react-native-modal

or with npm

npm install @raulmax319/react-native-modal

Example with useToggle hook

import Modal, { useToggle } from '@raulmax319/react-native-modal';

const ExampleComponent: React.FC = () => {
  // get the variables the name you want
  const [isModalVisible, toggleModal] = useToggle();

  const ExampleModal = () => (
    <Modal
      isVisible={isModalVisible}
      toggleModal={toggleModal}
      animationIn="ZoomIn"
      animationOut="SlideOutRight"
    >
      <View>
        <Text>HelloWorld!</Text>
      </View>
    </Modal>
  );

  return (
    <>
      {/*
      ...content
      */}
      <ExampleModal />
    </>
  );
};

Props

Name	Type	Default
isVisible	boolean	Required
toggleModal	( ) => void	Required
animationIn	String	'slideInUp'
animationOut	String	'slideOutDown'

Animations In list

  slideInUp,
  slideInDown,
  slideInLeft,
  slideInRight,
  zoomIn,

Animations Out list

  slideOutUp,
  slideOutDown,
  slideOutLeft,
  slideOutRight,
  zoomOut,

TODO list

• Add more animations.
• Implement tests.
• Implement Pan gesture for the swipe feature.
• Add more props to make it more customizable.
• refactor some prop names.
• work on documentation.

Contributing

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

License

MIT