I have 6 text input fields and when i click on any text input field, firstly the text input field closes and I have to again click on the same input field to open it again

Is there a way to switch to next input field without using the returnKeyType="next" so that when I just switch to any input field, the keyboard remains opened.

here is my text input field code:

<View style={styles.inputContainer}>
              <TextInput
                ref='fname'
                autoCorrect={false}
                placeholder="First Name"
                style={styles.textInput}
                placeholderTextColor='#848484'
                autoCapitalize='words'
                maxLength={20}
                onFocus={()=>context._handleScrollView(ReactNative.findNodeHandle(context.refs.fname))}
                onBlur={()=>context._resetScrollView(ReactNative.findNodeHandle(context.refs.fname))}
                onChangeText={(fname) => context.setState({fname: fname.capitalizeFirstLetter()})} />
            </View>

What property or some method or function should i add to overe this problem?

I have 6 text input fields and when i click on any text input field, firstly the text input field closes and I have to again click on the same input field to open it again

Is there a way to switch to next input field without using the returnKeyType="next" so that when I just switch to any input field, the keyboard remains opened.

here is my text input field code:

<View style={styles.inputContainer}>
              <TextInput
                ref='fname'
                autoCorrect={false}
                placeholder="First Name"
                style={styles.textInput}
                placeholderTextColor='#848484'
                autoCapitalize='words'
                maxLength={20}
                onFocus={()=>context._handleScrollView(ReactNative.findNodeHandle(context.refs.fname))}
                onBlur={()=>context._resetScrollView(ReactNative.findNodeHandle(context.refs.fname))}
                onChangeText={(fname) => context.setState({fname: fname.capitalizeFirstLetter()})} />
            </View>

What property or some method or function should i add to overe this problem?

• javascript
• react-native
• textinput

2 Answers 2

You are probably inside a scroll. You need to add keyboardShouldPersistTaps to the ScrollView ponent:

When false, tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When true, the keyboard will not dismiss automatically, and the scroll view will not catch taps, but children of the scroll view can catch taps. The default value is false.

<ScrollView
    keyboardShouldPersistTaps
    ...
>

As of react-native 0.40 the right way is keyboardShouldPersistTaps='always', keyboardShouldPersistTaps or keyboardShouldPersistTaps=true is deprecated.

See more here