React-native-navigation: Style bottomTabs V2

Created on 19 Jan 2018  路  2Comments  路  Source: wix/react-native-navigation

How do I change the style on the bottomTabs?

I would like to change the backbround color, the tintColor of the icons and so on.

I can see that RNNBottomTabsOptions does not have any style prop. But is there another way?

Navigation.events().onAppLaunched(() => {
    Navigation.setRoot({
      bottomTabs: {
        children: [
          {
            stack: {
              children: [
                {
                  component: {
                    name: 'Feed',
                    options: {
                      bottomTab: {
                        icon: feed,
                      },
                    },
                  },
                },
              ],
            },
          },
          {
            stack: {
              children: [
                {
                  component: {
                    name: 'Explore',
                    options: {
                      bottomTab: {
                        icon: explore,
                      },
                    },
                  },
                },
              ],
            },
          },
          {
            stack: {
              children: [
                {
                  component: {
                    name: 'Notifications',
                    options: {
                      bottomTab: {
                        icon: notifications,
                      },
                    },
                  },
                },
              ],
            },
          },
          {
            stack: {
              children: [
                {
                  component: {
                    name: 'Profile',
                    options: {
                      bottomTab: {
                        icon: profile,
                      },
                    },
                  },
                },
              ],
            },
          },
        ],
      },
    })
  })
}

Environment

  • React Native Navigation version: 2.0.2093
  • React Native version: 0.52.0
  • Platform(s) (iOS, Android, or both?): Both
  • Device info (Simulator/Device? OS version? Debug/Release?): Version 10.0 (SimulatorApp-829.6

All 2 comments

Hey there,
A lot of the styling features are implemented as of yet in v2.

how we can change icon color?

Was this page helpful?
0 / 5 - 0 ratings