fix modal, add flashlist

ngocle2497 · Aug 21, 2023 · c450513 · c450513
1 parent f80c20f
commit c450513
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "rn-boiler-template",
   "private": false,
-  "version": "1.72.3",
+  "version": "1.72.4",
   "description": "Clean and minimalist React Native template for a quick start with TypeScript and components",
   "scripts": {
     "test": "exit 0"

diff --git a/template/package.json b/template/package.json
@@ -29,6 +29,7 @@
     "@react-navigation/native": "^6.1.7",
     "@react-navigation/stack": "^6.3.17",
     "@reduxjs/toolkit": "^1.9.5",
+    "@shopify/flash-list": "^1.5.0",
     "axios": "^1.4.0",
     "expo": "^49.0.3",
     "expo-font": "^11.4.0",
@@ -44,10 +45,10 @@
     "react-native-bootsplash": "^4.7.5",
     "react-native-config": "^1.5.1",
     "react-native-flipper": "^0.206.0",
-    "react-native-gesture-handler": "^2.12.0",
+    "react-native-gesture-handler": "^2.12.1",
     "react-native-keyboard-controller": "^1.5.8",
     "react-native-keyboard-manager": "6.5.11-0",
-    "react-native-linear-gradient": "^2.7.3",
+    "react-native-linear-gradient": "^2.8.2",
     "react-native-mmkv": "^2.10.1",
     "react-native-reanimated": "^3.4.2",
     "react-native-safe-area-context": "^4.7.1",

diff --git a/template/src/app/library/components/list-view/index.tsx b/template/src/app/library/components/list-view/index.tsx
@@ -2,15 +2,17 @@ import React from 'react';
 import { FlatList, RefreshControl } from 'react-native';
 
 import { execFunc } from '@common';
+import { FlashList } from '@shopify/flash-list';
 
 import { ListViewProps } from './type';
 
 export const ListView = (props: ListViewProps) => {
   // state
   const {
+    type = 'flashlist',
     onRefresh,
     onLoadMore,
-    canRefresh = true,
+    canRefresh = false,
     canLoadMore = false,
     refreshing = false,
   } = props;
@@ -22,16 +24,20 @@ export const ListView = (props: ListViewProps) => {
     }
   };
 
+  const ListComponent = type === 'flashlist' ? FlashList : FlatList;
+
   // render
   return (
-    <FlatList
+    <ListComponent
       refreshControl={
         canRefresh ? (
           <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
         ) : undefined
       }
       onEndReached={loadMore}
       onEndReachedThreshold={0.001}
+      showsVerticalScrollIndicator={false}
+      showsHorizontalScrollIndicator={false}
       {...props}
       onRefresh={undefined}
       refreshing={undefined}

diff --git a/template/src/app/library/components/list-view/type.ts b/template/src/app/library/components/list-view/type.ts
@@ -1,10 +1,20 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { FlatListProps } from 'react-native';
 
-export type ListViewProps = CustomOmit<
-  FlatListProps<any>,
-  'onRefresh' | 'refreshControl' | 'refreshing'
-> & {
+import { FlashListProps } from '@shopify/flash-list';
+
+export type ListViewProps = (
+  | ({
+      type: 'flatlist';
+    } & CustomOmit<
+      FlatListProps<any>,
+      'onRefresh' | 'refreshControl' | 'refreshing'
+    >)
+  | ({ type?: 'flashlist' | undefined } & CustomOmit<
+      FlashListProps<any>,
+      'onRefresh' | 'refreshControl' | 'refreshing'
+    >)
+) & {
   /**
    * Function when refreshing
    * @default undefined

diff --git a/template/src/app/library/components/modal/modal-content.tsx b/template/src/app/library/components/modal/modal-content.tsx
@@ -124,14 +124,18 @@ export const ModalContent = forwardRef(
         execFunc(onSetClose);
       }
 
-      reBackdropOpacity.value = withTiming(0, undefined, isFinished => {
-        'worklet';
-        if (isFinished) {
-          if (!exiting) {
-            onEndAnimatedClose(isFinished);
+      reBackdropOpacity.value = sharedTiming(
+        0,
+        { duration: exiting ? 300 : 0 },
+        isFinished => {
+          'worklet';
+          if (isFinished) {
+            if (!exiting) {
+              onEndAnimatedClose(isFinished);
+            }
           }
-        }
-      });
+        },
+      );
     };
 
     const renderBackdrop = () => {
@@ -155,7 +159,7 @@ export const ModalContent = forwardRef(
         <Animated.View pointerEvents="box-none" style={[styles.content, style]}>
           <Animated.View
             entering={(entering as any)?.withCallback(onEndAnimatedOpen)}
-            exiting={(entering as any)?.withCallback(onEndAnimatedClose)}>
+            exiting={(exiting as any)?.withCallback(onEndAnimatedClose)}>
             {children}
           </Animated.View>
         </Animated.View>