ActiveTabStyle support.

[Eljoy]

Feature Request

One might find it extremely useful to provide active tab style. Use case example

[chakrihacker]

You can customize style using indicatorStyle in TabBar Component. It's an implemented feature 😀 https://github.com/react-native-community/react-native-tab-view#tabbar

[Eljoy]

You can customize style using indicatorStyle in TabBar Component. It's an implemented feature 😀 https://github.com/react-native-community/react-native-tab-view#tabbar

I dont see how this would help to apply style to active tab background, not to indicator.

[Allyday]

Is there a solution to this yet? I'm also having this problem

[davemarquess]

same, i'm also having this issue. would like to be able to provide a fontWeight to the active tab

[anastely]

Any update?

[Eljoy]

As a workaround you can set indicator height to the tab width, and add borderBottom styling. Not the best approach. Probably the issue should be reopened.

const AppTabBar = (props) => (
  <TabBar
    {...props}
    activeColor={Colors.primary700}
    pressColor={Colors.primary200}
    inactiveColor={Colors.gray3}
    indicatorStyle={styles.indicator}
    tabStyle={styles.tab}
    style={styles.tabBar}
  />
);

const styles = StyleSheet.create({
  tabBar: {
    backgroundColor: Colors.white,
    elevation: 1,
  },
  indicator: {
    backgroundColor: Colors.primary50,
    borderBottomColor: Colors.primary500,
    borderBottomWidth: 2,
    height: 56,
  }
});

[dcangulo]

My solution is to use renderTabBarItem.

[RupamShaw]

active tabbar backgroundcolor different with inactive tabs how to do?

[anastely]

active tabbar backgroundcolor different with inactive tabs how to do?

you can use indicator style to achive it :) indicatorStyle: { backgroundColor: '#000', height: '100%', borderRadius: 20, }

[kamrankm9090]

thanks

On Tue, Sep 15, 2020 at 1:39 PM Anas T [email protected] wrote:

active tabbar backgroundcolor different with inactive tabs how to do?

you can use indicator style to achive it :) indicatorStyle: { backgroundColor: '#000', height: '100%', borderRadius: 20, }

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/satya164/react-native-tab-view/issues/804#issuecomment-692580897, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMNABWBSZ2AZA3PYIXGMKMDSF4VL7ANCNFSM4HYRKM3Q .

[RupamShaw]

Thanks satya

On Tue 15 Sep, 2020, 7:09 PM Anas T, [email protected] wrote:

active tabbar backgroundcolor different with inactive tabs how to do?

you can use indicator style to achive it :) indicatorStyle: { backgroundColor: '#000', height: '100%', borderRadius: 20, }

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/satya164/react-native-tab-view/issues/804#issuecomment-692580897, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABE6HVSK57LEVR6IUEE6ZLTSF4VLZANCNFSM4HYRKM3Q .

[RupamShaw]

its not rendering background color, this indicator style only works when you press that tab and once you release it will no more in effect.

On Tue, Sep 15, 2020 at 8:31 PM kamrankm9090 [email protected] wrote:

thanks

On Tue, Sep 15, 2020 at 1:39 PM Anas T [email protected] wrote:

active tabbar backgroundcolor different with inactive tabs how to do?

you can use indicator style to achive it :) indicatorStyle: { backgroundColor: '#000', height: '100%', borderRadius: 20, }

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub < https://github.com/satya164/react-native-tab-view/issues/804#issuecomment-692580897 , or unsubscribe < https://github.com/notifications/unsubscribe-auth/AMNABWBSZ2AZA3PYIXGMKMDSF4VL7ANCNFSM4HYRKM3Q

.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/satya164/react-native-tab-view/issues/804#issuecomment-692627212, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABE6HVXXI57O6PE7ZTEJZVTSF467NANCNFSM4HYRKM3Q .

[baiqunicui]

its not rendering background color, this indicator style only works when you press that tab and once you release it will no more in effect. On Tue, Sep 15, 2020 at 8:31 PM kamrankm9090 [email protected] wrote: … thanks On Tue, Sep 15, 2020 at 1:39 PM Anas T @.***> wrote: > active tabbar backgroundcolor different with inactive tabs how to do? > > you can use indicator style to achive it :) > indicatorStyle: { backgroundColor: '#000', height: '100%', borderRadius: > 20, } > > — > You are receiving this because you are subscribed to this thread. > Reply to this email directly, view it on GitHub > < #804 (comment) >, > or unsubscribe > < https://github.com/notifications/unsubscribe-auth/AMNABWBSZ2AZA3PYIXGMKMDSF4VL7ANCNFSM4HYRKM3Q > > . > — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#804 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABE6HVXXI57O6PE7ZTEJZVTSF467NANCNFSM4HYRKM3Q .

this is my solution, maybe helpful i use rendeLabel to make a button one

import React, { useState } from 'react';
import { SceneMap, TabBar, TabBarItem, TabView } from 'react-native-tab-view';
import { Text, View } from 'react-native';

import MoleButton3 from '../button/3';
import tailwind from 'tailwind-rn';

const OneRoute = () => (
    <View className="h-full" >
        <Text className="">11111</Text>
    </View>
);

const TwoRoute = () => (
    <View className="h-full" >
        <Text className="">2222</Text>
    </View>
);

const ThreeRoute = () => (
    <View className="h-full" >
        <Text className="">3333</Text>
    </View>
);

const renderScene = SceneMap({
    One: OneRoute,
    Two: TwoRoute,
    Three: ThreeRoute,
});

const renderLabel = ({ route, focused }) => {
    if (focused) {
        return <MoleButton3>{route.title}</MoleButton3>;
    } else
        return <MoleButton3 className="bg-white bg-opacity-5" color="text-primary">{route.title}</MoleButton3>;
}

const renderTabBarItem = (props) => (
    <View className="w-1/3" key={props.route.key}>
        <TabBarItem
            {...props}
            renderLabel={renderLabel}
        />
    </View>
)

export default function MoleMenu1() {
    const [index, setIndex] = useState(0);
    const [routes] = useState([
        { key: 'One', title: 'One' },
        { key: 'Two', title: 'Two' },
        { key: 'Three', title: 'Three' },
    ]);

    return (
        <TabView
            renderTabBar={props => (
                <TabBar
                    {...props}
                    style={[tailwind('rounded-xl mb-4'), { elevation: 0, backgroundColor: '#C5ECF7' }]}
                    indicatorStyle={{ height: 0, width: 0, opacity: 0 }}
                    renderTabBarItem={renderTabBarItem}
                />
            )}

            lazy
            navigationState={{ index, routes }}
            onIndexChange={setIndex}
            renderScene={renderScene}
        />
    );
}

inside ..\..\MoleButton3

            <View className="min-w-full p-3 rounded-xl bg-primary" style={[this.props.style]}>
                <AtomTextP className={`${this.props.color ?? 'text-white'} font-bold text-center`} numberOfLines={1}>{this.props.children}</AtomTextP>
            </View>

sorry to using babel-plugin-tailwind-rn-classname here so have classname, but basicly same with style

[RamProg]

its not rendering background color, this indicator style only works when you press that tab and once you release it will no more in effect. On Tue, Sep 15, 2020 at 8:31 PM kamrankm9090 [email protected] wrote: … thanks On Tue, Sep 15, 2020 at 1:39 PM Anas T @.***> wrote: > active tabbar backgroundcolor different with inactive tabs how to do? > > you can use indicator style to achive it :) > indicatorStyle: { backgroundColor: '#0', height: '100%', borderRadius: > 20, } > > — > You are receiving this because you are subscribed to this thread. > Reply to this email directly, view it on GitHub > < #804 (comment) >, > or unsubscribe > < https://github.com/notifications/unsubscribe-auth/AMNABWBSZ2AZA3PYIXGMKMDSF4VL7ANCNFSM4HYRKM3Q > > . > — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#804 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABE6HVXXI57O6PE7ZTEJZVTSF467NANCNFSM4HYRKM3Q .

this is my solution, maybe helpful i use rendeLabel to make a button one

import React, { useState } from 'react';
import { SceneMap, TabBar, TabBarItem, TabView } from 'react-native-tab-view';
import { Text, View } from 'react-native';

import MoleButton3 from '../button/3';
import tailwind from 'tailwind-rn';

const OneRoute = () => (
    <View className="h-full" >
        <Text className="">11111</Text>
    </View>
);

const TwoRoute = () => (
    <View className="h-full" >
        <Text className="">2222</Text>
    </View>
);

const ThreeRoute = () => (
    <View className="h-full" >
        <Text className="">3333</Text>
    </View>
);

const renderScene = SceneMap({
    One: OneRoute,
    Two: TwoRoute,
    Three: ThreeRoute,
});

const renderLabel = ({ route, focused }) => {
    if (focused) {
        return <MoleButton3>{route.title}</MoleButton3>;
    } else
        return <MoleButton3 className="bg-white bg-opacity-5" color="text-primary">{route.title}</MoleButton3>;
}

const renderTabBarItem = (props) => (
    <View className="w-1/3" key={props.route.key}>
        <TabBarItem
            {...props}
            renderLabel={renderLabel}
        />
    </View>
)

export default function MoleMenu1() {
    const [index, setIndex] = useState(0);
    const [routes] = useState([
        { key: 'One', title: 'One' },
        { key: 'Two', title: 'Two' },
        { key: 'Three', title: 'Three' },
    ]);

    return (
        <TabView
            renderTabBar={props => (
                <TabBar
                    {...props}
                    style={[tailwind('rounded-xl mb-4'), { elevation: 0, backgroundColor: '#C5ECF7' }]}
                    indicatorStyle={{ height: 0, width: 0, opacity: 0 }}
                    renderTabBarItem={renderTabBarItem}
                />
            )}

            lazy
            navigationState={{ index, routes }}
            onIndexChange={setIndex}
            renderScene={renderScene}
        />
    );
}

inside ..\..\MoleButton3

            <View className="min-w-full p-3 rounded-xl bg-primary" style={[this.props.style]}>
                <AtomTextP className={`${this.props.color ?? 'text-white'} font-bold text-center`} numberOfLines={1}>{this.props.children}</AtomTextP>
            </View>

sorry to using babel-plugin-tailwind-rn-classname here so have classname, but basicly same with style

Thank you, this worked! You are awesome!

[avillarubia]

has no fix yet?

[lishaoxin123]

its not rendering background color, this indicator style only works when you press that tab and once you release it will no more in effect. On Tue, Sep 15, 2020 at 8:31 PM kamrankm9090 [email protected] wrote: … thanks On Tue, Sep 15, 2020 at 1:39 PM Anas T @.***> wrote: > active tabbar backgroundcolor different with inactive tabs how to do? > > you can use indicator style to achive it :) > indicatorStyle: { backgroundColor: '#0', height: '100%', borderRadius: > 20, } > > — > You are receiving this because you are subscribed to this thread. > Reply to this email directly, view it on GitHub > < #804 (comment) >, > or unsubscribe > < https://github.com/notifications/unsubscribe-auth/AMNABWBSZ2AZA3PYIXGMKMDSF4VL7ANCNFSM4HYRKM3Q > > . > — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#804 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABE6HVXXI57O6PE7ZTEJZVTSF467NANCNFSM4HYRKM3Q .

this is my solution, maybe helpful i use rendeLabel to make a button one

import React, { useState } from 'react';
import { SceneMap, TabBar, TabBarItem, TabView } from 'react-native-tab-view';
import { Text, View } from 'react-native';

import MoleButton3 from '../button/3';
import tailwind from 'tailwind-rn';

const OneRoute = () => (
    <View className="h-full" >
        <Text className="">11111</Text>
    </View>
);

const TwoRoute = () => (
    <View className="h-full" >
        <Text className="">2222</Text>
    </View>
);

const ThreeRoute = () => (
    <View className="h-full" >
        <Text className="">3333</Text>
    </View>
);

const renderScene = SceneMap({
    One: OneRoute,
    Two: TwoRoute,
    Three: ThreeRoute,
});

const renderLabel = ({ route, focused }) => {
    if (focused) {
        return <MoleButton3>{route.title}</MoleButton3>;
    } else
        return <MoleButton3 className="bg-white bg-opacity-5" color="text-primary">{route.title}</MoleButton3>;
}

const renderTabBarItem = (props) => (
    <View className="w-1/3" key={props.route.key}>
        <TabBarItem
            {...props}
            renderLabel={renderLabel}
        />
    </View>
)

export default function MoleMenu1() {
    const [index, setIndex] = useState(0);
    const [routes] = useState([
        { key: 'One', title: 'One' },
        { key: 'Two', title: 'Two' },
        { key: 'Three', title: 'Three' },
    ]);

    return (
        <TabView
            renderTabBar={props => (
                <TabBar
                    {...props}
                    style={[tailwind('rounded-xl mb-4'), { elevation: 0, backgroundColor: '#C5ECF7' }]}
                    indicatorStyle={{ height: 0, width: 0, opacity: 0 }}
                    renderTabBarItem={renderTabBarItem}
                />
            )}

            lazy
            navigationState={{ index, routes }}
            onIndexChange={setIndex}
            renderScene={renderScene}
        />
    );
}

inside ..\..\MoleButton3

            <View className="min-w-full p-3 rounded-xl bg-primary" style={[this.props.style]}>
                <AtomTextP className={`${this.props.color ?? 'text-white'} font-bold text-center`} numberOfLines={1}>{this.props.children}</AtomTextP>
            </View>

sorry to using babel-plugin-tailwind-rn-classname here so have classname, but basicly same with style

good thanks

[Yuniac]

same, i'm also having this issue. would like to be able to provide a fontWeight to the active tab

About two years later and I want to do this too, but no clear way to do it still it seems.

[MedRaid]

same, i'm also having this issue. would like to be able to provide a fontWeight to the active tab

About two years later and I want to do this too, but no clear way to do it still it seems.

use anastely's solution, it works fine for me even thought we really need a more practical solution

you can use indicator style to achive it :) indicatorStyle: { backgroundColor: '#000', height: '100%', borderRadius: 20, }