React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows, and UWP by enabling developers to use the React framework along with native platform capabilities.
In this article, we will be learning how we can add a share button in react native.
Creating React Native App:
Step 1: We’ll be using expo to create the react native app. Install expo-cli using the below command in the terminal.
npm install -g expo-cli
Step 2: Create a react native project using expo.
expo init "gfg"
Step 3: Now go to the created project using the below command.
cd "gfg"
Project Structure: It will look like the following:
Example:
- Adding a Share Button: You can easily add a share button in your react native app using the Share API. For this, add the below code inside the App.js file.
Javascript
import React from "react"; import { Share, View, Button, Text } from "react-native"; const GfGApp = () => { const shareData = async () => { try { await Share.share({ message: 'This is the demo text', }); } catch (error) { alert(error.message); } }; return ( <View style={{ marginTop: 80 }}> <Text style={{ fontSize: 18 }}> neveropen React Native Share</Text> <Button onPress={shareData} title="Share" /> </View> ); }; export default GfGApp; |
Here we are using the share function of the Share module to add the share button in the app.
Run the application: Now run the application using the below command in the terminal.
npm run web
Output:
