share image IOS

[ademir10]

feature request

bug report

Version & Platform

OS: macOS 13.3.1 CPU: (12) arm64 Apple M2 Max Memory: 1.83 GB / 32.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 20.0.0 - ~/.nvm/versions/node/v20.0.0/bin/node Yarn: 1.22.19 - /opt/homebrew/bin/yarn npm: 9.6.4 - ~/.nvm/versions/node/v20.0.0/bin/npm Watchman: 2023.04.17.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.12.1 - /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4 Android SDK: Not Found IDEs: Android Studio: 2022.2 AI-222.4459.24.2221.9862592 Xcode: 14.3/14E222b - /usr/bin/xcodebuild Languages: Java: 11.0.19 - /opt/homebrew/opt/openjdk@11/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.2.0 => 18.2.0 react-native: 0.71.7 => 0.71.7 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

npm ls react-native react-native-view-shot #<- 

[email protected] /Users/ademir/apps/react/getxx
├─┬ @react-native-async-storage/[email protected]
│ └── [email protected] deduped
├─┬ @react-navigation/[email protected]
│ ├─┬ @react-navigation/[email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ @react-navigation/[email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]

Platform: iOS? Android? IOS

Expected behavior

Share the temp file image like already is working in Android

Actual behavior

Steps to reproduce the behavior

When i try to share the image i receive this message in my xcode log:

MY TEMPFILE PATH: '/private/var/mobile/Containers/Data/Application/16556C3D-7395-4590-9CF5-FBD1504B65E0/tmp/ReactNative/D087380A-F876-4A74-A843-19F88C8FED96.png' LOG: 2023-06-17 16:21:42.297566-0300 getxx[33783:6444891] whatsapp 2023-06-17 16:21:42.297615-0300 getxx[33783:6444891] TRY OPEN whatsapp 2023-06-17 16:21:42.297636-0300 getxx[33783:6444891] Try open view

this is my code: async function enviarReciboWhatsApp() { contentRef.current.capture().then((url) => { const uri = url; printPhoto(uri); }, (error) => console.error("Oops, snapshot failed", error) ); }

async function printPhoto(uri) {
    var whatsapp_number = '+55' + celular.replace(/\D/g, "");
    var text = 'Recibo virtual - Documento Nº' + dadosImpressao.id_do_emprestimo + '\n' + '\n' + 'Vencimento: ' + moment(dadosImpressao.data_vencto_emprestimo).format('DD/MM/YYYY') + '\n' + 'Total geral ' + currency + format(dadosImpressao.valor_total) + '\n' + 'Pago confirmado ' + currency + format(dadosImpressao.valor_pago) + '\n' + 'Valor pago hoje ' + currency + format(dadosImpressao.valor_pago_hoje) + '\n' + '---------------------------' + '\n' + 'Saldo devedor a confirmar ' + currency + format(dadosImpressao.saldo_devedor) + '\n' + '\n' + 'Consultor: ' + dadosSession.nome_real_consultor + '\n' + 'Gerado em ' + moment(new Date()).format('DD/MM/YYYY') + '\n' + '\n' + 'Os dados acima informados são apenas para simples conferência e não servem como comprovante de pagamento.' + '\n' + 'Obs: O saldo devedor ainda será confirmado e atualizado até o final do dia!';

    if (Platform.OS === 'android') {
        var shareOptions = {
            url: uri,
            social: Share.Social.WHATSAPP,
            whatsAppNumber: whatsapp_number,
            filename: uri,
        };
    } else {
        console.log("IOS", uri);
        var shareOptions = {
            url: uri,
            social: Share.Social.WHATSAPP,
            whatsAppNumber: whatsapp_number,
            filename: 'recibo.png',
        };
    }
    const shareResponse = await Share.shareSingle(shareOptions);
}

my View code:

<ViewShot ref={contentRef} options={{ result: 'tempfile' }} style={{ width: '100%', height: '100%', backgroundColor: 'white' }}>

                        <View style={styles.centeredView}>
                            <View style={styles.modalView}>

                                <View style={styles.logoRecibo}>
                                    <Image source={require('../../assets/logo-impressao.png')} />
                                </View>

                                <View style={{ alignContent: 'center', alignItems: 'center' }}>
                                    <Text style={{ fontSize: 30, fontFamily: 'Encode-sans', paddingTop: 20 }}>R E C I B O</Text>
                                    <Text style={{ fontSize: 20, fontFamily: 'Encode-sans', paddingBottom: 20 }}>
                                        Empréstimo Nº {dadosImpressao.id_do_emprestimo}
                                    </Text>
                                </View>


                                <Pressable
                                    style={[styles.buttonEnviarRecibo]}
                                    onPress={() => enviarReciboWhatsApp()}>
                                    <Text style={styles.textStyle}>Enviar</Text>
                                </Pressable>

... nothing happens at the app.. could you help me, please!

[douglasjunior]

Here on iOS I had problem when generating big image files.

Using the option useRenderInContext:true solves the problem.

Ps: I'm using expo-sharing to share the file.