Modalize, a highly customizable modal/bottom sheet that loves scrolling content.
I started this package back in 2018 and today I’m releasing version 2.0.0, so I figured it could be nice to have an article about it, for those of you who are interested in knowing a bit more about it.
First thing first, what is Modalize, apart from being a cool name, or not — well I have no idea when I’m naming stuff, so —ize is my way to go.
Modalize is basically a bottom sheet that shows on top of the rest of the screen to display contextual actions, information.
“Modal” because you keep the context behind and it shows on top, and “bottom sheet” because it appears from the bottom. However in a next release, we might have a props to animate it from top to bottom, so it won’t be called bottom sheet anymore.
As you can see above, on the left, we have a very basic example of a bottom sheet. There is no scroll involved and you only have to swipe down to dismiss the sheet. It’s very simple to implement and used quite extensively in a lot of applications.
However, on the right, this is a more complex example. The sheet appears at the bottom first, in a minimal state. Then you have to swipe up to open it to full height. After that, the scroll gestures are enabled and allow you to go through the ScrollView. Finally, to dismiss the sheet, you scroll down/swipe down to dismiss the bottom sheet.
It’s quite pretty and super useful but associating all these events together is way more complicated than the left example and it’s basically the first purpose of this library.
👀 So what’s new?
I created this library while ago when I was working on a mobile project, for the Nova app. Modalize was very opinionated at first with a really simple implementation, but it was doing the job.
This new version brings a lot of new props, improvements and bug fixes thanks to the community that contributed and helped me on this work!
🎉 New features
- New props and methods:
customRenderer,childrenStyle,velocity,threshold,withOverlay,FloatingComponent,modalElevation,onLayout,onOverlayPress,onPositionChange,panGestureAnimatedValue,dragToss,keyboardAvoidingOffset,panGestureEnabled,tapGestureEnabled,closeOnOverlayTap,contentRef,rootStyle,panGestureComponentEnabled,closeSnapPointStraightEnabled, I won’t go through them all, so visit the full changelog to find more about their usages. - The documentation has been re-written, re-organized and I added a lot more information. Please check it out here.
- One of the most popular issues was about Modalize not being displayed on top of a bottom tab navigation (e.g. react-navigation). I published a new package dedicated to this behavior:
react-native-portalize(yes, it ends with —ize once again). - Support for
react-native-web.
✨ Improvements and bug fixes
- I won’t go through the full list, but about 40 bug fixes and improvements have been made in the last two months.
- We now only have ~8 issues opened, for ~92 closed, which is a pretty good number and we have been able to fix a lot of small issues that were happening in some particular use cases.
Let’s look at some gifs now, because everybody like gifs ✨. It looks the same but it’s more reliable and doesn’t flicker anymore like the previous version.
Some very simple examples using some of the different props available.
It also handles the keyboard behavior and adjust your content according to it.
Some real-life examples, using some third-party library, and mixing multiple props together. It’s looks quite nice, isn’t it?
🙌🏻 In short
There are still some known limitations due to react-native or react-native-gesture-handler, the libraries I’m using under the hood or the core of Modalize itself, but it will get fixed hopefully in the near future for most of them!
Overall, the library is more robust than the previous version and has a lot more way to be customised for your needs. Just make sure to check it out!
Thanks to all the contributors that have been helping out and see you next time, maybe, bye.
🔗 Links
- The GitHub repository
- The documentation
- Expo demo
