Home > Back-end >  Input field needs to be tapped twice in React Native
Input field needs to be tapped twice in React Native

Time:08-31

I've two input fields in my application.

  <ScrollView>
        <View>
          <Input
            placeholder={`Enter the amount:`}
            keyboardType="number-pad"
            showSoftInputOnFocus={false}
            onFocusCustom={() => setShowCalulator(true)}
            onBlurCustom={() => setShowCalulator(false)}
            caretHidden={true}
          />
         <Input
            placeholder="Enter a short description: (Optional)"
            multiline
            onBlurCustom={() => Keyboard.dismiss()}
          />
      </View>
   </ScrollView>

When we click the Amount Input field, it opens a calculator ( not a keyboard ). When we click the Description field, it will open a keyboard. When the keyboard is open and we're in the description field and we click the amount field then the amount field gets focused for a few milliseconds and disappears. We need to click again to the amount field to get it focused and open the calculator.

This issue doesn't exist if we first unfocused the description field and then click the amount field.

CodePudding user response:

You can try this:

keyboardType={Device.isAndroid ? "numeric" : "number-pad"}

and Could pls take a look at this blog,it may help:https://lefkowitz.me/visual-guide-to-react-native-textinput-keyboardtype-options/

CodePudding user response:

This is happening because your input is in ScrollView. You can find solutions here -> React Native requires two taps to change input focus when within scrollview

  • Related