How to use modal

[danieljvdm]

Version

• react-native-router-flux v4b15
• react-native v46

I'm really struggling with modals as there is no documentation on them and the example has no comments or indication as to how certain scenes are displayed modally and others aren't. Here is my code.

<Router>
  <Scene key="root" hideNavBar hideTabBar>
    <Scene key="tabBar" tabs>
      <Scene key="listings" component={Listings} title="Listings" initial right={MapButton} />
      <Scene key="favorites" component={Favorites} title="Favorites" />
      <Scene key="messages" component={Messages} title="Messages" />
      <Scene key="profile" component={Profile} title="Profile" />
    </Scene>
    <Scene key="modal" modal>
      <Scene key="map" component={Map} title="Map" hideNavBar />
    </Scene>
    <Scene key="listingDetail" component={ListingDetail} title="Listing Detail" clone />
  </Scene>
</Router>;

I'm trying to get the Map component to display modally.

MapButton is the following:

const MapButton = () =>
  <TouchableWithoutFeedback onPress={Actions.map}>
    <Text>Map</Text>
  </TouchableWithoutFeedback>;

I have to use this because rightText is extremely buggy and won't render half the time.

[luco]

Try put your root scene inside modal.
Like this:

<Router>
    <Scene key="modal" modal>
       <Scene key="root" hideNavBar hideTabBar>
		    <Scene key="tabBar" tabs>
		      <Scene key="listings" component={Listings} title="Listings" initial right={MapButton} />
		      <Scene key="favorites" component={Favorites} title="Favorites" />
		      <Scene key="messages" component={Messages} title="Messages" />
		      <Scene key="profile" component={Profile} title="Profile" />
		    </Scene>
		</Scene>
        <Scene key="map" component={Map} title="Map" hideNavBar />

[aksonov]

You should make root scene as modal like @luco suggested. Please check Example project, Login is implemented as modal

[danieljvdm]

This still doesn't work.

<Router>
    <Scene key="modal" modal>
      <Scene key="root" hideNavBar hideTabBar>
        <Scene key="tabBar" tabs>
          <Scene key="listings" component={Listings} title="Listings" initial right={MapButton} />
          <Scene key="favorites" component={Favorites} title="Favorites" />
          <Scene key="messages" component={Messages} title="Messages" />
          <Scene key="profile" component={Profile} title="Profile" />
        </Scene>
        <Scene key="map" component={Map} title="Map" hideNavBar />
        <Scene key="listingDetail" component={ListingDetail} title="Listing Detail" clone />
      </Scene>
    </Scene>
  </Router>

It doesn't make any sense to me that wrapping everything in the modal scene would make one specific scene modal when I don't want the rest (like ListingDetail) to be modal. Is there a specific parameter in Actions.map that I need to use?

[aksonov]

Unfortunately it is problem of react-navigation - it doesn't support different animations for stack children. I can't reproduce your problem (code looks fine), that is why I ask everybody to fork & modify this repo Example if they want their issues be resolved. Login modal from Example works fine as you can see

[danieljvdm]

So are you saying that there is no way to support a modal iOS transition? I.e. one that slides from the bottom?

[aksonov]

What do you mean? I said you twice that Example has modal Login screen (that slides from the bottom)

[danieljvdm]

Ok but you also said my code looks fine....

[danieljvdm]

I've tried my best to follow the Example but because there's no documentation I can't tell what the reason for everything being there is. I can't just copy and paste that code since obviously my routes are different.

[aksonov]

The same I could tell you about your code - I don't see whole project and all details. For example you may use Actions.map and it could be even not generated (and be null) during compilation.

[danieljvdm]

I'm happy to provide more code samples if you let me know what you need. Actions.map works, it just transitions in from the side inside of what I expect to be from the bottom.

Are you saying that you can't have both push and modal transitions in the same app?

[aksonov]

OMG. Not in app, but in one container. After more deep look your code has error - 'map' still child of 'normal' container (key=root), not modal (key='modal'). Looks like you don't understand what you are doing. Maybe this component is too complex for you...

Try this:

<Router>
    <Scene key="modal" modal>
      <Scene key="root" hideNavBar hideTabBar>
        <Scene key="tabBar" tabs>
          <Scene key="listings" component={Listings} title="Listings" initial right={MapButton} />
          <Scene key="favorites" component={Favorites} title="Favorites" />
          <Scene key="messages" component={Messages} title="Messages" />
          <Scene key="profile" component={Profile} title="Profile" />
        </Scene>
      </Scene>
        <Scene key="map" component={Map} title="Map" hideNavBar />
        <Scene key="listingDetail" component={ListingDetail} title="Listing Detail" clone />
    </Scene>
  </Router>

[danieljvdm]

Thanks, this fixes the issue. How do you expect me to understand something when there isn't a line of documentation about it? There have been many people opening issues about this modal feature, maybe that is indicative of the need for docs...

[aksonov]

Few recent posts here are about JSX syntax and understanding of navigation containers, not about documentation.
I added more information about modal.

[pedrogoiania]

Hi,

worked for me

<Router navigationBarStyle={{backgroundColor: '#FF5722'}} titleStyle={{color: '#fff'}}>
        <Modal>
            <Stack key="root">
                <Scene key='login_screen' component={LoginScreen} title='login' hideNavBar={true} />
            </Stack>
            <Scene key='cadastro_screen' component={CadastroScreen} title='Cadastro' hideNavBar={false} />
        </Modal>
</Router>

[hugoh59]

When I add the modal wrapper I then get 2 navbar on the top of my view, when I add hideNavBar both of them disappear. How can I solve this issue I want one tab bar only not two obviously... ?

[tquiroga]

Use <Modal hideNavBar> because <Modal> is gonna add its own navbar so you end up having two with the one from your root scene.