forwardRef를 사용하면 함수 컴포넌트의 두 번째 파라미터에서 ref를 받아와 사용할 수 있습니다. 파라미터로 받아온 ref를 이렇게 TextInput에 설정해주면, 추후에 다른 컴포넌트에서BorderedInput를 사용할 때 BorderedInput에 ref를 달면 내부의 TextInput에 ref가 달리게 된답니다. 그래서 TextInput에 바로 접근할 수 있게 되죠.
forwardRef는 앞에서와 같이 내보내는 부분에서 사용해도 되고, 다음과 같이 컴포넌트를 선언하는 단계에서 사용해도 됩니다.
const BorderedInput React. (({hasMarginBottom, rest}, ref) => { return ( ) });
이제 각 인풋에 returnKeyType을 지정하고, onSubmitEditing Props도 설정해 Enter를 눌렀을 때 호출할 함수를 설정해주세요.
screens/SignInScreen.js
import React, {useRef, useState} from 'react'; import { Keyboard, KeyboardAvoidingView, Platform, StyleSheet, Text, View, } from 'react-native'; import {SafeAreaView} from 'react-native-safe-area-context'; import BorderedInput from '../components/BorderedInput'; import CustomButton from '../components/CustomButton'; function ({navigation, route}) { (...) const passwordRef = useRef(); const confirmPasswordRef = useRef(); return ( <KeyboardAvoidingView style={styles.keyboardAvoidingView} behavior={Platform. ({ios: 'padding'})}> <SafeAreaView style={styles.fullscreen}> <Text style={styles.text}>PublicGallery</Text> <View style={styles.form}> <BorderedInput hasMarginBottom placeholder="이메일" value={form.email} onChangeText={ ('email')} autoCapitalize="none" autoCorrect={false} autoCompleteType="email" keyboardType="email-address" returnKeyType="next" onSubmitEditing={() => passwordRef.current.focus()} /> <BorderedInput placeholder="비밀번호" secureTextEntry hasMarginBottom={isSignUp} value={form.password} onChangeText={ ('password')} ref={passwordRef} returnKeyType={isSignUp ? 'next' : 'done'} onSubmitEditing={() => { if (isSignUp) { confirmPasswordRef.current.focus(); } else { onSubmit(); } }} /> {isSignUp && ( <BorderedInput placeholder="비밀번호 확인" secureTextEntry value={form.confirmPassword} onChangeText={ ('confirmPassword')} ref={confirmPasswordRef} returnKeyType="done" onSubmitEditing={onSubmit} /> )} (...)
인풋을 입력하고 Enter를 눌렀을 때 다른 인풋으로 포커스가 잘 되는지, 최하단의 인풋에서 Enter를 눌렀을 때 onSubmit이 잘 호출되는지 확인해보세요.