React Native - Move Tab Bar with Screens - react-native

Question

I was inspired by the tab navigation in Up Bank, which you can see around half way through this article here.
Currently I am using the React Native Material Top Tab Navigator, which has a position prop that can be passed from the Navigator component and into the Tab Bar that sits above the screens. As such, I thought that using interpolation with this position prop is the best way to go in making it work.
I also found this article here, which I found to be an incredibly useful resource in getting things moving. Still, I cannot quite get the screens to be flush with the navigation tabs, particularly as you add/remove pages.
I had an idea with React Native Gesture Handler, however it seems that the Tab Navigator is built on this anyway, and also using useLayoutEffect and other hooks to get the position of the tab element and update it on change. Currently I feel interpolation is the way to go, but happy to be proved wrong (even better if I am proved wrong with a working solution).
My current code:
const Tab = createMaterialTopTabNavigator();
const { width } = Dimensions.get("screen");
export const TabNavBar = ({
state,
navigation,
position,
}: MaterialTopTabBarProps): JSX.Element => {
const [tabPostion, setTabPosition] = React.useState(0);
const routes = state.routes.length;
const tabDifference = width / routes;
const inputRange = [
state.index - routes,
state.index,
state.index,
state.index + routes,
];
const translateXPosition = position.interpolate({
inputRange,
outputRange: [tabDifference, -37.5, -37.5, -tabDifference],
});
React.useEffect(() => {
setTabPosition(translateXPosition);
}, []);
return (
<View
style={{
paddingTop: 50,
flexDirection: "row",
height: 100,
backgroundColor: "white",
}}
>
<Animated.View
style={{
flex: 1,
flexDirection: "row",
alignItems: "center",
transform: [{ translateX: tabPostion }],
position: "absolute",
left: "25%",
top: 50,
}}
>
{state.routes.map((route, index) => {
const label = route.name;
return (
<TouchableOpacity
key={index}
style={{ position: "relative", paddingHorizontal: 20 }}
>
<Animated.Text>{label}</Animated.Text>
</TouchableOpacity>
);
})}
</Animated.View>
</View>
);
};
function TabNavigator() {
return (
<Tab.Navigator
initialRouteName="TabTwo"
tabBar={(props) => <TabNavBar {...props} />}
>
<Tab.Screen name="TabOne" component={TabOneScreen} />
<Tab.Screen name="TabTwo" component={TabTwoScreen} />
<Tab.Screen name="TabThree" component={TabThreeScreen} />
<Tab.Screen name="TabFour" component={TabFourScreen} />
<Tab.Screen name="TabFive" component={TabFiveScreen} />
</Tab.Navigator>
);
}
God speed friends. Any help is greatly appreciated!

Answer 1

Replacing the -37.5 with a non-arbitrary number should fix your issue.
Unless you have any Dead Zones you should be able to set your input ranging from 0 to the number of screens you have.
For the output values, you can use where you want the screen to appear on the first page with the max value being where the tab bar appears on the final screen.
An Example would look like this:
const Tab = createMaterialTopTabNavigator();
const { width } = Dimensions.get("screen");
export const TabNavBar = ({
state,
navigation,
position,
}: MaterialTopTabBarProps): JSX.Element => {
const [tabPostion, setTabPosition] = React.useState(0);
const routes = state.routes.length;
const tabDifference = width / routes;
const inputRange = [
0, // First Screen
routes // Final Screen
];
const translateXPosition = position.interpolate({
inputRange,
outputRange: [tabDifference, tabDifference * routes],
});
React.useEffect(() => {
setTabPosition(translateXPosition);
}, []);
return (
<View
style={{
paddingTop: 50,
flexDirection: "row",
height: 100,
backgroundColor: "white",
}}
>
<Animated.View
style={{
flex: 1,
flexDirection: "row",
alignItems: "center",
transform: [{ translateX: tabPostion }],
position: "absolute",
left: "25%",
top: 50,
}}
>
{state.routes.map((route, index) => {
const label = route.name;
return (
<TouchableOpacity
key={index}
style={{ position: "relative", paddingHorizontal: 20 }}
>
<Animated.Text>{label}</Animated.Text>
</TouchableOpacity>
);
})}
</Animated.View>
</View>
);
};
function TabNavigator() {
return (
<Tab.Navigator
initialRouteName="TabTwo"
tabBar={(props) => <TabNavBar {...props} />}
>
<Tab.Screen name="TabOne" component={TabOneScreen} />
<Tab.Screen name="TabTwo" component={TabTwoScreen} />
<Tab.Screen name="TabThree" component={TabThreeScreen} />
<Tab.Screen name="TabFour" component={TabFourScreen} />
<Tab.Screen name="TabFive" component={TabFiveScreen} />
</Tab.Navigator>
);
}