Skip to content

Commit 094e3e5

Browse files
committed
fix: missing animations in
1 parent f48f5f5 commit 094e3e5

File tree

7 files changed

+261
-11
lines changed

7 files changed

+261
-11
lines changed

ios/Podfile.lock

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2467,7 +2467,7 @@ PODS:
24672467
- ReactCommon/turbomodule/core
24682468
- SocketRocket
24692469
- Yoga
2470-
- react-native-keyboard-controller (1.18.5):
2470+
- react-native-keyboard-controller (1.20.0):
24712471
- boost
24722472
- DoubleConversion
24732473
- fast_float
@@ -2485,7 +2485,7 @@ PODS:
24852485
- React-graphics
24862486
- React-ImageManager
24872487
- React-jsi
2488-
- react-native-keyboard-controller/common (= 1.18.5)
2488+
- react-native-keyboard-controller/common (= 1.20.0)
24892489
- React-NativeModulesApple
24902490
- React-RCTFabric
24912491
- React-renderercss
@@ -2496,7 +2496,7 @@ PODS:
24962496
- ReactCommon/turbomodule/core
24972497
- SocketRocket
24982498
- Yoga
2499-
- react-native-keyboard-controller/common (1.18.5):
2499+
- react-native-keyboard-controller/common (1.20.0):
25002500
- boost
25012501
- DoubleConversion
25022502
- fast_float
@@ -4719,7 +4719,7 @@ SPEC CHECKSUMS:
47194719
react-native-get-random-values: d16467cf726c618e9c7a8c3c39c31faa2244bbba
47204720
react-native-image-picker: 1722f5d3dc5de5039d423e290dc31a717ba9605e
47214721
react-native-key-command: 7538df85ed26502b2a929c0584235459b26c7a91
4722-
react-native-keyboard-controller: c4ca61f44d66c2f8987a7e67e9b78e80dc965c45
4722+
react-native-keyboard-controller: 8cbd58b97f6c00dd7c21ba7a5075012574accac0
47234723
react-native-launch-arguments: d4759f7591e2766e6c5ec746b7032429edaf7058
47244724
react-native-netinfo: b88a57a1f93f4d63aeab839d51c746484641564b
47254725
react-native-pager-view: b93d2fcd4dc06c519b8ad0ceddaf183fb5fa32e7
@@ -4779,7 +4779,7 @@ SPEC CHECKSUMS:
47794779
RNNitroSQLite: fb251387cfbee73b100cd484a3c886fda681b3b5
47804780
RNPermissions: 518f0a0c439acc74e2b9937e0e7d29e5031ae949
47814781
RNReactNativeHapticFeedback: 5f1542065f0b24c9252bd8cf3e83bc9c548182e4
4782-
RNReanimated: c3de6d69dba4054d4f35562b14c84061699188e5
4782+
RNReanimated: 38e33518f5a8940e2ad877937a220c854c7777e0
47834783
RNScreens: 4f2aed147a2775017923789d8a0a2d377712ec2e
47844784
RNSentry: 4832a7acd1fe48982149f585e1802f4d9fc7b00a
47854785
RNShare: 1c1fde2c4134b9cf220ffebbd6df9c414036d382

package-lock.json

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@
186186
"react-native-image-picker": "^7.1.2",
187187
"react-native-image-size": "git+https://github.com/Expensify/react-native-image-size#cb392140db4953a283590d7cf93b4d0461baa2a9",
188188
"react-native-key-command": "1.0.14",
189-
"react-native-keyboard-controller": "1.18.5",
189+
"react-native-keyboard-controller": "1.20.0",
190190
"react-native-launch-arguments": "^4.0.2",
191191
"react-native-localize": "^3.5.4",
192192
"react-native-nitro-modules": "0.29.4",
@@ -429,5 +429,10 @@
429429
"engines": {
430430
"node": "20.19.5",
431431
"npm": "10.8.2"
432+
},
433+
"reanimated": {
434+
"staticFeatureFlags": {
435+
"DISABLE_COMMIT_PAUSING_MECHANISM": true
436+
}
432437
}
433438
}
Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
diff --git a/node_modules/react-native-keyboard-controller/ios/animations/SpringAnimation.swift b/node_modules/react-native-keyboard-controller/ios/animations/SpringAnimation.swift
2+
index 8712c29..ddfb495 100644
3+
--- a/node_modules/react-native-keyboard-controller/ios/animations/SpringAnimation.swift
4+
+++ b/node_modules/react-native-keyboard-controller/ios/animations/SpringAnimation.swift
5+
@@ -31,6 +31,7 @@ public final class SpringAnimation: KeyboardAnimation {
6+
private let initialVelocity: Double
7+
8+
init(animation: CASpringAnimation, fromValue: Double, toValue: Double) {
9+
+ print("kav::spring \(animation) | \(fromValue) -> \(toValue)")
10+
stiffness = animation.stiffness
11+
damping = animation.damping
12+
mass = animation.mass
13+
diff --git a/node_modules/react-native-keyboard-controller/ios/animations/TimingAnimation.swift b/node_modules/react-native-keyboard-controller/ios/animations/TimingAnimation.swift
14+
index 7120bdb..7dd38bd 100644
15+
--- a/node_modules/react-native-keyboard-controller/ios/animations/TimingAnimation.swift
16+
+++ b/node_modules/react-native-keyboard-controller/ios/animations/TimingAnimation.swift
17+
@@ -20,6 +20,7 @@ public final class TimingAnimation: KeyboardAnimation {
18+
private let p2: CGPoint
19+
20+
init(animation: CABasicAnimation, fromValue: Double, toValue: Double) {
21+
+ print("kav::timing \(animation) | \(fromValue) -> \(toValue)")
22+
let timingFunction = animation.timingFunction
23+
var controlPoints: ContiguousArray<Float> = ContiguousArray([0, 0, 0, 0])
24+
timingFunction?.getControlPoint(at: 1, values: &controlPoints[0])
25+
diff --git a/node_modules/react-native-keyboard-controller/ios/observers/movement/KeyboardTrackingView.swift b/node_modules/react-native-keyboard-controller/ios/observers/movement/KeyboardTrackingView.swift
26+
index dc07c23..813b377 100644
27+
--- a/node_modules/react-native-keyboard-controller/ios/observers/movement/KeyboardTrackingView.swift
28+
+++ b/node_modules/react-native-keyboard-controller/ios/observers/movement/KeyboardTrackingView.swift
29+
@@ -40,9 +40,11 @@ public final class KeyboardTrackingView: UIView {
30+
31+
private func setup() {
32+
// for debug purposes
33+
- // self.backgroundColor = .red
34+
- isUserInteractionEnabled = false
35+
- isHidden = true
36+
+ self.backgroundColor = .red
37+
+ // 10 px height
38+
+ self.frame = CGRect(x: 0, y: 0, width: 1, height: 2)
39+
+ // isUserInteractionEnabled = false
40+
+ // isHidden = true
41+
42+
NotificationCenter.default.addObserver(
43+
self,
44+
@@ -87,7 +89,7 @@ public final class KeyboardTrackingView: UIView {
45+
leadingAnchor.constraint(equalTo: topView.leadingAnchor, constant: 0),
46+
trailingAnchor.constraint(equalTo: topView.trailingAnchor, constant: 0),
47+
bottomAnchor.constraint(equalTo: topView.keyboardLayoutGuide.topAnchor, constant: 0),
48+
- heightAnchor.constraint(equalToConstant: 0),
49+
+ heightAnchor.constraint(equalToConstant: 2),
50+
])
51+
}
52+
isAttaching = false
53+
diff --git a/node_modules/react-native-keyboard-controller/ios/observers/movement/observer/KeyboardMovementObserver+Watcher.swift b/node_modules/react-native-keyboard-controller/ios/observers/movement/observer/KeyboardMovementObserver+Watcher.swift
54+
index 53148a6..4001123 100644
55+
--- a/node_modules/react-native-keyboard-controller/ios/observers/movement/observer/KeyboardMovementObserver+Watcher.swift
56+
+++ b/node_modules/react-native-keyboard-controller/ios/observers/movement/observer/KeyboardMovementObserver+Watcher.swift
57+
@@ -22,6 +22,8 @@ extension KeyboardMovementObserver {
58+
}
59+
60+
@objc func updateKeyboardFrame(link: CADisplayLink) {
61+
+ print("kav 1")
62+
+
63+
if keyboardTrackingView.view == nil {
64+
return
65+
}
66+
@@ -29,11 +31,16 @@ extension KeyboardMovementObserver {
67+
let (visibleKeyboardHeight, keyboardFrameY) = keyboardTrackingView.view.frameTransitionInWindow
68+
var keyboardPosition = visibleKeyboardHeight - KeyboardAreaExtender.shared.offset
69+
70+
+ print("kav 2 \(keyboardPosition) \(prevKeyboardPosition) \(keyboardFrameY)")
71+
+
72+
if keyboardPosition == prevKeyboardPosition || keyboardFrameY == 0 {
73+
return
74+
}
75+
76+
+ print("kav 3")
77+
+
78+
if animation == nil {
79+
+ print("kav - initialize animation: \(prevKeyboardPosition) -> \(keyboardHeight)")
80+
initializeAnimation(fromValue: prevKeyboardPosition, toValue: keyboardHeight)
81+
}
82+
83+
@@ -61,6 +68,8 @@ extension KeyboardMovementObserver {
84+
keyboardPosition = race(position, keyboardPosition)
85+
}
86+
87+
+ print("kav 4 \(keyboardPosition)")
88+
+
89+
onEvent(
90+
"onKeyboardMove",
91+
keyboardPosition as NSNumber,
92+
diff --git a/node_modules/react-native-keyboard-controller/src/components/KeyboardAvoidingView/hooks.ts b/node_modules/react-native-keyboard-controller/src/components/KeyboardAvoidingView/hooks.ts
93+
index 4d504fe..c6a5bab 100644
94+
--- a/node_modules/react-native-keyboard-controller/src/components/KeyboardAvoidingView/hooks.ts
95+
+++ b/node_modules/react-native-keyboard-controller/src/components/KeyboardAvoidingView/hooks.ts
96+
@@ -7,7 +7,7 @@ import { useKeyboardHandler } from "../../hooks";
97+
98+
const OS = Platform.OS;
99+
100+
-export const useKeyboardAnimation = () => {
101+
+export const useKeyboardAnimation = (testId) => {
102+
const { reanimated } = useKeyboardContext();
103+
104+
const heightWhenOpened = useSharedValue(0);
105+
@@ -24,6 +24,8 @@ export const useKeyboardAnimation = () => {
106+
height.value = initialHeight;
107+
progress.value = initialProgress;
108+
isClosed.value = initialProgress === 0;
109+
+
110+
+ console.debug("kav-hook", "effect", testId, initialHeight);
111+
}, []);
112+
113+
useKeyboardHandler(
114+
@@ -31,6 +33,8 @@ export const useKeyboardAnimation = () => {
115+
onStart: (e) => {
116+
"worklet";
117+
118+
+ console.debug("kav-hook", "onStart", testId, e.height);
119+
+
120+
if (e.height > 0) {
121+
isClosed.value = false;
122+
heightWhenOpened.value = e.height;
123+
@@ -39,6 +43,8 @@ export const useKeyboardAnimation = () => {
124+
onMove: (e) => {
125+
"worklet";
126+
127+
+ console.debug("kav-hook", "onMove", testId, e.height, e.progress);
128+
+
129+
progress.value = e.progress;
130+
height.value = e.height;
131+
},
132+
@@ -51,13 +57,15 @@ export const useKeyboardAnimation = () => {
133+
onEnd: (e) => {
134+
"worklet";
135+
136+
+ console.debug("kav-hook", "onEnd", testId, e.height);
137+
+
138+
isClosed.value = e.height === 0;
139+
140+
height.value = e.height;
141+
progress.value = e.progress;
142+
},
143+
},
144+
- [],
145+
+ [testId],
146+
);
147+
148+
return { height, progress, heightWhenOpened, isClosed };
149+
diff --git a/node_modules/react-native-keyboard-controller/src/components/KeyboardAvoidingView/index.tsx b/node_modules/react-native-keyboard-controller/src/components/KeyboardAvoidingView/index.tsx
150+
index ba162c2..7bfed06 100644
151+
--- a/node_modules/react-native-keyboard-controller/src/components/KeyboardAvoidingView/index.tsx
152+
+++ b/node_modules/react-native-keyboard-controller/src/components/KeyboardAvoidingView/index.tsx
153+
@@ -87,6 +87,7 @@ const KeyboardAvoidingView = forwardRef<
154+
keyboardVerticalOffset = 0,
155+
style,
156+
onLayout: onLayoutProps,
157+
+ testID,
158+
...props
159+
},
160+
ref,
161+
@@ -95,7 +96,7 @@ const KeyboardAvoidingView = forwardRef<
162+
const frame = useDerivedValue(() => initialFrame.value || defaultLayout);
163+
164+
const { translate, padding } = useTranslateAnimation();
165+
- const keyboard = useKeyboardAnimation();
166+
+ const keyboard = useKeyboardAnimation(testID);
167+
const { height: screenHeight } = useWindowDimensions();
168+
169+
const relativeKeyboardHeight = useCallback(() => {
170+
@@ -146,6 +147,9 @@ const KeyboardAvoidingView = forwardRef<
171+
const bottom = interpolateToRelativeKeyboardHeight(
172+
keyboard.progress.value,
173+
);
174+
+
175+
+ console.log("kav-style", keyboard.progress.value, bottom);
176+
+
177+
const translateY = interpolateToRelativeKeyboardHeight(translate.value);
178+
const paddingBottom = interpolateToRelativeKeyboardHeight(padding.value);
179+
const height = frame.value.height - bottom;
Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
diff --git a/node_modules/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlags.cpp b/node_modules/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlags.cpp
2+
index 667aec1..5cd9376 100644
3+
--- a/node_modules/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlags.cpp
4+
+++ b/node_modules/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlags.cpp
5+
@@ -215,7 +215,7 @@ double ReactNativeFeatureFlags::preparedTextCacheSize() {
6+
}
7+
8+
bool ReactNativeFeatureFlags::preventShadowTreeCommitExhaustion() {
9+
- return getAccessor().preventShadowTreeCommitExhaustion();
10+
+ return true;
11+
}
12+
13+
bool ReactNativeFeatureFlags::traceTurboModulePromiseRejectionsOnAndroid() {
14+
diff --git a/node_modules/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlagsAccessor.cpp b/node_modules/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlagsAccessor.cpp
15+
index d3b0351..8d6c090 100644
16+
--- a/node_modules/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlagsAccessor.cpp
17+
+++ b/node_modules/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlagsAccessor.cpp
18+
@@ -876,6 +876,7 @@ double ReactNativeFeatureFlagsAccessor::preparedTextCacheSize() {
19+
}
20+
21+
bool ReactNativeFeatureFlagsAccessor::preventShadowTreeCommitExhaustion() {
22+
+ return true;
23+
auto flagValue = preventShadowTreeCommitExhaustion_.load();
24+
25+
if (!flagValue.has_value()) {
26+
diff --git a/node_modules/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlagsDefaults.h b/node_modules/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlagsDefaults.h
27+
index e0742c9..a5cd8cf 100644
28+
--- a/node_modules/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlagsDefaults.h
29+
+++ b/node_modules/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlagsDefaults.h
30+
@@ -216,7 +216,7 @@ class ReactNativeFeatureFlagsDefaults : public ReactNativeFeatureFlagsProvider {
31+
}
32+
33+
bool preventShadowTreeCommitExhaustion() override {
34+
- return false;
35+
+ return true;
36+
}
37+
38+
bool traceTurboModulePromiseRejectionsOnAndroid() override {
39+
diff --git a/node_modules/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlagsDynamicProvider.h b/node_modules/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlagsDynamicProvider.h
40+
index f5c85f5..731aa2f 100644
41+
--- a/node_modules/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlagsDynamicProvider.h
42+
+++ b/node_modules/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlagsDynamicProvider.h
43+
@@ -474,7 +474,7 @@ class ReactNativeFeatureFlagsDynamicProvider : public ReactNativeFeatureFlagsDef
44+
return value.getBool();
45+
}
46+
47+
- return ReactNativeFeatureFlagsDefaults::preventShadowTreeCommitExhaustion();
48+
+ return true;
49+
}
50+
51+
bool traceTurboModulePromiseRejectionsOnAndroid() override {
52+
diff --git a/node_modules/react-native/ReactCommon/react/nativemodule/featureflags/NativeReactNativeFeatureFlags.cpp b/node_modules/react-native/ReactCommon/react/nativemodule/featureflags/NativeReactNativeFeatureFlags.cpp
53+
index 1e9e0ff..71b54d7 100644
54+
--- a/node_modules/react-native/ReactCommon/react/nativemodule/featureflags/NativeReactNativeFeatureFlags.cpp
55+
+++ b/node_modules/react-native/ReactCommon/react/nativemodule/featureflags/NativeReactNativeFeatureFlags.cpp
56+
@@ -281,7 +281,7 @@ double NativeReactNativeFeatureFlags::preparedTextCacheSize(
57+
58+
bool NativeReactNativeFeatureFlags::preventShadowTreeCommitExhaustion(
59+
jsi::Runtime& /*runtime*/) {
60+
- return ReactNativeFeatureFlags::preventShadowTreeCommitExhaustion();
61+
+ return true;
62+
}
63+
64+
bool NativeReactNativeFeatureFlags::traceTurboModulePromiseRejectionsOnAndroid(
65+
diff

src/components/KeyboardAvoidingView/types.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type {KeyboardAvoidingViewProps as RNKeyboardAvoidingViewProps} from 'react-native';
1+
import type {KeyboardAvoidingViewProps as RNKeyboardAvoidingViewProps} from 'react-native-keyboard-controller';
22

33
type KeyboardAvoidingViewProps = RNKeyboardAvoidingViewProps & {
44
/**

src/components/ScreenWrapper/ScreenWrapperContainer.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -224,6 +224,7 @@ function ScreenWrapperContainer({
224224
// should be offset by the bottom safe area padding when the keyboard is open.
225225
shouldOffsetBottomSafeAreaPadding={shouldKeyboardOffsetBottomSafeAreaPadding}
226226
keyboardVerticalOffset={keyboardVerticalOffset}
227+
testID={testID}
227228
>
228229
<PickerAvoidingView
229230
style={isAvoidingViewportScroll ? [styles.h100, {marginTop: 1}] : styles.flex1}

0 commit comments

Comments
 (0)