@codeleap/mobile 2.4.5 → 2.4.7

package/src/components/Modal/index.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react'
-import { View, ViewProps } from '../View'
-import { Button, ButtonProps } from '../Button'
+import { AnimatedView, View, ViewProps } from '../View'
+import { ButtonProps } from '../Button'
 import { Scroll } from '../Scroll'
 import {
   ComponentVariants,
   getNestedStylesByKey,
   IconPlaceholder,
-  onUpdate,
   PropsOf,
   TypeGuards,
   useDefaultComponentStyle,
@@ -19,9 +18,8 @@ import {
 import { StyleSheet } from 'react-native'
 import { StylesOf } from '../../types/utility'
 
-import { useDynamicAnimation } from 'moti'
 import { Backdrop } from '../Backdrop'
-import { useBackButton, useStaticAnimationStyles } from '../../utils/hooks'
+import { useAnimatedVariantStyles, useBackButton, useStaticAnimationStyles } from '../../utils/hooks'
 import { Text, TextProps } from '../Text'
 import { Touchable } from '../Touchable'
 import { GetKeyboardAwarePropsOptions } from '../../utils'
@@ -124,13 +122,17 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
 
   const boxAnimationStates = useStaticAnimationStyles(variantStyles, ['box:hidden', 'box:visible'])
 
-  const boxAnimation = useDynamicAnimation(() => {
-    return visible ? boxAnimationStates['box:visible'] : boxAnimationStates['box:hidden']
+  const boxAnimationStyles = useAnimatedVariantStyles({
+    updater: (states ) => {
+      'worklet';
+      return visible ? states['box:visible'] : states['box:hidden'] 
+    },
+    animatedProperties: ['box:hidden', 'box:visible'],
+    variantStyles,
+    transition:variantStyles['box:transition'],
+    dependencies: [visible]
   })
 
-  onUpdate(() => {
-    boxAnimation.animateTo(visible ? boxAnimationStates['box:visible'] : boxAnimationStates['box:hidden'])
-  }, [visible])
   const wrapperStyle = getStyles('wrapper')
 
   const ScrollComponent = scroll ? Scroll : View
@@ -195,11 +197,10 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
             noFeedback
           />}
 
-        <View
-          animated
-          state={boxAnimation}
-          style={getStyles('box')}
-          transition={{ ...variantStyles['box:transition'] }}
+        <AnimatedView
+        
+          style={[getStyles('box'),boxAnimationStyles]}
+          // transition={{ ...variantStyles['box:transition'] }}
 
           {...props}
         >
@@ -212,7 +213,7 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
               {typeof footer === 'string' ? <Text text={footer} /> : footer}
             </View>
           )}
-        </View>
+        </AnimatedView>
 
       </ScrollComponent>
     </View>

package/src/components/TextInput/index.tsx

@@ -191,9 +191,9 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops,
       style={getStyles('wrapper')}
       debugName={debugName}
       onPress={handlePress}
-      {...wrapperProps}
-      android_ripple={null}
       noFeedback
+      android_ripple={null}
+      {...wrapperProps}
     >
       <InputLabel
         label={label}

package/src/components/View/index.tsx

@@ -13,7 +13,7 @@ import { View as NativeView } from 'react-native'
 import { MotiView, MotiProps } from 'moti'
 import { GetKeyboardAwarePropsOptions, useKeyboardAwareView } from '../../utils'
 import {TransitionConfig} from '../../types'
-
+import Animated from 'react-native-reanimated'
 export * from './styles'
 
 type MotiViewProps =  Omit< Partial<MotiProps>, 'transition'|'children'>
@@ -68,6 +68,8 @@ export const View: React.FC<ViewProps> = forwardRef<NativeView,ViewProps>((viewP
   )
 })
 
+export const AnimatedView = Animated.createAnimatedComponent(View)
+
 
 type GapProps = ViewProps & {
   value: number

package/src/utils/hooks.ts

@@ -1,7 +1,8 @@
 import { onMount, onUpdate, shadeColor, TypeGuards, usePrevious, useRef, useState } from '@codeleap/common'
-import { Animated, AppState, AppStateStatus, Platform, PressableAndroidRippleConfig, BackHandler } from 'react-native'
-// @ts-ignore
+import { Animated, AppState, AppStateStatus, Platform, PressableAndroidRippleConfig, BackHandler, ViewStyle, ImageStyle, TextStyle, StyleSheet } from 'react-native'
+
 import AsyncStorage from '@react-native-community/async-storage'
+import { AnimatedStyleProp, Easing, EasingFn, useAnimatedStyle, withTiming } from 'react-native-reanimated'
 
 export function useAnimateColor(value: string, opts?: Partial<Animated.TimingAnimationConfig>) {
   const iters = useRef(0)
@@ -52,6 +53,10 @@ export function useAppState(filter?: AppStateStatus[]) {
   }
 }
 
+type SelectProperties<T extends Record<string|number|symbol, any>, K extends keyof T> = {
+  [P in K] : T[K]
+}
+
 export function useStaticAnimationStyles<T extends Record<string|number|symbol, any>, K extends keyof T >(obj: T, keys: K[]) {
   const styles = useRef({})
 
@@ -61,11 +66,112 @@ export function useStaticAnimationStyles<T extends Record<string|number|symbol,
     styles.current = Object.fromEntries(mappedStyles)
   }
 
-  return styles.current as {
-    [P in K] : T[K]
+  return styles.current as SelectProperties<T, K>
+}
+
+type AnimatableProperties = 'scale' | 'scaleX' | 'scaleY' | 'translateX' | 'translateY' | 'opacity'
+
+type VariantTransitionConfig = {
+  type: 'timing'
+  duration?: number
+  easing?: EasingFn
+} 
+
+type TransitionConfig = Partial<Record<AnimatableProperties, VariantTransitionConfig>> | VariantTransitionConfig
+
+
+type UseAnimatedVariantStylesConfig<T extends Record<string|number|symbol, any>, K extends keyof T > = {
+  variantStyles: T
+  animatedProperties: K[]
+  updater: (states: SelectProperties<T, K>) => AnimatedStyleProp<ViewStyle | ImageStyle | TextStyle>
+  transition: TransitionConfig
+  dependencies?: any[]
+}
+
+const buildAnimatedStyle = (property: AnimatableProperties, value, currentStyle, applyFN = (v) => v) => {
+  'worklet';
+  const newStyle = {...currentStyle}
+  
+  switch(property){
+    case 'opacity':
+      newStyle.opacity = applyFN(value)
+      break
+    default:
+      if(!newStyle.transform){
+        newStyle.transform = []
+      }
+      newStyle.transform.push({
+        [property]: applyFN(value)
+      })
+  }
+
+  return newStyle
+
+}
+
+const transformProperties = (properties, transition) => {
+  'worklet';
+  let styles = {}
+
+  for(const [prop, value] of Object.entries(properties)){
+    let transitionConfig = transition[prop] || transition
+
+    const _transitionConfig = {
+      type:'timing',
+      duration: 100,
+      easing: Easing.linear,
+      ...transitionConfig
+    }
+
+    const { type, duration, easing } = _transitionConfig
+
+    let fn
+
+    switch(type){
+      case 'timing':
+        fn = (v) => withTiming(v, {
+          duration,
+          easing
+        })
+      default:
+        break
+    } 
+
+    styles = buildAnimatedStyle(
+      prop as AnimatableProperties,
+      value,
+      styles,
+      fn
+    )
+  }
+
+  return styles
+}
+
+
+export function useAnimatedVariantStyles<T extends Record<string|number|symbol, any>, K extends keyof T >(config: UseAnimatedVariantStylesConfig<T, K>){
+  const { animatedProperties, updater, variantStyles, transition, dependencies = []} = config
+  
+  const _transition = useRef(null)
+
+  if(!_transition.current){
+    _transition.current = JSON.parse(JSON.stringify(transition))
   }
+
+  const staticStyles = useStaticAnimationStyles(variantStyles, animatedProperties)
+  
+  const animated = useAnimatedStyle(() => {
+    const nextState = updater(staticStyles)
+
+    const formatted = transformProperties(nextState, _transition.current)
+
+    return formatted
+  }, [dependencies])
+
+  return animated
 }
 
+
 export type FeedbackConfig =
 | { type: 'opacity'; value?: number }
 | {type: 'highlight'; color?: string; brightness?: number; shiftOpacity?: number}