React-native-router-flux: Is it possible to open a modal from tab bar?

[rayray-py]

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 with react-native-router-flux v4, too?
Tell me how to do it.

Thanks.

[mechabyte]

The example app 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>

[rayray-py]

@mechabyte
Sorry, I mean this screen transition

https://video.twimg.com/tweet_video/DHR7zyEV0AEmhYI.mp4

[Blapi]

You want your Modal to open from the bottom? If that's right, have a look at #2628

[rayray-py]

@Blapi
Thanks for your reply.
I read #2628, and understood 'transitionConfig'.
But, is it available even for a scene which is directly under tab bar?

[Blapi]

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 :)

[rayray-py]

I tried it like this, but a scene was rendered without vertical transition.
(I use transitionConfig in Stack component instead of root scene, because routeName prop doesn't match a key of tab scene in the case of that root scene has transitionConfig)

  <Tabs
    key="tabBar"
    tabBarPosition="bottom"
    swipeEnabled={false}
    backToInitial
  >
    <Scene
      key="home"
      component={Home}
    />
    <Stack
      key="selectMyDiary"
      transitionConfig={() => ({
        screenInterpolator: (props: { scene: any }) => {
          const { scene } = props;
          console.log(scene);

          switch (scene.route.routeName) {
            case 'selectMyDiary':
              return CardStackStyleInterpolator.forVertical(props);
            default:
              return CardStackStyleInterpolator.forInitial
          }
        },
      })}
    >
      <Scene key="selectMyDiary" component={SelectMyDiary} />
      <Scene key="createDiary" component={CreateDiary} />
    </Stack>
    <Scene
      key="reservation"
      component={Reservation}
    />
  </Tabs>

[mechabyte]

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. It shows off some cool tricks 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>

[mechabyte]

For the fadeUp transition, you could do something with the React Native animated API similar to the Error modal in the example

[rayray-py]

@mechabyte
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?😢

[rayray-py]

it worked by using tabBarOnPress.
Thanks :)

[mechabyte]

@rayray-py Sorry I missed your previous comment, but glad you got it working!

[fedealconada]

@rayray-py can you provide a sample of your working solution? Thanks!

[ahmadvaroqua]

@fedealconada You've probably already figured this out by now, but I struggled with this a little so I'm posting my solution for anybody else landing here:

  <Router>
    <Scene key="modal" modal>
      <Stack key="root" hideNavBar>

        {/* Tab Bar */}
        <Scene hideNavBar panHandlers={null} animationEnabled={false} key="tabs">

          <Tabs
            key="tabbar"
            swipeEnabled={false}
            showLabel={true}
            tabBarStyle={styles.tabBarStyle}
            activeTintColor="#000000"
            activeBackgroundColor="white"
            inactiveBackgroundColor="rgba(255, 255, 255, 0.5)"
            tabBarPosition="bottom"
          >

            <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/ahmadvaroqua/RnrfTabModal