React native tabbar navigator tab icon not display in both android and ios

Question

i want to display tab icon in my tab navigator options so below is my code

import {TabNavigator} from "react-navigation";
import {
 StyleSheet
 } from 'react-native';

 import Screen1 from "../swippager/tabs/screen1";
 import Screen2 from "../swippager/tabs/screen2";
 import Screen3 from "../swippager/tabs/screen3";

 var myTabs = TabNavigator({

 Home: {
    screen: Screen1,
    navigationOptions: {
      tabBarLabel: 'Home',
      tabBarIcon: ({ tintColor }) => 
      (
        <Image
          source={require('../swippager/Image/1.jpg')}
          style={{width: 26, height: 26, tintColor: tintColor}}
        />
      ),
    },
  },

  Shopping: {
    screen: Screen2,
    navigationOptions: {
      tabBarLabel: 'Shopping',
      tabBarIcon: ({ tintColor }) => (
        <Image
          source={require('../swippager/Image/2.jpg')}
          style={{width: 26, height: 26, tintColor: tintColor}}  
        />
      ),
    },
   }
 },
{
 tabBarPosition: 'top',
 swipeEnabled:true,
 showIcon: true ,
 animationEnabled: true,
 tabBarOptions: {
 activeTintColor:'white',
 inactiveTintColor:'#D3D3D3',
 style:{
    backgroundColor:'green',
    // borderTopWidth:1,
    // borderTopColor:'#D3D3D3'
 },
 indicatorStyle: {
    backgroundColor: 'white',
    }
  }
 });

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

export default myTabs;

when i run above code i get output tabbaricon not display see my image.

any idea how can i solve this?

Answer 1

Follow this file link:

node_modules->react-navigation->src->views->TabView->TabBarTop.js

Open the file and in the view add to the Image Tag whatever you want in it.

But make sure the link you use for the image is stored on some online server, because the offline link causes some problems when we execute APK debugging of the project.

I hope this answer will help you.