React-native-navigation: Selected Icon & Selected Color not working on Android

[varunrau]

Issue Description

Options for specifying Selected Icon and Selected Color are not working. Instead of setting the color the size of the text increases slightly when selected. This works correctly on iOS.

Steps to Reproduce / Code Snippets / Screenshots

                                    component: {
                                        name: 'name',
                                        options: {
                                            bottomTab: {
                                                fontSize: 12,
                                                text: 'Tab',
                                                icon: require('./assets/img/blah.png'),
                                                selectedIconColor: 'black',
                                                selectedTextColor: 'blue',
                                            },
                                        }
                                    },

---

Environment

• React Native Navigation version: https://registry.npmjs.org/react-native-navigation/-/react-native-navigation-2.0.2556.tgz
• React Native version: http://registry.npmjs.org/react-native/-/react-native-0.55.0.tgz
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): Emulator, PIE, Debug

[matpaul]

Move bottomTabs option to stack (stack.options) should help

[varunrau]

ohh bottomTabs with a plural not bottomTab?

[matpaul]

@Varnius no, I mean move options from component to stack like this, we have same issue with android and this help
```
root: {
bottomTabs: {
children: [
{
stack: {
children: [
{
component: {
name: SCREENS.main.home,
},
},
],
options: {
bottomTab: {
selectedIconColor: colors.secondary,
icon: iconHome,
},
},
},
},

[minhloi]

@matpaul What version are you using? My code has options inside stack like yours but still not working.

[varunrau]

@matpaul that fixed it for me! Thanks 🙂

[matpaul]

@minhloi latest 2.1.3 snapshot

[trialsNow]

I have the same problem,selected icon color is working from default configuration but not the selected icon in individual tabs.. I am using "latest" in my package.json

Thoughts?

stack: {
        id: 'dfs_SCREEN',
        children: [
          {
            component: {
              name: dfs_SCREEN,
              passProps: {
                text: 'This is tab 1',
                myFunction: () => 'Hello from a function!'
              },
              options: {
                topBar: {
                  title: {
                    text: 'dfs'
                  }
                },
                bottomTab: {
                  text: 'dfs',
                  icon: constants.lockIcon,
                  selectedIcon: constants.lockIconSelected,
                  testID: dfs_SCREEN
                }
              }
            }
          }
        ]
      }
    },

[matpaul]

@trialsNow as i write above, we move options.bottomTab to stack obj
So it should be stack.options.bottomTab

[minhloi]

The selectedIconColor works but the selectedIcon does not work. I just checked there is a pull request to fix that bug that haven't merged yet. Pull request #3785

[trialsNow]

@minhloi Thanks. Makes sense. Seeing exactly the same thing

[trialsNow]

One more question.. in android the status bar is filled white in color (i mean the layout color) and if i touch it it shows status icon. What style needs to be set to show status icons always?

[minhloi]

statusBar: {
  style: "dark" // This will makes the status icon black
}

[ItsNoHax]

Closing as OP fixed his issue.

[firepoweru]

@ItsNoHax

Closing as OP fixed his issue.

WHO IS OP and how did he fix his issue?