React-native-modal: Roadmap and contributions guidelines

[mmazzarolo]

Hey all!
As I already anticipated in a tweet, I don't have enough time to contribute on coding new features or bugfixes, so if you're interested in starting to actively contributing to the repo it would be great!

In this issue I'll recap a few thing that I hope would be helpful to new contributors! Any help and/or discussion on these things is warmly welcome!

Open issues that requires testing/investigations

163 __Error property 'left' is not supported by native animated module when using swipe__: This crash happens when you try to use a swipeable modal using the animations with a native driver

236 __ScrollView inside swipeable modal is not working__: the title says it all. It should be "just" a matter of playing with the panResponder and make it work correctly with the ScrollView gestures

147 __backdrop doesn't cover screen on Samsung Galaxy S8__: oh wow this is a long issue. I'm pretty sure that using something along the lines of Math.max(Dimensions.get('window').height, Dimensions.get('screen').height) should work, but it requires a bit of testing

221 __Add animation types from react-native-animatable__: Not a real "issue", this is just a memo about merging a specific PR once we update react-native-animatable

125 __Multiple swipeDirection__: Still a WIP, there's a PR for it but it's not working correctly yet

Other improvements we should work on

Define a solid publishing/testing strategy

Right now the publishing on NPM is done by hand by me. Defining a git and npm workflow to follow would be great.

Continue working on a JS version of the modal

We might wanna ditch the native modal that we're using under the hood here, because it's causing a bunch of issues that are really difficult to fix on a native level. See #145 .

Update react-native-animatable

This is fairly easy, but it requires some testing. It will close #221.

Docs!

Documentation is never detailed and helpful enough 😬

React-native-community standards

Given the recent changes happening in the react-native-community group we should make sure that this repo is aligned correctly with the scope of the community (e.g. uses the correct linting rules, deployment pipelines, etc...)

Native modal and react-native-community

Following my last point above there are also two other interesting things we might wanna talk about.

The first one is about the "scope" of the modal. Currently we have the <Modal> from RN, which is a low level abstraction over the native "modal" implementation (with its advantages and its drawbacks) and then there's also the react-native-modal package, which is an enhanced version of RN's <Modal> (with animations and other additional features). So the question is: how would a RN extraction from the core work?

The second one is about the usage of Portal.
We were thinking about using Portal because the native <Modal> has a few drawbacks that would be really complex to fix, so a nice way to maintain the same declarative pattern and make it easy to build feature on top of it is by using a Portal to simulate a modal behaviour (to make the modal show up on top of all the content of the app).
React's own Portal currently has an issue with iOS, but there are other Portal's implementation that are working (e.g.: the one used in react-native-paper).
On this matter we still have a few questions: can/should we migrate react-native-modal to a JS using Portal? Should we create a more "low level" version of react-native-modal without all its features, make it usable with a Portable and then use it as the base component for react-native-modal? What Portal implementation should we use?

[rewieer]

Currently it seems contributor development is done by iterating on the Example/node_modules/react-native-modal file. While it works, it's not ideal, and I think there's something to be done in here. Been watching this, I wonder if this can work for us

[mmazzarolo]

Thanks @rewieer !
I think that's a great approach, with the metro config you can target stuff outside of the root directory of the example without messing with npm links/symlinks.

[kenyontu]

@mmazzarolo, the contributing file mentions the use of Prettier to handle code formatting, but the project is lacking a Prettier config file, could you add the one you have been using?

[mmazzarolo]

@kenyontu I've been using the default prettier settings, that's why it's not there 👍