Enable paste and selection within TextInput - React Native

Question

I am trying to implement copy and paste within my TextInput but cant seem to achieve it. I was expecting a tooltip when I long-pressed on my TextInput, however nothing happens.

I know about Clipboard and would know how to implement it, but I cant seem to get the paste option to pop to the user.

Any ideas how I can achieve this?

<TextInput
                maxLength={29}
                autoCapitalize={'characters'}
                numberOfLines={1}
                keyboardType={'default'}
                underlineColorAndroid='transparent'
                autoCorrect={false}
                value={IBAN.printFormat(this.state.ibanInput)}
                returnKeyType={'next'}
                onChangeText={iban => this.verifyIban(iban)}
                style={[{ borderWidth: 1, borderRadius: 2, height: '100%', width: '100%', textAlign: 'center', fontSize: width/24 },

                ]}
              />

Ever figure this out? I have the same issue.

One In a Million Apps
– One In a Million Apps

2019-12-31 03:04:48 +00:00
Commented Dec 31, 2019 at 3:04 — One In a Million Apps
– One In a Million Apps, Commented Dec 31, 2019 at 3:04
Not yet, sorry.

Walter Monecke
– Walter Monecke

2020-01-05 14:21:14 +00:00
Commented Jan 5, 2020 at 14:21 — Walter Monecke
– Walter Monecke, Commented Jan 5, 2020 at 14:21

Jitendra Kumar · Accepted Answer · 2020-01-23 09:59:21Z

Here is the answer if copy/paste does not work for TextInput - React Native

Step 1) In Contructor take testWidth property and assign value as '99%'.

e.g.

this.state = {testWidth: '99%' };

Step 2) In componentDidMount change testWidth value like '100%', do it inside of setTimeout.

e.g.

 setTimeout(() => {
      this.setState({ testWidth: '100%' })
    }, 100)

Step 3) In style attribute of TextInput add dynamic width which we declare in Contractor, e.g

<TextInput style={{ width: this.state.testWidth }} />

Here is the full code: (Just copy and paste in App.js file).

import React, { Component } from 'react';
    import { TextInput, View } from 'react-native';

    export class App extends Component {
      constructor(props) {
        super(props);
        this.state = { text: '', testWidth: '99%' };
      }
      componentDidMount() {

        setTimeout(() => {
          this.setState({ testWidth: '100%' })
        }, 100)
      }
      render() {
        return (
          <View style={{ marginTop: 50 }}>
            <TextInput
              style={{ width: this.state.testWidth }}
              placeholder="Type here to translate!"
              onChangeText={(text) => this.setState({ text })}
              value={this.state.text}
            />
          </View>
        );
      }
    }

Good Luck

Perelan · Accepted Answer · 2020-01-29 16:51:56Z

1

Have a look at this code!: https://github.com/facebook/react-native/issues/18926#issuecomment-490541013

 <ScrollView
contentContainerStyle={Styles.contentContainerStyle}
keyboardShouldPersistTaps="handled"
removeClippedSubviews={false}>

 <KeyboardAvoidingView>

      <Text style={Styles.labelPageTitle}>
        {'bla bla bla'}
      </Text>
      <Text>
          {'bla bla bla'}
      </Text>
      <TextInput
        onChangeText={text => this.setState({ title: text })}
        style={Styles.textInput}
        value={title}
      />

</KeyboardAvoidingView>

answered Jan 29, 2020 at 16:51

Perelan

4067 silver badges19 bronze badges

1 Comment

Alex W Over a year ago

This seems like a better solution because it solves the core problem (removeClippedSubviews=false) rather than fiddling with the width and using setTimeout.

Nicolas Sturm · Accepted Answer · 2021-09-25 07:31:39Z

0

use RN-clipboard

    const text = await Clipboard.getString()
    setCopiedText(text)

answered Sep 25, 2021 at 7:31

Nicolas Sturm

6915 silver badges10 bronze badges

Collectives™ on Stack Overflow

Enable paste and selection within TextInput - React Native

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related