Modal does not support landscape / horizontal view

[mikaello]

It does not seem to work with landscape view of phone with RNMS (see also issue 41 in old repo).

In theory it is as easy as adding supportedOrientations={['portrait', 'landscape']} to the Modal-component, and this works as long as the orientation is fixed, but if orientation is not fixed and you turn the phone the width is not recalculated because it depends on const { width } = Dimensions.get('window'), and that does not change when orientation changes. See discussion and possible workarounds in react-native issue #25. You can see the problem here (the screengif program is not perfect):

A fix can be to use flex to adjust size instead of Dimensions.get('window'):

It seems to work on iOS simulator, but it should be tested on other devices as well. This attempt to fix horizontal view with flex can be tested in branch support-for-landscape-view. Add this in package.json:
"react-native-modal-selector": "peacechen/react-native-modal-selector#support-for-landscape-view"

[peacechen]

That looks like a great solution. Thanks @mikaello

Merged PR #10 from branch support-for-landscape-view

[peacechen]

@mikaello
Do the other orientations ('portrait-upside-down', 'landscape-left', 'landscape-right') need to be added to supportedOrientations ?

RN Modal docs:
https://facebook.github.io/react-native/docs/modal.html

[mikaello]

I can't see any difference in iOS simulator between having 'portrait', 'landscape', 'portrait-upside-down', 'landscape-left', 'landscape-right' or just 'portrait', 'landscape'. But I am not sure about the implications of adding or avoiding those extra options.

But one thing I was thinking about adding, was a prop to react-native-modal-selection, so the user could force it in either portrait or landscape (and having both as default). This would only apply to iOS, since Android seem to ignore this prop.

[peacechen]

I agree, a prop would allow users to choose how they want ModalSelector to behave 👍