React-native-tab-view: 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 [e-mail] 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, [e-mail] 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 [e-mail]
wrote:

thanks

On Tue, Sep 15, 2020 at 1:39 PM Anas T [e-mail] 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
.