React-Native: Home icon does not appear after adding Stack Navigator

Question

Hello!

When I just add Tabnavigator, all icons appear on the tab, however, when I add stackNavigator in the Home.js file, only the first icon (Start) does not appear. I’ve searched some forums and can’t find the problem. Please help me =)

Detail: snack simulator icon does not appear on IOS.

I believe the error is in Home.js or Homelist.js.

Follow the snack link for a better review.

Sorry for the ignorance, I started studying to react native recently.

Hug!

https://snack.expo.io/@israelitalo/fcec5d

App.js

import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';

import 'react-native-gesture-handler';

import Home from './src/Home'
import Contato from './src/Contato'
import Horarios from './src/Horarios'
import Sobre from './src/Sobre'

const TabNavigator = createBottomTabNavigator({
        Home: Home,
        Contato: Contato,
        Horarios: Horarios,
        Sobre: Sobre
});

export default createAppContainer(TabNavigator);

Home js.

import { createAppContainer } from 'react-navigation';
    import { createStackNavigator } from 'react-navigation-stack';

    import 'react-native-gesture-handler';

    import HomeList from './HomeList';
    import HomeProducts from './HomeProducts';

    const Navegador = createStackNavigator({
        HomeList:HomeList,
        HomeProducts:HomeProducts
    });

export default createAppContainer(Navegador);

Homelist.js

import React, { Component } from 'react';
import { View, Image, StyleSheet, Text } from 'react-native';

export default class HomeList extends Component{

    static navigationOptions = {
        title:'Restaurante',
        tabBarLabel:'Home',
        tabBarOptions: {
          showIcon: true  
        },
        tabBarIcon:({focused, tintColor})=>{
            if(focused){
                return(
                    <Image source={require('../assets/images/home_azul.png')} style={styles.icone}/>
                );
            }else{
                return(
                    <Image source={require('../assets/images/home_preto.png')} style={styles.icone}/>
                );
            }
        }
    };

    render(){
        return(
            <View>
                <Text>HomeList</Text>
            </View>
        );
    }

}

const styles = StyleSheet.create({
    icone:{
        width:26,
        height:26
    }
});

package json.

[{
  "name": "informativo",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.6",
    "react": "16.9.0",
    "react-native": "^0.61.5",
    "react-native-gesture-handler": "^1.5.3",
    "react-native-reanimated": "^1.4.0",
    "react-native-safe-area-context": "^0.6.2",
    "react-native-screens": "^2.0.0-alpha.23",
    "react-navigation": "^4.0.10",
    "react-navigation-stack": "^2.0.14",
    "react-navigation-tabs": "^2.7.0"
  },
  "devDependencies": {
    "@babel/core": "7.8.0",
    "@babel/runtime": "7.8.0",
    "@react-native-community/eslint-config": "0.0.5",
    "babel-jest": "24.9.0",
    "eslint": "6.8.0",
    "jest": "24.9.0",
    "metro-react-native-babel-preset": "0.56.4",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}[enter image description here][1]

Answer 1

There are two ways to do this. The first would be to configure the "navigationOptions" of your Stack Navigator. Agui has an example:

App.js file

import React from 'react';
import Routes from './routes';

export default function App() {
  return <Routes />;
}

File Routes.js

import React from 'react';
import {createAppContainer} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import {createStackNavigator} from 'react-navigation-stack';
import Icon from 'react-native-vector-icons/MaterialIcons';

import Page1 from './pages/Page1';
import Page2 from './pages/Page2';
import Page3 from './pages/Page3';
import Page4 from './pages/Page4';
import Page5 from './pages/Page5';
import Page6 from './pages/Page6';
import Page7 from './pages/Page7';
import Page8 from './pages/Page8';
import Page9 from './pages/Page9';

export default createAppContainer(
  createBottomTabNavigator(
    {
      Home: { screen: createStackNavigator(
        {
          Page5,
          Page6,
          Page7,
          Page8,
          Page9,
        },
        {
          defaultNavigationOptions: {
            header: null,
          },
        },
      ),navigationOptions: {
                tabBarVisible: true,
                tabBarLabel: 'Home',
                tabBarIcon: (
                  <Icon name="home" size={20} color="rgba(255,255,255,0.6)" />
                )
      }},
      Page1,
      Page2,
      Page3,
      Page4,
    },
    {
      resetOnBlur: true,
      tabBarOptions: {
        keyboardHidesTabBar: true,
        activeTintColor: '#FFF',
        inactiveTintColor: 'rgba(255, 255, 255, 0.6)',
        style: {
          backgroundColor: '#00008b',
        },
      },
    },
  ),
);

Note that inside the "Tabnavigator" I have a "Stacknavigator" in the first position, and it has within 5 screens, from "Page5" to "Page9", these pages will not have header, and will have the same icon.

Another way to configure the icon without doing so would be, within some screen of "Stacknavigator", to insert the static method "navigationOptions". See that in the example the stack has a screen called "Page5", if I had not configured the "navigationOptions" of "Stacknavigator", I could inside this file change the "tabNavigator" icon in this way:

import React, {Component} from 'react';
import Icon from 'react-native-vector-icons/FontAwesome';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {Creators as CategoriasActions} from '../store/ducks/categorias';

class Page5 extends Component {

  /Alterar o ícone
  static navigationOptions = {
    tabBarLabel: 'Home',
    tabBarIcon: ({tintColor}) => (
      <Icon name="home" size={20} color={tintColor} />
    ),
  };

  //Programação do componente

  render() {
    return (
    );
  }
}

const mapStateToProps = state => ({
  categorias: state.categorias,
});

const mapDispatchToProps = dispatch =>
  bindActionCreators(CategoriasActions, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(Page5);