Build React Native WordPress App [Expo way] #8 : Share

This series intends to show how I build an app to serve content from my WordPress blog by using react-native. Since we successfully build an app on the React Native CLI path., for the next step, we try to develop this app again but using Expo. We will discover the Expo ecosystem that makes our lives comfortable and help us avoid dealing with Native modules to 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, in-app purchase, and many more. You can discover much more in this series. this inspiration to do this tutorial series came from the React Native Templates from instamobile

in this chapter, we will set up a share component that helps we share the link with Native widget

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 component and provided the title and url of the article as parameters.

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)
           }>
           <MaterialCommunityIcons name="share" size={30} />
         </TouchableOpacity>
       );
     }}

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 component which wraps the FontAwesome component with the share icon. The onShare function is called in the onPress event of the TouchableOpacity component. We also need to remember to import the FontAwesome icon bundle from the vector-icons package:

import { MaterialCommunityIcons } from '@expo/vector-icons';

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

Summary

In this chapter, we learned how to make use of Share component from the react-native package to implement the share button. Then, we also learned how to configure the Share component in order for the sharing screen to pop up in the screen. We made use of share() function provided by the Share component in order to display the sharing screen pop up. This allows us to share the article to the social accounts. Finally, we implemented the share button using the vector icon as well.

Originally published at Kriss.