corymsmith / react-native-icons

Quick and easy icons in React Native
MIT License
1.14k stars 141 forks source link

TabbarIOS selectedIconName seems not take effect. #141

Closed xiekw2010 closed 8 years ago

xiekw2010 commented 8 years ago

iconName works, but not selectedIconName

My version:

    "react-native": "0.9.0",
    "react-native-icons": "^0.2.0",

My code as:

      <TabBarIOS>
        <TabBarIOS.Item
          iconName={'ion|ios-home-outline'}
          selectedIconName={'ion|ios-home'}
          title={'Feed'}
          iconSize={32}
          selected={this.state.selectedTab === TABBABIDS[0]}
          onPress={() => {
            this.setState({
              selectedTab: TABBABIDS[0],
            });
          }}>
          <NavigatorIOS style={{flex: 1}} initialRoute={Routes.feeds()}/>
        </TabBarIOS.Item>
        <TabBarIOS.Item
          title="Watching"
          iconName={'ion|ios-eye-outline'}
          selectedIconName={'ion|ios-eye'}
          selected={this.state.selectedTab === TABBABIDS[1]}
          onPress={() => {
            this.setState({
              selectedTab: TABBABIDS[1],
            });
          }}>
          <NavigatorIOS style={{flex: 1}} initialRoute={Routes.feeds()}/>
        </TabBarIOS.Item>
        <TabBarIOS.Item
          title="Trend"
          iconName={'ion|ios-flame-outline'}
          selectedIconName={'ion|ios-flame'}
          iconSize={32}
          selected={this.state.selectedTab === TABBABIDS[2]}
          onPress={() => {
            this.setState({
              selectedTab: TABBABIDS[2],
            });
          }}>
          <NavigatorIOS style={{flex: 1}} initialRoute={Routes.feeds()}/>
        </TabBarIOS.Item>
        <TabBarIOS.Item
          title="Setting"
          iconName={'ion|ios-gear-outline'}
          selectedIconName={'ion|ios-gear'}
          selected={this.state.selectedTab === TABBABIDS[3]}
          onPress={() => {
            this.setState({
              selectedTab: TABBABIDS[3],
            });
          }}>
          <NavigatorIOS style={{flex: 1}} initialRoute={Routes.feeds()}/>
        </TabBarIOS.Item>
      </TabBarIOS>
    );
corymsmith commented 8 years ago

You should update both React Native and this module as the version you are using is quite a bit behind

Thanks,

Cory Smith http://ca.linkedin.com/in/corysmith/ http:/twitter.com/smixx http://twitter.com/smixx

On Wed, Nov 25, 2015 at 5:14 AM, David Tse notifications@github.com wrote:

iconName works, but not selectedIconName

My version:

"react-native": "0.9.0",
"react-native-icons": "^0.2.0",

My code as:

  <TabBarIOS>
    <TabBarIOS.Item
      iconName={'ion|ios-home-outline'}
      selectedIconName={'ion|ios-home'}
      title={'Feed'}
      iconSize={32}
      selected={this.state.selectedTab === TABBABIDS[0]}
      onPress={() => {
        this.setState({
          selectedTab: TABBABIDS[0],
        });
      }}>
      <NavigatorIOS style={{flex: 1}} initialRoute={Routes.feeds()}/>
    </TabBarIOS.Item>
    <TabBarIOS.Item
      title="Watching"
      iconName={'ion|ios-eye-outline'}
      selectedIconName={'ion|ios-eye'}
      selected={this.state.selectedTab === TABBABIDS[1]}
      onPress={() => {
        this.setState({
          selectedTab: TABBABIDS[1],
        });
      }}>
      <NavigatorIOS style={{flex: 1}} initialRoute={Routes.feeds()}/>
    </TabBarIOS.Item>
    <TabBarIOS.Item
      title="Trend"
      iconName={'ion|ios-flame-outline'}
      selectedIconName={'ion|ios-flame'}
      iconSize={32}
      selected={this.state.selectedTab === TABBABIDS[2]}
      onPress={() => {
        this.setState({
          selectedTab: TABBABIDS[2],
        });
      }}>
      <NavigatorIOS style={{flex: 1}} initialRoute={Routes.feeds()}/>
    </TabBarIOS.Item>
    <TabBarIOS.Item
      title="Setting"
      iconName={'ion|ios-gear-outline'}
      selectedIconName={'ion|ios-gear'}
      selected={this.state.selectedTab === TABBABIDS[3]}
      onPress={() => {
        this.setState({
          selectedTab: TABBABIDS[3],
        });
      }}>
      <NavigatorIOS style={{flex: 1}} initialRoute={Routes.feeds()}/>
    </TabBarIOS.Item>
  </TabBarIOS>
);

— Reply to this email directly or view it on GitHub https://github.com/corymsmith/react-native-icons/issues/141.