added carousel

Author: ankitpmi

babel.config.js

@@ -2,5 +2,4 @@ module.exports = {
   presets: [
     ['module:react-native-builder-bob/babel-preset', { modules: 'commonjs' }],
   ],
-  plugins: ['react-native-reanimated/plugin'],
 };

declarations.d.ts

@@ -0,0 +1 @@
+declare module 'react-native-reanimated';

example/src/App.tsx

@@ -1,85 +1,84 @@
-import { useState } from 'react';
-import { StyleSheet, View, Text, Dimensions, SafeAreaView } from 'react-native';
+import { useCallback, useMemo, useRef } from 'react';
+import { StyleSheet, View, Text, Dimensions, FlatList } from 'react-native';
 import { TabBar } from 'react-native-bottom-tab-bar';
 
-let { width } = Dimensions.get('window');
+const { width: screenWidth } = Dimensions.get('window');
 interface TabDataType {
   name: string;
   id: number;
+  bgColor: string;
 }
 
 const tabData: Array<TabDataType> = [
   {
     name: 'Home',
     id: 1,
+    bgColor: '#FFC0C7',
   },
   {
     name: 'Cart',
     id: 2,
+    bgColor: '#FF7128',
   },
   {
     name: 'Search',
     id: 3,
+    bgColor: '#0088cc',
   },
   {
     name: 'Profile',
     id: 4,
+    bgColor: '#ff6666',
   },
   // {
   //   name: 'Setting',
   //   id: 5,
+  // bgColor: '#66ff99'
   // },
 ];
 
 export default function App() {
-  const [bgColor, setBgColor] = useState('#FFC0C7');
-  const [tabs, setTabs] = useState<Array<TabDataType> | []>(tabData);
+  const tabs = useMemo(() => tabData, []);
+  const flatListRef = useRef<FlatList>(null);
 
-  const onTabChange = (item: TabDataType) => {
-    let tempTabs = [...tabs];
-    setTimeout(() => {
-      tempTabs.map((val) => {
-        if (item.name === 'Home' && val.name === 'Home') {
-          // val.activeIcon = Object.assign({}, activeHome(true))
-          setBgColor('#FFC0C7');
-        } else if (item.name === 'Cart' && val.name === 'Cart') {
-          // val.activeIcon = Object.assign({}, activeList(true))
-          setBgColor('#FF7128');
-        } else if (item.name === 'Search' && val.name === 'Search') {
-          // val.activeIcon = Object.assign({}, activeCamera(true))
-          setBgColor('#0088cc');
-        } else if (item.name === 'Setting' && val.name === 'Setting') {
-          // val.activeIcon = Object.assign({}, activeNotification(true))
-          setBgColor('#ff6666');
-        } else if (item.name === 'Profile' && val.name === 'Profile') {
-          // val.activeIcon = Object.assign({}, activeUser(true))
-          setBgColor('#66ff99');
-        } else {
-          // val.activeIcon = null
-        }
-      });
-
-      setTabs(tempTabs);
-    }, 500);
-  };
+  const onTabChange = useCallback((_item: TabDataType, index: number) => {
+    flatListRef.current?.scrollToIndex({
+      animated: true,
+      index: index,
+    });
+  }, []);
 
   return (
     <View style={styles.container}>
-      <View
-        style={{
-          backgroundColor: bgColor,
-          flex: 1,
-          justifyContent: 'center',
-          alignItems: 'center',
+      <FlatList
+        ref={flatListRef}
+        data={tabs}
+        keyExtractor={(item) => item.id.toString()}
+        renderItem={({ item }: { item: TabDataType }) => {
+          return (
+            <View
+              style={[
+                styles.slide,
+                {
+                  backgroundColor: item.bgColor,
+                },
+              ]}
+            >
+              <Text>{item.name}</Text>
+            </View>
+          );
         }}
-      >
-        <Text>App component</Text>
-      </View>
+        scrollEnabled={false}
+        horizontal
+        bounces={false}
+        pagingEnabled
+        showsHorizontalScrollIndicator={false}
+      />
       <TabBar
         tabs={tabs as Array<TabDataType>}
         onTabChange={onTabChange}
         // defaultActiveTabIndex={1}
-        containerWidth={width}
+        containerWidth={screenWidth}
         tabBarBackground={'#fff'}
         defaultActiveTabIndex={0}
         // transitionSpeed={100}
@@ -91,13 +90,15 @@ export default function App() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    // backgroundColor: '#ccc',
-    // alignItems: 'center',
-    // justifyContent: 'center',
   },
   box: {
     width: 60,
     height: 60,
     marginVertical: 20,
   },
+  slide: {
+    width: screenWidth,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
 });

src/TabBar/TabBar.tsx

@@ -33,7 +33,7 @@ export interface TabBarProps<T> {
   // containerBottomRightRadius?: number;
   activeTabBackground?: string;
   // labelStyle?: TextStyle;
-  onTabChange?: (tab: T | undefined) => void;
+  onTabChange: (tab: T, index: number) => void;
   defaultActiveTabIndex?: number;
   // transitionSpeed?: number;
 }
@@ -162,7 +162,7 @@ export const TabBar = <T,>(props: TabBarProps<T>) => {
               onTabPress={() => {
                 handleTabPress(index + 1);
                 if (val !== undefined) {
-                  onTabChange(val);
+                  onTabChange(val, index);
                 }
               }}
               containerWidth={containerWidth}

yarn.lock

@@ -12685,7 +12685,7 @@ __metadata:
   peerDependencies:
     react: "*"
     react-native: "*"
-    react-native-reanimated: ^3.15.4
+    react-native-reanimated: ^3.10.4
   languageName: unknown
   linkType: soft