How to respond to events like TextInput focus/blur and Keyboard show/hide

Hello. I love the concept of reanimated, and understand how to implement some basic animations using it. However, I am stuck on how to respond to events that require communication over the bridge. I have 2 primary use cases I’m currently trying to solve for:

1. Run an animation when a TextInput is focused, run the animation in reverse when the TextInput is blurred.
2. Run an animation when the Keyboard is shown, run the animation in reverse when the Keyboard is hidden.

I’ve read the documentation a few times and have checked out most of the examples, I couldn’t find a super clear solution for these requirements. I asked a more specific version of this question on Stack Overflow that includes a runnable example, but I know the implementation is wrong. I just am wondering what the recommended approach is for reacting to user-driven events other than touch/gestures (i.e. without using gesture handler lib and just hooking into events with the event function). Is this even a good use case for reanimated? Is it possible to achieve this and achieve 60 fps animations?

[osdnk]

I confirm that the solution of @ShaMan123 does not require a bridge. Under the hood, we’re not really evaluating this function of each frame, but we’re using proxy object and evaluate in only during mounting

[ShaMan123]

Found It

The problem here is that the native event has a different name than the callback prop and reanimated doesn’t that. For example onBlur is called topBlur in native code, see source code android, ios. This is why the event doesn’t fire - reanimated is instructed to intercept events with name onBlur but there aren’t any. You can hack this with a workaround.

const rBlur= event<NativeSyntheticEvent<TextInputFocusEventData>>([
    {
      nativeEvent: { target: sub(target, target) }
    }
  ]);

<AnimatedTextInput
   onBlur={() => console.log('js received blur')}
   topBlur={rBlur}
/>

This way reanimated intercepts events that are named topBlur while react-native handles onBlur.