sidebar_position |
---|
1 |
useAnimatedKeyboard
lets you create animations based on state and height of the virtual keyboard.
:::caution
Android implementation of useAnimatedKeyboard
has drawbacks on Android SDK < 30, for more details see remarks section.
:::
import { useAnimatedKeyboard, useAnimatedStyle } from 'react-native-reanimated';
export default function App() {
const keyboard = useAnimatedKeyboard();
const animatedStyles = useAnimatedStyle(() => ({
transform: [{ translateY: -keyboard.height.value }],
}));
}
Type definitions
// --- Function declaration ---
function useAnimatedKeyboard(
options: AnimatedKeyboardOptions
): AnimatedKeyboardInfo;
// --- Configuration types ---
export interface AnimatedKeyboardOptions {
isStatusBarTranslucentAndroid?: boolean;
}
// --- Return types ---
export type AnimatedKeyboardInfo = {
height: SharedValue<number>;
state: SharedValue<KeyboardState>;
};
export enum KeyboardState {
UNKNOWN = 0,
OPENING = 1,
OPEN = 2,
CLOSING = 3,
CLOSED = 4,
}
Optional object containing additional configuration:
isStatusBarTranslucentAndroid
- removes top inset on Android i.e. to use translucent status bar on Android, set this option totrue
. Defaults tofalse
. Ignored on iOS.
Hook useAnimatedKeyboard
returns an object containing these fields:
Name | Type | Description |
---|---|---|
height | SharedValue<number> |
A shared value containing current height of the keyboard. |
state | SharedValue<KeyboardState> |
A shared value containing current state of the keyboard. Possible states: { CLOSED, OPEN, CLOSING, OPENING } |
import useBaseUrl from '@docusaurus/useBaseUrl'; import AnimatedKeyboardSrc from '!!raw-loader!@site/src/examples/AnimatedKeyboard';
<InteractiveExample src={AnimatedKeyboardSrc} component={ <ThemedVideo center width={300} sources={{ light: '/recordings/useAnimatedKeyboard_light.mov', dark: '/recordings/useAnimatedKeyboard_dark.mov', }} /> } />
- On Android, make sure to set
android:windowSoftInputMode
in yourAndroidManifest.xml
toadjustResize
. Then, using theuseAnimatedKeyboard
hook disables the default Android behavior (resizing the view to accommodate keyboard) in the whole app. Using values fromuseAnimatedKeyboard
hook you can handle the keyboard yourself. Unmounting all components that useuseAnimatedKeyboard
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 whenisStatusBarTranslucentAndroid
is false and sets top margin to 0 and bottom padding according to the navigation insets whenisStatusBarTranslucentAndroid
is true. - On Android, when using navigation with native header,
isStatusBarTranslucentAndroid
doesn't affect the top inset. - On Android SDK < 30, when status bar is hidden, the keyboard reverts to the default Android behavior.
Android | iOS | Web |
---|---|---|
✅ | ✅ | ❌ |