Skip to content

Scene Conflict When Using Modal From Tab Button #1526

Closed
@AndrewHenderson

Description

@AndrewHenderson

Version

Tell us which versions you are using:

  • react-native-router-flux v3.36.0
  • react-native v0.37.0

Expected behaviour

I'm hoping to be able to open a vertical modal from a tab. The behavior I'm seeking to recreate is that seen in Instagram when a user presses the camera icon.

Instagram

instagram

When a user clicks the icon camera tab button, the following full screen view slides up:

Me

sceneconflict

Code

export default Actions.create(
  <Scene key="modal" component={Modal}>
    <Scene key="root">
      <Scene key="login"
             component={Login}
             initial={true}
             hideNavBar
             type={ActionConst.RESET}
      />
      <Scene key="main"
             tabs
             tabBarStyle={styles.tabBarStyle}
             tabBarSelectedItemStyle={styles.tabBarSelectedItemStyle}
      >
        <Scene
          initial={true}
          key="events"
          icon={TabIcon}
          iconName="md-home"
        >
          <Scene initial={true}
                 key="events_list"
                 renderBackButton={()=>(null)}
                 component={EventsFeed}
                 title="Main"
                 rightButtonIcon="ios-add"
                 onRight={() => { Actions.event_form() }}
          />
        </Scene>
        <Scene key="publish" icon={TabIcon} onPress={() => { Actions.event_form() }} iconName="md-pin"></Scene>
        <Scene
          key="my_profile"
          icon={TabIcon}
          iconName="md-person"
        >
          <Scene key="my_profile_initial" initial={true} renderBackButton={()=>(null)} component={Profile} getTitle={getProfileTitle} rightButtonIcon="ios-settings" onRight={() => { Actions.my_profile_settings() }} />
        </Scene>
      </Scene>
      <Scene
        key="event_form"
        direction="vertical"
      >
        <Scene
          key="event_form_initial"
          title="New Event"
          component={EventForm}
          leftTitle="Cancel"
          onLeft={() => { Actions.events() }}
          rightTitle="Add"
          onRight={() => { Actions.refresh({ triggerSave: true }) }}
        />
      </Scene>
    </Scene>
  </Scene>
);

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions