Animated Bottom Tab Navigator

& after so much of trial & errors presenting the Animated bottom tab navigator.

Animated Bottom Tab was the minor challenge which was taken in consideration & implemented.

Animated Bottom Tab Bar - Snack

Find the code at Snack provided above or find it below

//App.tsx
import { StyleSheet, Text } from "react-native";
import HomeScreen from "./Homescreen.js";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import CustomTabBar from "./CustomTabBar"
const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator 
    tabBar={(props) => <CustomTabBar {...props} />}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Music" component={HomeScreen} />
      <Tab.Screen name="Search" component={HomeScreen} />
      <Tab.Screen name="Settings" component={HomeScreen} />
      <Tab.Screen name="User" component={HomeScreen} />
    </Tab.Navigator>
  );
}

const Stack = createNativeStackNavigator();
function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}


export default App;

import { StyleSheet, Text, Touchable, TouchableOpacity, View } from 'react-native'
import React from 'react'
import {Feather} from 'react-native-vector-icons';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withRepeat,
  withTiming,
  withSequence,
} from 'react-native-reanimated';

const CustomTabBar = (props) => {
  const rotation = useSharedValue(0);
  const width = useSharedValue(0);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{ rotateZ: `${rotation.value}deg` }],
    };
  });
  const animatedBorderStyle = useAnimatedStyle(() => {
    return {
      width: width.value,
    };
  });

  const handleNavigations = (routeName) => {
    rotation.value = withRepeat(withTiming(20), 2, true)
    width.value = withRepeat(withTiming(30), 2, true)
    props.navigation.navigate(routeName)
  }
  return (
    <View style={{ flexDirection: "row", justifyContent: "space-around", paddingVertical: 20 }}>
      {props.state.routeNames.map((name, index) => {
        return (
          <>
            <TouchableOpacity key={index.toString()} onPress={() => handleNavigations(name)} style={{ flexDirection: "column", alignItems: "center" }}>
              <Animated.View style={[{}, props.state.index === index && animatedStyle]} >
                <Feather style={{ color: props.state.index === index ? "black" : "grey", fontSize: 30 }} name={name.toLowerCase()} />
              </Animated.View>
              <Text>{name}</Text>
              <Animated.View style={[{ height: 2, backgroundColor: "black", },  props.state.index === index && animatedBorderStyle]} />
            </TouchableOpacity>
          </>
        )
      })}
    </View>
  )
}

export default CustomTabBar

const styles = StyleSheet.create({})

I will keep it as I would love to read, Straight to point where code is given & solution I could try. So the above code snippets are for the same.