1. issue

TexttInput를 component로 만들 때를 참고해 react-native-elements에서 제공하는 Input을 다음과 같이 component화하려고 하는 도중 component화된 AuthInput에 onSubmitEditing={(text) => focusNext(0)}와 같이 함수를 prop으로 넘기면 인식하지 못하는 문제가 발생했다.

import React, { useRef } from 'react';
import { Input } from 'react-native-elements';

const AuthInput = ({
  placeholder,
  keyboardType = 'default',
  autoCapitalize = 'none',
  returnKeyType = 'done',
  onChangeText,
  onSubmitEditing,
  iconLeft,
  iconRight,
  autoFocus = false,
  autoCorrect = true,
  value,
  errorMessage,
  secureTextEntry = false,
  clearTextOnFocus = true,
  ref,
  blurOnSubmit = false,
}) => {
  const ref_input = [];
  ref_input[0] = useRef();
  ref_input[1] = useRef();
  ref_input[2] = useRef();
  ref_input[3] = useRef();
  const focusNext = (index) => {
    if (index < ref_input.length - 1) {
      ref_input[index + 1].current.focus();
    }
    if (index == ref_input.length - 1) {
      ref_input[index].current.blur();
    }
  };
  return (
    <Input
      ref={ref}
      style={{ padding: 16, fontSize: 20 }}
      errorStyle={{ color: 'red', fontSize: 16 }}
      errorMessage={errorMessage}
      onChangeText={onChangeText}
      keyboardType={keyboardType}
      leftIcon={iconLeft}
      rightIcon={iconRight}
      returnKeyType={returnKeyType}
      placeholder={placeholder}
      autoCapitalize={autoCapitalize}
      onSubmitEditing={() => focusNext}
      autoCorrect={autoCorrect}
      value={value}
      secureTextEntry={secureTextEntry}
      clearTextOnFocus={clearTextOnFocus}
      autoFocus={autoFocus}
      blurOnSubmit={blurOnSubmit}
    />
  );
};

export default AuthInput;

Screens>User>RegisterForm.js

<View style={styles.rowstyle}>
         <AuthInput
           onChangeText={onChangeEmail}
           keyboardType={'email-address'}
           autoCorrect={false}
           autoFocus={true}
           errorMessage={errorEmail}
           leftIcon={{
             type: 'antdesign',
             name: 'user',
           }}
           placeholder="이메일"
           ref={ref_input[0]}
           onSubmitEditing={(text) => focusNext(0)}
           clearTextOnFocus={true}
           onFocus={() => setEmail('')}
           // onKeyPress={(e) => focusPrev(e.nativeEvent.key, 0)}
           autoCapitalize={'none'}
         />

       
       </View>
       <View style={styles.rowstyle}>
         <AuthInput
           ref={ref_input[1]}
           onSubmitEditing={(text) => focusNext(1)}
           // onKeyPress={(e) => focusPrev(e.nativeEvent.key, 1)}
           onChangeText={onChangeNickname}
           autoCapitalize={'words'}
           errorMessage={errorNickname}
           placeholder="닉네임"
           leftIcon={{
             type: 'antdesign',
             name: 'smileo',
           }}
         />
       
         /> */}
       </View>

2. solution

useInput과 같이 함수를 hooks로 만들어 시도해보았으나 여전히 해결되지 않는다..

hooks>useInput.js

import { useState } from 'react';
const useInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);
  const onChangeText = (text) => {
    setValue(text);
  };
  return [value, onChangeText, setValue];
};
export default useInput;