React NavigationでTextInputのautoFocusが効かない問題の対応

本番アプリの検証中に見つけた不具合の対応を記載

PR

github.com

対応

TextInputにautoFocusを設定しても反応しない事象が発生。

原因は以下の通り。

github.com

内容的にはReact Navigation で画面遷移した先の画面でTextInputにautoFocusを設定してもキーボードが表示されない状態になっている。

色々試してみたが、今の所 setTiemOutを仕込む以外に対応方法がなかったので、以下のCustom Hooksを作成。

■ src/hooks/useAutoFocusInput.tsx

import { useRef } from 'react';
import { TextInput } from 'react-native';
import { useFocusEffect } from '@react-navigation/native';

export default function useAutoFocusInput(autoFocus: boolean) {
  const ref = useRef<TextInput>(null);
  const timeout = useRef<number | null>(null);

  useFocusEffect(() => {
    if (autoFocus) {
      timeout.current = Number(setTimeout(() => ref.current?.focus(), 300));
    }

    return () => {
      if (timeout.current) {
        clearTimeout(timeout.current);
      }
    };
  });

  return {
    ref,
    autoFocus: false,
  };
}

画面のフォーカスのイベント発生時から、setTimeoutでTextInputのフォーカスを実行するCustom Hooksを作成して、以下の通りに使用。

■ src/components/atoms/TextInput/TextInput.tsx

import React from 'react';
import {
  TextInput as RNTextInput,
  TextInputProps,
} from 'react-native';
import useAutoFocusInput from 'hooks/useAutoFocusInput';

type Props = TextInputProps;

const TextInput: React.FC<Props> = (props) => {
  const autoFocusProps = useAutoFocusInput(props.autoFocus || false);

  return (
      <RNTextInput
        {...props}
        {...autoFocusProps}
        placeholderTextColor={theme().color.base.main}
        style={style}
        autoCapitalize="none"
      />
  );
};

これで画面開いた時にキーボード表示がされるようになった。