Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scene Conflict When Using Modal From Tab Button #1526

Closed
AndrewHenderson opened this issue Jan 9, 2017 · 2 comments
Closed

Scene Conflict When Using Modal From Tab Button #1526

AndrewHenderson opened this issue Jan 9, 2017 · 2 comments

Comments

@AndrewHenderson
Copy link

AndrewHenderson commented Jan 9, 2017

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>
);
@AndrewHenderson AndrewHenderson changed the title Can't Open Vertical Modal From Tab Button Scene Conflict When Using Modal From Tab Button Jan 12, 2017
@AndrewHenderson
Copy link
Author

AndrewHenderson commented Jan 12, 2017

Resolved using Actions.pop on the onLeft of event_form_initial.

@ragnorc
Copy link

ragnorc commented Mar 2, 2017

Using Actions.pop still leads to child conflict when tapping on tab for second time. Any idea on how to fix this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants