Platform-Agnostic Support

[enaluz]

First of all, this is an amazing library. I love the state management rationale behind this, and I think all modal state should be handled this way.

One thing I wish this library did have is web support. In the spirit of React (with React being a platform-agnostic language for building UIs), it would be really cool to get web support for this. There doesn't seem to be many native dependencies here.

Can we abstract this out to be mostly platform agnostic? How can I help with this effort?

[CharlesMangwa]

Hey @enaluz! First and foremost: happy new year and thanks a lot for the kind words, very much appreciated!

You stand completely right in your statement about React's spirit, but unfortunately, we're a little bit biased at colorfy in that regard. If you've been through the documentation, you may have spotted that this library was created to fix a problem we were facing, and that's exactly were the biased part comes into play. We're mainly working on mobile apps so there's no prerogative for us to invest in web support for now as we won't be actively using it, debugging it, adding new features, etc by being our own primary testers.

That being said, your help would be very much appreciated if you feel like you could undertake this task. I just very briefly went through the code and the non-exhaustive list of tasks I found would require us to:

• Switch all imports from react-native to react-native-web and hope we won't be missing anything (never used the later myself so I can't really tell)
• Check that all others native libraries we use are web compatible (react-native-gesture-handler & react-native-reanimated [we'll soon implement] should be and I think that's about it)
• Setup an ES module bundler to get proper UMD, CJS, ESM for the web (I had some previous experience in this matter where Rollup came out as the easiest tool for the job, would consider going for it again)

And I believe that should be it. There might be some unforeseen blockers or steps I forgot as it's been a while since I've published a library for the web, so feel free to add to this list. Let me know if you'd be interested in working on this, even for a small aspect, your contribution would be more than welcome!

[jakobo]

FWIW, I just dropped this into an Expo 40 app and it worked with minor modifications for ios/android/web. It appears that all of the peerDeps are supported. As of 2.0, reanimated is also web ready. 🥳

Expo

• react-native-gesture-handler needs to be upgraded to ^1.9.0 ref. You may need to eject out of expo. It's likely in March the dependency will be upgraded as part of Expo 41.

Bare app w/ React Native Web

Nada!

Integration Steps

To make modalfy work on web, you'll want to create a wrapper for the provider that introduces a view. The following wrapper creates the "fixed" view for the ModalProvider. There's very little fancy stuff going on here. Since modalfy uses a translateY, we need to disable overflow at the level we introduce the modal provider. This could probably be put in modalfy's provider, but until then this is a trivial workaround.

import { View } from "react-native";
import { ModalProvider, createModalStack } from "react-native-modalfy";

export const Provider = (props) => (
  <View style={{ overflow: "hidden", height: "100vh", width: "100vw" }}>
    <ModalProvider stack={stack} {...props} />
  </View>
);

[CharlesMangwa]

Hey @jakobo! Thanks so much for the very detailed comment!

It looks like it's gonna be less cumbersome than I initially thought 😄 I'm going to implement the wrapper change you mentioned and set up a module bundler for the Web. We'll release a new version with just those changes and see how it works for people.

That being said, it's good to know about the RNGH 1.9.0 issue! Based on our current workload at colorfy, I'd say the next version would have been out during March anyway so just in case, might as well wait for Expo 41.

Thank you once again, will let you know as soon as v2.2.0 hits npm!

[jakobo]

No problem. Glad it's useful. A few other notes to consider (none of them critical)

Regarding the ModalStack / Provider: I'd recommend applying the view styles only when the modal interface is open. react-native-web technically allows scrolling to occur on the body element. This also means that the ModalStack will need to be fixed so that it's Y offset of 100vh works as expected. (For those wanting to use it now, don't allow scrolling in your body or leverage something like body-scroll-lock to make your mobile-web behave closer to a mobile app regarding scrollable regions)

Regarding the bundler options: I'd seriously consider just doing a babel/tscompile into a dist directory as a starting point, and only add UMD if there's specific use cases outside of React Native. Not only does that mean one less tool & one less config, but the react-native / react-native-web dependency already guarantees people are using yarn/npm for dependencies and therefore a tool that understands CJS/ESM imports.

[CharlesMangwa]

Hey @enaluz @jakobo! Thank you for your patience! It took (quite) some time but I finally managed to invest some time to work on this issue and implement Web support! This is available as of now in Modalfy v3 which is fresh off the press 🥳 Please give it a try and let us know how it works on Web!

Special shoutout goes to you @jakobo for your help looking into this 🙌 I mentioned your contribution in the release blog post. Of course, let me know if you'd prefer me not to!

[jakobo]

Great to see it released. Working fantastic, and it's great to see such a strong Modal option available!