0

I am working on the implementation of a createBottomTabNavigator. I added a tabBarIcon and I would like to use a global color that I have defined in a const in a global styles file as shown below:

global.style.js

import { StyleSheet } from "react-native";

export const Colors = {
 ...
  orange: "#F59200",
 ...
};

Router.js

import React, { Component } from "react";
...

import { StackNavigator } from "react-navigation";
import { createBottomTabNavigator, BottomTabBar } from "react-navigation-tabs";
import Icon from "react-native-vector-icons/FontAwesome";
import Colors from "MyApp/app/config/global.style";
...
import HomeScreen from "../screens/HomeScreen";
...

export const Tabs = createBottomTabNavigator({
  HomeScreen: {
    screen: HomeScreen,
    navigationOptions: () => ({
      tabBarLabel: "My Home Screen",
      tabBarIcon: ({ tintColor }) => (
        // color={Colors.orange} does not work here 
        <Icon name="rocket" color={Colors.orange} size={24} />
      )
    })
  },
...

I found a bunch of examples that show how to add the color directly, which works:

HomeScreen: {
        screen: HomeScreen,
        navigationOptions: () => ({
          tabBarLabel: "My Home Screen",
          tabBarIcon: ({ tintColor }) => (
            <Icon name="rocket" color="#F59200" size={24} />
          )
        })
      }

But I would like to know if there is a way to pass the const Colors value instead.

Any ideas?

Thanks in advance!

Mauricio Sartori
  • 2,533
  • 6
  • 26
  • 28
  • Did you solve this issue? I can't pass a const or a global value to tabBarOptions, only hard code it with a number – chai86 Nov 12 '20 at 22:46

1 Answers1

0

Try adding to to the navigation or follow through react-navigation

tabBarOptions: {
  activeTintColor: 'green',
  inactiveTintColor: 'white',
  inactiveBackgroundColor:'green'
},
Pratik Khadka
  • 908
  • 8
  • 20