Animations recipe

Animations based on AvoidSoftInput module events

You can use AvoidSoftInput.onSoftInputShown, AvoidSoftInput.onSoftInputHidden, AvoidSoftInput.onSoftInputHeightChange and AvoidSoftInput.onSoftInputAppliedOffsetChange methods to listen for soft input events.

If you plan to use those methods in useEffect, you can instead use shortcut hooks:

• useSoftInputShown
• useSoftInputHidden
• useSoftInputHeightChanged
• useSoftInputAppliedOffsetChanged

Example

export const AnimationExample = () => {
  /**
   * You can make animations with React Native's Animated API or Reanimated library
   */
  const animatedValue = useRef(new Animated.Value(0)).current;

  useSoftInputShown(({ softInputHeight }) => {
    /**
     * Animate based on event value
     */
    Animated.timing(animatedValue, {
      toValue: softInputHeight,
      duration: 1000,
    }).start();
  });

  useSoftInputHidden(() => {
    /**
     * Animate based on event value
     */
    Animated.timing(animatedValue, {
      toValue: 0,
      duration: 1000,
    }).start();
  });

  return (
    <View>
      // ... some JSX
      <Animated.View /** apply animated style */>
        // ... animated content
      </Animated.View>
      // ... some JSX
    </View>
  );
};

Animations based on AvoidSoftInputView callbacks

AvoidSoftInputView receives events through onSoftInputShown, onSoftInputHidden, onSoftInputHeightChange, onSoftInputAppliedOffsetChange callbacks.

Based on those callbacks, you can apply animations in similar way as when using useSoftInputShown, useSoftInputHidden, useSoftInputHeightChanged and useSoftInputAppliedOffsetChanged hooks.

Additionally, when using Reanimated library from v2.3.0, you can create custom event handlers

export function useSoftInputAppliedOffsetHandler(handlers, dependencies) {
  const { context, doDependenciesDiffer } = useHandler(handlers, dependencies);

  return useEvent(
    (event) => {
      "worklet";
      const { onSoftInputAppliedOffsetChange } = handlers;

      if (
        onSoftInputAppliedOffsetChange &&
        event.eventName.endsWith("onSoftInputAppliedOffsetChange")
      ) {
        onSoftInputAppliedOffsetChange(event, context);
      }
    },
    ["onSoftInputAppliedOffsetChange"],
    doDependenciesDiffer
  );
}

export function useSoftInputHandler(handlers, dependencies) {
  const { context, doDependenciesDiffer } = useHandler(handlers, dependencies);

  return useEvent(
    (event) => {
      "worklet";
      const { onSoftInputHidden, onSoftInputShown, onSoftInputHeightChange } =
        handlers;

      if (onSoftInputHidden && event.eventName.endsWith("onSoftInputHidden")) {
        onSoftInputHidden(event, context);
      }

      if (onSoftInputShown && event.eventName.endsWith("onSoftInputShown")) {
        onSoftInputShown(event, context);
      }

      if (
        onSoftInputHeightChange &&
        event.eventName.endsWith("onSoftInputHeightChange")
      ) {
        onSoftInputHeightChange(event, context);
      }
    },
    ["onSoftInputHidden", "onSoftInputShown", "onSoftInputHeightChange"],
    doDependenciesDiffer
  );
}

Check example app for a detailed usage example.