Backhandler quits app instead of going back to relative screen - react-native

Question

Using nested stacks when I go back to my homescreen, my homescreen briefly shows, then the app quits. Instead of hardcoding the route to go back to, how can I go back to my homescreen without quitting the app?
componentWillUnmount() {
BackHandler.removeEventListener("hardwareBackPress", this.onBackPress);
}
componentDidMount() {
BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
}
onBackPress = () => {
const { dispatch } = this.props;
const resetAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: "Home" })]
});
this.props.navigation.dispatch(resetAction);
};
App navigator:
const withHeader = (
screen: Function,
routeName: string,
Header
): StackNavigator =>
createStackNavigator(
{
[routeName]: {
screen,
navigationOptions: ({ routeName, props }) => ({
header: props => <Header {...props} />
})
}
},
{
initialRoute: "Home",
transparentCard: true,
cardStyle: {
backgroundColor: "transparent",
opacity: 1
},
transitionConfig: () => ({
containerStyle: {
backgroundColor: "transparent"
}
})
}
);
const routes = {
VideoEpisodes: {
screen: withHeader(VideoEpisodesScreen, "Video Episodes", DrawerHeader)
},
TestYourself: {
screen: withHeader(TestYourselfScreen, "Test Yourself", DrawerHeader)
},
MyResults: {
screen: withHeader(MyResultsScreen, "My Results", DrawerHeader)
},
BookmarkedVideos: {
screen: withHeader(
BookmarkedVideosScreen,
"Bookmarked Videos",
DrawerHeader
)
},
About: {
screen: withHeader(AboutScreen, "About", DrawerHeader)
}
};
const NestedDrawer = createDrawerNavigator(routes, config);
const MainStack = createStackNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: ({ props }) => ({
header: props => <BasicHeader {...props} />
})
},
Drawer: {
screen: NestedDrawer,
navigationOptions: ({ props }) => ({
header: () => null
})
},
VideoPlayer: {
screen: VideoPlayerScreen,
navigationOptions: ({ props }) => ({
header: props => <BasicHeader {...props} />
})
}
},
{
initialRoute: "Home",
transparentCard: true,
cardStyle: {
backgroundColor: "transparent",
opacity: 1
},
transitionConfig: () => ({
containerStyle: {
backgroundColor: "transparent"
}
})
}
);

Answer 1

onBackPress = () => {
const { dispatch } = this.props;
const resetAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: "Home" })]
});
this.props.navigation.dispatch(resetAction);
return true
};