React native - Transform with key of TranslateX must be a number - reactjs

Question

I have a little problem with my bottom tabs nav. I try to follow this tutorial to customize my navbar : https://www.youtube.com/watch?v=t0GMzGgHwgk
The github of his video : https://github.com/ReactiveKoding/customtabbar/blob/main/App.js
But, when I try to test it I have an error : "Transform with key of 'translateX' must be a number", but he doesn't have it...
This is my code, if you have an issue to it I will really appreciate it !
import { ScrollView, StyleSheet, Text, View, TextInput, Image, Button, TouchableOpacity, Animated, Dimensions } from 'react-native';
import 'react-native-gesture-handler';
import { LinearGradient } from 'expo-linear-gradient';
import { useFonts } from 'expo-font';
import { Linking } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/FontAwesome';
import { useRef } from 'react';
const Tab = createBottomTabNavigator();
function User({ navigation }) {
return (
<View><Text>Construction</Text></View>
)
}
function Shower({ navigation }) {
return (
<View><Text>Construction</Text></View>
)
}
function Search({ navigation }) {
return (
<View><Text>Construction</Text></View>
)
}
function Home({ navigation }) {
return (
<View><Text>Construction</Text></View>
)
}
export default function MyTabs() {
const tabOffsetValue = useRef(new Animated.Value(0)).current;
return (
<NavigationContainer screenOptions={{ headerShown: false }}>
<Tab.Navigator screenOptions={({ route }) => ({
tabBarIcon: ({focused, color, size}) => {
let iconName;
if (route.name === 'Home') {
iconName = 'home';
} else if (route.name === 'Search') {
iconName = 'search';
} else if (route.name === 'Shower') {
iconName = 'shower';
} else if (route.name === 'User') {
iconName = 'user';
}
return <Icon name={iconName} size={size} color={color} />
},
tabBarActiveTintColor: '#2A27B0',
tabBarInactiveTintColor: '#CECECE',
tabBarShowLabel: false,
tabBarStyle: {
backgroundColor: '#fff',
height: 60
}
})}>
<Tab.Screen options={{headerShown: false}} name="Home" component={Home} listeners={({navigation, route}) => ({
tabPress: e => {
Animated.spring(tabOffsetValue, {
toValue: 0,
useNativeDriver: true
}).start();
}
})}/>
<Tab.Screen options={{headerShown: false}} name="Search" component={Search} listeners={({navigation, route}) => ({
tabPress: e => {
Animated.spring(tabOffsetValue, {
toValue: 90,
useNativeDriver: true
}).start();
}
})}/>
<Tab.Screen options={{headerShown: false}} name="Shower" component={Shower} listeners={({navigation, route}) => ({
tabPress: e => {
Animated.spring(tabOffsetValue, {
toValue: 175,
useNativeDriver: true
}).start();
}
})}/>
<Tab.Screen options={{headerShown: false}} name="User" component={User} listeners={({navigation, route}) => ({
tabPress: e => {
Animated.spring(tabOffsetValue, {
toValue: 268,
useNativeDriver: true
}).start();
}
})}/>
</Tab.Navigator>
<View style={{
width: 60,
height: 2,
backgroundColor: '#2A27B0',
position: 'absolute',
bottom: 58,
left: 15,
borderRadius: 20,
transform: [
{ translateX: tabOffsetValue }
]
}}></View>
</NavigationContainer>
)
}
I already reed this issue : How to fix "transform with key of translatex must be a number" error in React Native?
But I don't understand if my problem is the same and how I have to implement the Animated.View
Thanks by advance !