On Android, TextInput does not allow for selecting, copying, or pasting text in a lot of circumstances.

[Rob117]

Description:

On Android, if you want to copy, select, paste, cut, etc. text with a long press inside of a text input, there is a well-known bug where when a component renders the TextInput will have editable set to some strange value. If you have a timeout adjusted and set it to tell editable to be true, as linked HERE, then it will work the first time the component is rendered. However, if you are on a stack navigator and go back a screen to render the component again, that suggested code stops working.

React Native version:

OS: macOS Mojave 10.14.6
CPU: (4) x64 Intel(R) Core(TM) i7-6567U CPU @ 3.30GHz
Memory: 136.27 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash

Binaries:
Node: 8.16.0 - ~/.nvm/versions/node/v8.16.0/bin/node
Yarn: 1.19.2 - /usr/local/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v8.16.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
Android SDK:
API Levels: 23, 25, 26, 28
Build Tools: 23.0.1, 25.0.2, 26.0.1, 28.0.3
System Images: android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64
IDEs:
Android Studio: 3.4 AI-183.6156.11.34.5692245
Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
npmPackages:
react: 16.9.0 => 16.9.0
react-native: 0.61.4 => 0.61.4
npmGlobalPackages:
react-native-cli: 2.0.1

Steps To Reproduce

I think there are a lot of open issues on this, but I'm more interesting in just having an SEO friendly documented work around because the existing not-solved issues appear to have been closed by the facebook resolver bot.

Expected Results

I expect copying and pasting text in Android to be a really painless process like it is on iOS. Unfortunately, that is not the case.

Workaround:

import React from 'react';
import { TextInput } from 'react-native';

// https://github.com/facebook/react-native/issues/20887
// I had to modify the code because pressing back on the stack would mess up the state.
// EVERY TIME THE COMPONENT IS FOCUSED ON ANDROID we need to set editable after a slight delay.
export default class InputField extends React.Component {
  state = {
    editable: false,
  };

  componentDidMount() {
    this.props.navigation.addListener('focus', () => {
      this.setState({ editable: false });
      setTimeout(() => {
        this.setState({ editable: true });
      }, 100);
    });
    this.props.navigation.addListener('blur', () => {
      this.setState({ editable: false });
    });
  }

  render() {
    return <TextInput {...this.props} editable={this.state.editable} />;
  }
}

Usage: Simply import the above in place of text input and make sure to pass navigation={this.props.navigation} as a prop.

[backmeupplz]

Having the same issue :( any progress on the fix?

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[backmeupplz]

@Rob117 can you add a Backlog label? Or should the contributor do this? 🤔

[fabOnReact]

#28852

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[backmeupplz]

It looks like this issue is fixed in my case :)

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.