performance - react-native reanimated が onFocus と onBlur に応答しない

Question

私がやろうとしていること

テキスト入力がフォーカスされているときに、ビューの背景色をアニメーション化する必要があります。

今までやってきたこと

onFocus2 つの関数を持つコンポーネントを作成しましたが、これは react-native-reanimatedonBlurの単なる関数です。event

 const onFocus = event<NativeSyntheticEvent<TextInputFocusEventData>>([
    {
      nativeEvent: ({ target }) => set(colorAnimation, 1)
    }
  ]);

  const onBlur = event<NativeSyntheticEvent<TextInputFocusEventData>>([
    {
      nativeEvent: ({ target }) => set(colorAnimation, 0)
    }
  ]);

この関数を Animated TextInput に渡しています。コンソールにエラーは表示されず、設定したカスタム背景色が表示されます。ただし、Focus や Blur は変更しません。

コード

タイプスクリプトを使用しています

import React from 'react';
import { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';
import Reanimated from 'react-native-reanimated';
import { bInterpolateColor } from 'react-native-redash';
import styled from 'styled-components/native';

const { Clock, Value, event, set, debug, block, divide } = Reanimated;

const StyledTextInput = styled.TextInput`
  height: 40px;
  padding: ${props => props.theme.spacing.default * 2}px
    ${props => props.theme.spacing.default * 3}px;
`;

const AnimatedTextInput: typeof StyledTextInput = Reanimated.createAnimatedComponent(
  StyledTextInput
);

const Container = styled(Reanimated.View)`
  width: 100%;
  border: 1px solid ${props => props.theme.colors.border};
  background: #e3e7eb;
  border-radius: ${props => props.theme.shapping.borderRadius * 2};
`;

const TextInput = () => {
  const clock = new Clock();
  const colorAnimation = new Value(0);

  const onFocus = event<NativeSyntheticEvent<TextInputFocusEventData>>([
    {
      nativeEvent: ({ target }) => set(colorAnimation, 1)
    }
  ]);

  const onBlur = event<NativeSyntheticEvent<TextInputFocusEventData>>([
    {
      nativeEvent: ({ target }) => set(colorAnimation, 0)
    }
  ]);

  return (
    <Container
      style={{
        backgroundColor: bInterpolateColor(
          colorAnimation,
          { r: 255, g: 0, b: 0 },
          { r: 0, g: 0, b: 255 }
        )
      }}
    >
      <AnimatedTextInput onFocus={onFocus} onBlur={onBlur} />
    </Container>
  );
};

export default TextInput;

結果