search

satya164 / react-native-tab-view

A cross-platform Tab View component for React Native
MIT License
5.13k stars 1.07k forks source link

ActiveTabStyle support. #804

Open Eljoy opened 5 years ago

Eljoy commented 5 years ago

Feature Request

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

chakrihacker commented 5 years ago

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 commented 5 years ago

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 commented 4 years ago

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

davemarquess commented 4 years ago

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

anastely commented 4 years ago

Any update?

Eljoy commented 4 years ago

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 commented 4 years ago

My solution is to use renderTabBarItem.

RupamShaw commented 4 years ago

active tabbar backgroundcolor different with inactive tabs how to do?

anastely commented 4 years ago

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 commented 4 years ago

thanks

On Tue, Sep 15, 2020 at 1:39 PM Anas T notifications@github.com 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 commented 4 years ago

Thanks satya

On Tue 15 Sep, 2020, 7:09 PM Anas T, notifications@github.com 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 commented 4 years ago

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 notifications@github.com wrote:

thanks

On Tue, Sep 15, 2020 at 1:39 PM Anas T notifications@github.com 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 commented 3 years ago

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 notifications@github.com 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

Screenshot_1626568335

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 commented 3 years ago

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 notifications@github.com 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

Screenshot_1626568335

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 commented 3 years ago

has no fix yet?

lishaoxin123 commented 2 years ago

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 notifications@github.com 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

Screenshot_1626568335

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 commented 2 years ago

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 commented 2 years ago

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, }