How to change the style of an external React Native module

Question

I'm new to React Native and I'm using this repository for the TabBar.

Am I able to change some styles? By default the bubble background is blue and I want to change it to something else.

In the index.js under node_modules/react-native-fluidbottomnavigation the backgroundColor is defined as #4C53DD.

Am I able to change it from the point I am using the TabBar?

This is my NavBar:

This is my code in App.js:

<TabBar
          onPress={tabIndex => {
            console.log(tabIndex);
            curTab = tabIndex;
          }}
          values={[
            {
              title: 'requests',
              image: require('./assets/requests.png'),
              tintColor: 'red',
            },
            {
              title: 'requests',
              image: require('./assets/requests.png'),
              tintColor: 'blue',
            },
            {
              title: 'events',
              image: require('./assets/events.png'),
              default: true,
              tintColor: 'green',
            },
            {
              title: 'members',
              image: require('./assets/members.png'),
              tintColor: 'orange',
            },
            {
              title: 'account',
              image: require('./assets/account.png'),
              tintColor: 'yellow',
            },
          ]}
        />

This tintColor doesn't change the background color as you can see in the picture. I want that blue circle to be another color.

Answer 1

There is the property tintColor that you can use for both TabBar and every item like this:

import TabBar, { iconTypes } from "react-native-fluidbottomnavigation";

<TabBar
    iconStyle={{ width: 50, height: 50 }}

    // CHANGE TINT COLOR HERE ---------------

    tintColor="red" // Change tint color here

    // --------------------------------------

    onPress={(tabIndex) => {
        console.warn(tabIndex);
    }}
    isRtl={ true }
    iconSize={25}
    values={[
        { title: "Home", icon: "alarm", tintColor: curTab == 0 ? "red" : "blue", default: true, isIcon: true, iconType: iconTypes.MaterialIcons },
        { title: "Home1", tintColor: curTab == 1 ? "red" : "blue", },
        { title: "Home2", tintColor: curTab == 2 ? "red" : "blue", },
        { title: "Home3", tintColor: curTab == 3 ? "red" : "blue", },
        { title: "Home4", tintColor: curTab == 4 ? "red" : "blue", },
    ]}
/>

If you read more carefully my answer and the README at the repo, then you'll see that tintColor does not only apply to tab items but also at the TabBar component itself. So, if you set <TabBat tintColor="red" ... you'll have red color for the bubble like this: