LoginSignup
1
0

More than 3 years have passed since last update.

React Nativeでfocusできない件

Posted at

useEffectでTextInput(Searchbar)にfocusしたいがエラーが出る

React Native PaperのSearchbarをマウントする際に、focusした状態で表示したかった。
そこで、以下のようにuseRefでrefをつくり、useEffectの際にfocusしようと試みた。

export const SearchInput = ({onChangeText, onSubmitEditing, isFocused, ...props}) => {
  const ref = useRef()
  useEffect(() => {
    isFocused && ref.current.focus()
  }, [])

  return (
    <Searchbar
      placeholder="Search"
      onChangeText={onChangeText}
      onSubmitEditing={onSubmitEditing}
      style={styles.input}
      ref={ref}
      {...props}
    />
  )
}

React Native PaperのSearchbarは、TextInputをforwardRefでラップしたものなので(たぶん)、
refを渡すことでfocusできると思ったが、なぜかうまくfocusできず、以下のようなWarningが出た。

Warning: dispatchCommand was called with a ref that isn't a native component. Use React.forwardRef to get access to the underlying native component

解決策

目的としては、fucusした状態でTextInputをマウントしたいだけだったので、
別の方法を探していると、React NativeのTextInputにはautoFocusというPropsがあった。
これを使えば、以下のように一瞬で解決した。

export const SearchInput = ({onChangeText, onSubmitEditing, isFocused=false, ...props}) => {
  return (
    <Searchbar
      placeholder="Search"
      onChangeText={onChangeText}
      onSubmitEditing={onSubmitEditing}
      style={styles.input}
      autoFocus={isFocused}
      {...props}
    />
  )
}

Warningの意味についてもいろいろ調べてみたが、原因についてはよくわからなかったので、ご存じの方がいらっしゃいましたら、コメントで教えて下さい。
年が明けて仕事が始まったら、先輩に聞いてみます。
不完全燃焼なのでモヤモヤするが、開発を進めなければいけないのと、
とりあえずやりたいことはできたので、今回は良しとします。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0