Add instagram example

README.md

@@ -135,6 +135,7 @@ export default function TabViewExample() {
 | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------------------------------------------------------- | --------- |
 | navigationState        | The state of the navigation including the index and routes.                                                                                                       | Yes      | `{index: number; routes: Route;}`                        |           |
 | initialLayout          | The initial layout of the tab view.                                                                                                                               | No       | `Partial<{width: number; height: number;}>`              | undefined |
+| tabViewCarouselStyle   | The style for the tab view carousel                                                                                                                               | No       | `StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>>` | undefined |
 | sceneContainerStyle    | The style for the scene container.                                                                                                                                | No       | `StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>>` | undefined |
 | sceneContainerGap      | The gap between each scene.                                                                                                                                       | No       | Number                                                   | 0         |
 | keyboardDismissMode    | Specifies how to dismiss the keyboard.                                                                                                                            | No       | `'auto'\|'on-drag'\|'none'`                              | 'auto'    |

example/package.json

@@ -16,8 +16,10 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.72.6",
+    "react-native-fast-image": "^8.6.3",
     "react-native-gesture-handler": "~2.12.0",
     "react-native-reanimated": "~3.3.0",
+    "react-native-svg": "13.9.0",
     "react-native-tab-view": "^3.5.2",
     "react-native-web": "~0.19.6"
   },

example/src/App.tsx

@@ -3,10 +3,11 @@
 import {
   Button,
   Dimensions,
+  Platform,
   SafeAreaView,
+  StatusBar,
   StyleSheet,
   Text,
-  TouchableOpacity,
   View,
 } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
@@ -21,6 +22,7 @@
   TabBar as ReactNavigationTabBar,
 } from 'react-native-tab-view';
 import converter from 'number-to-words';
+import { InstagramTabView } from './instagram/InstagramTabView';
 
 const randomColor = (() => {
   const randomInt = (min: number, max: number) => {
@@ -47,12 +49,9 @@
   text: string;
   routeIndex: number;
 }) => {
-  // React.useEffect(() => {
-  //   for (let i = 0; i < 100000000; i++) {}
-  // }, []);
   return (
     <RTVScrollView>
       <View style={[{ backgroundColor, height: 1500 }]}>
         <Text style={styles.sceneText}>{text}</Text>
       </View>
     </RTVScrollView>
@@ -100,54 +99,57 @@
     );
   }, []);
 
-  const renderHeader = React.useCallback(() => {
-    return (
-      <TouchableOpacity
-        onPress={() => {
-          console.error('pressed');
-        }}
-        style={{ backgroundColor: 'magenta' }}
-      >
-        <Text style={{ height: 200 }}>Header</Text>
-      </TouchableOpacity>
-    );
-  }, []);
-
   const handleIndexChange = React.useCallback((index: number) => {
     setNavigationState((state) => ({ ...state, index }));
   }, []);
 
   const tabViewRef = React.useRef<TabViewMethods>(null);
 
+  const [shouldShowInstagramTabView, setShouldShowInstagramTabView] =
+    React.useState(true);
+
   return (
     <GestureHandlerRootView style={styles.gestureHandlerRootView}>
-      <SafeAreaView style={styles.container}>
-        <Text>
-          {`Rendered component: ${
-            showReanimatedTabView ? 'ReanimatedTabView' : 'TabView'
-          }`}
-        </Text>
-        <Button onPress={toggleShowReanimatedTabView} title="TOGGLE" />
-        {showReanimatedTabView ? (
-          <ReanimatedTabView
-            ref={tabViewRef}
-            onIndexChange={handleIndexChange}
-            navigationState={navigationState}
-            renderScene={renderScene}
-            renderHeader={renderHeader}
-            initialLayout={initialLayout}
+      {shouldShowInstagramTabView ? (
+        <SafeAreaView style={styles.darkContainer}>
+          <Button
+            onPress={() => setShouldShowInstagramTabView(false)}
+            title="Back to Home"
           />
-        ) : (
-          <TabView
-            onIndexChange={handleIndexChange}
-            navigationState={navigationState}
-            renderScene={renderScene}
-            renderTabBar={renderTabBar}
-            initialLayout={initialTabViewLayout}
-            style={styles.tabView}
+          <InstagramTabView />
+        </SafeAreaView>
+      ) : (
+        <SafeAreaView style={styles.container}>
+          <Button
+            onPress={() => setShouldShowInstagramTabView(true)}
+            title="Instagram example"
           />
-        )}
-      </SafeAreaView>
+          <Text>
+            {`Rendered component: ${
+              showReanimatedTabView ? 'ReanimatedTabView' : 'TabView'
+            }`}
+          </Text>
+          <Button onPress={toggleShowReanimatedTabView} title="TOGGLE" />
+          {showReanimatedTabView ? (
+            <ReanimatedTabView
+              ref={tabViewRef}
+              onIndexChange={handleIndexChange}
+              navigationState={navigationState}
+              renderScene={renderScene}
+              initialLayout={initialLayout}
+            />
+          ) : (
+            <TabView
+              onIndexChange={handleIndexChange}
+              navigationState={navigationState}
+              renderScene={renderScene}
+              renderTabBar={renderTabBar}
+              initialLayout={initialTabViewLayout}
+              style={styles.tabView}
+            />
+          )}
+        </SafeAreaView>
+      )}
     </GestureHandlerRootView>
   );
 }
@@ -160,6 +162,14 @@
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
+    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
+  },
+  darkContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
+    backgroundColor: 'rgb(64,64,64)',
   },
   box: {
     width: 60,

example/src/declarations.d.ts

@@ -0,0 +1,5 @@
+// images.d.ts
+declare module '*.jpg' {
+  const value: string;
+  export default value;
+}

example/src/instagram/InstagramHeader.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { ProfileImage } from './ProfileImage';
+import { ProfileStats } from './ProfileStats';
+import { CustomView } from './basicComponents/CustomView';
+import { ProfileDescription } from './ProfileDescription';
+import { ProfileActionButtons } from './ProfileActionButtons';
+import { ProfileHighlights } from './ProfileHighlights';
+
+export const InstagramHeader = () => {
+  return (
+    <>
+      <CustomView style={styles.container}>
+        <View style={styles.profileImageContainer}>
+          <ProfileImage imageUrl={require('./assets/MainProfilePic.jpg')} />
+          <ProfileStats />
+        </View>
+        <ProfileDescription />
+        <ProfileActionButtons />
+      </CustomView>
+      <ProfileHighlights />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+  },
+  profileImageContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+  },
+});

example/src/instagram/InstagramPhotosGrid.tsx

@@ -0,0 +1,66 @@
+import React, { useCallback, useMemo } from 'react';
+import { Dimensions, StyleSheet, Image, View } from 'react-native';
+import { RTVFlatList } from 'reanimated-tab-view';
+
+type Photo = {
+  url: string;
+};
+
+const { width: screenWidth } = Dimensions.get('window');
+const photoWidth = (screenWidth - 4) / 3; // 3 photos per row with 2px gaps
+const photoHeight = photoWidth * 1.6;
+
+export const InstagramPhotoGrid: React.FC = React.memo(() => {
+  const data = useMemo(() => photos, []);
+  const renderItem = useCallback(
+    ({ item }: { item: Photo }) => <InstagramPhoto item={item} />,
+    []
+  );
+  const keyExtractor = useCallback(
+    (_: Photo, index: number) => `photo-${index}`,
+    []
+  );
+
+  return (
+    <RTVFlatList
+      data={data}
+      renderItem={renderItem}
+      numColumns={3}
+      keyExtractor={keyExtractor}
+      showsVerticalScrollIndicator={false}
+    />
+  );
+});
+
+const InstagramPhoto = React.memo(({ item }: { item: Photo }) => {
+  const source = useMemo(() => ({ uri: item.url }), [item.url]);
+  return (
+    <View style={styles.photoContainer}>
+      <Image source={source} style={styles.photo} resizeMode="cover" />
+    </View>
+  );
+});
+
+const photos: Photo[] = Array.from({ length: 500 }, (_, index) => {
+  const randomIndex = index % 5;
+  return {
+    url: `https://picsum.photos/100/180?random=${randomIndex}`,
+  };
+});
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  photoContainer: {
+    width: photoWidth,
+    height: photoHeight,
+    marginRight: 2,
+    marginBottom: 2,
+    backgroundColor: 'rgb(128,128,128)',
+  },
+  photo: {
+    width: '100%',
+    height: '100%',
+  },
+});

example/src/instagram/InstagramTabContent.tsx

@@ -0,0 +1,79 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, type ViewProps } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  type SharedValue,
+} from 'react-native-reanimated';
+import type { Route } from 'react-native-tab-view';
+import { VideosTab } from './assets/VideosTab';
+import { PhotosTab } from './assets/PhotosTab';
+import { TaggedTab } from './assets/TaggedTab';
+
+const ACTIVE_COLOR = 'rgba(255, 255, 255, 1)';
+const INACTIVE_COLOR = 'rgba(255, 255, 255, 0.5)';
+
+const IconMap = {
+  videos: VideosTab,
+  photos: PhotosTab,
+  tagged: TaggedTab,
+};
+
+type InstagramTabContentProps = ViewProps & {
+  activePercentage: SharedValue<number>;
+  route: Route;
+};
+
+export const InstagramTabContent = React.memo<InstagramTabContentProps>(
+  (props) => {
+    const { activePercentage, route, style } = props;
+
+    const Icon = IconMap[route.key as keyof typeof IconMap];
+
+    const animatedActiveLabelStyle = useAnimatedStyle(() => {
+      return {
+        opacity: Math.max(0, 1 - activePercentage.value / 100),
+      };
+    }, [activePercentage]);
+
+    const animatedInactiveLabelStyle = useAnimatedStyle(() => {
+      return {
+        opacity: activePercentage.value / 100,
+      };
+    }, [activePercentage]);
+
+    const activeLabel = useMemo(() => {
+      return (
+        <Animated.View style={[animatedActiveLabelStyle, style]}>
+          <Icon stroke={ACTIVE_COLOR} />
+        </Animated.View>
+      );
+    }, [Icon, animatedActiveLabelStyle, style]);
+    const inactiveLabel = useMemo(() => {
+      return (
+        <Animated.View
+          style={[styles.inactiveLabel, animatedInactiveLabelStyle]}
+        >
+          <Icon stroke={INACTIVE_COLOR} />
+        </Animated.View>
+      );
+    }, [Icon, animatedInactiveLabelStyle]);
+
+    return (
+      <>
+        {activeLabel}
+        {inactiveLabel}
+      </>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  inactiveLabel: {
+    position: 'absolute',
+  },
+});
+
+// styles.activeLabel,
+// animatedActiveLabelStyle,
+// activeColorStyle,
+// labelStyle,