Make example-app use expo 52 and clean worklet functions

.github/workflows/quality.yml

@@ -27,6 +27,3 @@ jobs:
 
       - name: Test linting
         run: yarn test:lint
-
-      - name: Run unit tests
-        run: yarn test:jest

.prettierignore

@@ -1 +1,2 @@
 .expo
+.yarn

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.5.3.cjs

README.md

@@ -214,13 +214,15 @@ Default value: `800`.
 
 > `SwipeAxisDependentProp<(payload: PanGestureHandlerEventPayload) => WithSpringConfig>`
 
-A function that returns a reanimated [SpringConfig](https://docs.swmansion.com/react-native-reanimated/docs/animations/withSpring/) that will be used in the final animation once a swipe is validated.
+A workletized function that returns a reanimated [SpringConfig](https://docs.swmansion.com/react-native-reanimated/docs/animations/withSpring/) that will be used in the final animation once a swipe is validated.
+
+**WARNING**: If this function isn't a worklet, the app will crash.
 
 This prop can also accept an object whose keys are swipe axis ("x" and "y") and whose values are functions that return a reanimated [SpringConfig](https://docs.swmansion.com/react-native-reanimated/docs/animations/withSpring/).
 
 `payload` is a gesture-handler payload that you can use to customize the config.
 
-Default value: `() => ({ duration: 300 })`.
+Default value: `() => { "worklet"; return ({ duration: 300 }) }`.
 
 #### ▶️ imperativeSwipeAnimationConfig
 

example-app/app.json

@@ -24,6 +24,7 @@
     "web": {
       "favicon": "./assets/favicon.png"
     },
-    "plugins": ["expo-font"]
+    "plugins": ["expo-font"],
+    "newArchEnabled": true
   }
 }

example-app/package.json

@@ -13,20 +13,20 @@
     "@emotion/react": "^11.11.3",
     "@react-navigation/native": "^6.1.14",
     "@react-navigation/native-stack": "^6.9.22",
-    "expo": "~51.0.24",
-    "expo-font": "~12.0.9",
-    "expo-haptics": "~13.0.1",
-    "expo-image": "~1.12.13",
-    "expo-linear-gradient": "~13.0.2",
-    "expo-splash-screen": "~0.27.5",
-    "expo-status-bar": "~1.12.1",
-    "react": "18.2.0",
-    "react-native": "0.74.3",
-    "react-native-gesture-handler": "~2.16.1",
-    "react-native-reanimated": "~3.10.1",
-    "react-native-safe-area-context": "4.10.5",
-    "react-native-screens": "3.31.1",
-    "react-native-svg": "15.2.0",
+    "expo": "^52.0.11",
+    "expo-font": "~13.0.1",
+    "expo-haptics": "~14.0.0",
+    "expo-image": "~2.0.2",
+    "expo-linear-gradient": "~14.0.1",
+    "expo-splash-screen": "~0.29.13",
+    "expo-status-bar": "~2.0.0",
+    "react": "18.3.1",
+    "react-native": "0.76.3",
+    "react-native-gesture-handler": "~2.20.2",
+    "react-native-reanimated": "~3.16.1",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "4.1.0",
+    "react-native-svg": "15.8.0",
     "react-native-swipeable-card-stack": "*"
   },
   "devDependencies": {

example-app/src/pokemon/PokemonSwipePage.tsx

@@ -2,7 +2,6 @@ import styled, { css } from '@emotion/native'
 import { StatusBar } from 'expo-status-bar'
 import { useRef, useState } from 'react'
 import {
-  SafeAreaView,
   useSafeAreaFrame,
   useSafeAreaInsets,
 } from 'react-native-safe-area-context'
@@ -23,7 +22,7 @@ import { PokemonSwipePageBackground } from './PokemonSwipePageBackground'
 import { pokemon } from './pokemon'
 
 export const PokemonSwipePage = () => {
-  const { top } = useSafeAreaInsets()
+  const { top, bottom } = useSafeAreaInsets()
   const { width, height } = useSafeAreaFrame()
   const ref = useRef<SwipeableCardStackRef>(null)
   const [score, setScore] = useState(0)
@@ -64,7 +63,7 @@ export const PokemonSwipePage = () => {
       <GoToHomeButtonContainer style={css({ top: top + 16 })}>
         <GoToHomeButton />
       </GoToHomeButtonContainer>
-      <UnswipeButtonContainer>
+      <UnswipeButtonContainer style={{ bottom }}>
         <RoundButton
           Icon={UndoIcon}
           onPress={() => {
@@ -74,7 +73,7 @@ export const PokemonSwipePage = () => {
           size={56}
         />
       </UnswipeButtonContainer>
-      <PokemonControlsContainer>
+      <PokemonControlsContainer style={{ bottom }}>
         <PokemonControls
           onPress={(element) => {
             const mapping: Record<PokemonElement, SwipeDirection> = {
@@ -100,16 +99,14 @@ const GoToHomeButtonContainer = styled.View({
   left: 16,
 })
 
-const PokemonControlsContainer = styled(SafeAreaView)({
+const UnswipeButtonContainer = styled.View({
   position: 'absolute',
-  bottom: 0,
-  right: 0,
+  left: 0,
   padding: 16,
 })
 
-const UnswipeButtonContainer = styled(SafeAreaView)({
+const PokemonControlsContainer = styled.View({
   position: 'absolute',
-  bottom: 0,
-  left: 0,
+  right: 0,
   padding: 16,
 })

example-app/src/pokemon/PokemonSwipePageBackground.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/native'
-import { SafeAreaView } from 'react-native-safe-area-context'
+import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context'
 import { getBrandedText } from '../shared/fonts/getBrandedText'
 import { PokemonElementView } from './PokemonElementView'
 
@@ -11,24 +11,26 @@ type Props = {
 export const PokemonSwipePageBackground = ({
   score,
   numberOfSwipes,
-}: Props) => (
-  <Container>
-    <ScoreContainer>
-      <ScoreLabel>{`Score: ${score}/${numberOfSwipes}`}</ScoreLabel>
-    </ScoreContainer>
-    <PokemonElementView element="grass" />
-    <MiddleRow>
-      <PokemonElementView element="fire" />
-      <PokemonElementView element="water" />
-    </MiddleRow>
-    <PokemonElementView element="flying" />
-  </Container>
-)
+}: Props) => {
+  const { top, bottom } = useSafeAreaInsets()
+
+  return (
+    <Container style={{ top, bottom }}>
+      <ScoreContainer>
+        <ScoreLabel>{`Score: ${score}/${numberOfSwipes}`}</ScoreLabel>
+      </ScoreContainer>
+      <PokemonElementView element="grass" />
+      <MiddleRow>
+        <PokemonElementView element="fire" />
+        <PokemonElementView element="water" />
+      </MiddleRow>
+      <PokemonElementView element="flying" />
+    </Container>
+  )
+}
 
 const Container = styled(SafeAreaView)({
   position: 'absolute',
-  top: 0,
-  bottom: 0,
   left: 0,
   right: 0,
   justifyContent: 'space-between',
@@ -43,7 +45,7 @@ const MiddleRow = styled.View({
   alignItems: 'center',
 })
 
-const ScoreContainer = styled(SafeAreaView)({
+const ScoreContainer = styled.View({
   position: 'absolute',
   top: 0,
   right: 0,

library/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-swipeable-card-stack",
   "description": "Implement a swipeable card stack, similar to Tinder, with ease.",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "main": "dist/index.js",
   "repository": "https://github.com/antoine-cottineau/react-native-swipeable-card-stack",
   "author": "Antoine Cottineau",
@@ -26,10 +26,10 @@
     "babel-preset-expo": "~11.0.0",
     "jest": "^29.3.1",
     "jest-expo": "~51.0.3",
-    "react": "18.2.0",
-    "react-native": "0.74.3",
-    "react-native-gesture-handler": "~2.16.1",
-    "react-native-reanimated": "~3.10.1",
+    "react": "18.3.1",
+    "react-native": "0.76.3",
+    "react-native-gesture-handler": "~2.20.2",
+    "react-native-reanimated": "~3.16.1",
     "react-test-renderer": "^18.2.0",
     "typescript": "~5.3.3"
   },

library/src/domain/SwipeAxisDependentProp.ts

@@ -6,18 +6,18 @@ export const extractPropValue = <T>(
   prop: SwipeAxisDependentProp<T>,
   axis: SwipeAxis,
 ) => {
-  if (isRecordOfSwipeAxis(prop)) {
+  'worklet'
+  // I'm forced to inline the check as extracting it in a function crashes the app
+  if (
+    (<T>(value: unknown): value is Record<SwipeAxis, T> => {
+      if (typeof value !== 'object' || value === null) {
+        return false
+      }
+
+      return allAxis.every((axis) => axis in value)
+    })(prop)
+  ) {
     return prop[axis]
   }
   return prop
 }
-
-const isRecordOfSwipeAxis = <T>(
-  value: unknown,
-): value is Record<SwipeAxis, T> => {
-  if (typeof value !== 'object' || value === null) {
-    return false
-  }
-
-  return allAxis.every((axis) => axis in value)
-}

library/src/domain/getSwipeDirection.ts

@@ -13,6 +13,7 @@ export const getSwipeDirection = ({
   xEndedSwipePosition,
   yEndedSwipePosition,
 }: Params): SwipeDirection => {
+  'worklet'
   const horizontalRatio = Math.abs(xTranslation / xEndedSwipePosition)
   const verticalRatio = Math.abs(yTranslation / yEndedSwipePosition)
 

library/src/domain/isSwipeLocked.ts

@@ -12,6 +12,7 @@ export const isSwipeLocked = ({
   axis,
   lockedDirections,
 }: Params): boolean => {
+  'worklet'
   const isXSwipeLocked =
     (lockedDirections.includes('left') && translation < 0) ||
     (lockedDirections.includes('right') && translation > 0)

library/src/view/SwipeableCardStackOptions.ts

@@ -63,13 +63,15 @@ export type SwipeableCardStackOptions = {
   validateSwipeVelocityThreshold: SwipeAxisDependentProp<number>
 
   /**
-   * A function that returns a reanimated [SpringConfig](https://docs.swmansion.com/react-native-reanimated/docs/animations/withSpring/) that will be used in the final animation once a swipe is validated.
+   * A workletized function that returns a reanimated [SpringConfig](https://docs.swmansion.com/react-native-reanimated/docs/animations/withSpring/) that will be used in the final animation once a swipe is validated.
+   *
+   * **WARNING**: If this function isn't a worklet, the app will crash.
    *
    * This prop can also accept an object whose keys are swipe axis ("x" and "y") and whose values are functions that return a reanimated [SpringConfig](https://docs.swmansion.com/react-native-reanimated/docs/animations/withSpring/).
    *
    * `payload` is a gesture-handler payload that you can use to customize the config.
    *
-   * Default value: `() => ({ duration: 300 })`.
+   * Default value: `() => { "worklet"; return ({ duration: 300 }) }`.
    */
   validatedSwipeAnimationConfig: SwipeAxisDependentProp<
     (payload: PanGestureHandlerEventPayload) => WithSpringConfig

library/src/view/SwipeableCardWrapper.tsx

@@ -120,12 +120,14 @@ export const SwipeableCardWrapper = forwardRef(function SwipeableCardWrapper(
 
   const panGesture = Gesture.Pan()
     .onStart(({ translationX }) => {
+      'worklet'
       runOnJS(onCardSwipeStatusUpdated)({
         direction: translationX > 0 ? 'right' : 'left',
         phase: 'started',
       })
     })
     .onUpdate(({ translationX, translationY }) => {
+      'worklet'
       if (
         !isSwipeLocked({
           translation: translationX,
@@ -146,6 +148,7 @@ export const SwipeableCardWrapper = forwardRef(function SwipeableCardWrapper(
       }
     })
     .onEnd((payload) => {
+      'worklet'
       const { translationX, translationY, velocityX, velocityY } = payload
       const direction = getSwipeDirection({
         xTranslation: translationX,
@@ -200,13 +203,13 @@ export const SwipeableCardWrapper = forwardRef(function SwipeableCardWrapper(
 
       runOnJS(onCardSwipeStatusUpdated)({ direction, phase: 'stopped' })
 
-      const targetAnimationPosition = withTiming(
-        0,
-        extractPropValue(options.stoppedSwipeAnimationConfig, axis),
+      const animationConfig = extractPropValue(
+        options.stoppedSwipeAnimationConfig,
+        axis,
       )
 
-      xAnimationPosition.value = targetAnimationPosition
-      yAnimationPosition.value = targetAnimationPosition
+      xAnimationPosition.value = withTiming(0, animationConfig)
+      yAnimationPosition.value = withTiming(0, animationConfig)
     })
     .withTestId(`swipeable-card-wrapper-${index}-gesture`)
 

library/src/view/useDefaultOptions.ts

@@ -16,7 +16,10 @@ export const useDefaultOptions = (): SwipeableCardStackOptions => {
       y: 0.25 * height,
     },
     validateSwipeVelocityThreshold: 800,
-    validatedSwipeAnimationConfig: () => ({ duration: 300 }),
+    validatedSwipeAnimationConfig: () => {
+      'worklet'
+      return { duration: 300 }
+    },
     imperativeSwipeAnimationConfig: {
       duration: 300,
       easing: Easing.inOut(Easing.quad),

package.json

@@ -29,5 +29,6 @@
     "eslint-plugin-react": "^7.34.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "prettier": "^3.2.5"
-  }
+  },
+  "packageManager": "yarn@4.5.3"
 }