Pass props via Bottom Tab Navigator

Question

I’m developing an application with React Native and I’m having a problem, would someone tell me how to pass data from a screen to a Bottom Tab Navigator? I have a screen called Mainperson with a Bottom Tab Navigator, as shown in the code snippet below:

const AppTabNavigatorPerson = createBottomTabNavigator(
    {
        'Perfil': {
            screen: Perfil,
            navigationOptions: {
                tabBarOptions: {
                    activeTintColor: "#00008B",
                    inactiveTintColor: "#000000",
                    activeBackgroundColor: "#6495ED",
                    inactiveBackgroundColor: "#A9A9A9",
                    style: {
                        height: 50,
                    },
                    labelStyle: {
                        fontSize: 15,
                    },
                },
                tabBarIcon: ({ tintColor }) =>
                    <Icon name="user" color={tintColor} size={15} />
            }
        },
    }
);

So far so good, the Profile page is displayed correctly when accessing Mainperson, however, I wonder if it is possible to pass some data to this screen Profile, IE, if there is any possibility to pass a value to a Bottom Tab Navigator beyond screen or navigationOptions.

Answer 1

I was able to find the solution, but for those who have the same problem, here’s the answer:

const AppTabNavigatorPerson = createBottomTabNavigator(
    {
        Perfil: {
            screen: (props) => <Perfil {...props} />,
            navigationOptions: {
                tabBarOptions: {
                    activeTintColor: "#00008B",
                    inactiveTintColor: "#000000",
                    activeBackgroundColor: "#6495ED",
                    inactiveBackgroundColor: "#A9A9A9",
                    style: {
                        height: 50,
                    },
                    labelStyle: {
                        fontSize: 15,
                    },
                },
                tabBarIcon: ({ tintColor }) =>
                    <Icon name="user" color={tintColor} size={15} />
            }
        },
        tabBarIcon: ({ tintColor }) =>
            <Icon name="handshake" color={tintColor} size={15} />
    }
};

Just pass the props directly on the screen.