React Native – Share API

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 use to import this command :

import {Share} from 'react-native'

Open App.js in any code editor and replace the code with the following code

App.js

import React, { Component } from 'react';
import { View, Text, StyleSheet, Share, TextInput, TouchableOpacity, } from 'react-native';

export default class Myapp extends Component<{}> {
  constructor() {
    super();
    this.state = {
      inputValue: '',
    };
  }
  ShareMessage = () => {
    Share.share({
      message: this.state.inputValue.toString(),
    })
    .then(result => console.log(result))
    .catch(errorMsg => console.log(errorMsg));
  };
  render() {
    return (
      <View style={styles.MainContainer}>
        <TextInput
          underlineColorAndroid="transparent"
          placeholder="Enter Text to Share"
          style={styles.TextInputStyle}
          onChangeText={TextInputText => {
            this.setState({ inputValue: TextInputText });
          }}
        />
        <TouchableOpacity
          onPress={this.ShareMessage}
          activeOpacity={0.5}
          style={styles.button}>
          <Text style={styles.TextStyle}>Share this Text</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  MainContainer: {
    flex: 1,
    alignItems: 'center',
    paddingTop: 100,
    padding: 40,
  },
  TextInputStyle: {
    borderWidth: 1,
    borderColor: '#009688',
    width: '100%',
    height: 40,
    textAlign: 'center',
  },
  button: {
    paddingTop: 10,
    paddingBottom: 10,
    marginTop: 20,
    width: '100%',
    backgroundColor: '#646464',
  },
  TextStyle: {
    color: '#fff',
    textAlign: 'center',
  },
});
0 0 votes
Article Rating

Learn React Native App available on play store Download Now.
Do you want to hire us for your Project Work? Then Contact US.
Spread the love
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x