react native android textinput it does not contain any id

Question

I am still currently developing my simple calculator to know the basics of React Native and also researching online and the original react native documentation and I stumbled upon this problem.

my code:

                {/****** TEXT INPUT CONTAINER ******/}
                <View style={styles.textInputContainer}>
                {/****** TEXT INPUT 1 ******/}
                <TextInput style={styles.textInput1}
                
                underlineColorAndroid="transparent"
                placeholder = {" Enter 1st \n number \n here."}
                placeholderTextColor = '#66FCF1'
                keyboardType = 'number-pad'
                multiline = {true}
                returnKeyType = {"next"}
                onSubmitEditing={ this.secondInput.focus()}> //* This  will shift the focus to the next textinput *
                
                </TextInput>

                {/****** TEXT INPUT 2 ******/}
                <TextInput style={styles.textInput2}
                
                placeholder = {" Enter 2nd \n number \n here."}
                placeholderTextColor ='#EDF5E1'
                keyboardType = 'number-pad'
                multiline = {true}
                onSubmitEditing={ Keyboard.dismiss }> //* This will dismiss the keyboard once user submitted *
                </TextInput>
            </View>

I have 2 TextInputs in my code and it when the user enters the value on textinput1 the focus will be shifted to textinput2. I checked some questions here and answers and this is the closest and easiest path I saw to slowly grasp the basics of react native.

   onSubmitEditing={() =>{this.secondTextInput.focus(); }}

but I noticed that my secondInput doesn't have an id not a name to call. How do I do this? I checked the documentation online of textinput it does not contain any id not a name. I would be so glad if you can help me on this one. Thanks!

Madhavi Jayasinghe · Accepted Answer · 2018-12-17 06:38:31Z

1

In the second textInput tag you have to add the following code. Then the first input will focus on this

<TextInput
    ref={(input) => { this.secondTextInput = input; }}
>

Just make sure you are calling the same name from first texInput which you given as the reference name inside the second textInput.

answered Dec 17, 2018 at 6:38

Madhavi Jayasinghe

5963 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

keinz Over a year ago

do I input in the first input onSubmitEditing = { input } ? Sorry if I came to ask you again I am just a little bit confused with this matter.

Madhavi Jayasinghe Over a year ago

No you can just make a change, onSubmitEditing={() => { this.secondTextInput.focus(); }}

Madhavi Jayasinghe Over a year ago

No need to add { input } inside onSubmitEditing you can use the above code as the onSubmitEditing for your first textInput.

keinz Over a year ago

thanks now I know how :) Sorry for asking you again man I am a total beginner on coding.

Suprabha · Accepted Answer · 2018-12-17 06:40:33Z

You can use ref here. Try the below code.

<TextInput style={styles.textInput1}
            underlineColorAndroid="transparent"
            placeholder = {" Enter 1st \n number \n here."}
            placeholderTextColor = '#66FCF1'
            keyboardType = 'number-pad'
            multiline = {true}
            returnKeyType = {"next"}
            onSubmitEditing={(event) => this._password._root.focus()}
            >
</TextInput>

            {/****** TEXT INPUT 2 ******/}
<TextInput style={styles.textInput2}
            getRef={(c) => this._password = c}
            placeholder = {" Enter 2nd \n number \n here."}
            placeholderTextColor ='#EDF5E1'
            keyboardType = 'number-pad'
            multiline = {true}
            onSubmitEditing={ Keyboard.dismiss }
            >

Patel Dhara · Accepted Answer · 2018-12-17 07:09:07Z

{/****** TEXT INPUT 1 ******/}

<TextInput style={styles.textInput1}
            underlineColorAndroid="transparent"
            placeholder = {" Enter 1st \n number \n here."}
            placeholderTextColor = '#66FCF1'
            keyboardType = 'number-pad'
            multiline = {true}
            returnKeyType = {"next"}
            onSubmitEditing={(event) => this.passwordTextInput.focus()} // focus on password textInput on submit 
            blurOnSubmit={false} //add this to prevent keyboard flickering
            >
</TextInput>

{/****** TEXT INPUT 2 ******/}

<TextInput style={styles.textInput2}
           ref={(r) => this.passwordTextInput = r} // initialize reference for your password txetInput
            placeholder = {" Enter 2nd \n number \n here."}
            placeholderTextColor ='#EDF5E1'
            keyboardType = 'number-pad'
            multiline = {true}
            onSubmitEditing={ Keyboard.dismiss }
            >

Collectives™ on Stack Overflow

react native android textinput it does not contain any id

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related