Dynamically change bottom navigation icon based on drawer navigation icon - react-native

Question

I want to dynamically change the icon of the bottom tab bar icon to the icon of the drawer page i change to. When the drawer open and i select cards page i want the payment icon to change from money to cards icon. Is this possible to achieve ? thanks
bottom tab
const bottomtab = createBottomTabNavigator(
{
home: {
screen: home,
navigationOptions: {
tabBarIcon: ({ tintColor, focused }) => <Icon name="home" color={tintColor} focused={focused} size={30} />,
},
},
payment: {
screen: paymentdrawerstack,
navigationOptions: ({ navigation }) => {
return{
tabBarIcon: ({ tintColor }) => <Icon name="money" color={tintColor} size={20} />,
}
},
},
},
drawer nav
const paymentdrawerstack = createDrawerNavigator(
{
balance: {
screen: balance,
navigationOptions: ({ navigation }) => {
return{
drawerIcon: ({ tintColor, focused }) => (
<Icon name="money" color={tintColor} focused={focused} size={20} />
),
drawerLabel: 'balance',
}
},
},
cards: {
screen: cards,
navigationOptions: ({ navigation }) => {
return{
drawerIcon: ({ tintColor, focused }) => (
<Icon name="cards" color={tintColor} focused={focused} size={20} />
),
drawerLabel: 'cards',
}
},
},

Answer 1

Try this, use this function to get the active route:
const getActiveRoute = route => {
if (!route.routes || route.routes.length === 0 || route.index >= route.routes.length) {
return route.routeName;
}
const childActiveRoute = route.routes[route.index];
return getActiveRoute(childActiveRoute);
}
And then in navigationOptions of payment, check what the active route is, change the icon accordingly, like so:
payment: {
screen: paymentdrawerstack,
navigationOptions: ({ navigation }) => {
const name = getActiveRoute(navigation.state) === 'cards' ? 'cards' : 'money';
return {
tabBarIcon: ({ tintColor }) => <Icon name={name} color={tintColor} size={20} />,
}
},
},