tabBarBackgroundColor not workig for topTabs react

Question

I am using react native navigation version 1.1.486 by wix. I am using topTabs and want different colors for navbar and tapbar, but the properties I a passing is not working.

I am sharing my code here:-

import { Navigation } from 'react-native-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import SimpleIcon from 'react-native-vector-icons/SimpleLineIcons';
const startTabs = ()=>{

    Promise.all([
        Icon.getImageSource("md-map",30),
        Icon.getImageSource("ios-share-alt",30),
        SimpleIcon.getImageSource("menu",30,'red'),
        SimpleIcon.getImageSource("question",30,'black')
    ]).then(sources =>{
        Navigation.startSingleScreenApp({
            screen: {
                screen: 'prabhuji.CustomPack', 

                topTabs: [
                    {
                      screenId: 'prabhuji.FlowerTabOne',
                      title:'Tab 1',
                      icon: sources[1],
                    },
                    {
                      screenId: 'prabhuji.FlowerTabTwo',
                      icon: sources[0],
                      title:'Tab 2'
                    }
                ],
                navigatorButtons: {
                    leftButtons:[
                      {
                        icon:sources[2],
                        title:"Menu",
                        id:"SideDrawerToggle"
                      }
                    ],
                    rightButtons:[
                      {
                        icon:sources[3],
                        title:"Help",
                        id:"Help"
                      }
                    ]
                  },

            },
            appStyle: {
                tabBarBackgroundColor: '#0f2362',
                selectedTabFontSize: 12,
              }


        });
    });



}

export default startTabs;

The effect for this code is:-

Is there any way to use different colors for toptabs and navbar? May be I am asking a silly question. Apology for that, I am new to react native.

Answer 1

Don't put the styles in navigatorStyle, just add all tab properties to appStyle , you should add BottomTabs styles to AppStyle.

Here's an example :

  appStyle: {
    tabBarBackgroundColor: '#0f2362',
    tabBarButtonColor: '#ffffff',
    tabBarHideShadow: true,
    tabBarSelectedButtonColor: '#63d7cc',
    tabBarTranslucent: false,
    tabFontFamily: 'Avenir-Medium',  // existing font family name or asset file without extension which can be '.ttf' or '.otf' (searched only if '.ttf' asset not found)
    tabFontSize: 10,
    selectedTabFontSize: 12,
  },

Another way 1. Disabling persistent styling properties :

  appStyle: {
    keepStyleAcrossPush: false
  }

2. Setting styles dynamically:

this.props.navigator.setStyle({
  navBarBackgroundColor: 'blue'
});