Great question! I’ve run into this exact issue before with Expo’s Sharing API, so let’s break down the options since the official shareAsync method doesn’t natively support sharing both text and an image together out of the box.

The Short Answer #

Expo’s built-in Sharing.shareAsync() is designed to handle a single file URL, so it can’t directly share both text and an image simultaneously. But there are workarounds depending on your target platform.

Workarounds by Platform #

1. Android: Use Custom Intents with Expo Intent Launcher #

Android’s system sharing framework supports sending multiple types of content (text + images) via Intents. You can leverage expo-intent-launcher to build a custom sharing intent that includes both your text and image.

First, install the required packages:

npx expo install expo-intent-launcher expo-file-system

Then use this code example:

import * as IntentLauncher from 'expo-intent-launcher';
import * as FileSystem from 'expo-file-system';

const shareTextAndImage = async () => {
  // Replace with your local image path (must be a file:// URI)
  const localImageUrl = FileSystem.documentDirectory + 'your-image-file.jpg';
  const shareText = "Check out this awesome image and my message!";

  try {
    await IntentLauncher.startActivityAsync('android.intent.action.SEND_MULTIPLE', {
      type: '*/*', // Let the system handle compatible apps
      extras: {
        'android.intent.extra.TEXT': shareText,
        'android.intent.extra.STREAM': [localImageUrl],
      },
    });
  } catch (error) {
    console.error('Failed to share:', error);
  }
};

This will open the Android share sheet, and apps that support both text and image sharing (like WhatsApp, Gmail) will receive both pieces of content—users can copy the text separately or save the image.

2. iOS: Combine Text + Image into a Single File #

iOS’s share sheet doesn’t play nicely with mixed content via Expo’s native APIs in managed projects. The most reliable workaround is to overlay your text onto the image and share the combined result. This way, you’re sharing a single image file that includes both your visual content and text.

You can use expo-canvas (for flexible text rendering) to create the combined image. Here’s a canvas-based example:

First, install dependencies:

npx expo install expo-canvas expo-file-system expo-sharing

Then implement the function:

import * as Sharing from 'expo-sharing';
import * as FileSystem from 'expo-file-system';

const shareTextOverImage = async (imageUrl, shareText) => {
  try {
    // Load the original image
    const img = new Image();
    img.src = imageUrl;
    await img.decode();

    // Create a canvas with extra space for text
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = img.width;
    canvas.height = img.height + 60; // Add padding for text

    // Draw the original image
    ctx.drawImage(img, 0, 0);

    // Add text to the canvas
    ctx.fillStyle = '#000000';
    ctx.font = '24px Arial';
    ctx.textAlign = 'center';
    ctx.fillText(shareText, canvas.width / 2, img.height + 40);

    // Convert canvas to a local file
    const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/jpeg', 0.9));
    const tempFilePath = FileSystem.documentDirectory + 'shared-image-with-text.jpg';
    
    // Convert blob to base64 and save to local storage
    const base64Data = await new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onloadend = () => resolve(reader.result.split(',')[1]);
      reader.onerror = reject;
      reader.readAsDataURL(blob);
    });
    await FileSystem.writeAsStringAsync(tempFilePath, base64Data, { encoding: FileSystem.EncodingType.Base64 });

    // Share the combined image
    await Sharing.shareAsync(tempFilePath);
  } catch (error) {
    console.error('Failed to create and share image:', error);
  }
};

Note: If you’re using a bare React Native project (not managed Expo), you can integrate libraries like react-native-share which supports mixed content sharing on iOS, but that’s not available in managed Expo workflows.

Cross-Platform Universal Option #

If you need a solution that works on both Android and iOS, the text-over-image合成方法 is your best bet. It’s consistent across platforms, and you don’t have to handle complex platform-specific code branches (other than maybe adjusting text styling for different screen sizes).

内容的提问来源于stack exchange，提问作者lonecruisader