Disable keyboard

[nazarTrynko]

Hi, I'm using View as a custom keyboard. Is it possible that default Keyboard is not showing when TextInput is in focus?

[st0ffern]

See docs on Keyboard and TextInput

import {Keyboard} from 'react-native'

<TextInput
  onFocus={Keyboard.dismiss()}
/>

[nazarTrynko]

Unfortunately, this code also makes unfocus and Keyboard appears for 1 second, but I need TextInput to stay focused

[shergin]

Could you please provide a bit more context, what is the point to have "focused" <TextInput> without keyboard? AFAIK, it is kinda pointless at least on iOS and it can be done only we implement custom (empty) input view.

[nazarTrynko]

The point is to create custom keyboard, with custom animation, which will be used to fill input, instead of default keyboard

[woowalker]

+1, need custom keyboard with TextInput, just want that keyboard never show when TextInput focus

[nazarTrynko]

@walkerxiong https://github.com/wix/react-native-keyboard-input custom keyboard

[woowalker]

@nazarTrynko thanks, i tried it some time ago and i find that the system keyboard still will show at the first time and then quickly hide, that appear flicker, so this lib also can't solve our problem.

[devanshsanghvi]

has anyone solved this problem, i also am facing one, if i use 'Keyboard.dismiss' i loose the focus on my text input i am using custom keyboard which itself is part of my screen so i don't want any keyboard to show up at all without loosing the focus on my text input, any solution please.

[cohendl]

Anyone solved this?? Huge problem for me as well

[croshim]

+1

[gxrxrdx]

I'm facing same requirement, at this point I think the best course of action is to get rid of <TextInput/> and use a custom view.

[marlti7]

Anyone solved this?? Huge problem for me as well

[bluhar]

I'm developing react native android app on handheld mobile computer(Honeywell ScanPal), try to disable soft keyboard, modify the source code like below, then build app from react native source code.

Modify ReactAndroid\src\main\java\com\facebook\react\views\textinput\ReactEditText.java

  @Override
  public boolean requestFocus(int direction, Rect previouslyFocusedRect) {
    // Always return true if we are already focused. This is used by android in certain places,
    // such as text selection.
    if (isFocused()) {
      return true;
    }
    if (!mIsJSSettingFocus) {
      return false;
    }
    setFocusableInTouchMode(true);
    boolean focused = super.requestFocus(direction, previouslyFocusedRect);
	// showSoftKeyboard();  Comment out this line
    return focused;
  }

Now click the TextInput, the soft keyboard will be hide, But it still show when the TextInput be clicked twice in succession, I'm not find the solution, but it's enough for me. My english is not good, hope you got it.

• "react": "16.0.0-beta.5"
• "react-native": "0.49.5"

Ref: https://facebook.github.io/react-native/releases/0.49/docs/android-building-from-source.html

[shergin]

So, the actual solution for all mentioned cases can be providing a way to customize/replace standard keyboard (inputView)? Right?

[ccwasden]

@shergin In some cases the solution may be to provide a setting to have the keyboard not come up at all when the field is selected. I may not want any input view (because I want my num pad to show on the view whether or not the text field is selected - disabled if not selected)

but I think it would be a higher priority to provide a custom input view functionality because what i describe here is an edge case, and would probably be solved by a 0 height inputView

[JCMais]

a keyboardType of none would be best solution here. Currently I'm simply using a TextInput with editable={false}.

The only downside of that is that we lose the cursor.

[poicooler]

Yeah, a keyboardType={'none'} would be perfect

[smithaitufe]

@react-native-bot Why was this closed at all?

[AlePue]

+1

[fer-ri]

👍

[nitinsh99]

This is a must requirement and a VERY valid use case. I am clicking on TextInput to transition to another screen. Something like this

Now, I need Keyboard to NOT show up when the search bar in the first screen is in focus. But as everyone over here is saying, it shows up for a split second even if you call dismiss(). Please don't ignore genuine requests..

[kashishgrover]

@nitinsh99 talking to a bot? 😛

[felipecarvalho]

In my case, I solved a similar issue with this "trick":

<TextInput value={this.state.input} editable={false} onTouchStart={() => { this.setState({ input: this.state.query }); }} />

PS.: Works only on iOS

I hope that this snippet help someone.

[sneerin]

yeah, we miss the focus when disable editing, the custom keyboard makes things more complicated.

[jbcullis]

Please keep this one open, while it's an infrequent use case it's a very important one for those of us looking to optimize the users experience in data management.
To date, we've rolled our own but if we could scrap our own text field and selector in favor of a standard input that enables the magnifying glass selector and copy / paste that would be great.

[RocKhalil]

+1,
This also helps with creating a barcode text input, for example: you select the input but the keyboard doesn't show, then you scan with your barcode reader and you get your result in the field.

[wrod7]

I need this functionality as well.

I don't know what is causing this behavior but see this gif below. One of my text boxes doesn't open the keyboard but it allows me to type.. both keyboards have the same props and styling..

anyone know what else could cause it to not bring up the keyboard?

[Ash-faq]

Dose any one found solution to disable the keyboard in ios with textInput stay focused

[itgou]

In my case, I solved a similar issue with this "trick":

<TextInput value={this.state.input} editable={false} onTouchStart={() => { this.setState({ input: this.state.query }); }} />

PS.: Works only on iOS

I hope that this snippet help someone.

when I use editable={false} it won't trigger onTouchStart event, but trigger when editable={true} do you know why? by the way, where is onTouchStart event, I cannot find it in react-native document?
By the way, I cannot'

[spencore]

That's a valid issue, I want to make a datepicker that looks like my regular input and hook it up with react-native-modal-datetime-picker.

Solved it in my specific case by disabling pointer events on Input's container:

  <>
    <TouchableWithoutFeedback onPress={this.toggleVisible}>
      <View>
        <View pointerEvents="none">
          <Input
            value={String(value)}
            placeholder={placeholder}
          />
        </View>
      </View>
    </TouchableWithoutFeedback>
    <DateTimePicker
      isVisible={this.state.visible}
      onConfirm={onChange}
      onCancel={this.toggleVisible}
    />
  </>

Thank you @jacek213 !!! Exactly what I needed. I'm doing the same thing with native-modal-datetime-picker

[josephmbeveridge]

@hramos Can you please re-open this issue? It looks pretty clear from the number of requests that this is still a valid concern without a proper solution for both platforms. Many large scale apps implement custom keyboards and the provided suggestions are not adequate for a good UX.

[robin1990]

keyboardType={'none'} would be really nice.

[Mattimus333]

That's a valid issue, I want to make a datepicker that looks like my regular input and hook it up with react-native-modal-datetime-picker.

Solved it in my specific case by disabling pointer events on Input's container:

  <>
    <TouchableWithoutFeedback onPress={this.toggleVisible}>
      <View>
        <View pointerEvents="none">
          <Input
            value={String(value)}
            placeholder={placeholder}
          />
        </View>
      </View>
    </TouchableWithoutFeedback>
    <DateTimePicker
      isVisible={this.state.visible}
      onConfirm={onChange}
      onCancel={this.toggleVisible}
    />
  </>

@jacek213 Thanks! This gets the job done!

[Grohden]

@jacek213 this disables the TextInput scroll :/

edit: maybe a focusable={false} could be usefull?

[tanf1995]

come on!anyone has solution?

[RocKhalil]

@Grohden @tanf1995 I wrote a monkey patch for Android here. If this works for you, try replicating it on iOS.

[JackClown]

+1

[piotrpazola]

We should create a Native Module that calls InputMethodManager to close the keyboard when visible and add an onFocus function on our TextInput that calls the Native's keyboard dismissal function.

Thank you @RocKhalil! You've saved my day...

Best regards

[riso]

I opened #25028 which allows to overcome this limitation properly - i.e. without having to hide the native keyboard when it appears.

Is any react-native contributor able to review it?

[hotaryuzaki]

That's a valid issue, I want to make a datepicker that looks like my regular input and hook it up with react-native-modal-datetime-picker.

Solved it in my specific case by disabling pointer events on Input's container:

  <>
    <TouchableWithoutFeedback onPress={this.toggleVisible}>
      <View>
        <View pointerEvents="none">
          <Input
            value={String(value)}
            placeholder={placeholder}
          />
        </View>
      </View>
    </TouchableWithoutFeedback>
    <DateTimePicker
      isVisible={this.state.visible}
      onConfirm={onChange}
      onCancel={this.toggleVisible}
    />
  </>

wooooooooow...
nice trick, it works like a charm

[ThaJay]

I'm developing react native android app on handheld mobile computer(Honeywell ScanPal), try to disable soft keyboard, modify the source code like below, then build app from react native source code.

+1,
This also helps with creating a barcode text input, for example: you select the input but the keyboard doesn't show, then you scan with your barcode reader and you get your result in the field.

This is also necessary for some devices with physical keyboard, keep focus but not show keyboard software.

I need that too, I am using an external keyboard(a bluetooth barcode scanner to be exact) for a specific usecase, and I do not want that soft keyboard keeps appearing onFocus, and I do not want to close soft keyboard from android settings because I have login screen etc. Still looking for a simple hack.

I am also working with a barcode scanner that acts like a keyboard.

I opened #25028 which allows to overcome this limitation properly - i.e. without having to hide the native keyboard when it appears.

Is any react-native contributor able to review it?

Thank you @riso !
I see your request has been merged. Will keep an eye on when it makes it into a release. If it takes too long I will have to mess around with forking the repo.

edit: It seems the modules I am using are not ready for 0.60 yet so it's a shame this commit got delayed until after 0.59

[ckOfor]

This hasn't been solved because showSoftInputOnFocus prop does nothing

[Runtime007]

@swaroopa94 check this comment where we already know that this is happening; the onFocus only fires the first time you press the keyboard, however, if you press it another time, it won't fire it. The keyboard is appearing due to the no-firing event.

I changed the method

@ReactMethod
    public void hideKeyboard() {
        final Activity activity = getCurrentActivity();
        activity.runOnUiThread(new Runnable() {
            @Override
            public void run() {
                activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_ALT_FOCUSABLE_IM);

            }
        });
    }

the keyboard will not show any more. just call getWindow().clearFlags() if you want to show it again.

[poonamdhomane]

is there any solution for iOS .. it is working but still for few seconds keyboard is appearing which looks irritating

[OnurErtugral]

keyboardType= "none" option would be a great solution.