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.