diff --git a/FabricExample/package.json b/FabricExample/package.json index 8b48e9f67a..14c2e56643 100644 --- a/FabricExample/package.json +++ b/FabricExample/package.json @@ -20,7 +20,7 @@ "react-native": "0.72.4", "react-native-gesture-handler": "2.12.1", "react-native-keyboard-controller": "link:../", - "react-native-reanimated": "3.4.2", + "react-native-reanimated": "3.6.0", "react-native-safe-area-context": "4.7.1", "react-native-screens": "3.24.0", "react-native-toast-message": "^2.1.6" diff --git a/FabricExample/src/components/AwareScrollView/KeyboardAwareScrollView.tsx b/FabricExample/src/components/AwareScrollView/KeyboardAwareScrollView.tsx index 3d028f080f..c352bd7320 100644 --- a/FabricExample/src/components/AwareScrollView/KeyboardAwareScrollView.tsx +++ b/FabricExample/src/components/AwareScrollView/KeyboardAwareScrollView.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react'; +import React, { FC, useCallback } from 'react'; import { ScrollViewProps, useWindowDimensions } from 'react-native'; import { FocusedInputLayoutChangedEvent, useReanimatedFocusedInput } from 'react-native-keyboard-controller'; import Reanimated, { @@ -9,7 +9,6 @@ import Reanimated, { useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, - useWorkletCallback, } from 'react-native-reanimated'; import { useSmoothKeyboardHandler } from './useSmoothKeyboardHandler'; @@ -84,7 +83,9 @@ const KeyboardAwareScrollView: FC = ({ /** * Function that will scroll a ScrollView as keyboard gets moving */ - const maybeScroll = useWorkletCallback((e: number, animated: boolean = false) => { + const maybeScroll = useCallback((e: number, animated: boolean = false) => { + 'worklet'; + const visibleRect = height - keyboardHeight.value; const point = (layout.value?.layout.absoluteY || 0) + (layout.value?.layout.height || 0); diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock index 8f18e736d0..b8237b6c9c 100644 --- a/example/ios/Podfile.lock +++ b/example/ios/Podfile.lock @@ -497,35 +497,10 @@ PODS: - React-Core - RNGestureHandler (2.12.1): - React-Core - - RNReanimated (3.4.2): - - DoubleConversion - - FBLazyVector - - glog - - hermes-engine - - RCT-Folly - - RCTRequired - - RCTTypeSafety - - React-callinvoker + - RNReanimated (3.6.0): + - RCT-Folly (= 2021.07.22.00) - React-Core - - React-Core/DevSupport - - React-Core/RCTWebSocket - - React-CoreModules - - React-cxxreact - - React-hermes - - React-jsi - - React-jsiexecutor - - React-jsinspector - - React-RCTActionSheet - - React-RCTAnimation - - React-RCTAppDelegate - - React-RCTBlob - - React-RCTImage - - React-RCTLinking - - React-RCTNetwork - - React-RCTSettings - - React-RCTText - ReactCommon/turbomodule/core - - Yoga - RNScreens (3.24.0): - React-Core - React-RCTImage @@ -776,7 +751,7 @@ SPEC CHECKSUMS: ReactCommon: 4b2bdcb50a3543e1c2b2849ad44533686610826d RNCMaskedView: 949696f25ec596bfc697fc88e6f95cf0c79669b6 RNGestureHandler: c0d04458598fcb26052494ae23dda8f8f5162b13 - RNReanimated: 726395a2fa2f04cea340274ba57a4e659bc0d9c1 + RNReanimated: 1dcf7602777a195cf34f1dcd658037a80a2c8af1 RNScreens: b21dc57dfa2b710c30ec600786a3fc223b1b92e7 SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17 Yoga: 3efc43e0d48686ce2e8c60f99d4e6bd349aff981 diff --git a/example/package.json b/example/package.json index c65bfe3008..cf65c7ceb4 100644 --- a/example/package.json +++ b/example/package.json @@ -20,7 +20,7 @@ "react-native": "0.72.4", "react-native-gesture-handler": "2.12.1", "react-native-keyboard-controller": "link:../", - "react-native-reanimated": "3.4.2", + "react-native-reanimated": "3.6.0", "react-native-safe-area-context": "^4.7.1", "react-native-screens": "^3.24.0", "react-native-toast-message": "^2.1.6" diff --git a/example/src/components/AwareScrollView/KeyboardAwareScrollView.tsx b/example/src/components/AwareScrollView/KeyboardAwareScrollView.tsx index 3d028f080f..c352bd7320 100644 --- a/example/src/components/AwareScrollView/KeyboardAwareScrollView.tsx +++ b/example/src/components/AwareScrollView/KeyboardAwareScrollView.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react'; +import React, { FC, useCallback } from 'react'; import { ScrollViewProps, useWindowDimensions } from 'react-native'; import { FocusedInputLayoutChangedEvent, useReanimatedFocusedInput } from 'react-native-keyboard-controller'; import Reanimated, { @@ -9,7 +9,6 @@ import Reanimated, { useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, - useWorkletCallback, } from 'react-native-reanimated'; import { useSmoothKeyboardHandler } from './useSmoothKeyboardHandler'; @@ -84,7 +83,9 @@ const KeyboardAwareScrollView: FC = ({ /** * Function that will scroll a ScrollView as keyboard gets moving */ - const maybeScroll = useWorkletCallback((e: number, animated: boolean = false) => { + const maybeScroll = useCallback((e: number, animated: boolean = false) => { + 'worklet'; + const visibleRect = height - keyboardHeight.value; const point = (layout.value?.layout.absoluteY || 0) + (layout.value?.layout.height || 0); diff --git a/example/yarn.lock b/example/yarn.lock index 602df86671..10ba458933 100644 --- a/example/yarn.lock +++ b/example/yarn.lock @@ -4940,10 +4940,10 @@ react-native-gesture-handler@2.12.1: version "0.0.0" uid "" -react-native-reanimated@3.4.2: - version "3.4.2" - resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.4.2.tgz#744154fead6d8d31d5bd9ac617d8c84d74a6f697" - integrity sha512-FbtG+f1PB005vDTJSv4zAnTK7nNXi+FjFgbAM5gOzIZDajfph2BFMSUstzIsN8T77+OKuugUBmcTqLnQ24EBVg== +react-native-reanimated@3.6.0: + version "3.6.0" + resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.6.0.tgz#d2ca5f4c234f592af3d63bc749806e36d6e0a755" + integrity sha512-eDdhZTRYofrIqFB/Z5xLTWxcB7wDj4ifrNm+gZ2xHSZPjAQ747ukDdH9rglPyPmi+GcmDH7Wff411Xsw5fm45Q== dependencies: "@babel/plugin-transform-object-assign" "^7.16.7" "@babel/preset-typescript" "^7.16.7" diff --git a/package.json b/package.json index fcad0117d9..6971679916 100644 --- a/package.json +++ b/package.json @@ -80,7 +80,7 @@ "react": "18.2.0", "react-native": "0.72.4", "react-native-builder-bob": "^0.18.0", - "react-native-reanimated": "3.4.2", + "react-native-reanimated": "3.6.0", "release-it": "^14.2.2", "typescript": "^4.8.4" }, diff --git a/src/animated.tsx b/src/animated.tsx index 14f40a9c2e..343ebd8845 100644 --- a/src/animated.tsx +++ b/src/animated.tsx @@ -190,7 +190,6 @@ export const KeyboardProvider = ({ onFocusedInputLayoutChangedReanimated={inputHandler} navigationBarTranslucent={navigationBarTranslucent} statusBarTranslucent={statusBarTranslucent} - // @ts-expect-error https://github.com/software-mansion/react-native-reanimated/pull/4923 style={styles.container} > {children} diff --git a/src/components/KeyboardAvoidingView/index.tsx b/src/components/KeyboardAvoidingView/index.tsx index 436d6ad5d9..fc72f0dd8b 100644 --- a/src/components/KeyboardAvoidingView/index.tsx +++ b/src/components/KeyboardAvoidingView/index.tsx @@ -6,7 +6,6 @@ import Reanimated, { useAnimatedStyle, useDerivedValue, useSharedValue, - useWorkletCallback, } from 'react-native-reanimated'; import { useKeyboardAnimation } from './hooks'; @@ -68,18 +67,22 @@ const KeyboardAvoidingView = forwardRef>( const keyboard = useKeyboardAnimation(); const { height: screenHeight } = useWindowDimensions(); - const relativeKeyboardHeight = useWorkletCallback(() => { + const relativeKeyboardHeight = useCallback(() => { + 'worklet'; + const keyboardY = screenHeight - keyboard.heightWhenOpened.value - keyboardVerticalOffset; return Math.max(frame.value.y + frame.value.height - keyboardY, 0); }, [screenHeight, keyboardVerticalOffset]); - const onLayoutWorklet = useWorkletCallback((layout: LayoutRectangle) => { + const onLayoutWorklet = useCallback((layout: LayoutRectangle) => { + 'worklet'; + if (keyboard.isClosed.value) { initialFrame.value = layout; } - }); + }, []); const onLayout = useCallback>( (e) => { runOnUI(onLayoutWorklet)(e.nativeEvent.layout); @@ -134,7 +137,6 @@ const KeyboardAvoidingView = forwardRef>( return ( + {children} ); diff --git a/src/replicas.ts b/src/replicas.ts index 3086acc1ff..120fdd166e 100644 --- a/src/replicas.ts +++ b/src/replicas.ts @@ -1,11 +1,10 @@ -import { useEffect, useMemo, useRef } from 'react'; +import { useCallback, useEffect, useMemo, useRef } from 'react'; import { Animated, Easing, Keyboard, Platform } from 'react-native'; import { runOnUI, useAnimatedReaction, useDerivedValue, useSharedValue, - useWorkletCallback, withSpring, } from 'react-native-reanimated'; @@ -111,7 +110,9 @@ export const useReanimatedKeyboardAnimationReplica = () => { const progress = useDerivedValue(() => height.value / heightEvent.value); - const handler = useWorkletCallback((_height: number) => { + const handler = useCallback((_height: number) => { + 'worklet'; + heightEvent.value = _height; }, []); diff --git a/yarn.lock b/yarn.lock index 45a53e9101..075245780f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7769,10 +7769,10 @@ react-native-builder-bob@^0.18.0: optionalDependencies: jetifier "^2.0.0" -react-native-reanimated@3.4.2: - version "3.4.2" - resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.4.2.tgz#744154fead6d8d31d5bd9ac617d8c84d74a6f697" - integrity sha512-FbtG+f1PB005vDTJSv4zAnTK7nNXi+FjFgbAM5gOzIZDajfph2BFMSUstzIsN8T77+OKuugUBmcTqLnQ24EBVg== +react-native-reanimated@3.6.0: + version "3.6.0" + resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.6.0.tgz#d2ca5f4c234f592af3d63bc749806e36d6e0a755" + integrity sha512-eDdhZTRYofrIqFB/Z5xLTWxcB7wDj4ifrNm+gZ2xHSZPjAQ747ukDdH9rglPyPmi+GcmDH7Wff411Xsw5fm45Q== dependencies: "@babel/plugin-transform-object-assign" "^7.16.7" "@babel/preset-typescript" "^7.16.7"