Add SetParams handling in TabRouter.js

[microwavesafe]

Following on from #126 setParams in TabNavigator was not working. I believe this is because it is not handled in the getStateForAction function in TabRouter.js

The following code works with my changes

import React from 'react';
import {
    AppRegistry,
    Text,
    View,
    Button,
    StyleSheet
} from 'react-native';
import { TabNavigator, TabView } from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';
import IconBadge from './IconBadge'

class Home extends React.Component {

    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}
                />,
        }),
    }

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

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

class Settings extends React.Component {
    static navigationOptions = {
        tabBar: {
            label: 'Settings'
        },
    }

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

        return (
            <Button
                onPress={() => this.props.navigation.goBack()}
                title="Go back"
            />
        );
    }
}

const MyApp = TabNavigator({
    Home: {
        screen: Home,
    },
    Settings: {
        screen: Settings,
    },
}, {
    ...TabNavigator.Presets.iOSBottomTabs,
    tabBarOptions: {
        activeTintColor: '#e91e63',
    },
});

AppRegistry.registerComponent('ReactNavigation', () => MyApp);

And fails without them. I'm presuming this is how you intended it to work, so please dismiss if I have misunderstood.

[agrcrobles]

I noticed what you are saying...
When doing props.navigate("Page", { index: 1 }) in a TabRouter then I can't access navigation.state.params to get the index.

[microwavesafe]

Actually that is done through merging the params see #134. This issue only resolves calling

this.props.navigation.setParams(...)

We need to get both bugs fixed to get params working properly in TabNavigator

[ericvicenti]

This looks great. Can you add a test for this, or maybe share the SetParams test for StackRouter?

[microwavesafe]

OK I'm not going to lie, I have no idea how the tests work (I really work in embedded programming, where tests are dependent on hardware!). So I've just cut and paste from the StackRouter test and changed it to TabRouter.

[ericvicenti]

To run the tests, it should be as easy as npm install and npm test. Does the new test pass after your changes are added, and fail before?

[microwavesafe]

I have managed to get the test working.

[microwavesafe]

@ericvicenti @satya164

This code doesn't work with current head. It requires

if (action.type === NavigationActions.SET_PARAMS)

not

if (action.type === 'SetParams')

shall I close this and open a new pull request based on the current head?

[satya164]

You can rebase the branch against master or merge master branch to this branch - git rebase master or git merge master

[microwavesafe]

OK this now works with latest master branch, including tests. It would be good if we could get it merged.