React-native-navigation: Does anyone knows how to change the bottomTabs background color?

[Jatapiaro]

Issue Description

I've been looking to the examples and the docs, but apparently there is no documentation of about changing the background color of the bottomTabs.

import { Navigation } from 'react-native-navigation';
import Icon from 'react-native-vector-icons/Ionicons';

const StartMainTabs = () => {
    Promise.all([
        Icon.getImageSource('ios-cube', 30),
        Icon.getImageSource('ios-contact', 30)
    ]).then((res) => {
        Navigation.setRoot({
            root: {
                bottomTabs: {
                    children: [
                        {
                            stack: {
                                children: [
                                    {
                                        component: {
                                            name: 'containers-app.ContainersIndexScreen',
                                            options: {
                                                topBar: {
                                                    animate: false,
                                                    visible: true,
                                                    title: {
                                                        text: 'Título'
                                                    }
                                                },
                                                bottomTab: {
                                                    fontSize: 12,
                                                    text: 'Contenedores',
                                                    textColor: "#000",
                                                    selectedTextColor: "#FF0000",
                                                    icon: res[0],
                                                    iconColor: '#1B4C77',
                                                    selectedIconColor: '#0f0',
                                                }
                                            }
                                        },
                                    }
                                ]
                            }
                        },
                        {
                            stack: {
                                children: [
                                    {
                                        component: {
                                            name: 'containers-app.ProfileScreen',
                                            options: {
                                                topBar: {
                                                    animate: false,
                                                    visible: true,
                                                    title: {
                                                        text: 'Título B'
                                                    }
                                                },
                                                bottomTab: {
                                                    fontSize: 12,
                                                    text: 'B',
                                                    icon: res[1],
                                                    iconColor: '#1B4C77',
                                                    selectedIconColor: '#0f0',
                                                }
                                            }
                                        },
                                    }
                                ]
                            }
                        },
                    ],
                },
                options: {
                    backgroundColor: "#000"
                }
            }
        });
    })
}

export default StartMainTabs;

That is my code, but I can't find in any place of the documentation how to change the background color of the tabs. Does someone knows how to achieve this?

---

Environment

• React Native Navigation version: 2.18.4
• React Native version: 0.59.5
• Platform(s) (iOS, Android, or both?): Both
• Device info (Simulator/Device? OS version? Debug/Release?): Real devices

[Jatapiaro]

This is the solution

import { Navigation } from 'react-native-navigation';
import Icon from 'react-native-vector-icons/Ionicons';

const StartMainTabs = () => {
    Promise.all([
        Icon.getImageSource('ios-cube', 30),
        Icon.getImageSource('ios-contact', 30)
    ]).then((res) => {
        Navigation.setRoot({
            root: {
                bottomTabs: {
                    options: {
                        bottomTabs: {
                            animate: true, // Controls whether BottomTabs visibility changes should be animated
                            backgroundColor: "red"
                        }
                    },
                    children: [
                        {
                            stack: {
                                children: [
                                    {
                                        component: {
                                            name: 'containers-app.ContainersIndexScreen',
                                            options: {
                                                topBar: {
                                                    animate: false,
                                                    visible: true,
                                                    title: {
                                                        text: 'Título'
                                                    }
                                                },
                                                bottomTab: {
                                                    fontSize: 12,
                                                    text: 'Contenedores',
                                                    textColor: "#000",
                                                    selectedTextColor: "#FF0000",
                                                    icon: res[0],
                                                    iconColor: '#1B4C77',
                                                    selectedIconColor: '#0f0',
                                                }
                                            }
                                        },
                                    }
                                ]
                            }
                        },
                        {
                            stack: {
                                children: [
                                    {
                                        component: {
                                            name: 'containers-app.ProfileScreen',
                                            options: {
                                                topBar: {
                                                    animate: false,
                                                    visible: true,
                                                    title: {
                                                        text: 'Título B'
                                                    }
                                                },
                                                bottomTab: {
                                                    fontSize: 12,
                                                    text: 'B',
                                                    icon: res[1],
                                                    iconColor: '#1B4C77',
                                                    selectedIconColor: '#0f0',
                                                }
                                            }
                                        },
                                    }
                                ]
                            }
                        },
                    ],
                },
            }
        });
    })
}

export default StartMainTabs;