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