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

[kashifudk]

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]

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]

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

[kashifudk]

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

Custom TabBar Expo Link

Please check and let me know

[kashifudk]

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

[Mateo Hrastnik]

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>