v2 Navigation.showModal creating new component instance but not actually navigating to it

Question

I'm trying to perform the most simple showModal animation with react-native-navigation v2 (version 2.8.0) and I cannot get the new screen to pop over the old one. The new component is hitting a log in its componentDidMount function but the navigation is not happening.

I've tried copying and pasting the "Working" code from all the tutorials and the docs.

// I Registered the component
Navigation.registerComponent('Test', () => TestView)

// I set the root (and it appears as expected)
Navigation.setRoot({
    root: {
      stack: {
        children: [{
          component: {
            name: 'Test'
          }
        }]
      }
    }
  })


// Here is the Component I'm trying to call `showModal` from
export default class TestView extends React.Component<any, any> {

  constructor(props) {
    super(props)
    Navigation.events().bindComponent(this)
  }

  public componentDidMount() {
    console.log('***MOUNT***')
  }

  public render() {
    return (
      <TouchableOpacity style={ { flex: 1 } } onPress={ this.navigate }>
        <View style={{ flex: 1, backgroundColor: '#c3c3c3' }} />
      </TouchableOpacity>
    )
  }

  private navigate = () => {
    Navigation.showModal({
      component: {
        name: 'Test',
        options: {
          modalPresentationStyle: OptionsModalPresentationStyle.overFullScreen,
        }
      }
    })
  }

}```

When the navigate function is called, the log in `componentWillMount` hits (again) but nothing else happens and the root component remains on screen. I'm convinced I'm doing something stupid so hopefully a few more sets of eyes will help. Thanks.

Hey! I'm having the same issue. Any solution? – Axel Schenkelman May 15 '19 at 22:04 — Axel Schenkelman, May 15 '19 at 22:04
iOS only, Android is working ok – Axel Schenkelman May 16 '19 at 14:53 — Axel Schenkelman, May 16 '19 at 14:53
Could you find a solution please? – David Aug 21 '19 at 14:39 — David, Aug 21 '19 at 14:39

score 0 · Answer 1 · answered May 22 '19 at 22:56

My issue was not properly setting the id for the incoming stack. This is the current pattern I'm using that works.

Navigation.showModal({
        stack: {
            id: screen,
            children: [{
                component: {
                    id: id,
                    name: screen,
                    passProps: props
                }
            }]
        }
    })

v2 Navigation.showModal creating new component instance but not actually navigating to it

1 Answers1