npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-modal-handler

v0.0.5

Published

Modal handler in react native

Downloads

8

Readme

react-native-modal-handler

Modal Handler Library in react-native : No Mess, No State, No Duplicate.

npm version

react-native-modal-handler is a library which is based on eumji-modal-pattern.

HOW TO USE

1. npm install

$ npm install --save react-native-modal-handler

2. import withModal

import { withModal } from "react-native-modal-handler";

3. export withModal

If the name of your component is YourComponents.js

export default withModal(Yourcomponent);

If you are using another higher-order-component like the connect function of redux

export default connect(..)(withModal(YourComponent));

4. Making Modal

I recommend to handle multiple modal components by making modals directory.

  • src
    • components
      • modals
        • FirstModal.js
        • SecondModal.js
        • ThirdModal.js

Basically, Modal has the structure like below.

import Modal from "react-native-modal";

export default FirstModal = ({ isVisible, closeModal, ...otherProps }) => {
  return (
    <Modal isVisible={isVisible}>
      <View style={styles.modal}>

        <TouchableOpacity onPress={() => closeModal("firstModal")}>
          <Text>Close Modal</Text>
        </TouchableOpacity>

        <View style={styles.main}>
          <TouchableOpacity onPress={() => otherProps.sayHello()}>
            <Text>FirstModal and sayHello</Text>
          </TouchableOpacity>
        </View>

      </View>
    </Modal>
  );
};

I used react-native-modal and recommend that you use this library too. Because react-native-modal has many features based on pure Modal in react-native and is very stable.

You can make Modal component regardless of that the component is stateless or statefull.

Since isVisible and closeModal props are automatically passed to your modal component, You should define those as props.

If you want to get other props in addition two props above, You can do it by using ...otherProps.

5. Making modals variable and Rendering Modal Components

react-native-modal-handler adds showModal and closeModal props in your modal components by passing modals variable that will be defined below to the inner of library.

So, You should define which modal you will use in YourComponent.js.

// YourComponent.js

import FirstModal from "./modals/FirstModal";
import SecondModal from "./modals/SecondModal";
import ThirdModal from "./modals/ThirdModal";

const modals = {
  firstModal: <FirstModal />,
  SecondModal: <SecondModal />,
  ThirdModal: <ThirdModal />
};

I recommend that you use modals as the name of that variable for consistency.

The keys of the modals variable are very important because they are used to open and close modal components.

To maintain uniformity, it is recommended that the names be created with the camelCase technique of the name of the modal component.

Next, You will pass the modals variable to withModal as property.

this.props.renderModal(modals);

The following is a complete example of this part.

import FirstModal from "./modals/FirstModal";
import SecondModal from "./modals/SecondModal";
import ThirdModal from "./modals/ThirdModal";

render() {
  const modals = {
    firstModal: <FirstModal />,
    SecondModal: <SecondModal />,
    ThirdModal: <ThirdModal />
  };
  return (
    this.props.renderModal(modals);
  );
}

6. How to show and close modal

  • showModal
// want to show FirstModal.js in YourComponent.js

this.props.showModal("firstModal");
  • closeModal
// want to close FirstModal.js in YourComponents.js

this.props.closeModal("firstModal");
// want to close FirstModal.js in FirstModal.js

<TouchableOpacity onPress={() => closeModal("firstModal")}>
  <Text>Close Modal</Text>
</TouchableOpacity>

7. Full Examples

example

Contributions

Pull Request and Issue are open at any time.

If you have ideas to improve react-native-modal-handler, please do not hesitate to join us.

Translations

한국어