React-native-tab-view: How change color icon selected ?

[Gatamura]

I would like to know if I do not click with you to change the rendered image?

import React, {Component} from 'react';
import { View, StyleSheet, Dimensions, Text, StatusBar, Image, Animated} from 'react-native';
import { TabViewAnimated, SceneMap, TabBar } from 'react-native-tab-view';
import {Header} from 'react-native-elements'
import {Actions} from 'react-native-router-flux'

import TabNavigator from 'react-native-tab-navigator';

import News from './News'
import Calls from './Calls'

const initialLayout = {
height: 0,
width: Dimensions.get('window').width,
};

const images = {
Image1: require('../imagens/newspaper.png'),
Image2: require('../imagens/line-chart.png'),
Image3: require('../imagens/line-chart-blue.png'),
Image4: require('../imagens/newspaper-blue.png')
};

export default class TabView extends Component {
constructor(props){
super(props)

this.state = {index: 0, routes: [{ key: 'first', title: 'News', icon: images.Image1, iconSelected: images.Image4 },
                                 { key: 'second', title: 'Calls', icon: images.Image2, iconSelected: images.Image3}]}

}
_renderIcon = ({route}) => {

return <Image style={{width: 20, height: 20}} source={route.icon}/>;

};

_renderIndicator = ({route}) => {

return <Image style={{width: 20, height: 20}} source={route.iconSelected}/>;

}

_renderFooter = props => {

return(
  <TabBar style={{backgroundColor: '#fff', elevation: 0, height: 52}} labelStyle={{fontSize: 10, color: '#000'}} indicatorStyle={{backgroundColor: '#68e884'}} {...props} renderIcon={this._renderIcon} renderIndicator={this._renderIndicator}/>
)

}

_handleIndexChange = index => this.setState({ index });

_renderScene = SceneMap({
first: News,
second: Calls
});

_Settings(){
Actions.settings()
}

render() {
return (

backgroundColor='#fff'
centerComponent={{ text: 'Infocrypto', style: { color: '#000', fontSize: 25, } }}
rightComponent={{ icon: 'settings', color: '#fff', onPress: this._Settings, onLongPress: this._Settings, color: '#000' }}

      />
        <TabViewAnimated
            style={{flex: 1}}
            navigationState={this.state}
            renderScene={this._renderScene}
            renderFooter={this._renderFooter}
            onIndexChange={this._handleIndexChange}
            initialLayout={initialLayout}

        />

    </View>
);

}
}

[aligfl]

I kinda need help with this as well, has anyone figured out a solution to his?

[aligfl]

Figured out a way

  state = {
    index: 1,
    routes: [
      { key: 'first', title: 'First', icon: 'ios-paper' },
      { key: 'second', title: 'Second', icon: 'ios-people' },
    ],
  };

  _renderIcon = ({ route, index }) => (
    <Icon
      name={route.icon}
      size={24}
      color={this.state.index === index ? '#BBBBBF' : '#BBBBBB'}
    />
  );

  _renderHeader = props => (
    <TabBar
      {...props}
      renderIcon={this._renderIcon}
      renderLabel={() => {}}
      style={styles.tabbar}
    />
  );

[satya164]

Hey, I just released a new alpha 2.0.0-alpha.0 of the library. It's rewritten using react-native-gesture-handler and react-native-reanimated addresses a many platform specific bugs and performance problems. The documentation is updated as well.

Please try the new version and see if it addresses your issue. If not, please open a new issue following the issue template.

[Ritesh175862]

I would like to know if I do not click with you to change the rendered image?

import React, {Component} from 'react';
import { View, StyleSheet, Dimensions, Text, StatusBar, Image, Animated} from 'react-native';
import { TabViewAnimated, SceneMap, TabBar } from 'react-native-tab-view';
import {Header} from 'react-native-elements'
import {Actions} from 'react-native-router-flux'

import TabNavigator from 'react-native-tab-navigator';

import News from './News'
import Calls from './Calls'

const initialLayout = {
height: 0,
width: Dimensions.get('window').width,
};

const images = {
Image1: require('../imagens/newspaper.png'),
Image2: require('../imagens/line-chart.png'),
Image3: require('../imagens/line-chart-blue.png'),
Image4: require('../imagens/newspaper-blue.png')
};

export default class TabView extends Component {
constructor(props){
super(props)

this.state = {index: 0, routes: [{ key: 'first', title: 'News', icon: images.Image1, iconSelected: images.Image4 },
                                 { key: 'second', title: 'Calls', icon: images.Image2, iconSelected: images.Image3}]}

}
_renderIcon = ({route}) => {

return <Image style={{width: 20, height: 20}} source={route.icon}/>;

};

_renderIndicator = ({route}) => {

return <Image style={{width: 20, height: 20}} source={route.iconSelected}/>;

}

_renderFooter = props => {

return(
  <TabBar style={{backgroundColor: '#fff', elevation: 0, height: 52}} labelStyle={{fontSize: 10, color: '#000'}} indicatorStyle={{backgroundColor: '#68e884'}} {...props} renderIcon={this._renderIcon} renderIndicator={this._renderIndicator}/>
)

}

_handleIndexChange = index => this.setState({ index });

_renderScene = SceneMap({
first: News,
second: Calls
});

_Settings(){
Actions.settings()
}

render() {
return (

backgroundColor='#fff'
centerComponent={{ text: 'Infocrypto', style: { color: '#000', fontSize: 25, } }}
rightComponent={{ icon: 'settings', color: '#fff', onPress: this._Settings, onLongPress: this._Settings, color: '#000' }}

      />
        <TabViewAnimated
            style={{flex: 1}}
            navigationState={this.state}
            renderScene={this._renderScene}
            renderFooter={this._renderFooter}
            onIndexChange={this._handleIndexChange}
            initialLayout={initialLayout}

        />

    </View>
);

}
}

renderFooter? is that really a function.