Can't use the Clipboard.setString('hello world')

[ICardosoRamos]

Ask your Question

import React from 'react'; import { Linking, TouchableOpacity } from 'react-native'; import Toast from 'react-native-toast-message'; import Clipboard from '@react-native-clipboard/clipboard';

import { KBoleto } from '.';

import { Strong, StyledBoletoStatus, StyledDivider } from './style'; import KButton from 'components/Button'; import { Text } from 'components/Typography'; import { Box, HStack, VStack, View } from 'native-base'; import { Shadow } from 'react-native-shadow-2'; import { getBRL } from 'utils/number'; import { Icon } from 'components/Icon'; import { BASE_URL } from 'hooks/useAxios/axiosConfig';

function formatDate(date: string) { const dateString = date.split('-').reverse(); dateString.shift(); return dateString.join('/'); }

function formatDateVencimento(date: string) { return date.split('-').reverse().join('/'); }

async function handleOpenLink(url: string) { try { const supported = await Linking.canOpenURL(url); if (!supported) throw new Error('Boleto indisponivel no momento'); await Linking.openURL(DEV ? ${BASE_URL}/${url} : url); } catch { Toast.show({ type: 'error', text1: 'Tente novamente', text2: 'Boleto indisponivel no momento', }); } }

function Boleto({ boleto }: { boleto: KBoleto }) { const boletoReferencia = formatDate(boleto.referencia);

const boletoVencimento = formatDateVencimento(boleto.data_vencimento);
const boletoValor = getBRL(boleto.data_baixa ? boleto.valor : boleto.valor_pendente);

const boletoStatus = boleto.data_baixa ? 'Pago' : boleto.vencido ? 'Vencido' : 'Em Aberto';

const copyToClipboard = () => {
	Clipboard.setString('hello world');
};

return (
	<Box w='95%' marginX='auto' minH='300' mt={3} borderRadius={7}>
		<Shadow stretch distance={5} style={{ borderRadius: 7 }}>
			<View>
				<VStack px={2} py={4} space={3}>
					<HStack alignItems='center' space={2}>
						<Icon iconFamily='Ionicons' name='ios-calendar-sharp' />
						<Text> Ref. {boletoReferencia}</Text>
						<StyledBoletoStatus status={boletoStatus}>
							<Text themeColor='white'>{boletoStatus}</Text>
						</StyledBoletoStatus>
					</HStack>
					<HStack alignItems='center' space={2}>
						<Icon iconFamily='EntypoIcons' name='flag' />
						<Text>
							Identificação: <Strong>{boleto.identificacao}</Strong>
						</Text>
					</HStack>

					<StyledDivider />

					<HStack alignItems='center' space={2}>
						<Icon iconFamily='Ionicons' name='person' />
						<Text>
							Responsável: <Strong>{boleto.nome_resp}</Strong>
						</Text>
					</HStack>
					<HStack alignItems='center' space={2}>
						<Icon iconFamily='EntypoIcons' name='home' />
						<Text>
							Unidade: <Strong>{boleto.nome_unidade}</Strong>
						</Text>
					</HStack>
					<HStack alignItems='center' space={2}>
						<Icon
							iconFamily='FontAwesome5Icon'
							iconSize={(f) => f - 2}
							style={{ marginLeft: 2 }}
							name='calendar-minus'
						/>
						<Text>
							Vencimento: <Strong>{boletoVencimento}</Strong>
						</Text>
					</HStack>
					<HStack alignItems='center' space={2}>
						<Icon iconFamily='FontAwesome5Icon' iconSize={(f) => f - 4} name='money-check-alt' />
						<Text>
							Valor: <Strong>{boletoValor}</Strong>
						</Text>
					</HStack>
				</VStack>
				<TouchableOpacity onPress={copyToClipboard}>
					<Text>Copy Text</Text>
				</TouchableOpacity>
				<KButton
					onPress={() => handleOpenLink(boleto.boleto)}
					borderRadius={0}
					borderBottomLeftRadius={7}
					borderBottomRightRadius={7}
					size='md'
				>
					VISUALIZAR
				</KButton>
			</View>
		</Shadow>
	</Box>
);

}

export default Boleto;

I have this code above, and it's all up with the example in the documentation to use Clipboard, but some error are happening. First in the IOS, i'm leaving a printscreen below:

Now in the Android, also leaving an printscreen below:

PLEASE IF SOMEONE COULD HELP ME I WILL THANKS A LOT.

[ajstharsan-radus28]

I am too having the same issue, peculiarly on npx expo start. It doesn't show with eas build either production or dev-client. The error shows in expo cli TypeError: Cannot read property 'setString' of null, js engine: hermes However in Expo go Cannot read property 'setString' of null

[Bonnev]

Guys, if you're using Expo, check this comment referring to this library.

[RyanGuedes27]

Guys, I solved my problem with clipbord using React Native CLI. To use it in Expo, you need to use their own lib.