Update example (#7)

* Remove useMemo

* Add reanimated

* Fix babel config for reanimated

* Update ProgressBar to use reanimated

* Fix calc in ProgressBar

* Clean up example

* Bump package

* Nit

Author: rossmartin

example/babel.config.js

@@ -13,5 +13,6 @@ module.exports = {
         },
       },
     ],
+    'react-native-reanimated/plugin',
   ],
 };

example/ios/Podfile.lock

@@ -385,6 +385,33 @@ PODS:
     - SDWebImageWebPCoder (~> 0.8.4)
   - RNReactNativeHapticFeedback (1.14.0):
     - React-Core
+  - RNReanimated (2.13.0):
+    - DoubleConversion
+    - FBLazyVector
+    - FBReactNativeSpec
+    - glog
+    - RCT-Folly
+    - RCTRequired
+    - RCTTypeSafety
+    - React-callinvoker
+    - React-Core
+    - React-Core/DevSupport
+    - React-Core/RCTWebSocket
+    - React-CoreModules
+    - React-cxxreact
+    - React-jsi
+    - React-jsiexecutor
+    - React-jsinspector
+    - React-RCTActionSheet
+    - React-RCTAnimation
+    - React-RCTBlob
+    - React-RCTImage
+    - React-RCTLinking
+    - React-RCTNetwork
+    - React-RCTSettings
+    - React-RCTText
+    - ReactCommon/turbomodule/core
+    - Yoga
   - SDWebImage (5.11.1):
     - SDWebImage/Core (= 5.11.1)
   - SDWebImage/Core (5.11.1)
@@ -458,6 +485,7 @@ DEPENDENCIES:
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - RNFastImage (from `../node_modules/react-native-fast-image`)
   - RNReactNativeHapticFeedback (from `../node_modules/react-native-haptic-feedback`)
+  - RNReanimated (from `../node_modules/react-native-reanimated`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -554,6 +582,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-fast-image"
   RNReactNativeHapticFeedback:
     :path: "../node_modules/react-native-haptic-feedback"
+  RNReanimated:
+    :path: "../node_modules/react-native-reanimated"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -608,6 +638,7 @@ SPEC CHECKSUMS:
   ReactCommon: 01064177e66d652192c661de899b1076da962fd9
   RNFastImage: 5c9c9fed9c076e521b3f509fe79e790418a544e8
   RNReactNativeHapticFeedback: 1e3efeca9628ff9876ee7cdd9edec1b336913f8c
+  RNReanimated: ce445c233a6ff5600223484a88ad5704945d972a
   SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
   SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608

example/ios/UseFileUploadExample.xcodeproj/project.pbxproj

@@ -12,8 +12,6 @@
 		13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.mm */; };
 		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
-		244AD18F2908A8C00093BC55 /* hermes.xcframework in Frameworks */ = {isa = PBXBuildFile; fileRef = 244AD18D2908A8B20093BC55 /* hermes.xcframework */; };
-		244AD1902908A8C00093BC55 /* hermes.xcframework in Embed Frameworks */ = {isa = PBXBuildFile; fileRef = 244AD18D2908A8B20093BC55 /* hermes.xcframework */; settings = {ATTRIBUTES = (CodeSignOnCopy, RemoveHeadersOnCopy, ); }; };
 		7699B88040F8A987B510C191 /* libPods-UseFileUploadExample-UseFileUploadExampleTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 19F6CBCC0A4E27FBF8BF4A61 /* libPods-UseFileUploadExample-UseFileUploadExampleTests.a */; };
 		81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; };
 /* End PBXBuildFile section */
@@ -28,20 +26,6 @@
 		};
 /* End PBXContainerItemProxy section */
 
-/* Begin PBXCopyFilesBuildPhase section */
-		244AD1912908A8C00093BC55 /* Embed Frameworks */ = {
-			isa = PBXCopyFilesBuildPhase;
-			buildActionMask = 2147483647;
-			dstPath = "";
-			dstSubfolderSpec = 10;
-			files = (
-				244AD1902908A8C00093BC55 /* hermes.xcframework in Embed Frameworks */,
-			);
-			name = "Embed Frameworks";
-			runOnlyForDeploymentPostprocessing = 0;
-		};
-/* End PBXCopyFilesBuildPhase section */
-
 /* Begin PBXFileReference section */
 		00E356EE1AD99517003FC87E /* UseFileUploadExampleTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = UseFileUploadExampleTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
 		00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
@@ -77,7 +61,6 @@
 			buildActionMask = 2147483647;
 			files = (
 				0C80B921A6F3F58F76C31292 /* libPods-UseFileUploadExample.a in Frameworks */,
-				244AD18F2908A8C00093BC55 /* hermes.xcframework in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -203,7 +186,6 @@
 				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
 				00EEFC60759A1932668264C0 /* [CP] Embed Pods Frameworks */,
 				E235C05ADACE081382539298 /* [CP] Copy Pods Resources */,
-				244AD1912908A8C00093BC55 /* Embed Frameworks */,
 			);
 			buildRules = (
 			);

example/package.json

@@ -15,6 +15,7 @@
     "react-native-fast-image": "8.6.3",
     "react-native-haptic-feedback": "1.14.0",
     "react-native-image-picker": "4.10.0",
+    "react-native-reanimated": "2.13.0",
     "react-native-sortable-grid": "https://github.com/rossmartin/react-native-sortable-grid.git#b5c911c263b8c230c4973af00986724bcb234929"
   },
   "devDependencies": {

example/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useMemo, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import {
   ActivityIndicator,
   Animated,
@@ -29,8 +29,7 @@ const hapticFeedbackOptions: HapticOptions = {
 interface Item extends UploadItem {
   progress?: number;
   failed?: boolean; // true on timeout or error
-  completedAt?: number; // when request is done
-  startedAt?: number; // when request starts
+  completed?: boolean;
 }
 
 export default function App() {
@@ -42,15 +41,15 @@ export default function App() {
     field: 'file',
     // optional below
     method: 'POST',
-    timeout: 60000, // you can set this lower to cause timeouts to happen
+    timeout: 60 * 1000, // you can set this lower to cause timeouts to happen
     onProgress,
     onDone: ({ item }) => {
       updateItem({
         item,
         keysAndValues: [
           {
-            key: 'completedAt',
-            value: new Date().getTime(),
+            key: 'completed',
+            value: true,
           },
         ],
       });
@@ -75,15 +74,12 @@ export default function App() {
     },
   });
 
-  const isUploading = useMemo(() => {
-    return data.some((item) => {
-      return (
-        typeof item.progress === 'number' &&
-        item.progress > 0 &&
-        item.progress < 100
-      );
-    });
-  }, [data]);
+  const isUploading = data.some(
+    (item) =>
+      typeof item.progress === 'number' &&
+      item.progress > 0 &&
+      item.progress < 100
+  );
 
   const updateItem = <K extends keyof Item>({
     item,
@@ -106,7 +102,7 @@ export default function App() {
     });
   };
 
-  async function onProgress({ item, event }: OnProgressData<Item>) {
+  function onProgress({ item, event }: OnProgressData<Item>) {
     const progress = event?.loaded
       ? Math.round((event.loaded / event.total) * 100)
       : 0;
@@ -133,7 +129,6 @@ export default function App() {
     setData((prevState) => [...prevState, ...items]);
   };
 
-  // :~)
   const putItOnTheLine = async (_data: Item[]) => {
     const promises = _data
       .filter((item) => typeof item.progress !== 'number') // leave out any in progress or completed
@@ -143,13 +138,12 @@ export default function App() {
     console.log('result: ', result);
   };
 
-  const onPressUpload = async () => {
+  const onPressUpload = () => {
     // allow uploading any that previously failed
     setData((prevState) => {
       const newState = [...prevState].map((item) => ({
         ...item,
         failed: false,
-        startedAt: new Date().getTime(),
       }));
 
       putItOnTheLine(newState);
@@ -172,26 +166,23 @@ export default function App() {
     abortUpload(item.uri);
   };
 
-  const onPressRetry = (item: Item) => async () => {
+  const onPressRetry = (item: Item) => () => {
     updateItem({
       item,
       keysAndValues: [
         {
           key: 'failed',
           value: false,
         },
-        {
-          key: 'startedAt',
-          value: new Date().getTime(),
-        },
       ],
     });
-    startUpload({ ...item, startedAt: new Date().getTime() }).catch(() => {});
+    startUpload({ ...item, failed: false }).catch(() => {});
   };
 
   const onDragStart = () => {
     ReactNativeHapticFeedback.trigger('impactMedium', hapticFeedbackOptions);
     dragStartAnimatedValue.current.setValue(1);
+    // unable to set useNativeDriver true because of a limitation in react-native-sortable-grid
     Animated.loop(
       Animated.sequence([
         Animated.timing(dragStartAnimatedValue.current, {
@@ -210,6 +201,7 @@ export default function App() {
 
   const onDragRelease = (_itemOrder: ItemOrder) => {
     //console.log('onDragRelease, itemOrder: ', _itemOrder);
+    // you can see where this can go :~)
   };
 
   const getDragStartAnimation = () => {
@@ -245,9 +237,7 @@ export default function App() {
             <Text style={styles.iconText}>&#x21bb;</Text>
           </Pressable>
         ) : null}
-        {item.completedAt ? (
-          <Text style={styles.iconText}>&#10003;</Text>
-        ) : null}
+        {item.completed ? <Text style={styles.iconText}>&#10003;</Text> : null}
         <Pressable style={styles.deleteIcon} onPress={onPressDeleteItem(item)}>
           <Text style={styles.deleteIconText}>&#x2717;</Text>
         </Pressable>

example/src/components/ProgressBar.tsx

@@ -1,5 +1,9 @@
-import React, { useRef, useEffect } from 'react';
-import { Animated, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import React, { useState } from 'react';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  withSpring,
+} from 'react-native-reanimated';
 
 type Props = {
   value: number;
@@ -12,37 +16,41 @@ export default function ProgressBar({
   style,
   progressColor = '#3880ff',
 }: Props) {
-  const valueAnimated = useRef(new Animated.Value(0)).current;
-  const width = valueAnimated.interpolate({
-    inputRange: [0, 100],
-    outputRange: ['0%', '100%'],
-    extrapolate: 'clamp',
-  });
+  const [layoutWidth, setLayoutWidth] = useState<number>();
+  const animatedStyle = useAnimatedStyle(() => {
+    if (!layoutWidth) {
+      return { width: 0 };
+    }
 
-  useEffect(() => {
-    Animated.timing(valueAnimated, {
-      toValue: value,
-      duration: 500,
-      useNativeDriver: false,
-    }).start();
-  }, [value, valueAnimated]);
+    // subtract 2 to account for border
+    const widthValue = (value / 100) * layoutWidth - 2;
+    return {
+      width: withSpring(widthValue, {
+        overshootClamping: true,
+        stiffness: 75,
+      }),
+    };
+  }, [layoutWidth, value]);
 
   return (
-    <View style={[styles.progressBar, style]}>
+    <View
+      style={[styles.container, style]}
+      onLayout={(event) => setLayoutWidth(event.nativeEvent.layout.width)}
+    >
       <Animated.View
         style={[
           StyleSheet.absoluteFill,
-          { backgroundColor: progressColor, width },
+          animatedStyle,
+          { backgroundColor: progressColor },
         ]}
       />
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  progressBar: {
+  container: {
     height: 10,
-    width: '100%',
     backgroundColor: '#fff',
     borderColor: '#708090',
     borderWidth: 1,