tabBarBackgroundColor not workig for topTabs react native navigation Wix - wix-react-native-navigation

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'
});