import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import AnimatedTabBar, {TabsConfigsType} from 'curved-bottom-navigation-bar';
import {SafeAreaProvider} from 'react-native-safe-area-context';
const tabs: TabsConfigsType = {
    Home: {
        icon: ({ progress, focused }) => /* Icon Component */,
        renderTitle: ({ progress, title }) => /* Custom reanimated Component */
    },
    Profile: {
        icon: ({ progress, focused }) => /* Icon Component */,
        renderTitle: ({ progress, title }) => /* Custom reanimated Component */
    },
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
  <SafeAreaProvider>
    <NavigationContainer>
      <Tab.Navigator
        tabBar={props => (
          <AnimatedTabBar tabs={tabs} {...props} />
        )}
      >
        <Tab.Screen
          name="Home"
          component={HomeScreen}
        />
        <Tab.Screen
          name="Profile"
          component={ProfileScreen}
        />
      </Tab.Navigator>
    </NavigationContainer>
  </SafeAreaProvider>
  )
}

import React from 'react';
import Animated from 'react-native-reanimated';


interface AnimatedIconProps {
  progress: Animated.SharedValue<number>; // Reanimated - 0 is not Active, 1 is Active
  focused: boolean;
}

const AnimatedIcon = ({ progress }: AnimatedIconProps) => {
  return (
   /* DO SOME THING */
  );
};

export default AnimatedIcon;

import React from 'react';
import Animated from 'react-native-reanimated';


interface AnimatedTitleProps {
  progress: Animated.SharedValue<number>; // Reanimated - 0 is not Active, 1 is Active
  title:string;
}

const AnimatedTitle = ({ progress, title }: AnimatedTitleProps) => {
  return (
   /* DO SOME THING */
  );
};

export default AnimatedTitle;