DEV Community

Let's Create A Custom Animated Tab Bar With React Native

Mateo Hrastnik on January 06, 2019

If you've ever felt like the default tab bar component you get from React Navigation looks too bland, or just wanted to create something a bit more...

Read full post

kashifudk • Jul 14 '19

Help Needed, Using your example i have build a custom tab bar but for some reason the text on the android is hiding behind the spotlight view. Works if on the ios but on android its not displaying the text of the selected tab.

Here is my tabbar.js

{routes.map((route, routeIndex) => {
const isRouteActive = routeIndex === activeRouteIndex;
const tintColor = isRouteActive ? activeTintColor : inactiveTintColor;
return (
key={routeIndex}
style={S.tabButton}
onPress={() => {
onTabPress({ route });
}}
onLongPress={() => {
onTabLongPress({ route });
}}
accessibilityLabel={getAccessibilityLabel({ route })}
>

{/* {renderIcon({ route, focused: isRouteActive, tintColor })} */}
{getLabelText({ route })}

);
})}

EN

AR

Mateo Hrastnik • Jul 14 '19

Try setting a high zIndex on your text, or a negative zIndex on the spotlight component.

Cant really help you out there. If you provide a reproducible issue in a snack (snack.expo.io) I can take a look at the code.

kashifudk • Jul 14 '19

Tried this... I didn't help will provide you an expo link.

kashifudk • Jul 14 '19 • Edited

Here is an Expo Link... The problem still exists in the expo.

Custom TabBar Expo Link

Please check and let me know

kashifudk • Jul 15 '19

@hrastnik Please check the expo and let me know if there is something that i'm missing. Really appreciate any help...

Mateo Hrastnik • Jul 25 '19

Hey @kashifudk sorry for the late reply. For some reason I didn't get any notifications when you replied.
I went over the code, and as I said it's an issue with zIndex.

You should change the style off the View wrapping the Spotlight and add zIndex: 0

Change this:

<View style={StyleSheet.absoluteFillObject}>
    <SpotLight style={S.spotLight} pose={`route${activeRouteIndex}`}/>
</View>

to this:

<View style={{...StyleSheet.absoluteFillObject, zIndex: 0}}>
    <SpotLight style={S.spotLight} pose={`route${activeRouteIndex}`}/>
</View>

Alisher Akbarov • Mar 1 '19 • Edited

Help wanted, please!

How can I make a draggable tab? So that on dragging to certain x,y it opens another screen?

Mateo Hrastnik • Mar 1 '19

Not sure I understand what you mean. I think you can use the MaterialTabNavigator if you want to be able to use the swipe gesture to change tabs.

Alisher Akbarov • Mar 1 '19 • Edited

I have three tabs, one of them is draggable from its initial position.

InitialPosition of centerTab = x: 0, y: 250:

SnapPoint of CenterTab = x: 0, y: 72 , i.e can be dragged to this Y value and open new screen:

Mateo Hrastnik • Mar 5 '19

No idea how to help you. Perhaps Reanimated / Animatable or something like that.

Petar Prokopenko • May 24 '19

Maybe you can use draggable and then detect if div passes certain y position to redirect to state?

The third deadly sin⚡️ • Feb 9 '19

The component for route 'tabBarOptions' must be a React component. For example:

import MyScreen from './MyScreen';
...
tabBarOptions: MyScreen,
}

You can also use a navigator:

import MyNavigator from './MyNavigator';
...
tabBarOptions: MyNavigator,
}

This is the error that I got trying to run this code. Any ideas?

Anuj Sharma • Oct 10 '19

You are not implementing the class that you are using or the name and location of the class must be wrong.

Mateo Hrastnik • Feb 24 '19

You probably missed something. Check the code I provided for more info.

fr3fou • Feb 10 '20

could you update this for react navigation 5?

Mateo Hrastnik • Feb 12 '20

Will update soon, when I find the time.

fr3fou • Feb 12 '20

github.com/torgeadelin/react-nativ...

i fixed a library that presumably followed this tutorial

Vishesh Gupta • Jan 28 '21

Hey Guys,
I need help as I am getting error of you are using react-navigation 5 but it seem the component using 4v,
can anyone help me to upgrade the same tabbar

Benjamin Ikwuagwu • Dec 13 '20

Thanks Mateo for this tutorial. In my case I only want to make homeScreen tab bar background "transparent", and other tab bar screens background to "white". I need your on it please.