RESET navigation - Drawer route with animation - react-native

Question

Before all, I have to precise I searched arround as for example https://github.com/react-community/react-navigation/issues/1000 , https://github.com/react-community/react-navigation/issues/307 or even StackOverflow.
I have the following code :
/**** STACKNAVIGATOR 2 ****/
const HomeDrawer = StackNavigator({
HomeDrawerstack: { screen: Home, navigationOptions: { title: 'Accueil', } },
}, { initialRouteName: 'HomeDrawerstack', }
);
/**** STACKNAVIGATOR 3 ****/
const AddIdeaDrawer = StackNavigator({
AddIdeaDrawerRoot: { screen: AddIdea, navigationOptions: { title: 'AddIDea', } },
}, { initialRouteName: 'AddIdeaDrawerRoot', }
);
/**** DRAWERNAVIGATOR ****/
const DrawerRoutes = {
HomeRoot: {
screen: HomeDrawer,
navigationOptions: {
title: 'Home',
},
},
AddIdea: {
screen: AddIdeaDrawer
navigationOptions: {
title: 'Add an idea',
},
},
};
const DrawerOptions = {
initialRouteName: 'HomeRoot',
contentComponent: CustomDrawerContentComponent,
drawerWidth: 300,
};
export const Drawer = DrawerNavigator(DrawerRoutes, DrawerOptions);
/**** STACKNAVIGATOR 1 ****/
export const Navigation = StackNavigator({
HomeDrawerRoot: { screen: Drawer, navigationOptions: { header: null } },
OtherRoot: { screen: Contacts, navigationOptions: { /** **/ } },
}, { initialRouteName: 'HomeDrawerRoot', }
);
What I have tried
Currently, I'm trying to navigate from HomeDrawerstack to AddIdeaDrawerRoot with the StackNavigator animation and preventing the user to go back.
I have tried different solutions I have found on the different issues but any of them solve this problem.
First try :
navigate('AddIdea',)}
The app goes to AddIdea perfectly. However, the user can go back (that's normal I don't use RESET) and there is no animation. The AddIdea screen appears like that without any transition.
Second try :
NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({routeName: 'AddIdea',})
]
})
It doesn't work.
The logs prints : There is no route defined for key AddIdea. Must be one of: 'HomeDrawerstack'
Third try :
I read on an another issue https://github.com/react-community/react-navigation/issues/#1127 which explains that the key:null was the solution. So I tried the following action :
NavigationActions.reset({
index: 0,
key: null,
actions: [
NavigationActions.navigate({
routeName: 'HomeDrawerRoot',
action: NavigationActions.navigate({ routeName: 'AddIdea',}),
})
]
})
The app goes well to AddIdea. However, still with the possibility of going back to the last page (Home) and without animation.
Fourth try :
navigate({
routeName: 'HomeDrawerRoot',
action: NavigationActions.navigate({
routeName: 'AddIdea', action: NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: AddIdeaDrawerRoot
]
})
})
})
It doesn't work. Printing : There is no route defined for key AddIdeaDrawerRoot. Must be one of: 'HomeDrawerstack'
What I'm trying to do
The only thing I want is going from HomeDrawerstack (Home screen) to AddIdeaDrawerRoot (AddIdea screen). With an animation like the StackNavigator animation and preventing the user of going back. (Disable Back action).
After reading a lot of issues, I didn't find any solutions. Is it a forget of the react-navigation ? Or I'm the problem ?! Thanks in advance.
My current configuration
| software | version
| ---------------- | -------
| react-navigation | ^1.0.0-beta.11
| react-native | 0.45.1
| node | 7.4.0
| npm or yarn | 0.24.5

Answer 1

I had similar problems and could not find a good example app. My navigation in my app crashed the app which was very frustrating. In the end I found a good working project to base my code on: https://github.com/paraswatts/DrawerNavigatorReactNative/
This project has working navigation with both tabs and drawers with no crashes and clean code. I hope it can help you.