diff --git a/native/.babelrc.cjs b/native/.babelrc.cjs --- a/native/.babelrc.cjs +++ b/native/.babelrc.cjs @@ -9,7 +9,12 @@ 'babel-plugin-transform-bigint', '@babel/plugin-transform-named-capturing-groups-regex', // react-native-reanimated must be last - 'react-native-reanimated/plugin', + [ + 'react-native-reanimated/plugin', + { + extraPresets: ['@babel/preset-flow'], + }, + ], ], env: { production: { diff --git a/native/account/logged-out-modal.react.js b/native/account/logged-out-modal.react.js --- a/native/account/logged-out-modal.react.js +++ b/native/account/logged-out-modal.react.js @@ -67,12 +67,11 @@ easing: Easing.out(Easing.ease), }; -// prettier-ignore function getPanelPaddingTop( - modeValue /*: string */, - keyboardHeightValue /*: number */, - contentHeightValue /*: number */, -) /*: number */ { + modeValue: string, + keyboardHeightValue: number, + contentHeightValue: number, +): number { 'worklet'; const headerHeight = Platform.OS === 'ios' ? 62.33 : 58.54; let containerSize = headerHeight; @@ -89,11 +88,10 @@ return withTiming(targetPanelPaddingTop, timingConfig); } -// prettier-ignore function getPanelOpacity( - modeValue /*: string */, - finishResettingToPrompt/*: () => void */, -) /*: number */ { + modeValue: string, + finishResettingToPrompt: () => void, +): number { 'worklet'; const targetPanelOpacity = modeValue === 'loading' || modeValue === 'prompt' ? 0 : 1; diff --git a/native/chat/swipeable-message.react.js b/native/chat/swipeable-message.react.js --- a/native/chat/swipeable-message.react.js +++ b/native/chat/swipeable-message.react.js @@ -18,8 +18,6 @@ cancelAnimation, Extrapolate, type SharedValue, - // ESLint doesn't understand Flow comment syntax - // eslint-disable-next-line no-unused-vars type WithSpringConfig, } from 'react-native-reanimated'; import tinycolor from 'tinycolor2'; @@ -35,12 +33,11 @@ const panGestureHandlerActiveOffsetX = [-4, 4]; const panGestureHandlerFailOffsetY = [-5, 5]; -// prettier-ignore function dividePastDistance( - value /*: number */, - distance /*: number */, - factor /*: number */, -) /*: number */ { + value: number, + distance: number, + factor: number, +): number { 'worklet'; const absValue = Math.abs(value); if (absValue < distance) { @@ -50,8 +47,7 @@ return absFactor * (distance + (absValue - distance) / factor); } -// prettier-ignore -function makeSpringConfig(velocity /*: number */) /*: WithSpringConfig */ { +function makeSpringConfig(velocity: number): WithSpringConfig { 'worklet'; return { stiffness: 257.1370588235294, @@ -64,31 +60,28 @@ }; } -// prettier-ignore -function interpolateOpacityForViewerPrimarySnake( - translateX /*: number */, -) /*: number */ { +function interpolateOpacityForViewerPrimarySnake(translateX: number): number { 'worklet'; return interpolate(translateX, [-20, -5], [1, 0], Extrapolate.CLAMP); } -// prettier-ignore + function interpolateOpacityForNonViewerPrimarySnake( - translateX /*: number */, -) /*: number */ { + translateX: number, +): number { 'worklet'; return interpolate(translateX, [5, 20], [0, 1], Extrapolate.CLAMP); } -// prettier-ignore + function interpolateTranslateXForViewerSecondarySnake( - translateX /*: number */, -) /*: number */ { + translateX: number, +): number { 'worklet'; return interpolate(translateX, [-130, -120, -60, 0], [-130, -120, -5, 20]); } -// prettier-ignore + function interpolateTranslateXForNonViewerSecondarySnake( - translateX /*: number */, -) /*: number */ { + translateX: number, +): number { 'worklet'; return interpolate(translateX, [0, 80, 120, 130], [0, 30, 120, 130]); } @@ -218,19 +211,12 @@ const translateX = useSharedValue(0); const swipeEvent = useAnimatedGestureHandler( { - // prettier-ignore - onStart: ( - event /*: PanGestureEvent */, - ctx /*: { [string]: mixed } */, - ) => { + onStart: (event: PanGestureEvent, ctx: { [string]: mixed }) => { ctx.translationAtStart = translateX.value; cancelAnimation(translateX); }, - // prettier-ignore - onActive: ( - event /*: PanGestureEvent */, - ctx /*: { [string]: mixed } */, - ) => { + + onActive: (event: PanGestureEvent, ctx: { [string]: mixed }) => { const { translationAtStart } = ctx; if (typeof translationAtStart !== 'number') { throw new Error('translationAtStart should be number'); @@ -258,8 +244,8 @@ } ctx.prevPastSecondaryThreshold = pastSecondaryThreshold; }, - // prettier-ignore - onEnd: (event /*: PanGestureEvent */) => { + + onEnd: (event: PanGestureEvent) => { const absValue = Math.abs(translateX.value); if (absValue >= secondaryThreshold && secondaryActionExists) { runOnJS(secondaryAction)(); diff --git a/native/tooltip/nux-tips-overlay.react.js b/native/tooltip/nux-tips-overlay.react.js --- a/native/tooltip/nux-tips-overlay.react.js +++ b/native/tooltip/nux-tips-overlay.react.js @@ -6,9 +6,7 @@ import Animated, { FadeOut, withTiming, - // eslint-disable-next-line no-unused-vars type EntryAnimationsValues, - // eslint-disable-next-line no-unused-vars type ExitAnimationsValues, } from 'react-native-reanimated'; @@ -290,31 +288,28 @@ } }, [coordinates, dimensions.width]); - // prettier-ignore const tipContainerEnteringAnimation = React.useCallback( - (values/*: EntryAnimationsValues*/) => { + (values: EntryAnimationsValues) => { 'worklet'; if (!coordinates) { return { animations: {}, - initialValues:{}, + initialValues: {}, }; } - if(tooltipLocation === 'absolute'){ + if (tooltipLocation === 'absolute') { return { animations: { opacity: withTiming(1, { duration: animationDuration }), - transform: [ + transform: [ { scale: withTiming(1, { duration: animationDuration }) }, ], }, initialValues: { opacity: 0, - transform: [ - { scale: 0 }, - ], + transform: [{ scale: 0 }], }, }; } @@ -351,15 +346,14 @@ [coordinates, tooltipLocation], ); - // prettier-ignore const tipContainerExitingAnimation = React.useCallback( - (values/*: ExitAnimationsValues*/) => { + (values: ExitAnimationsValues) => { 'worklet'; if (!coordinates) { return { animations: {}, - initialValues:{}, + initialValues: {}, }; } diff --git a/patches/react-native-reanimated+2.12.0.patch b/patches/react-native-reanimated+2.12.0.patch --- a/patches/react-native-reanimated+2.12.0.patch +++ b/patches/react-native-reanimated+2.12.0.patch @@ -1,5 +1,5 @@ diff --git a/node_modules/react-native-reanimated/android/build.gradle b/node_modules/react-native-reanimated/android/build.gradle -index a38b2a5..32cb655 100644 +index a38b2a5..8605d09 100644 --- a/node_modules/react-native-reanimated/android/build.gradle +++ b/node_modules/react-native-reanimated/android/build.gradle @@ -658,7 +658,7 @@ if (isNewArchitectureEnabled()) { @@ -11,3 +11,23 @@ if (REACT_NATIVE_MINOR_VERSION < 69) { srcUrl = "https://github.com/react-native-community/boost-for-react-native/releases/download/v${transformedVersion}-0/boost_${BOOST_VERSION}.tar.gz" } +diff --git a/node_modules/react-native-reanimated/plugin.js b/node_modules/react-native-reanimated/plugin.js +index b9ba1c3..0aa9ab7 100644 +--- a/node_modules/react-native-reanimated/plugin.js ++++ b/node_modules/react-native-reanimated/plugin.js +@@ -360,13 +360,14 @@ function makeWorklet(t, fun, state) { + + const transformed = transformSync(code, { + filename: state.file.opts.filename, +- presets: ['@babel/preset-typescript'], ++ presets: ['@babel/preset-typescript', ...(state.opts.extraPresets ?? [])], + plugins: [ + '@babel/plugin-transform-shorthand-properties', + '@babel/plugin-transform-arrow-functions', + '@babel/plugin-proposal-optional-chaining', + '@babel/plugin-proposal-nullish-coalescing-operator', + ['@babel/plugin-transform-template-literals', { loose: true }], ++ ...(state.opts.extraPlugins ?? []), + ], + ast: true, + babelrc: false,