Build WordPress App with React Native #9: a simple share
Tags: reactnativewordpre, reactnative
Published: 2019-12-05 07:22:11

---
title: Build WordPress App with React Native #9: a simple share
published: true
date: 2019-12-04 15:24:21 UTC
tags: React native Wordpre,react native
canonical_url: https://kriss.io/build-wordpress-client-app-with-react-native-9-implement-simple-share/
cover_image: https://cdn-images-1.medium.com/max/1024/1*0qWyQ1BHUL6FoFfa-uPTYg.png
series: Build Wordpress Client App with React Native
---

This series intends to show how I build 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 mobile Templates](https://www.instamobile.io/) 

In case of wanting to learn from the beginning, all the previous parts for this tutorial series are available below:

1. [Build WordPress Client App with React Native #1: Overview](https://kriss.io/build-wordpress-client-app-with-react-native-1-overview/)
2. [Build WordPress Client App with React Native #2: Setting Up Your Environment](https://kriss.io/build-wordpress-client-app-with-react-native-2-setting-up-your-environment/)
3. [Build WordPress Client App with React Native #3: Handle Navigation with React navigation](https://kriss.io/build-wordpress-client-app-with-react-native-3-handle-navigation-with-react-navigation/)
4. [Build WordPress Client App with React Native #4: Add Font Icon](https://kriss.io/build-wordpress-client-app-with-react-native-4-add-font-icon/)
5. [Build WordPress Client App with React Native #5 : Home Screen with React native paper](https://kriss.io/build-wordpress-client-app-with-react-native-5-using-react-native-paper/)
6. [Build WordPress Client App with React Native #6 : Using Html renderer and Moment](https://kriss.io/build-wordpress-client-app-with-react-native-6-using-html-renderer-and-moment/)
7. [Build WordPress Client App with React Native #7: Add pull to refresh and Infinite scroll](https://kriss.io/build-wordpress-client-app-with-react-native-7-add-pull-to-refresh-and-infinite-scroll/)
8. [Build WordPress Client App with React Native #8: Implementing SinglePost Screen](https://kriss.io/build-wordpress-client-app-with-react-native-8-implementing-singlepost-screen/)

 

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` and `TouchableOpacity` components from the
react-native package as shown in the code snippet below:
```javascript
    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:
```javascript
    <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` 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 FontAwesome from 'react-native-vector-icons/FontAwesome';
```

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

 

![](https://kriss.io/wp-content/uploads/2019/12/img_5de7cf4814898.png) ![](https://kriss.io/wp-content/uploads/2019/12/img_5de7cf5987c3d.png)

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` 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.

The post [Build WordPress Client App with React Native #9: implement simple share](https://kriss.io/build-wordpress-client-app-with-react-native-9-implement-simple-share/) appeared first on [Kriss](https://kriss.io).