React-native-router-flux: Animating modals

[ljhender]

Any support for this? Haven't been able to get a modal to animate, am I missing something?

[aksonov]

No support, it is not implemented. PR is welcome.

[sbycrosz]

Hey there,
I'm interested in helping out. So far I could think of 3 possible ways:

1. Implement the animation in the modal view itself (example: ExNavigatorModal example, or https://github.com/sbycrosz/react-native-router-flux/commit/1a386d16b273e42f838e805fbee0e3a63cc9158f)
2. Integrate the animation into the Router object (Will likely need to add another modal animation params since I'm not sure if we could reuse sceneConfig)
3. Use type="push" to display full-screen view with transparent background (will include a lot of sceneConfig overriding)

So yeah, any comments?

[aksonov]

https://github.com/sbycrosz/react-native-router-flux/commit/1a386d16b273e42f838e805fbee0e3a63cc9158f Looks interesting, have you tried it?

[sbycrosz]

It's working pretty well..

The timing function need some fine tuning though..

[sbycrosz]

After some thought, I think it's better to let the user animate their own modals since it's quite simple and they could have more control over it (i.e. modal size/ animation/ backdrop/ gestures etc.), and also https://github.com/maxs15/react-native-modalbox has nice swipe-able modals that easy to integrate.

Example: https://github.com/sbycrosz/react-native-router-flux/commit/a5dac2e0e1a231fcb4df6f1befdcdc9bd2484c2b

[ljhender]

Yeah @sbycrosz @aksonov thats actually how we solved this problem. Animating the actual modal itself was the best solution to this. We could update the documentation for people curious as to how to do this however.

[aksonov]

@sbycrosz Well done! Could you submit PR with Example update?

[ninjz]

With the current modal implementation, I can't seem to get this type of functionality (non full screen sized modal with a transparent backdrop).

[braco]

@ljhender: would be interested in your implementation, if available

[jdmunro]

I'm also trying to get a modal to appear transparently over some other scenes. I've tried the example from @sbycrosz but this doesn't seem to work anymore because Schema is no longer supported. I can get a modal to appear but it is not rendering the scenes beneath. Has anyone had any luck?

[ms88privat]

@jdmunro its working something like this. You can find it in the documentation here

import {Scene, Router, Modal} from 'react-native-router-flux';

<Scene
    key='homeView'
    component={Modal} 
     >
    <Scene key='home' >
       .... normal scenes
    </Scene>
    <Scene key='Modal1' component ..../>
    <Scene key='Modal2' component .. />
</Scene>

Then push and pop the modal like normal, hope this helps. The Modals will overlay all of the scenes with key = 'home'

[jdmunro]

Thanks @ms88privat I'll give that a go 👍

[Naoto-Ida]

@sbycrosz Thanks for the example! Unfortunately it doesn't seem to reappear when I call the same action.

[Naoto-Ida]

Never mind, if you set the onClosed callback to Actions.pop instead of Actions.replace, the example works.