feat. AdvancedFlatList

devym-37 · Aug 21, 2022 · 5d1213f · 5d1213f
1 parent 62893fe
commit 5d1213f
Show file tree

Hide file tree

Showing 5 changed files with 179 additions and 0 deletions.
diff --git a/animatedRN/App.tsx b/animatedRN/App.tsx
@@ -4,11 +4,20 @@ import { createStackNavigator } from "@react-navigation/stack";
 import { StyleSheet, Text, View } from "react-native";
 import Accordion from "./src/Accordion";
 import LoopingAnimation from "./src/LoopingAnimation";
+import Main from "./src/Main";
+import AdvancedFlatList from "./src/AdvancedFlatList";
 
 const Stack = createStackNavigator();
 
 const AppNavigator = () => (
     <Stack.Navigator>
+        <Stack.Screen
+            name='Main'
+            component={Main}
+            options={{
+                title: "Main",
+            }}
+        />
         <Stack.Screen
             name='Accordion'
             component={Accordion}
@@ -23,6 +32,13 @@ const AppNavigator = () => (
                 title: "LoopingAnimation",
             }}
         />
+        <Stack.Screen
+            name='AdvancedFlatList'
+            component={AdvancedFlatList}
+            options={{
+                title: "AdvancedFlatList",
+            }}
+        />
     </Stack.Navigator>
 );
 

diff --git a/animatedRN/src/AdvancedFlatList/AdvancedFlatList.tsx b/animatedRN/src/AdvancedFlatList/AdvancedFlatList.tsx
@@ -0,0 +1,114 @@
+import * as React from "react";
+import { Animated, Dimensions, Image, FlatList, Text, View, StyleSheet } from "react-native";
+import { StatusBar } from "expo-status-bar";
+
+const { width, height } = Dimensions.get("screen");
+const ITEM_WIDTH = width * 0.76;
+const ITEM_HEIGHT = ITEM_WIDTH * 1.47;
+
+const images = [
+    "https://images.unsplash.com/photo-1551316679-9c6ae9dec224?w=800&q=80",
+    "https://images.unsplash.com/photo-1562569633-622303bafef5?w=800&q=80",
+    "https://images.unsplash.com/photo-1503656142023-618e7d1f435a?w=800&q=80",
+    "https://images.unsplash.com/photo-1555096462-c1c5eb4e4d64?w=800&q=80",
+    "https://images.unsplash.com/photo-1517957754642-2870518e16f8?w=800&q=80",
+    "https://images.unsplash.com/photo-1546484959-f9a381d1330d?w=800&q=80",
+    "https://images.unsplash.com/photo-1548761208-b7896a6ff225?w=800&q=80",
+    "https://images.unsplash.com/photo-1511208687438-2c5a5abb810c?w=800&q=80",
+    "https://images.unsplash.com/photo-1548614606-52b4451f994b?w=800&q=80",
+    "https://images.unsplash.com/photo-1548600916-dc8492f8e845?w=800&q=80",
+];
+const data = images.map((image, index) => ({
+    key: String(index),
+    photo: image,
+    avatar_url: `https://randomuser.me/api/portraits/women/${Math.floor(Math.random() * 40)}.jpg`,
+}));
+
+export default function AdvancedFlatList() {
+    const scrollX = React.useRef(new Animated.Value(0)).current;
+
+    return (
+        <View style={styles.container}>
+            <StatusBar hidden />
+            <Animated.FlatList
+                data={data}
+                keyExtractor={(item) => item.key}
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                pagingEnabled
+                onScroll={Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }], {
+                    useNativeDriver: true,
+                })}
+                renderItem={({ item, index }) => {
+                    const inputRange = [(index - 1) * width, index * width, (index + 1) * width];
+
+                    const translateX = scrollX.interpolate({
+                        inputRange,
+                        outputRange: [-width * 0.7, 0, width * 0.7],
+                    });
+
+                    return (
+                        <View style={{ width, justifyContent: "center", alignItems: "center" }}>
+                            <View
+                                style={{
+                                    borderRadius: 18,
+                                    shadowColor: "#000",
+                                    shadowOffset: {
+                                        width: 0,
+                                        height: 0,
+                                    },
+                                    shadowOpacity: 1,
+                                    shadowRadius: 20,
+                                    padding: 12,
+                                    backgroundColor: "white",
+                                }}
+                            >
+                                <View
+                                    style={{
+                                        width: ITEM_WIDTH,
+                                        height: ITEM_HEIGHT,
+                                        overflow: "hidden",
+                                        alignItems: "center",
+                                        borderRadius: 14,
+                                    }}
+                                >
+                                    <Animated.Image
+                                        source={{ uri: item.photo }}
+                                        style={{
+                                            width: ITEM_WIDTH,
+                                            height: ITEM_HEIGHT,
+                                            resizeMode: "cover",
+                                            transform: [{ translateX }],
+                                        }}
+                                    />
+                                </View>
+                                <Image
+                                    source={{ uri: item.avatar_url }}
+                                    style={{
+                                        width: 60,
+                                        height: 60,
+                                        borderRadius: 60,
+                                        borderWidth: 6,
+                                        borderColor: "white",
+                                        position: "absolute",
+                                        bottom: -30,
+                                        right: 60,
+                                    }}
+                                />
+                            </View>
+                        </View>
+                    );
+                }}
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: "#fff",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+});
diff --git a/animatedRN/src/AdvancedFlatList/index.ts b/animatedRN/src/AdvancedFlatList/index.ts
@@ -0,0 +1,3 @@
+import AdvancedFlatList from "./AdvancedFlatList";
+
+export default AdvancedFlatList;
diff --git a/animatedRN/src/Main/Main.tsx b/animatedRN/src/Main/Main.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import { View, Text, StyleSheet, Pressable, ScrollView } from "react-native";
+
+const Main = ({ navigation }: any) => {
+    return (
+        <ScrollView>
+            <View style={styles.container}>
+                <Pressable onPress={() => navigation.navigate("Accordion")} style={styles.buttonContainer}>
+                    <Text style={styles.text}>Accordion</Text>
+                </Pressable>
+                <Pressable onPress={() => navigation.navigate("LoopingAnimation")} style={styles.buttonContainer}>
+                    <Text style={styles.text}>LoopingAnimation</Text>
+                </Pressable>
+                <Pressable onPress={() => navigation.navigate("AdvancedFlatList")} style={styles.buttonContainer}>
+                    <Text style={styles.text}>AdvancedFlatList</Text>
+                </Pressable>
+            </View>
+        </ScrollView>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    buttonContainer: {
+        width: 300,
+        height: 40,
+        marginBottom: 20,
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: "gray",
+        borderRadius: 10,
+    },
+    text: {
+        fontSize: 18,
+        color: "white",
+    },
+});
+
+export default Main;
diff --git a/animatedRN/src/Main/index.ts b/animatedRN/src/Main/index.ts
@@ -0,0 +1,3 @@
+import Main from "./Main";
+
+export default Main;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import AdvancedFlatList from "./AdvancedFlatList";

		export default AdvancedFlatList;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import Main from "./Main";

		export default Main;