gre / react-native-view-shot

Snapshot a React Native view and save it to an image
https://github.com/gre/react-native-view-shot-example
MIT License
2.64k stars 344 forks source link

share image IOS #479

Open ademir10 opened 1 year ago

ademir10 commented 1 year ago

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 #<- 

getxx@0.0.1 /Users/ademir/apps/react/getxx
├─┬ @react-native-async-storage/async-storage@1.18.1
│ └── react-native@0.71.7 deduped
├─┬ @react-navigation/native-stack@6.9.12
│ ├─┬ @react-navigation/elements@1.3.17
│ │ └── react-native@0.71.7 deduped
│ └── react-native@0.71.7 deduped
├─┬ @react-navigation/native@6.1.6
│ └── react-native@0.71.7 deduped
├─┬ react-native-camera-kit@13.0.0
│ └── react-native@0.71.7 deduped
├─┬ react-native-google-places-autocomplete@2.5.1
│ └── react-native@0.71.7 deduped
├─┬ react-native-image-picker@5.4.2
│ └── react-native@0.71.7 deduped
├─┬ react-native-keyboard-aware-scroll-view@0.9.5
│ ├─┬ react-native-iphone-x-helper@1.3.1
│ │ └── react-native@0.71.7 deduped
│ └── react-native@0.71.7 deduped
├─┬ react-native-maps-directions@1.9.0
│ └── react-native@0.71.7 deduped
├─┬ react-native-maps@1.7.1
│ └── react-native@0.71.7 deduped
├─┬ react-native-mask-text@0.13.2
│ └── react-native@0.71.7 deduped
├─┬ react-native-permissions@3.8.0
│ └── react-native@0.71.7 deduped
├─┬ react-native-safe-area-context@4.5.1
│ └── react-native@0.71.7 deduped
├─┬ react-native-screens@3.20.0
│ └── react-native@0.71.7 deduped
├─┬ react-native-toast-message@2.1.6
│ └── react-native@0.71.7 deduped
├─┬ react-native-view-shot@3.6.0
│ └── react-native@0.71.7 deduped
└── react-native@0.71.7

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 commented 1 year ago

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.