React Native Clipboard with Toast message in one package

Everyone has experienced the regular operation of copying to a clipboard on mobile applications, and everyone knows what to do after the copying…
Yes! toast message

So why do we need to do those two actions one after one each time?
No more, say hello to react-native-clipboard-toast — React Native Clipboard API with an Animated toast message component
one package that contains a copy to the clipboard and shows a toast message.

Install

npm install react-native-clipboard-toast

or

yarn add react-native-clipboard-toast

Now we can start work on a short example

import * as React from 'react';
import { StyleSheet, View, Text, Clipboard, Image } from 'react-native';
import ClipboardToast from 'react-native-clipboard-toast';
export default function App() {
  const [copiedText, setCopiedText] = React.useState('Nothing to show, copy by clicking on some button');
const fetchCopiedText = async () => {
    const text = await Clipboard.getString();
    setCopiedText(text);
  };
return (
    <View style={styles.container}>
<View style={styles.buttonContainer}>
        <ClipboardToast
          textToShow={'Text example'}
          textToCopy={'Regular Text'}
          toastText={'Text copied to clipboard!'}
          id={'resular'}
          containerStyle={styles.clipboardToastContainer}
          textStyle={[styles.clipboardText, { color: '#FE434C' }]}
          accessibilityLabel={'click me to copy'}
          toastOnShow={fetchCopiedText}
        />
      </View>
<Text
        style={{ flex: 1, fontSize: 22, width: 300, textAlign: 'center' }}
      >{`Copied Text:\n${copiedText}`}</Text>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    backgroundColor: '#FFFeee',
    alignItems: 'center',
    flex: 1,
    flexDirection: 'column',
    paddingVertical: 25,
  },
  buttonContainer: {
    width: 250,
    flex: 1,
    justifyContent: 'center',
  },
  clipboardToastContainer: {
    backgroundColor: '#DDDDDD',
    padding: 10,
    borderRadius: 5,
  },
  clipboardText: {
    fontSize: 18,
    textAlign: 'center',
  },
});

Example with a simple bottom (default) toast,
we focus on Clipboard

<ClipboardToast
     textToShow={'Text example'}
     textToCopy={'Regular Text'}
     toastText={'Text copied to clipboard!'}
     id={'resular'}
     containerStyle={styles.clipboardToastContainer}
     textStyle={[styles.clipboardText, { color: '#FE434C' }]}
     accessibilityLabel={'click me to copy'}
     toastOnShow={fetchCopiedText}
 />

Now we can add some changes:

Toast position (default is bottom, the options are ‘bottom’, ‘center’ and ‘top’),
Toast duration (default is 750 milliseconds)
toast background color, and we can add toast delay

We add props to ClipboardToast

<ClipboardToast
     textToShow={'Text example'}
     textToCopy={'Regular Text'}
     toastText={'Text copied to clipboard!'}
     id={'resular'}
     containerStyle={styles.clipboardToastContainer}
     textStyle={[styles.clipboardText, { color: '#FE434C' }]}
     accessibilityLabel={'click me to copy'}
     toastOnShow={fetchCopiedText}
     toastPosition={'top'}          
     toastDuration={2000}
     toastBackground={'green'}          
     delay={500}
 />

We get new toast with a duration of 2 seconds, position top, green background color, and a little delay with a half second.

react-native-clipboard-toast

If you find this blog post helpful, share it with a friend. 💁🏼‍♂️

If you find any difficulties please feel free to add your comments.

Idanlevi1 Github