Access TabIcon to add badge

I’ve been trying to add badges to tab view icons. At first I thought this would simply be a case of creating a component with a badge view and passing it in to the TabNavigator options, but because it requires a function and the options are static and have no scope I’m really struggling to see how to achieve this.

Here is the code i’ve got

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 {

    constructor(props) {
        super(props);
        this.state = {badgeNumber: 1};
    }

    static navigationOptions = {
        tabBar: {
            label: 'Home',
            icon: ({ tintColor, focused }) =>
                <IconBadge
                MainElement={
                    <Ionicons
                    name={focused ? 'ios-home' : 'ios-home-outline'}
                    size={26}
                    style={{ color: tintColor }}
                    />
                }
                // can't access this as we are not in scope
                //badgeNumber={this.state.badgeNumber}
            />,
        },
    }

    render() {
        return (
            <View>
                <Button
                    onPress={() => this.setState({badgeNumber: 2})}
                    title="Set Badge Number"
                />
            </View>
        );
    }
}

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

    render() {
        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);

I can post the IconBadge code, but it just renders the icon with a badge over with the text dependent on props.badgeNumber.

Is there a way of doing this?