Share image on whatsapp from react native android app

Issue

I am currently working on react-native photo sharing app for Android. Used native share method but it only share message and title. No options to share an image.

Looking after so many questions here couldn't find any straight forward way.

Please provide help.

This is the message I am getting Share awesome status on whatsapp using Khela #imageurl. Download #urltoplaystore

Solution

To share any image in React Native you are right you need to use the Share from react-native library itself, and you were wondering what is needed for an image, the answer it's really simple, you just need to use a Base64 image.

Check it out a working snack: snack.expo.io/@abranhe/share-image

Wrap the code:

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  Image,
  Share,
  TouchableOpacity,
} from 'react-native';

export default class App extends React.Component {
  state = {
      cat: 'data:image/jpeg;base64,some-encoded-stuff;
  };

  handleSharePress = () => {
    Share.share({
      title: 'Share',
      message: 'My amazing cat 😻',
      url: this.state.cat,
    });
  };

  render() {
    return (
      <View style={styles.container}>
        <Image source={{ uri: this.state.cat }} style={styles.img} />
        <TouchableOpacity onPress={this.handleSharePress}>
          <Text>Share Image</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  img: {
    width: 200,
    height: 300,
  },
});

If you want to try something else, probably complex, I recommend to check out the react-native-share library from the React Native Community.

Answered By - Abraham