Is there a bulit in way to show a modal window that blocks the whole screen? about react-navigation HOT 11 CLOSED

I really wouldn't use RN's <Modal> component unless you are building a hybrid application and you need to grab the full screen. It works outside React Navigation's awareness of screen presentation, and is likely to result in strange bugs when working with this library.

@yaronlevi, What would this alternate modal style look like? We can either get one added to the library if it is a super standard component across several platforms- (please provide references!). Or we can add a way for you to customize the appearance of a standard modal stack.

from react-navigation.

IMO there is an usecase using a screen modal would be better than RN's <Modal>. I have an app which has many screens. Each screen has many <TextInput> sending request to the API and getting responses. Everytime they get responses, I would like to show a popup in case the <TextInput> data is invalid and some error messages. Instead of rendering RN's <Modal /> every screen, I'd love calling a modal screen.

this is an example about style: http://browniefed.com/blog/react-native-easy-overlay-modal-with-navigator/

from react-navigation.

The standard Modal in React Native works fine here.

from react-navigation.

I think android support for the vertical modal animation makes a lot of sense for consistency between your app, regardless of what platform it's on. When you want to make something that feels more like a modal and breaks the horizontal flow of your stack navigator, you slide up, regardless of platform.

Is there a technical reason behind why this isn't possible or is it about preserving what's typical on Android? I thought the underlying animation library abstracted this stuff so it's the same code on both platforms??

Also, who really follows all these style guides anyway? Most great apps are completely custom. For example, who makes apps for iOS that are white, gray and blue, besides Apple.

from react-navigation.

And also forgot to mention that React Navigation looks like an amazing works, and it is the missing piece we've been all waiting for (-:
(+ the website and docs are top notch)

from react-navigation.

Ok, I also see that StackNavigatorConfig has a 'modal' mode. And it also states that android is currently not supported. Are there any plans on supporting it on android?

from react-navigation.

I have no idea on that, but you can simply use the standard React Native Modal in a screen as follows. Supported in both iOS and Android.

<Modal
    animationType="slide"
    visible={this.state.visible || somethingElse}
>
    <Text>Hello World</Text>
</Modal>

This should slide over other content in the component. I've done this inside a TabNavigation earlier today and it works just fine.

from react-navigation.

@ericvicenti Are you aware of any particular reason why the same modal animation as the one used for iOS can't be exposed? Unless I'm mistaken, it seems that implementing a slide up/down animation on Android (triggered by setting mode to modal) would do the job.

As for the look and feel, this demo from Material design's official guidelines looks good to me :-)

from react-navigation.

I see that it likely is possible on Android:

https://github.com/react-community/react-navigation/blob/6b8cb793b426be36c1366f3e4157a9f208815dcd/src/views/TransitionConfigs.js#L63

So can't it just be at the user's discretion whether he uses react-navigation to create an iOS style modal on Android, rather than force everyone to have to go make a dialog just for Android.

Another idea is to export the TransitionConfigs, which my view is that should be done in addition. As it is, unless I'm mistaken, you can't get access to the different configs, as it's not exported

https://github.com/react-community/react-navigation/blob/6b8cb793b426be36c1366f3e4157a9f208815dcd/src/react-navigation.js

but if you could, you could just set the transitionConfig of the StackNavigatorConfig to whatever you want. I played with the interpolation options with the old RN Navigator and came up with some nice stuff. So it would be nice to get access to this and as well as the things like CardStackStyleInterpolator. That way we can all make our own.

Lastly, the next step I see is allowing you to specifying transitionConfig and mode in the screenOptions, i.e. per screen. Are these things the maintainers want?

• per screen options: mode, transitionConfig
• exported animation tools: CardStackStyleInterpolator, TransitionConfigs, etc
• modal option for Android

from react-navigation.

Pinging OP @yaronlevi since this issue is quite old and related to an old version of the lib. If no answer I'll close in 7 days.

from react-navigation.

Hi there @yaronlevi,

In an effort to cleanup this project and prioritize a bit, since this issue had no follow up since my last comment I'm going to close it.

If you are still having the issue (especially if it's a bug report) please open a new issue that uses the new Issue Template to provide some more details to help us solve it.

from react-navigation.