Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update useAnimatedKeyboard docs #5866

Merged
merged 11 commits into from
May 9, 2024
Prev Previous commit
Next Next commit
Fix prettier
  • Loading branch information
maciekstosio committed Apr 4, 2024
commit faf9c39e70ad80c6a9f1f63fadb35816970ce0a0
13 changes: 6 additions & 7 deletions docs/docs/device/useAnimatedKeyboard.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -80,9 +80,9 @@ Hook `useAnimatedKeyboard` returns an object containing these fields:
import useBaseUrl from '@docusaurus/useBaseUrl';
import AnimatedKeyboardSrc from '!!raw-loader!@site/src/examples/AnimatedKeyboard';

<InteractiveExample
<InteractiveExample
src={AnimatedKeyboardSrc}
component={(
component={
<ThemedVideo
center
width={300}
Expand All @@ -91,16 +91,16 @@ import AnimatedKeyboardSrc from '!!raw-loader!@site/src/examples/AnimatedKeyboar
dark: '/recordings/useAnimatedKeyboard_dark.mov',
}}
/>
)}
}
/>

## Remarks

- On Android, make sure to set `android:windowSoftInputMode` in your `AndroidManifest.xml` to `adjustResize`. Then, using the `useAnimatedKeyboard` hook disables
the default Android behavior (resizing the view to accommodate keyboard) in the whole app. Using values from `useAnimatedKeyboard` hook you can handle the keyboard yourself. Unmounting all components that use `useAnimatedKeyboard` hook brings back the default Android behavior.
- On Android using the `useAnimatedKeyboard` hook expands root view to full screen (immersive mode) and takes control over insets management. It applies the top and bottom margins according to the insets when `isStatusBarTranslucentAndroid` is false and sets top margin to 0 and bottom padding according to the navigation insets when `isStatusBarTranslucentAndroid` is true.
the default Android behavior (resizing the view to accommodate keyboard) in the whole app. Using values from `useAnimatedKeyboard` hook you can handle the keyboard yourself. Unmounting all components that use `useAnimatedKeyboard` hook brings back the default Android behavior.
- On Android using the `useAnimatedKeyboard` hook expands root view to full screen (immersive mode) and takes control over insets management. It applies the top and bottom margins according to the insets when `isStatusBarTranslucentAndroid` is false and sets top margin to 0 and bottom padding according to the navigation insets when `isStatusBarTranslucentAndroid` is true.
maciekstosio marked this conversation as resolved.
Show resolved Hide resolved
- On Android, when using navigation with native header, `isStatusBarTranslucentAndroid` doesn't affect the top inset
maciekstosio marked this conversation as resolved.
Show resolved Hide resolved
- On Android SDK < 30, when StatusBar is hidden keyboard reverts to default android behavior
- On Android SDK < 30, when StatusBar is hidden keyboard reverts to default android behavior
maciekstosio marked this conversation as resolved.
Show resolved Hide resolved

## Platform compatibility

Expand All @@ -111,4 +111,3 @@ the default Android behavior (resizing the view to accommodate keyboard) in the
| ✅ | ✅ | ❌ |

</div>