Drawer Navigator Children Props - react-native

Question

Is there a way for me to get the props from a child of my DrawerNavigator inside my CustomDrawerComponent ?
When I open my Drawer, I wanted to get my StackNavigator screens inside it, not simply "AppStackNavigator". Is there a easy way do do that ?
My Navigators:
const AppStackNavigator = createStackNavigator(
{
Início: {
screen: HomeScreen
},
Perfil: {
screen: ProfileScreen
},
Notificações: {
screen: NotificationScreen
},
'Criar Evento': {
screen: CreateEventScreen
},
EventScreen
},
StackNavigatorConfig()
)
const AppNavigator = createDrawerNavigator(
{
AppStackNavigator
},
{
contentComponent: Drawer,
drawerBackgroundColor: color.primary.main
}
)
const AppContainer = createAppContainer(AppNavigator)
My CustomDrawerContentComponent:
export default (CustomDrawerContentComponent = props => {
return (
<ScrollView>
<TouchableOpacity onPress={() => props.navigation.closeDrawer()} style={styles.close}>
<EvilIcons style={{ color: color.primary.contrastLightText }} size={40} name="close" />
</TouchableOpacity>
<View style={styles.thumbImageContainer}>
<ThumbImage image={require('../assets/images/user.jpg')} />
<View style={styles.statusContainer}>
<TextApp>Luis Coimbra</TextApp>
<TextApp secondary>Apaixonado por Jesus</TextApp>
</View>
</View>
<SafeAreaView style={{ flex: 1 }} forceInset={{ top: 'always', horizontal: 'never' }}>
<DrawerItems {...props} {...itemsStyle} />
</SafeAreaView>
</ScrollView>
)
})

Answer 1

With the props.navigation.state.routes[0].routes.slice(-1)[0].routeName, I can manage to get the active router so I am able to style. If you have a better way, I'd be glad to read.
Not exactly what I was expecting, but it works well for now:
export default (CustomDrawerContentComponent = props => {
const activeRouterName = props.navigation.state.routes[0].routes.slice(-1)[0].routeName
return (
<ScrollView>
<TouchableOpacity onPress={() => props.navigation.closeDrawer()} style={styles.close}>
<EvilIcons style={{ color: color.dark.contrast }} size={40} name="close" />
</TouchableOpacity>
<View style={styles.thumbImageContainer}>
<ThumbImage source={require('../assets/images/user.jpg')} />
<View style={styles.statusContainer}>
<TextApp dark>Luis Coimbra</TextApp>
<TextApp secondary>Apaixonado por Jesus</TextApp>
</View>
</View>
<SafeAreaView
style={{ flex: 1, borderTopWidth: 2, borderTopColor: color.dark.contrast }}
forceInset={{ top: 'always', horizontal: 'never' }}
>
{['Início', 'Perfil', 'Notificações', 'Criar Evento'].map(routerName => (
<View key={routerName} style={routerName == activeRouterName && styles.activeView}>
<TextApp
onPress={() => props.navigation.navigate(routerName)}
style={{
color:
routerName == activeRouterName
? color.secondary()
: color.dark.contrast,
margin: 16,
fontWeight: 'bold'
}}
>
{routerName}
</TextApp>
</View>
))}
</SafeAreaView>
</ScrollView>
)
})
Result: