Add tabStyle to active tab only

Version 4.0.0-beta.31

I’m asking if there’s a way to add a tabStyle to the active tab. This way you would be able to add a different style to the whole tab on the active state. I might just be missing something in the docs but I’m not able to see something to do this with

This is what I’m trying to achieve

I started to make a custom component but didn’t want to do this as there’s more configuration.

Here is the code

<Scene
        key="Tabs"
        tabs={true}
	tabBarPosition="bottom"
	activeBackgroundColor="#282828"
	inactiveBackgroundColor="#282828"
	inactiveTintColor="#6E6E6E"
	activeTintColor={'white'}
	tabBarStyle={{
		backgroundColor: '#282828'
	}}
	tabStyle={{
		width: '100%',
		height: '100%',
		borderTopColor: 'grey',
		borderTopWidth: 4,
		marginTop: -1,
		paddingTop: 10
	}}
	swipeEnabled={false}
	animationEnabled={false}
	panHandlers={null}
	initial={true}
>
.... tabs content

</Scene>

[daviscabral]

Nice - thank you. Please, when you do, refer to this issue. I’ll keep this opened and marked as feature request.

[ThomasLarge]

Hi @daviscabral I haven’t yet, I don’t really want to make a custom component as I would have to route all of the push / pops.

If the lib could have a active style prop for the container / single tab of the tab view that would be great. As you can see above I have added a border top to the whole container but I want to add it every tab and then change it to white when active.

When I have some time I’m going to have a look though the code and see if I can work it out. If so I will make a PR.