CODEWITHSUNDEEP
react-nativereact-navigation
barrylachapelle
barrylachapelle

Reputation: 987

Modals from a stacknavigator?

I am trying to launch a modal from a regular stackNav. Any help super appreciated.

I need to launch AddBook in a modal from BooksList. Here is my stack set up:

const BookModalsNavigator = createStackNavigator({
    AddBook: AddBook,
}, {
    mode: 'modal',
}); 

const MyBooksNavigator = createStackNavigator({
    BooksList: BooksList,
    ViewBook: ViewBook,
    BookModalsNavigator: BookModalsNavigator,
});

and I cam calling the modal with:

this.props.navigation.navigate('AddBook')

and getting this :(

enter image description here

Upvotes: 1

Views: 282

Answers (1)

barrylachapelle
barrylachapelle

Reputation: 987

If anyone comes across this.. I basically had it upside down. You have to build your routes THROUGH the modal stack. The fix:

const MyBooksNavigator = createStackNavigator({
    BooksList: BooksList,
    ViewBook: ViewBook,
});

const BookModalsNavigator = createStackNavigator({
    MyBooksNavigator: MyBooksNavigator,
    AddBook: AddBook,
}, {
    mode: 'modal',
    headerMode: 'none',
});

const AppNavigator = createBottomTabNavigator({
    MyBooks: BookModalsNavigator,
    Capture: Capture,
    More: MoreNavigator,
},

Upvotes: 1

Related Questions