react-native-reanimated
react-native-reanimated copied to clipboard
Fix useAnimatedKeyboard hook for iPad detached keyboard (floating/undocked/split)
Summary
According to https://github.com/software-mansion/react-native-reanimated/issues/5584, useAnimatedKeyboard
returns incorrect height when iPad keyboard is in detached mode (so either floating, undocked or split). Moreover, there is no way to tell if the keyboard is detached in order to e.g. ignore emitted values. This PR tries to address the issues by:
- Adding new KeyboardState case
DETACHED
, which is the hook's state as long as the keyboard is detached (this state's raw integer value is 5) - Returning
0
height value as long as KeyboardState returned by hook isDETACHED
This way the user can listen for state changes and the hook doesn't emit values disrupting behaviour dependent on it (e.g. at some point it would return entire window's height as keyboard height).
iPad simulator supports only FLOATING
out of these keyboard modes. SPLIT
and UNDOCKED
need physical device.
before | after |
---|---|
This PR will be a draft until https://github.com/software-mansion/react-native-reanimated/pull/5705 is merged, because it substantially changes the logic in REAKeyboardEventObserver and this PR will need some changes.
Test plan
Reanimated's example app needs some additional setup to properly run fullscreen-mode on iPad (both simulator and physical device):
- Add a few properties to
/Example/ios/ReanimatedExample.xcodeproj/project.pbxproj
file:
- lines 557 - 561 should look like this:
SUPPORTED_PLATFORMS = "iphoneos iphonesimulator";
SUPPORTS_MACCATALYST = NO;
SWIFT_OPTIMIZATION_LEVEL = "-Onone";
SWIFT_VERSION = 5.0;
TARGETED_DEVICE_FAMILY = "1,2";
- lines 586 - 589 should look like this:
SUPPORTED_PLATFORMS = "iphoneos iphonesimulator";
SUPPORTS_MACCATALYST = NO;
SWIFT_VERSION = 5.0;
TARGETED_DEVICE_FAMILY = "1,2";
- Add a console log to
/app/src/examples/AnimatedKeyboardExample.tsx
to see output of the hook,translateStyle
code might look this way:
const translateStyle = useAnimatedStyle(() => {
console.log(
`STATE: ${keyboard.state.value}, HEIGHT: ${keyboard.height.value}`
);
return {
transform: [{ translateY: -keyboard.height.value }],
};
});
- Run Example on some iPad simulator (only floating keyboard) or physical iPad device (all of the mentioned options) and observe logged values in console.