in my react-native application I'm rendering a menu drawer with some routes.
When this route is active, I would like to change the background color, improving the visual effect of the application. I am using drawerContentOptions to try to do this, but it is not working.
I put my whole code into snack
AppJs
<SafeAreaProvider>
<NavigationContainer>
<Drawer />
</NavigationContainer>
</SafeAreaProvider>Drawer Navigator
<Drawer.Navigator
initialRouteName="Start"
drawerType="slide"
overlayColor="transparent"
contentOptions={{ backgroundColor: 'red' }}
drawerStyle={{ width: '45%', backgroundColor: '#1F1B33' }}
contentContainerStyle={{ flex: 1 }}
drawerContentOptions={{
activeBackgroundColor: 'red',
activeTintColor: 'red',
}}
drawerContent={(props) => <DrawerContent {...props} />}>
<Drawer.Screen name="Navigator" component={Navigator} />
</Drawer.Navigator>DrawerContent
<DrawerContentScrollView {...props}>
<View>
<DrawerItem
label="Start"
labelStyle={{ color: '#fff' }}
onPress={() => props.navigation.navigate('Start')}
/>
<DrawerItem
label="Your Cart"
labelStyle={{ color: '#fff' }}
onPress={() => props.navigation.navigate('Cart')}
/>
<DrawerItem
label="Favorites"
labelStyle={{ color: '#fff' }}
onPress={() => props.navigation.navigate('Favorites')}
/>
<DrawerItem
label="Your Orders"
labelStyle={{ color: '#fff' }}
onPress={() => props.navigation.navigate('Orders')}
/>
</View>
</DrawerContentScrollView>Stack.Navigator
<Stack.Navigator
screenOptions={{
headerTransparent: true,
headerTitle: null,
headerTitleAlign: 'left',
headerLeft: () => (
<TouchableOpacity onPress={() => navigation.openDrawer()}>
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
marginTop: 60,
}}>
<Image
source={require('../assets/images/menu.png')}
style={{ height: 30, width: 30, margin: 30 }}
/>
</View>
</TouchableOpacity>
),
}}>
<Stack.Screen name="Cart" component={Cart} />
<Stack.Screen name="Favorites" component={Favorites} />
<Stack.Screen name="Orders" component={Orders} />
<Stack.Screen name="Start" component={Start} />
</Stack.Navigator>Can you tell me how do I make this work?
Thank you in advance!!