React Native Clipboard с тостом

Все сталкивались с нормальной операцией копирования в буфер обмена в мобильных приложениях, и все знают, что нужно делать после копирования…
Да! тост-сообщение

Так почему же нам нужно каждый раз выполнять эти два действия одно за другим?
Хватит, поздоровайтесь с react-native-clipboard-toast — React Native Clipboard API с компонентом анимированного всплывающего сообщения
один пакет, который содержит копию в буфер обмена и показывает всплывающее сообщение.

Установить

npm install react-native-clipboard-toast

or

yarn add react-native-clipboard-toast

Теперь мы можем начать работу над коротким примером

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',
  },
});

Пример с простым нижним (по умолчанию) тостом,
фокусируемся на 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}
 />

Теперь мы можем добавить некоторые изменения:

положение всплывающего уведомления (по умолчанию — внизу, варианты: «внизу», «в центре» и «вверху»),
длительность всплывающего уведомления (по умолчанию 750 миллисекунд)
цвет фона всплывающего окна, и мы можем добавить задержку всплывающего уведомления

Мы добавляем свойства в 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}
 />

Получаем новый тост длительностью 2 секунды, позиция сверху, зеленый цвет фона и небольшая задержка в полсекунды.

Если вы считаете эту запись в блоге полезной, поделитесь ею с другом. 💁🏼‍♂️

Если вы обнаружите какие-либо трудности, не стесняйтесь добавлять свои комментарии.

Это Idanlevi1 😊