Skip to main content
Version: Next

useReanimatedFocusedInput

Hook that returns an information about TextInput that currently has a focus. Returns null if no input has focus.

Hook will update its value in next cases:

  • when keyboard changes its size (appears, disappears, changes size because of different input mode);
  • when focus was changed from one TextInput to another;
  • when layout of focused input was changed;
  • when user types a text;
  • when text selection was changed.
Events order

The value from useReanimatedFocusedInput will be always updated before keyboard events, so you can safely read values in onStart handler and be sure they are up-to-date.

Event structure

The input property from this hook is returned as SharedValue. The returned data has next structure:

type FocusedInputLayoutChangedEvent = {
target: number; // tag of the focused TextInput
parentScrollViewTarget: number; // tag of the parent ScrollView

// layout of the focused TextInput
layout: {
x: number; // `x` coordinate inside the parent component
y: number; // `y` coordinate inside the parent component
width: number; // `width` of the TextInput
height: number; // `height` of the TextInput
absoluteX: number; // `x` coordinate on the screen
absoluteY: number; // `y` coordinate on the screen
};
};

Example

const { input } = useReanimatedFocusedInput();

Also have a look on example app for more comprehensive usage.