opened
rayray-py
username_0
I read this issue of react-navigation.
https://github.com/react-navigation/react-navigation/issues/3003

Is it possible to open a modal via tab bar like instagram, using react-native-router-flux v4, too?
Tell me how to do it.

Thanks.
Is it possible to open a modal from tab bar?
issue
created
mechabyte
username_1
The [example app](https://github.com/aksonov/react-native-router-flux/tree/master/Example) contains this case and some similar ones. I would try something similar to this:
```
<Modal key="modal" hideNavBar>
  <Stack key="root">
    <Scene key="sceneWithNavBar" component={ViewWithNavBar} rightTitle="Trigger Modal" onRight={() => Actions.demoModal()} />
  </Stack>
  <Scene key="demoModal" component={DemoModal} />
</Modal>
```
comment
created
rayray-py
username_0
@username_1 
Sorry, I mean this screen transition

https://video.twimg.com/tweet_video/DHR7zyEV0AEmhYI.mp4
comment
created
Blapi
username_2
You want your Modal to pop from the bottom? If that's right, have a look at #2628
comment
created
rayray-py
username_0
@username_2 
Thanks for your reply.
I read #2628, and understood 'transitionConfig'.
But, is it available even for a scene directly under tab bar?
comment
created
Blapi
username_2
I don't know I don't use tab bar on my project :/ give it a try and see ? Should be quick to check if it's doable or not :)
comment
created
rayray-py
username_0
<Scene key="selectMyDiary" component={SelectMyDiary} />
      <Scene key="createDiary" component={CreateDiary} />
    </Stack>
    <Scene
      key="reservation"
      component={Reservation}
    />
</Tabs>
```
comment
created
mechabyte
username_1
It isn't really advertised in the docs, but the author also forked react-native-starter-app and hooked it up to router flux as well-- found [here](https://github.com/aksonov/react-native-starter-app). It [shows off some cool tricks](https://github.com/aksonov/react-native-starter-app/blob/master/src/index.js#L34-L57) hooked into the `on` events in routes. 

You edited your original post from launching a modal from a header button, but with the animation provided I think you're referring to something like this?

 ```
<Modal>
    <Tabs key="tabBar">
        <Scene key="tab1" component={TabView} />
        <Scene key="tab2" component={TabView} />
        <Scene key="tab3_LaunchModal" component={Placeholder} onEnter={Actions.modalView} />
        <Scene key="tab4" component={TabView} />
        <Scene key="tab5" component={TabView} />
    </Tabs>
    <Scene key="modalView" component={ModalView} backTitle={'Close'} />
</Modal>
```
comment
created
mechabyte
username_1
For the `fadeUp` transition, you could do something with the React Native animated API [similar to ehe Error modal in the example ](https://github.com/aksonov/react-native-router-flux/blob/master/Example/components/Error.js#L6-L42)
comment
created
rayray-py
username_0
@username_1 
Thanks for your advice:)
I tried your sample code, and succeeded in opening a modal from tab bar.
But, there is one problem:(
When I tap the tab icon, the Placeholder scene is rendered under a modal.
So, when I close that modal scene, the Placeholder scene appears instead of the scene that was rendered when I tapped the tab icon.

Do you have any idea?
comment
created
rayray-py
username_0
it worked by using tabBarOnPress.
Thanks :)
comment
closed
rayray-py
username_0
issue
created
mechabyte
username_1
@username_0 Sorry I missed your previous comment, but glad you got it working!
comment
created
fedealconada
username_3
@username_0 can you provide a sample of your working solution? Thanks!
comment
created
ahmadvaroqua
username_4
<Scene key="Home" component={Home} title="Home" />
            <Scene key="search" component={Search} title="Search"/>

            <Scene key="placeholder" component={Placeholder} title="Post"
              tabBarOnPress={() => {
                return Actions.post();
              }}
            />

            <Scene key="profile" component={Profile} title="Profile" />
            <Scene key="more" component={More} title="More"/>
          </Tabs>
        </Scene>

      </Stack>

      {/* Modal Scenes */}
      <Scene key="post" component={Post} title="Post" hideNavBar={true}/>

    </Scene>
  </Router>
```

Working sample app can be found here:

https://github.com/username_4/RnrfTabModal
comment