Partager une image et du texte dans une app en React Native

Résultat des tests
yarn add react-native-share
cd ios && pod install && cd ..
  • titre du message (pour les emails) : “OnTheBeach.dev, des applications au top !”
  • message : “Pour développer mes applications mobiles, je fais une confiance aveugle à OnTheBeach.dev”
  • image : https://pbs.twimg.com/media/ETitUA8XgAIulQS.jpg
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import Share from 'react-native-share';export default class ShareComponent extends React.Component {
constructor() {
super();
this.shareTheMessage = this.shareTheMessage.bind(this);
}
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<TouchableOpacity
onPress={this.shareTheMessage}
style={{width:200, padding:10, justifyContent: 'center', alignItems: 'center'}} >
<Text style={{textAlign:'center}}>
Partager
</Text>
</TouchableOpacity>
</View>
)
}

shareTheMessage() {
let shareOptions = {
title: “OnTheBeach.dev, des applications au top !”,
message: "Pour développer mes applications mobiles, je fais une confiance aveugle à OnTheBeach.dev",
url: "https://pbs.twimg.com/media/ETitUA8XgAIulQS.jpg"
};
Share.open(shareOptions).then((response) => {
//Gestion du retour
}).catch((error) => {
//Gestion des erreurs
});
}
}
yarn add react-native-fs
cd ios && pod install && cd ..
import React from 'react';
import { View, Text, TouchableOpacity, Platform } from 'react-native';
import Share from 'react-native-share';
import RNFS from 'react-native-fs';
export default class ShareComponent extends React.Component {
constructor() {
super();
this.shareTheMessage = this.shareTheMessage.bind(this);
this.downloadTheImage = this.downloadTheImage.bind(this);
this.shareWithBase64 = this.shareWithBase64.bind(this);
}
[...]
shareTheMessage() {
let shareOptions = {
title: “OnTheBeach.dev, des applications au top !”,
message: "Pour développer mes applications mobiles, je fais une confiance aveugle à OnTheBeach.dev",
url: "https://pbs.twimg.com/media/ETitUA8XgAIulQS.jpg"
};
this.downloadTheImage(shareOptions);
}
downloadTheImage(shareOptions) {
const pathOfTheImage = `${RNFS.DocumentDirectoryPath}/shareImage.png`;
RNFS.downloadFile({
fromUrl: shareOptions.url,
toFile: pathOfTheImage,
}).promise.then((response) => {
if (Platform.OS === 'android') {
//On partage le fichier local
let localOptions = {...shareOptions};
localOptions.url = pathOfTheImage;
Share.open(shareOptions).then((response) => {
//Gestion du retour
RNFS.unlink(pathOfTheImage);
}).catch((error) => {
//Gestion des erreurs
RNFS.unlink(pathOfTheImage);
});
} else {
this.shareWithBase64(pathOfTheImage, shareOptions);
}
}).catch((error) => {
//En cas d'erreur, on peut choisir une autre option de partage (sans url par exemple)
});
}

shareWithBase64(pathOfTheImage, shareOptions) {
RNFS.readFile(`file://${pathOfTheImage}`, 'base64').then((res) => {
let base64Options = { ...shareOptions };
base64Options.url = `data:image/jpeg;base64,${res}`;
Share.open(shareOptions).then((response) => {
//Gestion du retour
RNFS.unlink(pathOfTheImage);
}).catch((error) => {
//Gestion des erreurs
RNFS.unlink(pathOfTheImage);
});
})
}
}

--

--

Show Runner de projets mobiles. Développeur React Native et passionné par les challenges du monde mobile.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store