Back ArrowExplore all kits

Share image on whatsapp from react native android app

share link

by vsasikalabe dot icon Updated: Mar 27, 2023

technology logo
technology logo

Solution Kit Solution Kit  

We can use the ‘share’ component from the react-native-share library in a React Native Android app to share a picture on WhatsApp.  


  • react-native-share: React Native apps may share their content with other apps or services using this library. It eases the process for developers to add sharing features to their apps without having to deal with the challenges of each platform's API by abstracting away the underlying platform-specific APIs for sharing content. For distributing text, photographs, and other sorts of material to several platforms, including email, SMS, Facebook, Twitter, and others, it offers a straightforward API.  
  • share: It is a JavaScript function that allows access to the native sharing features of a device or platform. On the user's device, it enables a web application to share material with other programs or services, including email, SMS, social media, and other programs that support content sharing. The share function is supported by modern web browsers on both desktop and mobile platforms.  


For more information about sharing images on WhatsApp from React native android app, refer to the code given below.  

Preview of the output that you will get on running this code from your IDE

Code:

In this solution we use the React library.

Share image on whatsapp from react native android app

JavaScriptdotLines of Code : 48dotLicense : Strong Copyleft (CC BY-SA 4.0)

Dependent Libraries : 
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,
  },
});

Instructions

Follow the steps carefully to get the output easily.

  1. Install the Node.js and React on your IDE(preferable Visual Studio Code).
  2. Create React Application using npx create-react-app foldername.
  3. cd foldername.
  4. npm i react-native --force
  5. npm i react-scripts
  6. npm i react-native-web
  7. npm i react-art
  8. npm i react-router-native
  9. npm i react-router-dom
  10. Open the folder in IDE.
  11. Copy the code using the "copy" button above and paste it into App.js file(remove the earlier code from App.js).
  12. Remove the semicolon in line no 13 and add ' the symbol to the end.
  13. Paste url of the image in line no 20.
  14. Open the terminal from IDE.
  15. npm start to run the file.


I hope you found this useful. I have added the link to dependent libraries, version information in the following sections.


I found this code snippet by searching for ' Share image on whatsapp from react native android app 'in kandi. You can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

  1. The solution is created in VS Code 1.73.1 version.
  2. The solution is tested on Nodejs 16.14.2 version.
  3. react 18.2.0 version.
  4. react-native: 0.70.6

Using this solution, we are able to do Share image on whatsapp from react native android app with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to do Share image on whatsapp from react native android app.

Dependent Libraries

create-react-appby facebook

JavaScript doticonstar image 100082 doticonVersion:v5.0.1doticon
License: Permissive (MIT)

Set up a modern web app by running one command.

Support
    Quality
      Security
        License
          Reuse

            create-react-appby facebook

            JavaScript doticon star image 100082 doticonVersion:v5.0.1doticon License: Permissive (MIT)

            Set up a modern web app by running one command.
            Support
              Quality
                Security
                  License
                    Reuse

                      react-nativeby facebook

                      Java doticonstar image 110105 doticonVersion:v0.71.11doticon
                      License: Permissive (MIT)

                      A framework for building native applications using React

                      Support
                        Quality
                          Security
                            License
                              Reuse

                                react-nativeby facebook

                                Java doticon star image 110105 doticonVersion:v0.71.11doticon License: Permissive (MIT)

                                A framework for building native applications using React
                                Support
                                  Quality
                                    Security
                                      License
                                        Reuse

                                          You can search for any dependent library on kandi like 'react' and 'react native'.

                                          Support

                                          1. For any support on kandi solution kits, please use the chat
                                          2. For further learning resources, visit the Open Weaver Community learning page.

                                          See similar Kits and Libraries

                                          Open Weaver – Develop Applications Faster with Open Source

                                          kandi

                                          Community and Support

                                          Company

                                          Follow

                                          • © 2023 Open Weaver Inc.