react-native-reanimated icon indicating copy to clipboard operation
react-native-reanimated copied to clipboard

Fix useAnimatedKeyboard hook for iPad detached keyboard (floating/undocked/split)

Open szydlovsky opened this issue 1 year ago • 0 comments

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:

  1. 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)
  2. Returning 0 height value as long as KeyboardState returned by hook is DETACHED

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):

  1. 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";
  1. 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 }],
  };
});
  1. Run Example on some iPad simulator (only floating keyboard) or physical iPad device (all of the mentioned options) and observe logged values in console.

szydlovsky avatar Feb 22 '24 13:02 szydlovsky