React native - No Icons on bottom menu

Question

I'm trying to create a bottom menù flow, but I don't understand how and where I need to set the Icons of the bottom menù

At the moment I have setted the menù, it works and I'm able to personalize the menù names, but not able to set the icons. I start with the navigationOptions and before I changed the class in an extention of a component it works.

The following code is in my App.js File

const switchNavigator = createSwitchNavigator({
    loginFlow: createStackNavigator({
        Signin: SigninScreen,
        Signup: SignupScreen
    }),
    mainFlow: createBottomTabNavigator({
        /*Spogliatoio: createStackNavigator({
            Game: GameScreen,
        }),*/
        Rosa: createStackNavigator({
            Team: TeamScreen,
            PlayerDetail: PlayerDetailScreen,

        }),
        Classifica: createStackNavigator({
            LeagueTable: LeagueTableScreen,
        }),
        Calendario: createStackNavigator({
            LeagueCalendar: LeagueCalendarScreen,
        }),
        /*Carriera: createStackNavigator({
            Trainer: TrainerScreen,
        }),*/
    }),
});

const App = createAppContainer(switchNavigator);

export default () => {
    return (
        <AuthProvider>
            <App ref={(navigator) => {setNavigator(navigator)}}/>
        </AuthProvider>
    );
};

And one of the class of my menu view is the following

export default class LeagueTableScreen extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            dataSource: [],
            nomeSquadra:''
        }
    }

    componentDidMount() {
        this.fetchData()
            .catch((error) => {
                //console.log(`Error: ${error}`)
            });
    }

    render() {

        const { state, navigate } = this.props.navigation;
        const teamName = this.state.nomeSquadra;


        if (this.state.isLoading) {
            return (
                <View style={styles.container}>
                    <ActivityIndicator/>
                </View>
            )
        } else {
            return (
                <>
                    <SafeAreaView style={styles.container}>
                        <View style={styles.listItem}>
                            <Text style={styles.itemTeamName}>Nome Squadra</Text>
                            <Text style={styles.itemLegueDetail}>PG</Text>
                            <Text style={styles.itemLegueDetail}>V</Text>
                            <Text style={styles.itemLegueDetail}>P</Text>
                            <Text style={styles.itemLegueDetail}>S</Text>
                            <Text style={styles.itemLegueDetail}>+/-</Text>
                            <Text style={styles.itemLegueDetail}>RF</Text>
                            <Text style={styles.itemLegueDetail}>RS</Text>
                            <Text style={styles.itemLegueDetail}>PT</Text>
                        </View>
                        <FlatList style={styles.flatl}
                                  data={this.state.dataSource}
                                  keyExtractor={(item) => item.idSquadra}
                                  renderItem={({item}) => {
                                      return(
                                          <TouchableOpacity >
                                              <LegueViewItem item={item} nomeSquadra={teamName}/>
                                          </TouchableOpacity>
                                      )
                                  }}
                        />
                    </SafeAreaView>
                </>
            )
        }
    }
}

LeagueTableScreen['navigationOptions'] = () => ({
    title: 'Classifica',
    tabBarIcon: <SimpleLineIcons name="people" size={18}  />
})

Can someone help me to set the icons on the bottom menu?

Thank you a lot in advance!

Answer 1

I finally found the answer ^^

createStackNavigator gives you a stackConfig option and there you can implement your NavigationOprions. So I only need to define my createStackNavigator with the following structure

Rosa: createStackNavigator({
        Team: TeamScreen,
        PlayerDetail: PlayerDetailScreen,
    }, {navigationOptions: {tabBarIcon: <SimpleLineIcons name="people" size={18} />}
    }),

I hope this can help some new developer that are experimenting React-Native :D