How To Build WordPress Client App with React Native Part #9: implement simple share

Here, we are going to add the share button and implement its feature as well. The feature makes the article sharable to the social media accounts when pressing the share button. For that, we are going to make use of the Share component from the react-native package.

Hence, we need to import 

Share

TouchableOpacity

import {
  View,
  ScrollView,
  ActivityIndicator,
  Dimensions,
  Share,
  TouchableOpacity,
} from 'react-native';

Then, we need to define a onShare function as shown in the code snippet below:

onShare = async (title, uri) => {
    Share.share({
      title: title,
      url: uri,
    });
  };

Here, we have used the share method from the 

Share

Now, we need to add the share button to the right side of the author section. For that, we need to use the code from the following code snippet:

<List.Item
 title={`${post[0]._embedded.author[0].name}`}
 description={`${post[0]._embedded.author[0].description}`}
  right={props => {
   return (
     <TouchableOpacity
       onPress={() =>
         this.onShare(post[0].title.rendered, post[0].link)
       }>
       <FontAwesome name="share" size={30} />
     </TouchableOpacity>
   );
 }}

Here, we have used the right prop of the List component in order to return the template for the share button. The share button template contains the 

TouchableOpacity

FontAwesome 

TouchableOpacity

import FontAwesome from 'react-native-vector-icons/FontAwesome';

Hence, we will get the following result in the emulators:

As we can see, when we click on the share button, a modal appears from the button which enables us to share the article with social accounts.

Summary

In this chapter, we learned how to make use of 

Share

Share

Share

This series intends to show how I build an app to serve content from my WordPress blog by using react-native. Since my blog is talking about react-native, the series and the articles are interconnected. We will learn how to set-up many packages that make our lives comfortable and learn how to deal with WordPress APIs. Here, the most prominent features talked about in the book are the dark theme, offline mode, infinite scroll and many more. You can discover much more in this series. this inspiration to do this tutorial series came from the React Native App Templates from instamobile