feat. AdvancedCarouselFlatList

bottomSheet라이브러리 이슈로 하단부분은 작동 불가

animatedRN/App.tsx

@@ -6,6 +6,9 @@ import Accordion from "./src/Accordion";
 import LoopingAnimation from "./src/LoopingAnimation";
 import Main from "./src/Main";
 import AdvancedFlatList from "./src/AdvancedFlatList";
+import AdvancedCarouselFlatList from "./src/AdvancedCarouselFlatList";
+import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
 
 const Stack = createStackNavigator();
 
@@ -39,14 +42,25 @@ const AppNavigator = () => (
                 title: "AdvancedFlatList",
             }}
         />
+        <Stack.Screen
+            name='AdvancedCarouselFlatList'
+            component={AdvancedCarouselFlatList}
+            options={{
+                headerShown: false,
+            }}
+        />
     </Stack.Navigator>
 );
 
 export default function App() {
     return (
-        <NavigationContainer>
-            <AppNavigator />
-        </NavigationContainer>
+        <GestureHandlerRootView style={{ flex: 1 }}>
+            <BottomSheetModalProvider>
+                <NavigationContainer>
+                    <AppNavigator />
+                </NavigationContainer>
+            </BottomSheetModalProvider>
+        </GestureHandlerRootView>
     );
 }
 

animatedRN/package.json

@@ -10,6 +10,7 @@
         "eject": "expo eject"
     },
     "dependencies": {
+        "@gorhom/bottom-sheet": "^4.4.3",
         "@react-navigation/native": "^5.7.4",
         "@react-navigation/stack": "^5.9.1",
         "expo": "~45.0.0",
@@ -20,7 +21,7 @@
         "expo-gl": "^11.3.0",
         "expo-linear-gradient": "^11.3.0",
         "expo-status-bar": "~1.3.0",
-        "expo-three": "^6.1.0",
+        "expo-three": "^2.2.1",
         "react": "17.0.2",
         "react-dom": "17.0.2",
         "react-native": "0.68.2",

animatedRN/src/AdvancedCarouselFlatList/AdvancedCarouselFlatList.tsx

@@ -0,0 +1,134 @@
+import React, { useRef } from "react";
+import { Image, FlatList, Text, View, StatusBar, Dimensions, StyleSheet, Animated } from "react-native";
+import BottomSheet, { BottomSheetScrollView } from "@gorhom/bottom-sheet";
+
+const { width, height } = Dimensions.get("screen");
+
+const ITEM_WIDTH = width;
+const ITEM_HEIGHT = height * 0.75;
+const DOT_SIZE = 8;
+const DOT_SPACING = 8;
+const DOT_INDICATOR_SIZE = DOT_SIZE + DOT_SPACING;
+
+const images = [
+    "https://static.zara.net/photos///2020/I/1/1/p/6543/610/091/2/w/2460/6543610091_1_1_1.jpg?ts=1606727905128",
+    "https://static.zara.net/photos///2020/I/1/1/p/6543/610/091/2/w/2460/6543610091_2_1_1.jpg?ts=1606727908993",
+    "https://static.zara.net/photos///2020/I/1/1/p/6543/610/091/2/w/2460/6543610091_2_2_1.jpg?ts=1606727889015",
+    "https://static.zara.net/photos///2020/I/1/1/p/6543/610/091/2/w/2460/6543610091_2_3_1.jpg?ts=1606727896369",
+    "https://static.zara.net/photos///2020/I/1/1/p/6543/610/091/2/w/2460/6543610091_2_4_1.jpg?ts=1606727898445",
+];
+
+const product = {
+    title: "SOFT MINI CROSSBODY BAG WITH KISS LOCK",
+    description: [
+        "Mini crossbody bag available in various colours. Featuring two compartments. Handles and detachable crossbody shoulder strap. Lined interior. Clasp with two metal pieces.",
+        'Height x Length x Width: 14 x 21.5 x 4.5 cm. / 5.5 x 8.4 x 1.7"',
+    ],
+    price: "29.99£",
+};
+
+const AdvancedCarouselFlatList = () => {
+    const scrollY = useRef(new Animated.Value(0)).current;
+
+    return (
+        <View style={{ flex: 1 }}>
+            <StatusBar hidden />
+            <View style={{ height: ITEM_HEIGHT, overflow: "hidden" }}>
+                <Animated.FlatList
+                    data={images}
+                    keyExtractor={(_, index) => index.toString()}
+                    snapToInterval={ITEM_HEIGHT}
+                    decelerationRate='fast'
+                    bounces={false}
+                    onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
+                        useNativeDriver: true,
+                    })}
+                    showsVerticalScrollIndicator={false}
+                    renderItem={({ item }) => {
+                        return (
+                            <View>
+                                <Image source={{ uri: item }} style={styles.image} />
+                            </View>
+                        );
+                    }}
+                />
+                <View style={styles.pagination}>
+                    {images.map((_, index) => {
+                        return <View key={index.toString()} style={[styles.dot]} />;
+                    })}
+                    <Animated.View
+                        style={[
+                            styles.dotIndicator,
+                            {
+                                transform: [
+                                    {
+                                        translateY: Animated.divide(scrollY, ITEM_HEIGHT).interpolate({
+                                            inputRange: [0, 1],
+                                            outputRange: [0, DOT_INDICATOR_SIZE],
+                                        }),
+                                    },
+                                ],
+                            },
+                        ]}
+                    />
+                </View>
+            </View>
+            <BottomSheet initialSnapIndex={0} snapPoints={[height - ITEM_HEIGHT, height]}>
+                <BottomSheetScrollView style={{ backgroundColor: "white" }} contentContainerStyle={{ padding: 20 }}>
+                    <Text style={{ fontWeight: "800", fontSize: 16 }}>{product.title}</Text>
+                    <Text style={{ fontSize: 16 }}>{product.price}</Text>
+                    <View style={{ marginVertical: 20 }}>
+                        {product.description.map((textDescription, index) => {
+                            return (
+                                <Text key={index.toString()} style={{ marginBottom: 10, lineHeight: 22 }}>
+                                    {textDescription}
+                                </Text>
+                            );
+                        })}
+                    </View>
+                    <View style={{ marginVertical: 20 }}>
+                        {product.description.map((textDescription, index) => {
+                            return (
+                                <Text key={index.toString()} style={{ marginBottom: 10, lineHeight: 22 }}>
+                                    {textDescription}
+                                </Text>
+                            );
+                        })}
+                    </View>
+                </BottomSheetScrollView>
+            </BottomSheet>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    image: {
+        width: ITEM_WIDTH,
+        height: ITEM_HEIGHT,
+        resizeMode: "cover",
+    },
+    pagination: {
+        position: "absolute",
+        top: ITEM_HEIGHT / 2,
+        left: 20,
+    },
+    dot: {
+        width: DOT_SIZE,
+        height: DOT_SIZE,
+        borderRadius: DOT_SIZE / 2,
+        backgroundColor: "#333",
+        marginBottom: DOT_SPACING,
+    },
+    dotIndicator: {
+        width: DOT_INDICATOR_SIZE,
+        height: DOT_INDICATOR_SIZE,
+        borderRadius: DOT_INDICATOR_SIZE / 2,
+        borderWidth: 1,
+        borderColor: "#333",
+        position: "absolute",
+        top: -DOT_SIZE / 2,
+        left: -DOT_SIZE / 2,
+    },
+});
+
+export default AdvancedCarouselFlatList;

animatedRN/src/AdvancedCarouselFlatList/index.ts

@@ -0,0 +1,3 @@
+import AdvancedCarouselFlatList from "./AdvancedCarouselFlatList";
+
+export default AdvancedCarouselFlatList;

animatedRN/src/Main/Main.tsx

@@ -14,6 +14,12 @@ const Main = ({ navigation }: any) => {
                 <Pressable onPress={() => navigation.navigate("AdvancedFlatList")} style={styles.buttonContainer}>
                     <Text style={styles.text}>AdvancedFlatList</Text>
                 </Pressable>
+                <Pressable
+                    onPress={() => navigation.navigate("AdvancedCarouselFlatList")}
+                    style={styles.buttonContainer}
+                >
+                    <Text style={styles.text}>AdvancedCarouselFlatList</Text>
+                </Pressable>
             </View>
         </ScrollView>
     );

animatedRN/tsconfig.json

@@ -1,6 +1,29 @@
 {
-  "extends": "expo/tsconfig.base",
-  "compilerOptions": {
-    "strict": true
-  }
+    "extends": "expo/tsconfig.base",
+    "compilerOptions": {
+        "allowSyntheticDefaultImports": true,
+        "jsx": "react-native",
+        "lib": ["dom", "esnext"],
+        "moduleResolution": "node",
+        "noEmit": true,
+        "skipLibCheck": true,
+        "resolveJsonModule": true,
+        // "strict": true,
+        /* Additional Checks */
+        "noUnusedLocals": true /* Report errors on unused locals. */,
+        "noUnusedParameters": true /* Report errors on unused parameters. */,
+        "noImplicitReturns": true /* Report error when not all code paths in function return a value. */,
+        "noFallthroughCasesInSwitch": true /* Report errors for fallthrough cases in switch statement. */,
+        "noUncheckedIndexedAccess": false /* Include 'undefined' in index signature results */,
+        "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+        "allowUnreachableCode": false,
+        "allowUnusedLabels": false,
+        "noImplicitAny": true /* Raise error on expressions and declarations with an implied 'any' type. */,
+        "strictNullChecks": true /* Enable strict null checks. */,
+        "strictFunctionTypes": true /* Enable strict checking of function types. */,
+        "strictBindCallApply": true /* Enable strict 'bind', 'call', and 'apply' methods on functions. */,
+        "strictPropertyInitialization": true /* Enable strict checking of property initialization in classes. */,
+        "noImplicitThis": true /* Raise error on 'this' expressions with an implied 'any' type. */,
+        "alwaysStrict": true /* Parse in strict mode and emit "use strict" for each source file. */
+    }
 }