How do I create a native looking modal view segue with react-native?

Question

Is there an way to perform a modal segue, animating the view and navbar up from the bottom, covering the existing navbar, view and tabbar, etc. ?

There is a similar example in UIExplorer where the view 'Navigator' uses 'configureScene' to float a view (but not the navbar) from bottom via Navigator.SceneConfigs.FloatFromBottom, etc. Native app modal segues are supposed to animate the new navbar and view up from the bottom. Note: A good example of this is the health app, click on 'medical ID' tab, then tap on 'Edit' button in navbar, and notice how its navbar and view animates and covers the existing navbar, tabbar and view.

I can see a modal segue in the facebook groups app, which is react-native from my understanding. Clicking on the 'Groups' tab, the click on the 'create' navbar button.

Does anyone know how to implement a native modal segues in react-native?

Answer 1

this.props.navigator.push({
    title: 'Pick Date',
    sceneConfig: Navigator.SceneConfigs.FloatFromBottom,
    component: DatePickerView,
    navigationBar: <NavigationBar
        title="Initial View"/>,
    passProps: {handleSelectedDate: this.handleSelectedDate}
})

Link to source is here: https://github.com/aaronksaunders/React-Modal-Nav-Example