CODEWITHSUNDEEP
react-nativenative-basetouchableopacity
Srivatsa Balaji
Srivatsa Balaji

Reputation: 47

How to display "text is copied" to the user after the text has been copied?

How to display "text is copied" to the user after the text has been copied?

const dataArray = [ { title: "Invoice Reference Number", content:QRCODE_SAMPLE.Irn } ];

<TouchableOpacity activeOpacity={1}
    onPress={() => Clipboard.setString(QRCODE_SAMPLE.Irn)}>   
    <Accordion style={{paddingTop:10,paddingBottom:50,backgroundColor:'#E0DDDD'}}dataArray={dataArray} expanded={1}>
    </Accordion>
</TouchableOpacity>

Upvotes: 2

Views: 2761

Answers (3)

Idan
Idan

Reputation: 4023

The most simple way is using a package that mixes between them:

https://www.npmjs.com/package/react-native-clipboard-toast

React Native Clipboard API with Animated toast message component

Support both Android and iOS | Used react native Clipboard | Toast by calling api

Upvotes: 0

Karan Mehta
Karan Mehta

Reputation: 1541

You can do it like this : 

    import {ToastAndroid} from 'react-native';

Create this function : 

    onCopyPressed(){

    Clipboard.setString(QRCODE_SAMPLE.Irn);
    ToastAndroid.show('A pikachu appeared nearby !', ToastAndroid.SHORT);
    }

And call that function like this : 

const dataArray = [ { title: "Invoice Reference Number", content:QRCODE_SAMPLE.Irn } ];
<TouchableOpacity activeOpacity={1}
        onPress={this.onCopyPressed.bind(this)}>   
        <Accordion style={{paddingTop:10,paddingBottom:50,backgroundColor:'#E0DDDD'}}dataArray={dataArray} expanded={1}>
        </Accordion>
    </TouchableOpacity>

Upvotes: 2

Andus
Andus

Reputation: 1731

I have never used the clipboard before but I assume your code is working, then:

const [clipboardString, setClipboardString] = useState('');

handleClipboardAction = (str) => () => {
    Clipboard.setString(str);
    setClipboardString(setClipboardString)
}

<TouchableOpacity activeOpacity={1}
    onPress={handleClipboardAction(str)}>   
    <Accordion style={{paddingTop:10,paddingBottom:50,backgroundColor:'#E0DDDD'}}dataArray={dataArray} expanded={1}>
    </Accordion>
</TouchableOpacity>

Then you can observe the state to see if there's anything copied and conditional render the "Text is copied" message:

{clipboardString.length > 0 && <Text>Text is copied</Text>}

Upvotes: 0

Related Questions