Comments (6)
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>
);
from react-native-modalfy.
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!
from react-native-modalfy.
Great to see it released. Working fantastic, and it's great to see such a strong Modal option available!
from react-native-modalfy.
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
toreact-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!
from react-native-modalfy.
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!
from react-native-modalfy.
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.
from react-native-modalfy.
Related Issues (20)
- Pass UI elements instead of Modal Name HOT 1
- There was no opened 'ModalName' modal warn HOT 1
- Modal does not animate out HOT 1
- Easy way to get modal props HOT 3
- Is it possible to check which modals are currently open before opening a modal? HOT 1
- Modal is opened again after close the first one HOT 6
- Need finish callback if noOpenedItems in queueClosingAction functions is true
- Error raised by FlingGestureHandler (react-native-gesture-handler) HOT 3
- Sending `onAnimatedValueUpdate` with no listeners registered. HOT 6
- [iOS] open modal when screen has options presentation: "modal" HOT 3
- [Android] Cannot read property 'addListener' of undefined HOT 3
- CloseModal causes an infinite loop when used as a dependency for useEffect HOT 2
- How to configure the option to close automatically (e.g. after 3000 ms) and not to close when clicking on the background? HOT 2
- RN 0.73: FlingGestureHandler must be used as a descendant of GestureHandlerRootView. Otherwise the gestures will not be recognized. HOT 2
- Is it possible to make `params` non-undefined? HOT 1
- Responsive Background HOT 1
- Is it possible to pass a parameter which is a callback function to the modal? HOT 1
- Cannot select text or move cursor of TextInput inside a modal when keyboard is visible
- Closing the modal immediately after opening for the second time on Fabric
- Changing ModalOption from modal component HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-modalfy.