update toggle function with useAnimatedValue hook

Author: testshallpass

.npmignore

@@ -22,6 +22,7 @@ tsconfig.json
 .yarnrc.yml
 
 # Yarn
+.yarn/
 .yarn/install-state.gz
 .yarn/patches
 .yarn/plugins

README.md

@@ -35,30 +35,38 @@
 
 ```tsx
 import React from 'react';
-import { Animated } from 'react-native';
+import { Button } from 'react-native';
+
+// Step 1: Import ThumbnailSelector.
 import ThumbnailSelector from 'react-native-thumbnail-selector';
 
-const thumbnails = [
+// Step 2: Define one or more thumbnails like below.
+const Thumbnails = [
   {
-    caption: 'react-native',
+    caption: 'Caption 1',
     imageSrc: { uri: 'https://reactnative.dev/img/pwa/manifest-icon-512.png' },
   },
   {
-    caption: 'Dolore do magna ullamco nisi quis.',
-    imageSrc: { uri: 'https://reactnative.dev/img/pwa/manifest-icon-512.png' },
+    caption: 'Caption 2',
+    imageSrc: { uri: 'https://prettier.io/icon.png' },
   },
 ];
 
 export default function App(): React.JSX.Element {
-  // use toggle to show and hide ThumbnailSelector
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  let toggle = () => new Promise<Animated.EndResult>(res => res);
+  // Step 3: Define the ref variable to hold toggle action.
+  const toggleRef = React.useRef(() => {});
 
   return (
-    <ThumbnailSelector
-      thumbnails={thumbnails}
-      toggle={func => (toggle = func)}
-    />
+    <>
+      {/* Step 4: Depending on your use case, use toggleRef to open and close the ThumbnailSelector. */}
+      <Button title={'Toggle'} onPress={() => toggleRef.current()} />
+      {/* Step 5: Add ThumbnailSelector at last position in document tree so it overlaps other components. */}
+      {/* Step 6: Define the thumbnails and toggle props like below. */}
+      <ThumbnailSelector
+        thumbnails={Thumbnails}
+        toggle={func => (toggleRef.current = func)}
+      />
+    </>
   );
 }
 ```

ThumbnailSelector.tsx

@@ -12,6 +12,7 @@ import {
   TouchableOpacityProps,
   ViewStyle,
   LayoutChangeEvent,
+  useAnimatedValue,
 } from 'react-native';
 
 export type ThumbnailItem = {
@@ -26,7 +27,7 @@ export type ThumbnailItemIndex = {
 
 export type ThumbnailSelectorProps = {
   thumbnails: ThumbnailItem[];
-  toggle?: (func: () => Promise<Animated.EndResult>) => void;
+  toggle?: (func: () => void) => void;
   renderThumbnail?: (
     item: ThumbnailItem,
     index: number,
@@ -84,25 +85,26 @@ const ThumbnailSelector: React.FunctionComponent<ThumbnailSelectorProps> = ({
   animatedViewTestID = 'ThumbnailSelector',
 }) => {
   const window = useWindowDimensions();
-  const [itemIndex, setItemIndex] = React.useState(initialIndex);
-  const [animViewHeight, setAnimViewHeight] = React.useState(0);
-  const animatedValue = React.useRef(new Animated.Value(0));
-  const toValue = React.useRef(animationConfig.toValue);
+  const animatedValue = useAnimatedValue(
+    Number(animationConfig.toValue),
+    animationConfig,
+  );
+  const [itemIndex, setItemIndex] = React.useState<number>(initialIndex);
+  const [animViewHeight, setAnimViewHeight] = React.useState<number>(0);
+  const [hasCalledToggle, setHasCalledToggle] = React.useState<boolean>(false);
 
-  function _toggle(): Promise<Animated.EndResult> {
-    if (toValue.current) {
-      animationConfig.toValue = 0;
-    } else {
-      animationConfig.toValue = 1;
-    }
-    toValue.current = animationConfig.toValue;
-    return new Promise<Animated.EndResult>(resolve => {
-      Animated.spring(animatedValue.current, animationConfig).start(resolve);
-    });
+  function _toggle(): void {
+    const value = Number(JSON.stringify(animatedValue));
+    const config: Animated.SpringAnimationConfig = {
+      ...animationConfig,
+      toValue: value == 1 ? 0 : 1,
+    };
+    Animated.spring(animatedValue, config).start();
   }
 
-  if (toggle) {
+  if (toggle != undefined && !hasCalledToggle) {
     toggle(_toggle);
+    setHasCalledToggle(true);
   }
 
   function _renderItem(obj: ThumbnailItemIndex): React.JSX.Element {
@@ -158,7 +160,7 @@ const ThumbnailSelector: React.FunctionComponent<ThumbnailSelectorProps> = ({
       {
         transform: [
           {
-            translateY: animatedValue.current.interpolate({
+            translateY: animatedValue.interpolate({
               inputRange: [0, 1],
               outputRange: [start, end],
             }),