upgrade yarn, types

.eslintrc

@@ -1,6 +1,5 @@
 // generated by @nandorojo/lint-expo
 {
-  "extends": ["nando"],
   "rules": {
     "react-hooks/exhaustive-deps": [
       "warn",

.prettierrc.js

@@ -1,6 +1,7 @@
 // generated by @nandorojo/lint-expo
 module.exports = {
-  ...require('eslint-config-nando/prettier'),
   tabWidth: 2,
   useTabs: false,
+  semi: false,
+  singleQuote: true,
 }

examples/sample/.gitignore

@@ -0,0 +1,35 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo

examples/sample/App.js

@@ -0,0 +1,20 @@
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View } from 'react-native';
+
+export default function App() {
+  return (
+    <View style={styles.container}>
+      <Text>Open up App.js to start working on your app!</Text>
+      <StatusBar style="auto" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

examples/sample/app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "sample",
+    "slug": "sample",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

examples/sample/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

examples/sample/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "sample",
+  "version": "1.0.0",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "expo": "~50.0.7",
+    "expo-status-bar": "~1.11.1",
+    "react": "18.2.0",
+    "react-native": "0.73.4"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0"
+  },
+  "private": true
+}

examples/with-expo/src/Moti.Factory.tsx

@@ -3,7 +3,6 @@ import { MotiPressable } from 'moti/interactions'
 import { useSharedValue } from 'react-native-reanimated'
 import { MotiView } from 'moti'
 
-// @ts-expect-error internal
 global.shouldDebugMoti = false
 
 export default function Factory() {

package.json

@@ -3,8 +3,7 @@
   "private": true,
   "workspaces": {
     "packages": [
-      "packages/*",
-      "examples/*"
+      "packages/*"
     ]
   },
   "publishConfig": {
@@ -66,7 +65,6 @@
       }
     }
   },
-  "dependencies": {},
   "devDependencies": {
     "@babel/helper-string-parser": "^7.22.5",
     "@commitlint/config-conventional": "^11.0.0",
@@ -79,11 +77,11 @@
     "codecov": "^3.8.0",
     "commitlint": "^11.0.0",
     "eslint": "^7.18.0",
-    "eslint-config-nando": "^1.0.10",
     "husky": "^4.3.8",
     "jest": "^26.6.1",
     "lerna": "^3.22.1",
     "prettier": "^2.2.1",
+    "react-native": "^0.73.4",
     "typescript": "^5.2.0"
   },
   "author": "Fernando Rojo <[email protected]>",

packages/moti/src/components/progress/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
 import { StyleSheet, ViewStyle, View } from 'react-native'
 import { MotiTransitionProp, useDynamicAnimation, motify } from '../../core'
 

packages/moti/src/core/types.ts

@@ -103,14 +103,13 @@ export type StyleValueWithSequenceArraysWithoutTransform<T> = {
     | T[key] // either the value
     // or an array of values for a sequence
     | SequenceItem<T[ExcludeArrayType<ExcludeObject<key>>]>[]
-} &
-  {
-    // even though the TS types don't allow transform strings, we do for percentages & degrees
-    [key in Extract<keyof T, keyof Transforms>]?:
-      | T[key]
-      | (string & {})
-      | SequenceItem<T[key] | (string & {})>[]
-  }
+} & {
+  // even though the TS types don't allow transform strings, we do for percentages & degrees
+  [key in Extract<keyof T, keyof Transforms>]?:
+    | T[key]
+    | (string & {})
+    | SequenceItem<T[key] | (string & {})>[]
+}
 
 export type StyleValueWithSequenceArraysWithTransform = {
   transform: StyleValueWithSequenceArrays<Transforms>[]
@@ -252,7 +251,7 @@ export type InlineOnDidAnimate<Value> = (
   }
 ) => void
 
-type ExcludeArrayType<T> = T extends (infer U)[] ? never : T
+type ExcludeArrayType<T> = T extends any[] ? never : T
 type ExcludeObject<T> = T extends object ? never : T
 
 type StyleValueWithCallbacks<Animate> = {

packages/moti/src/core/use-motify.ts

@@ -36,7 +36,7 @@ import type {
 const debug = (...args: any[]) => {
   'worklet'
 
-  // @ts-expect-error moti
+  // @ts-ignore
   if (!global.shouldDebugMoti) {
     return
   }
@@ -132,7 +132,7 @@ function animationConfig<Animate>(
   let animationType: Required<TransitionConfig>['type'] = 'spring'
   if (isColor(key) || key === 'opacity') animationType = 'timing'
 
-  const styleSpecificTransition = transition?.[key]
+  const styleSpecificTransition = transition?.[key as any]
 
   // say that we're looking at `width`
   // first, check if we have transition.width.type
@@ -457,13 +457,8 @@ export function useMotify<Animate>({
         value = value.value
       }
 
-      const {
-        animation,
-        config,
-        shouldRepeat,
-        repeatCount,
-        repeatReverse,
-      } = animationConfig(key, transition)
+      const { animation, config, shouldRepeat, repeatCount, repeatReverse } =
+        animationConfig(key, transition)
 
       const callback: (
         completed: boolean | undefined,
@@ -473,10 +468,15 @@ export function useMotify<Animate>({
         }
       ) => void = (completed = false, recentValue, info) => {
         if (onDidAnimate) {
-          runOnJS(reanimatedOnDidAnimated)(key as any, completed, recentValue, {
-            attemptedValue: value,
-            attemptedSequenceItemValue: info?.attemptedSequenceValue,
-          })
+          runOnJS(reanimatedOnDidAnimated as any)(
+            key as any,
+            completed,
+            recentValue,
+            {
+              attemptedValue: value,
+              attemptedSequenceItemValue: info?.attemptedSequenceValue,
+            }
+          )
         }
         if (inlineOnDidAnimate) {
           runOnJS(inlineOnDidAnimate)(completed, recentValue, {
@@ -485,9 +485,8 @@ export function useMotify<Animate>({
         }
         if (isExiting) {
           exitingStyleProps[key] = false
-          const areStylesExiting = Object.values(exitingStyleProps).some(
-            Boolean
-          )
+          const areStylesExiting =
+            Object.values(exitingStyleProps).some(Boolean)
           // if this is true, then we've finished our exit animations
           if (!areStylesExiting) {
             runOnJS(reanimatedSafeToUnmount)()
@@ -554,7 +553,10 @@ export function useMotify<Animate>({
               }
             }
 
-            if (Object.keys(transform).length) {
+            if (
+              Object.keys(transform).length &&
+              Array.isArray(final['transform'])
+            ) {
               final['transform'].push(transform)
             }
           })

packages/moti/src/interactions/pressable/pressable.tsx

@@ -1,7 +1,6 @@
-import React, { useMemo, ReactNode, forwardRef } from 'react'
-import { Platform, Pressable } from 'react-native'
+import { useMemo, ReactNode, forwardRef } from 'react'
+import { Pressable } from 'react-native'
 import type { View } from 'react-native'
-import { TouchableWithoutFeedback } from 'react-native-gesture-handler'
 import {
   useSharedValue,
   runOnJS,
@@ -98,22 +97,24 @@ export const MotiPressable = forwardRef<View, MotiPressableProps>(
 
     const state = useMemo(() => ({ __state }), [__state])
 
-    const updateInteraction = (
-      event: keyof MotiPressableInteractionState,
-      enabled: boolean,
-      callback?: () => void
-    ) => () => {
-      'worklet'
+    const updateInteraction =
+      (
+        event: keyof MotiPressableInteractionState,
+        enabled: boolean,
+        callback?: () => void
+      ) =>
+      () => {
+        'worklet'
 
-      if (event === 'hovered') {
-        hovered.value = enabled
-      } else if (event === 'pressed') {
-        pressed.value = enabled
+        if (event === 'hovered') {
+          hovered.value = enabled
+        } else if (event === 'pressed') {
+          pressed.value = enabled
+        }
+        if (callback) {
+          runOnJS(callback)()
+        }
       }
-      if (callback) {
-        runOnJS(callback)()
-      }
-    }
 
     const child = (
       <MotiView

packages/moti/src/skeleton/expo.tsx

@@ -1,5 +1,4 @@
 import { LinearGradient } from 'expo-linear-gradient'
-import React from 'react'
 
 import SkeletonNative from './skeleton-new'
 import { MotiSkeletonProps } from './types'

packages/moti/src/skeleton/native.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import LinearGradient from 'react-native-linear-gradient'
 
 import SkeletonNative from './skeleton-new'

packages/moti/src/skeleton/types.ts

@@ -1,18 +1,20 @@
-import { LinearGradient } from 'expo-linear-gradient'
+import { DimensionValue } from 'react-native'
 import { MotiTransitionProp } from '../core'
 import { baseColors } from './shared'
 
+type Size = number | DimensionValue
+
 export type MotiSkeletonProps = {
   /**
    * Optional height of the container of the skeleton. If set, it will give a fixed height to the container.
    *
    * If not set, the container will stretch to the children.
    */
-  boxHeight?: number | string
+  boxHeight?: Size
   /**
    * Optional height of the skeleton. Defauls to a `minHeight` of `32`
    */
-  height?: number | string
+  height?: Size
   children?: React.ReactChild | null
   /**
    * `boolean` specifying whether the skeleton should be visible. By default, it shows if there are no children. This way, you can conditionally display children, and automatically hide the skeleton when they exist.
@@ -40,7 +42,7 @@ export type MotiSkeletonProps = {
   /**
    * Width of the skeleton. Defaults to `32` as the `minWidth`. Sets the container's `minWidth` to this value if defined, falling back to 32.
    */
-  width?: string | number
+  width?: Size
   /**
    * Border radius. Can be `square`, `round`, or a number. `round` makes it a circle. Defaults to `8`.
    */

tsconfig.json

@@ -9,9 +9,8 @@
     "allowUnreachableCode": false,
     "allowUnusedLabels": false,
     "esModuleInterop": true,
-    "importsNotUsedAsValues": "error",
     "forceConsistentCasingInFileNames": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "lib": ["esnext", "dom"],
     "module": "esnext",
     "moduleResolution": "node",
@@ -26,5 +25,6 @@
     "strict": true,
     "target": "esnext",
     "noImplicitAny": false
-  }
+  },
+  "exclude": ["examples"]
 }