React Native Share API to Share TextInput message

This tutorial explains how to implement React Native Share API to Share TextInput message in android or ios application. React Native Share component which is used to share any content. We usually add a share button in our app to share something with other users either using any social media or any other medium. We can share Text message from directly our app to Whats App contacts, Hike Contacts, Groups, SMS, Copy to Clipboard, Share to Google drive, Gmail, Hangouts, and One Drive and other installed application.

import Share Component :

import {Share} from 'react-native'

Using Share Function :

  ShareMessage = () => {
  //Here is the Share API
  Share.share({ message: this.state.inputValue.toString(), title : "Sharing via react native" })
    //after successful share return result
    .then(result => console.log(result))
    //If any thing goes wrong it comes here
    .catch(errorMsg => console.log(errorMsg));
 };

React Native Share API example :

Lets follow the below steps to implement React Native Share API to Share TextInput message in android or ios application.

Step-1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step-2: Open index.android.js  / index.ios.js  in your favourite code editor and erase all code and follow this tutorial.

Step-3: Through react , react-native  packages import all required components. For sharing content in android applications we need to use Share component from the react-native  package.

 import React, { Component } from "react";
 import { Platform, StyleSheet, View, Text, Share, TextInput, Button } from "react-native";

Step-4 : First Create the App class inside the app.js file, Then Create constructor in your App class and call the super method inside constructor. Now using this.state we are defining the inputValue value as state.

constructor() {
      super();
      this.state = { inputValue: '' };
  }

Step-5: create ShareMessage function inside the App class. This function helps to share TextInput component value to other application.

 ShareMessage = () => {
  //Here is the Share API
  Share.share({ message: this.state.inputValue.toString(), title : "Sharing via react native" })
    //after successful share return result
    .then(result => console.log(result))
    //If any thing goes wrong it comes here
    .catch(errorMsg => console.log(errorMsg));
 };

Step-6: Implement render method inside the App class and wrapped the below layout design inside the root View component.

• TextInput Component : This component will store the message, that user going to share.
• Button Component : This component will share the message to other android application, when user clicks on Share button.

render() {
      return (
        <View style={styles.container}>

        <TextInput
          underlineColorAndroid="transparent"
          placeholder="Enter Text to Share"
          style={styles.TextInputStyle}
          onChangeText={TextInputText => { this.setState({ inputValue: TextInputText }); }}
        />

        <View style={{margin: 10}}>
         <Button title = "SHARE"   onPress={this.ShareMessage} />
        </View>
      </View>
      );
    }

Step-7 : Apply the below style sheet design.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems : 'center'
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  },
  TextInputStyle: {
    borderWidth: 2,
    borderColor: 'blue',
    width: '90%',
    height: 40,
    textAlign: 'center',
  },

});

Complete Source Code for App.js 

Lets see the complete source code that helps to implement React Native Share API to Share TextInput message in android or ios application.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

 import React, { Component } from "react";
 import { Platform, StyleSheet, View, Text, Share, TextInput, Button } from "react-native";

 export default class App extends Component {

   constructor() {
      super();
      this.state = { inputValue: '' };
  }

  ShareMessage = () => {
  //Here is the Share API
  Share.share({ message: this.state.inputValue.toString(), title : "Sharing via react native" })
    //after successful share return result
    .then(result => console.log(result))
    //If any thing goes wrong it comes here
    .catch(errorMsg => console.log(errorMsg));
 };


    render() {
      return (
        <View style={styles.container}>

        <TextInput
          underlineColorAndroid="transparent"
          placeholder="Enter Text to Share"
          style={styles.TextInputStyle}
          onChangeText={TextInputText => { this.setState({ inputValue: TextInputText }); }}
        />

        <View style={{margin: 10}}>
         <Button title = "SHARE"   onPress={this.ShareMessage} />
        </View>
      </View>
      );
    }
 }

 const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems : 'center'
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  },
  TextInputStyle: {
    borderWidth: 2,
    borderColor: 'blue',
    width: '90%',
    height: 40,
    textAlign: 'center',
  },

});

Screenshot :

This is all about React Native Share API to Share TextInput message. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.