react-native-view-shot
react-native-view-shot copied to clipboard
share image IOS
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!
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.