@tamagui/animations-react-native 1.0.1-beta.192 → 1.0.1-beta.194

package/src/createAnimations.tsx

@@ -1,4 +1,3 @@
-import { PresenceContext, usePresence } from '@tamagui/animate-presence'
 import {
   AnimatedNumberStrategy,
   AnimationDriver,
@@ -7,7 +6,9 @@ import {
   isWeb,
   useEvent,
   useIsomorphicLayoutEffect,
+  useSafeRef,
 } from '@tamagui/core'
+import { PresenceContext, usePresence } from '@tamagui/use-presence'
 import { useContext, useEffect, useMemo, useRef } from 'react'
 import { Animated } from 'react-native'
 
@@ -40,7 +41,7 @@ export const AnimatedView = Animated.View
 export const AnimatedText = Animated.Text
 
 export function useAnimatedNumber(initial: number): UniversalAnimatedNumber<Animated.Value> {
-  const state = useRef(
+  const state = useSafeRef(
     null as any as {
       val: Animated.Value
       composite: Animated.CompositeAnimation | null
@@ -121,7 +122,7 @@ export function createAnimations<A extends AnimationsConfig>(animations: A): Ani
   AnimatedText['displayName'] = 'AnimatedText'
 
   return {
-    avoidClasses: true,
+    isReactNativeWeb: true,
     animations,
     View: AnimatedView,
     Text: AnimatedText,
@@ -147,113 +148,124 @@ export function createAnimations<A extends AnimationsConfig>(animations: A): Ani
         enterVariant: presence?.enterVariant,
       })
 
-      const animateStyles = useRef<Record<string, Animated.Value>>({})
-      const animatedTranforms = useRef<{ [key: string]: Animated.Value }[]>([])
-      const interpolations = useRef(new WeakMap<Animated.Value, Animated.AnimatedInterpolation>())
-
-      // TODO loop and create values, run them if they change
+      const animateStyles = useSafeRef<Record<string, Animated.Value>>({})
+      const animatedTranforms = useSafeRef<{ [key: string]: Animated.Value }[]>([])
+      const interpolations = useSafeRef(
+        new WeakMap<
+          Animated.Value,
+          { interopolation: Animated.AnimatedInterpolation; current?: number }
+        >()
+      )
 
       const runners: Function[] = []
       const completions: Promise<void>[] = []
 
-      function update(key: string, animated: Animated.Value | undefined, valIn: string | number) {
-        const [val, type] = getValue(valIn)
-        const value = animated || new Animated.Value(val)
-        if (type) {
-          interpolations.current.set(value, getInterpolated(value, type, val))
-        }
-        if (animated) {
-          const animationConfig = getAnimationConfig(key, animations, props.animation)
+      const args = [
+        JSON.stringify(all),
+        state.mounted,
+        state.hover,
+        state.press,
+        state.pressIn,
+        state.focus,
+        delay,
+        isPresent,
+        onDidAnimate,
+        presence?.exitVariant,
+        presence?.enterVariant,
+      ]
 
-          let resolve
-          const promise = new Promise<void>((res) => {
-            resolve = res
-          })
-          completions.push(promise)
+      const res = useMemo(() => {
+        function update(key: string, animated: Animated.Value | undefined, valIn: string | number) {
+          const [val, type] = getValue(valIn)
+          const value = animated || new Animated.Value(val)
+          let interpolateArgs: any
+          if (type) {
+            const curInterpolation = interpolations.current.get(value)
+            interpolateArgs = getInterpolated(
+              curInterpolation?.current ?? value['_value'],
+              val,
+              type
+            )
+            interpolations.current!.set(value, {
+              interopolation: value.interpolate(interpolateArgs),
+              current: val,
+            })
+          }
+          if (animated) {
+            const animationConfig = getAnimationConfig(key, animations, props.animation)
 
-          runners.push(() => {
-            if (animated['_value'] === val) {
-              resolve()
-              // avoid update when its the same
-              return
-            }
-            animated.stopAnimation()
-            Animated.spring(animated, {
-              toValue: val,
-              useNativeDriver: !isWeb,
-              ...animationConfig,
-            }).start(({ finished }) => {
-              if (finished) {
-                resolve()
-              }
+            let resolve
+            const promise = new Promise<void>((res) => {
+              resolve = res
             })
-          })
-        }
-        return value
-      }
+            completions.push(promise)
 
-      function getValue(input: number | string) {
-        if (typeof input !== 'string') {
-          return [input] as const
+            runners.push(() => {
+              animated.stopAnimation()
+              Animated.spring(animated, {
+                toValue: val,
+                useNativeDriver: !isWeb,
+                ...animationConfig,
+              }).start(({ finished }) => {
+                if (finished) {
+                  resolve()
+                }
+              })
+            })
+          }
+          if (process.env.NODE_ENV === 'development') {
+            if (props['debug']) {
+              // prettier-ignore
+              // eslint-disable-next-line no-console
+              console.log('AnimatedValue', key, 'mapped value', valIn, 'of type', type, 'to', val, 'interpolated', interpolateArgs, '- current Animated.Value', value['_value'])
+            }
+          }
+          return value
         }
-        const neg = input[0] === '-'
-        if (neg) input = input.slice(1)
-        const [_, number, after] = input.match(/([-0-9]+)(deg|%)/) ?? []
-        return [+number * (neg ? -1 : 1), after] as const
-      }
 
-      const nonAnimatedStyle = {}
-      for (const key in all) {
-        const val = all[key]
-        if (animatedStyleKey[key]) {
-          if (key === 'transform') {
-            // for now just support one transform key
-            if (val) {
-              for (const [index, transform] of val.entries()) {
-                if (!transform) continue
-                const tkey = Object.keys(transform)[0]
-                animatedTranforms.current[index] = {
-                  [tkey]: update(tkey, animatedTranforms.current[index]?.[tkey], transform[tkey]),
+        const nonAnimatedStyle = {}
+        for (const key in all) {
+          const val = all[key]
+          if (animatedStyleKey[key]) {
+            if (key === 'transform') {
+              // for now just support one transform key
+              if (val) {
+                for (const [index, transform] of val.entries()) {
+                  if (!transform) continue
+                  const tkey = Object.keys(transform)[0]
+                  animatedTranforms.current[index] = {
+                    [tkey]: update(tkey, animatedTranforms.current[index]?.[tkey], transform[tkey]),
+                  }
                 }
               }
+            } else {
+              animateStyles.current[key] = update(key, animateStyles.current[key], val)
             }
           } else {
-            animateStyles.current[key] = update(key, animateStyles.current[key], val)
+            nonAnimatedStyle[key] = val
           }
-        } else {
-          nonAnimatedStyle[key] = val
         }
-      }
 
-      const animatedStyle = {
-        ...Object.fromEntries(
-          Object.entries({
-            ...animateStyles.current,
-          }).map(([k, v]) => [k, interpolations.current.get(v) || v])
-        ),
-        transform: animatedTranforms.current.map((r) => {
-          const key = Object.keys(r)[0]
-          const val = interpolations.current.get(r[key]) || r[key]
-          return { [key]: val }
-        }),
-      }
+        const animatedStyle = {
+          ...Object.fromEntries(
+            Object.entries({
+              ...animateStyles.current,
+            }).map(([k, v]) => [k, interpolations.current!.get(v)?.interopolation || v])
+          ),
+          transform: animatedTranforms.current.map((r) => {
+            const key = Object.keys(r)[0]
+            const val = interpolations.current!.get(r[key])?.interopolation || r[key]
+            return { [key]: val }
+          }),
+        }
 
-      const args = [
-        JSON.stringify(all),
-        state.mounted,
-        state.hover,
-        state.press,
-        state.pressIn,
-        state.focus,
-        delay,
-        isPresent,
-        onDidAnimate,
-        presence?.exitVariant,
-        presence?.enterVariant,
-      ]
+        return {
+          style: [nonAnimatedStyle, animatedStyle],
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, args)
 
       useIsomorphicLayoutEffect(() => {
-        //
         for (const runner of runners) {
           runner()
         }
@@ -265,28 +277,25 @@ export function createAnimations<A extends AnimationsConfig>(animations: A): Ani
         })
       }, args)
 
-      return useMemo(() => {
-        return {
-          style: [nonAnimatedStyle, animatedStyle],
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-      }, args)
+      return res
     },
   }
 }
 
-function getInterpolated(val: Animated.Value, postfix: string, next: number) {
-  const cur = val['_value'] as number
-  const inputRange = [cur, next]
-  const outputRange = [`${cur}deg`, `${next}deg`]
-  if (next < cur) {
+function getInterpolated(current: number, next: number, postfix = 'deg') {
+  if (next === current) {
+    current = next - 0.000000001
+  }
+  const inputRange = [current, next]
+  const outputRange = [`${current}${postfix}`, `${next}${postfix}`]
+  if (next < current) {
     inputRange.reverse()
     outputRange.reverse()
   }
-  return val.interpolate({
+  return {
     inputRange,
     outputRange,
-  })
+  }
 }
 
 function getAnimationConfig(key: string, animations: AnimationsConfig, animation?: AnimationProp) {
@@ -320,3 +329,13 @@ function getAnimationConfig(key: string, animations: AnimationsConfig, animation
     ...extraConf,
   }
 }
+
+function getValue(input: number | string) {
+  if (typeof input !== 'string') {
+    return [input] as const
+  }
+  const neg = input[0] === '-'
+  if (neg) input = input.slice(1)
+  const [_, number, after] = input.match(/([-0-9]+)(deg|%)/) ?? []
+  return [+number * (neg ? -1 : 1), after] as const
+}