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 and components from the react-native package as shown in the code snippet below: Share TouchableOpacity {
  View,
  ScrollView,
  ActivityIndicator,
  Dimensions,
  Share,
  TouchableOpacity,
} ; import from 'react-native' Then, we need to define a function as shown in the code snippet below: onShare onShare = (title, uri) => {
    Share.share({ : title, : uri,
    });
  }; async title url Here, we have used the share method from the component and provided the title and url of the article as parameters. 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={ }
 description={ }
  right={props => { ( <FontAwesome name="share" size={30} />
     </TouchableOpacity> ` ` ${post[ ]._embedded.author[ ].name} 0 0 ` ` ${post[ ]._embedded.author[ ].description} 0 0 return this.onShare(post[0].title.rendered, post[0].link)
       }> < = => TouchableOpacity onPress {() );
 }} 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 component which wraps the component with the share icon. The onShare function is called in the onPress event of the component. We also need to remember to import the FontAwesome icon bundle from the package: TouchableOpacity FontAwesome TouchableOpacity vector-icons FontAwesome ; import 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 component from the package to implement the share button. Then, we also learned how to configure the component in order for the sharing screen to pop up in the screen. We made use of function provided by the 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. Share react-native 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 from instamobile React Native App Templates

How To Build WordPress App with React Native Part #10:  Save Bookmark Feature

How To Build WordPress Client App with React Native Part #8: SinglePost View

visit more my tutorial

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

10 Best React Native Chart Libraries

10 Web Development Boosting Node.js Libraries and Frameworks

10 Things You Didn't Know You Could Do With Google Keep

10 Best Low-Code And No-Code AI Application Development Platforms in 2022

10 Data Table Libraries for JavaScript

10 Best React Native Chart Libraries

10 Web Development Boosting Node.js Libraries and Frameworks

10 Things You Didn't Know You Could Do With Google Keep

10 Best Low-Code And No-Code AI Application Development Platforms in 2022

10 Data Table Libraries for JavaScript

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps