Master React Native Share - Complete Guide

Last update: 2025-04-24
Type
Quick Win's logo Quick Win
Membership
🆓
Tech
TypeScript TypeScript
TypeScript
Share:

The Share API in React Native provides a simple way to implement native sharing functionality in your apps. Whether you want to share text, links, files, or images, React Native’s Share API makes it easy to integrate with the device’s native sharing capabilities.

Basic Share Implementation

Let’s start with the basic usage of the Share API:

import React from 'react';
import { Share, Button, View } from 'react-native';

const ShareExample = () => {
	const onShare = async () => {
		try {
			const result = await Share.share({
				message: 'Check out this awesome app!',
				title: 'App Invitation'
			});

			if (result.action === Share.sharedAction) {
				if (result.activityType) {
					// shared with activity type of result.activityType
					console.log(result.activityType);
				} else {
					// shared
					console.log('Shared successfully');
				}
			} else if (result.action === Share.dismissedAction) {
				// dismissed
				console.log('Share dismissed');
			}
		} catch (error) {
			console.error(error);
		}
	};

	return (
		<View>
			<Button onPress={onShare} title="Share" />
		</View>
	);
};

export default ShareExample;

This example demonstrates:

  • Basic sharing functionality with message and title
  • Handling share results and user actions
  • Error handling for share operations

Sharing URLs

For sharing URLs, you can combine message and URL:

import React from 'react';
import { Share, Button, View } from 'react-native';

const ShareUrlExample = () => {
	const shareUrl = async () => {
		try {
			await Share.share({
				message: 'Check out this website: https://galaxies.dev',
				url: 'https://galaxies.dev', // iOS only
				title: 'Amazing Website'
			});
		} catch (error) {
			console.error(error);
		}
	};

	return (
		<View>
			<Button onPress={shareUrl} title="Share Website" />
		</View>
	);
};

export default ShareUrlExample;

Key points about URL sharing:

  • The url parameter is iOS-specific
  • For Android, include the URL in the message
  • URLs are automatically converted to clickable links

Platform-Specific Sharing

Handle platform differences elegantly:

import React from 'react';
import { Share, Platform, Button, View } from 'react-native';

const PlatformShareExample = () => {
	const shareContent = async () => {
		try {
			const shareOptions = Platform.select({
				ios: {
					activityItemSources: [
						{
							placeholderItem: { type: 'url', content: 'https://galaxies.dev' },
							item: {
								default: { type: 'url', content: 'https://galaxies.dev' }
							},
							subject: 'Check out this website',
							linkMetadata: { title: 'Galaxies.dev' }
						}
					]
				},
				default: {
					title: 'Check out this website',
					message: 'https://galaxies.dev',
					subject: 'Share Link'
				}
			});

			await Share.share(shareOptions);
		} catch (error) {
			console.error(error);
		}
	};

	return (
		<View>
			<Button onPress={shareContent} title="Share" />
		</View>
	);
};

export default PlatformShareExample;

This example shows:

  • Platform-specific share options
  • Enhanced iOS sharing with activity items
  • Fallback options for other platforms

Sharing Images

Share images using base64 or URLs:

import React from 'react';
import { Share, Button, View, Platform } from 'react-native';
import * as FileSystem from 'expo-file-system';

const ImageShareExample = () => {
	const shareImage = async () => {
		try {
			// For local images
			const imageUri = 'path/to/your/image.jpg';

			if (Platform.OS === 'ios') {
				await Share.share({
					url: imageUri, // iOS only
					message: 'Check out this image!'
				});
			} else {
				// For Android, we need to convert to base64 or use a content URI
				const base64 = await FileSystem.readAsStringAsync(imageUri, {
					encoding: FileSystem.EncodingType.Base64
				});

				await Share.share({
					message: 'Check out this image!',
					title: 'Image Share',
					url: `data:image/jpeg;base64,${base64}`
				});
			}
		} catch (error) {
			console.error(error);
		}
	};

	return (
		<View>
			<Button onPress={shareImage} title="Share Image" />
		</View>
	);
};

export default ImageShareExample;

Important points about image sharing:

  • iOS accepts file URLs directly
  • Android requires base64 encoding or content URIs
  • Consider image size when sharing
  • Handle permissions appropriately

Best Practices

  1. Error Handling

    • Always wrap share operations in try-catch blocks
    • Provide user feedback for failures
    • Handle permissions appropriately

  2. User Experience

    • Keep share options simple and clear
    • Provide appropriate feedback
    • Consider platform differences
    • Test with various share targets

  3. Performance

    • Handle large files efficiently
    • Consider image compression when needed
    • Cache base64 conversions if used frequently

  4. Security

    • Validate content before sharing
    • Handle sensitive information appropriately
    • Check permissions before accessing files

Common Use Cases

  • Share app invites
  • Social media sharing
  • Document sharing
  • Image sharing
  • Link sharing
  • Contact sharing

Summary

React Native’s Share API provides a powerful way to integrate native sharing capabilities into your apps. By following these patterns and best practices, you can create a seamless sharing experience for your users.

Key takeaways:

  • Use platform-specific options when needed
  • Handle errors gracefully
  • Consider file types and sizes
  • Follow platform guidelines
  • Test thoroughly across devices

Now you’re ready to implement professional sharing functionality in your React Native apps! 🚀

Zero to Hero React Native Mission
Simon Grimm