react-native: Unable to cleanly disable keyboard in iOS in TextInput (Continuing from #14045)

I read the full discussion in #14045 and it seems to have been auto-closed without sufficient resolution. It would be great if we could have sufficient resolution of this issue without it being prematurely closed.

The issue here is that there is no way to disable the keyboard from popping up on a text input field while still allowing the user to paste into the field, which works for both iOS and Android.

If you set editable={false} then you can’t paste into it so that doesn’t work as a solution.
Using onFocus={() => Keyboard.dismiss()} is not acceptable because the keyboard pops up for a second (both iOS and Android) so this can’t be used.
Using the new prop showSoftInputOnFocus does exactly what is wanted but it only works for Android. (Side note: it seems this prop isn’t included in the latest typings in 0.61.4, so there is a typescript error even though the prop works)

How can we make this work sufficiently for both iOS and Android?

React Native version: System: OS: Linux 4.15 Ubuntu 18.04.3 LTS (Bionic Beaver) CPU: (8) x64 Intel® Core™ i7-9700K CPU @ 3.60GHz Memory: 3.75 GB / 61.90 GB Shell: 5.4.2 - /bin/zsh Binaries: Node: 12.13.0 - /usr/bin/node Yarn: 1.19.1 - /usr/bin/yarn npm: 6.12.0 - /usr/bin/npm SDKs: Android SDK: API Levels: 23, 26, 28, 29 Build Tools: 23.0.1, 25.0.0, 28.0.3, 29.0.0, 29.0.2 System Images: android-28 | Google APIs Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom_64 npmPackages: react: 16.9.0 => 16.9.0 react-native: 0.61.4 => 0.61.4 npmGlobalPackages: react-native-cli: 2.0.1 react-native: 0.61.2

Steps To Reproduce

Add a <TextInput /> component
Try to hide the keyboard from showing while still maintaining the ability to paste into it.

Describe what you expected to happen: There should be some way we can make iOS and Android behave the same for this.

Sample code:

<TextInput
  onFocus={() => Keyboard.dismiss()}
  autoFocus={true}
  showSoftInputOnFocus={false}
  placeholder={"Some sample text"}
/>

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 26
Comments: 18 (2 by maintainers)

Commits related to this issue

implemented showSoftInputOnFocus for iOS (#28834) Summary: `showSoftInputOnFocus` was added in https://github.com/facebook/react-native/issues/25028, but it was only added for Android. There was a lo... — committed to facebook/react-native by gurs1kh 4 years ago
Merge from upstream through 2020-05-28 (#811) * Remove `docs` from `jscodeshift` Summary: I removed 1 MiB from `jscodeshift` as it was shipping with docs: https://github.com/facebook/jscodeshift/... — committed to microsoft/react-native-macos by amgleitman 3 years ago

Most upvoted comments

@stale fuck off stale bot. No one ever looked at this, but otherwise nothing is stale about this

+12

MrLoh on Feb 14, 2020

try this solution i hope this will work for android and ios both…

        // Step 1: Get Keyboard, TouchableWithoutFeedback from ‘react-native’;
        import { View, TextInput, StyleSheet, Keyboard,  TouchableWithoutFeedback } from 'react-native';

        // Step 2: Create an arrow function to write dismiss keyboard code
        const DismissKeyboard = ({ children }) => (
            <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
                {children}
            </TouchableWithoutFeedback>
            );

        // Step 3: Wrap all TextInput inside <DismissKeyboard> </DismissKeyboard>
        //Example
        <DismissKeyboard>
            <View style={styles.container}>
                <TextInput style={styles.input} placeholder="email" />
                <TextInput style={styles.input} placeholder="password" />
            </View>
        </DismissKeyboard>

criticalmiind on Jan 9, 2021

@jcgertig I confirm i have same issue on ipad. showSoftInputOnFocus property disabled keyboard but we have keyboard toolbar.

@viniciusfont, @gurs1kh Could you help please. Maybe it easy fix.

sergeushenecz on Jan 5, 2022

This is still an issue specifically with ipad in 0.65 and 0.66. The keyboard is removed but the keyboard accessory for copy/paste still shows up.

jcgertig on Oct 27, 2021

The same issue also.

siarheipashkevich on Jan 5, 2022

I’m making a barcode scanner app and need the keyboard to hide when an input is pressed 😦 Will be awesome to have the showSoftInputOnFocus props on iOS

Exactly same case. We need this for makin barcode scanner

Sargnec on Mar 28, 2021

If you want to hide the keyboard for a TextInput (for something like creating your own keyboard component), don’t use a TextInput. Use Text instead. If you have multiple components that need input, wrap them in Touchables. You can then manage which one is ‘editable’ through the onPress of each Touchable.

I’ve read this over several times thinking that i was missing something. I see no way to reasonably make and place a touchable cursor.

xenburn on May 1, 2020