Access TabIcon to add badge cont'd

[microwavesafe]

Continuing from #116 , sorry I can't reopen the previous issue.

I wanted to try out the params options first as I wanted to understand the process. I've got this code

class Home extends React.Component {

    constructor(props) {
        super(props);
    }

    static navigationOptions = {
        tabBar: ({ state }) => ({
            label: 'Home',
            icon: ({ tintColor, focused }) =>
                <IconBadge
                MainElement={
                    <Ionicons
                    name={focused ? 'ios-home' : 'ios-home-outline'}
                    size={26}
                    style={{ color: tintColor }}
                    />
                }
                badgeNumber={state.params.badgeCount}
                />,
        }),
    }

    render() {
        const {navigation} = this.props;

        return (
            <View>
                <Button
                    onPress={() => navigation.setParams({ badgeCount: 1 })}
                    title="Set Badge Number"
                />
            </View>
        );
    }
}

For my "Home" tab, inside the navigationOptions, but state.params is always undefined. I've tried the following line to try to decode the problem.

badgeNumber={typeof state.params === 'undefined' ? console.log(state) : state.params.badgeCount}

but the console output is always

{ key: 'Home', routeName: 'Home' }

Even after pressing the button and setting badgeCount to 1. I can't seem to find any way to initialise or get to these set params.

Thanks for your help.

[microwavesafe]

in TabRouter.js / getStateForAction it seems to be missing the if (action === 'SetParams') clause. I copied the StackNavigator code

if (action.type === 'SetParams') {
    const lastRoute = state.routes.find(route => route.key === action.key);
    if (lastRoute) {
        const params = {
            ...lastRoute.params,
            ...action.params,
        };
        const routes = [...state.routes];
        routes[state.routes.indexOf(lastRoute)] = {
            ...lastRoute,
            params,
        };
        return {
            ...state,
            routes,
        };
    }
}

in to the function, beneath the if (action.type == 'Navigate') clause and the params showed up in the redux debug output.

I can now set my badgeCount using this as my navigationOptions

    static navigationOptions = {
        tabBar: ({ state }) => ({
            label: 'Home',
            icon: ({ tintColor, focused }) =>
                <IconBadge
                MainElement={
                    <Ionicons
                    name={focused ? 'ios-home' : 'ios-home-outline'}
                    size={26}
                    style={{ color: tintColor }}
                    />
                }
                badgeNumber={typeof state.params === 'undefined' ? 0 : state.params.badgeCount}
                />,
        }),
    }

and this to set it

onPress={() => navigation.setParams({badgeCount : 1})}

Is this code supposed to be implemented in TabRouter or am I missing how this is supposed to work?

[microwavesafe]

#132 fixes this