How to focus on button from second textInput using onSubmiteEditing for React native Android TV

Question

I am working on Android TV application where i want focus on button (Submit) when done button click of keyboard for second TextInput.

please help How to focus on button from second textInput using onSubmiteEditing for React native Android TV.

     <View style={{flexDirection:'column',alignItems:'center'}} keyboardShouldPersistTaps="handled">
              <TouchableHighlight 
              onPress={()=>InputTextRef.current.focus()}
              onFocus={()=>{
                InputTextRef && InputTextRef.current.focus()                
              }}
              // onFocus={onFocus1}
              // onBlur={onBlur1}
              
              >
                <TextInput
                    ref={InputTextRef}
                    onSubmitEditing = {()=>InputTextRef2.current && InputTextRef2.current.focus()}
                    blurOnSubmit={false}
                    onChangeText={setUrls}
                    value={urls}
                    placeholder="Enter Your URL"
                    placeholderTextColor="#f4f3f4"
                    color= '#f4f3f4'
                    autoCorrect={false}
                    autoFocus={focus1 ? true :false}
                    onFocus={onFocus1}
                    onBlur={onBlur1}
                    style={android_tv? [styles.input,  focus1 ? styles.TextInputFocused :null]:styles.input} 
                  />
            </TouchableHighlight >
            <TouchableHighlight 
              onPress={()=>InputTextRef2.current.focus()}
              onFocus={()=>{
                InputTextRef2 && InputTextRef2.current.focus() 
              }}
              // onFocus={onFocus2}
              // onBlur={onBlur2}
              >
              <TextInput
                  ref={InputTextRef2}
                  onSubmitEditing = {()=>btnref.current.focus()}
                //  onEndEditing = {()=>  btnref.current.focus()}
                  blurOnSubmit={false}
                  onChangeText={setKeys}
                  value={keys}
                  placeholder="Enter Your Account Id"
                  placeholderTextColor="#f4f3f4"
                  color= '#f4f3f4'
                  autoCorrect={false}
                  autoFocus= {focus2 ? true :false}
                  onFocus={onFocus2}
                  onBlur={onBlur2}
                  style={android_tv?[styles.input,  focus2 ? styles.TextInputFocused :null]:styles.input}
             />
            </TouchableHighlight > 
          <TouchableHighlight 
                  onFocus={onFocus} 
                  onBlur={onBlur} 
                  ref={btnref}
                 // hasTVPreferredFocus={ btnref ?  true : false}
                  style={[ styles.search ,  focus ? styles.wrapperFocused :null]}  
                  onPress= {handleSearchButton}>
                <Text  style={ android_tv ? styles.watchtext1 : styles.watchtext2 }>Submit</Text>
          </TouchableHighlight>
          </View>

In above code , i have two input field and one submit button. i want focus on submit button after second textinput using keyboard next(right sign) key.

score 0 · Answer 1 · answered Jun 29 '22 at 13:18

import React, { useState } from 'react';


const Screen = (props) => {

//Other Code 

const [focusButton, setFocusButton] = useState(false);


return <View>
         /** other components **/
            <TouchableHighlight 
              .......
              >
              <TextInput
                  ref={InputTextRef2}
                  onSubmitEditing = {()=> setFocusButton(true)} //Added
                ......
                .....
             />
            </TouchableHighlight > 
          <TouchableHighlight 
                  ......
                  style={[ styles.search ,  focusButton ? styles.wrapperFocused :null]}   //added
                >
                <Text  style={ android_tv ? styles.watchtext1 : styles.watchtext2 }>Submit</Text>
          </TouchableHighlight>
       
    <View>

}

score 0 · Answer 2 · answered Aug 12 '22 at 15:22

export default function Login() {
 const emailRef = useRef(null);
 const passwordRef = useRef(null);
 const btnLogin = useRef(null);

  return (
     <View style={styles.container}>

       <View style={[styles.textInputStyle]}>

         <TextInput
          ref={emailRef}
          nativeID={"text_input_email"}
          placeholder={AppStyles.placeholders.EMAIL_OR_NUMBER_TEXT}
          placeholderTextColor={AppStyles.color.COLOR_GREY_TRANSP}
          style={styles.textInput}
          autoCapitalize="none"
          maxLength={50}
          autoCorrect={false}
          autoFocus={false}
          blurOnSubmit={false}
          onSubmitEditing={() => passwordRef.current.focus()}
          onChangeText={(val) => {
            emailChange(val);
          }}
        />
        {Platform.OS === "android" && (
          <FocusableHighlight
            onPress={() => {
              emailRef.current.focus();
            }}
            onFocus={() => {
              emailRef.current.focus();
            }}
            style={styles.dummyButton}
          >
            <Text />
          </FocusableHighlight>
        )}
      </View>

      <View style={styles.textInputStyle}>
        <TextInput
         ref={passwordRef}
         nativeID={"text_input_password"}
         placeholder={AppStyles.placeholders.PASSWORD_TEXT}
         secureTextEntry={true}
         placeholderTextColor={AppStyles.color.COLOR_GREY_TRANSP}
         style={styles.textInput}
         autoCapitalize="none"
         maxLength={50}
         autoCorrect={false}
         autoFocus={false}
         blurOnSubmit={false}
         onSubmitEditing={() => btnLogin.current.focus()}
         onChangeText={(val) => {
           passwordChange(val.trim());
         }}
       />
       {Platform.OS === "android" && (
         <FocusableHighlight
           onPress={() => {
             passwordRef.current.focus();
           }}
           onFocus={() => {
             passwordRef.current.focus();
           }}
           style={styles.dummyButton}
         >
           <Text />
         </FocusableHighlight>
       )}
     </View>

     <FocusableHighlight
       ref={btnLogin}
       hasTVPreferredFocus
       onPress={() => {
         navigateToHome();
       }}
       underlayColor={AppStyles.color.COLOR_WHITE}
       style={{ ...styles.button }}
       nativeID={key + "login"}
       key={key + "login"}
     >
       <Text
         style={{
           ...styles.buttonText,
         }}
       >
         {AppStyles.strings.SIGN_IN_TEXT}
       </Text>
     </FocusableHighlight>

  </View>

</View>
);
}

How to focus on button from second textInput using onSubmiteEditing for React native Android TV

2 Answers2

Linked