How to set different colors for each tab in react native

user_6574784 0
Viewed 4202

In my app I'm creating a tab using TabViewAnimated. I need those each tab to have different colors. I tried that in many ways but didn't work. This is the output I got till now.

enter image description here

What I want is given below.

enter image description here

This is my code.

import React, { PureComponent } from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import { TabViewAnimated, TabBar, SceneMap } from 'react-native-tab-view';

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

const FirstRoute = () => {
    return (
        <View style={[styles.container, styles.FirstRouteStyle]} />
    );
};

const SecondRoute = () => {
    return (
        <View style={[styles.container, styles.SecondRouteStyle]} />
    );
};

const ThirdRoute = () => {
    return (
        <View style={[styles.container, styles.ThirdRouteStyle]} />
    );
};


export default class TabView extends PureComponent {
    state = {
        index: 0,
        routes: [
            { key: 'first', title: 'First', tabStyle: { backgroundColor: 'red' } },
            { key: 'second', title: 'Second', tabStyle: { backgroundColor: 'green' } },
            { key: 'third', title: 'Third', tabStyle: { backgroundColor: 'blue' } },
        ],
    };

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


    _renderScene = SceneMap({
        first: FirstRoute,
        second: SecondRoute,
        third: ThirdRoute,
    });

    _renderHeader(props) {
        return (
            <TabBar
                {...props}
                style={styles.tabbar}
                tabStyle={styles.tabStyle}
                labelStyle={styles.labelStyle}
            />
        )
      }

    render() {
        return (
            <TabViewAnimated
                style={styles.container}
                navigationState={this.state}
                renderScene={this._renderScene}
                renderHeader={this._renderHeader}
                onIndexChange={this._handleIndexChange}
                initialLayout={initialLayout}
            />
        );
    }
}

const styles = {
    container: {
        flex: 1,
    },
    FirstRouteStyle: {
        backgroundColor: '#ff4081'
    },
    SecondRouteStyle: {
        backgroundColor: '#673ab7'
    },
    ThirdRouteStyle: {
        backgroundColor: 'yellow'
    },
    tabbar: {
        //backgroundColor: 'green',
        height: 100,
        justifyContent: 'center'
    },
    tabStyle: {

    },
    labelStyle: {

    },
    tablabel: {
        backgroundColor: 'transparent',
        color: 'black',
        fontSize: 12,
        margin: 4,
    }
};

As I have studied tabStyle can be used to style individual tabs. I used that but it didn't work. Please help me to add different colors as I mentioned above.

react-native
2 Answers

I believe tabStyle sets the style for every tab, the <TabBar> component is expecting no prop to handle the style per tab individually.

You can achieve this by implementing your own TabBar, that you can return from you renderHeader. Basically just grab the existing TabBar component, paste it in your project, update according to your styling needs, import and use in your TabView instead of the standard TabBar.

user_61067860

Finally I was able to achieve it using button groups. This is my code.

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
import { Button, ButtonGroup } from 'react-native-elements';

const component1 = () => {
    return (
        <View style={{ backgroundColor: 'red', flex: 1, width: '100%' }}>
            <Text>Hello</Text>
        </View>
    );
}
const component2 = () => {
    return (
        <View style={{ backgroundColor: 'blue', flex: 1, width: '100%' }}>
            <Text>World</Text>
        </View>
    );
}
const component3 = () => {
    return (
        <View style={{ backgroundColor: 'yellow', flex: 1, width: '100%' }}>
            <Text>ButtonGroup</Text>
        </View>
    );
}

class App extends Component {
    constructor() {
        super()
        this.state = {
            selectedIndex: 0
        }
        this.updateIndex = this.updateIndex.bind(this)
    }
    updateIndex(selectedIndex) {
        this.setState({ selectedIndex })
    }

    render() {
        const buttons = [{ element: component1 }, { element: component2 }, { element: component3 }]
        const { selectedIndex } = this.state
        if (selectedIndex === 0) {
            return (
                <View>
                    <ButtonGroup
                        onPress={this.updateIndex}
                        selectedIndex={selectedIndex}
                        buttons={buttons}
                        containerStyle={{ height: 100 }}
                    />
                    <View style={{ backgroundColor: 'yellow', width: '100%', height: 500 }} />
                </View>
             );
        } else if (selectedIndex === 1) {
            return (
                <View>
                    <ButtonGroup
                        onPress={this.updateIndex}
                        selectedIndex={selectedIndex}
                        buttons={buttons}
                        containerStyle={{ height: 100 }}
                    />
                    <View style={{ backgroundColor: 'purple', width: '100%', height: 500 }} />
                </View>
            );
        } else {
            return (
                <View>
                    <ButtonGroup
                        onPress={this.updateIndex}
                        selectedIndex={selectedIndex}
                        buttons={buttons}
                        containerStyle={{ height: 100 }}
                    />
                    <View style={{ backgroundColor: 'pink', width: '100%', height: 500 }} />
                </View>
            );
        }

    }

}

AppRegistry.registerComponent('testApp', () => App);
user_65747840
Related