Working with Sharing and Links
1. Sharing Content
| Method | Description | Notes |
|---|---|---|
| Share.open() | Opens the native sharing dialog to share content | Supports text, URLs, and images |
| Share.isAvailable() | Checks if sharing is available on the device | Returns a boolean value |
Example: Sharing Text
import * as Share from 'expo-share';\n\nconst shareText = async () => {\n const result = await Share.open({\n message: 'Check out this awesome app!',\n });\n\n if (result.dismissedAction) {\n console.log('Share dismissed');\n }\n};
Example: Sharing URL
import * as Share from 'expo-share';\n\nconst shareUrl = async () => {\n const result = await Share.open({\n url: 'https://expo.dev',\n });\n\n if (result.dismissedAction) {\n console.log('Share dismissed');\n }\n};
Note: On web, the sharing action will open a new window with the content to be shared.
2. Using Share Dialog
The Share API in Expo allows you to share content from your app with other apps installed on the device. It supports sharing text, URLs, images, and files.
| Property | Description | Values |
|---|---|---|
| content | The content to be shared. This can be a string, an object with title and text, or an array of content items. | string, object, array |
| url | The URL to be shared. This is typically used when sharing a web link. | string |
| mimeType | The MIME type of the content being shared. This is useful for sharing files. | string |
| dialogTitle | The title of the share dialog. This is optional and defaults to "Share". | string |
Example: Sharing Text
import * as Share from 'expo-share';
const shareText = async () => {
await Share.share({
content: 'Hello, world!',
dialogTitle: 'Share this text'
});
};
Example: Sharing a URL
import * as Share from 'expo-share';
const shareUrl = async () => {
await Share.share({
url: 'https://expo.dev',
dialogTitle: 'Share this link'
});
};
Example: Sharing an Image
import * as Share from 'expo-share';
const shareImage = async () => {
await Share.share({
content: 'Check out this image!',
url: 'https://example.com/image.jpg',
mimeType: 'image/jpeg',
dialogTitle: 'Share this image'
});
};
Note: The Share API is not available in all environments. It works in standalone apps and managed apps, but not in the Expo Go client.
3. Checking Sharing Availability
| Property | Description | Values | Notes |
|---|---|---|---|
| Sharing.isAvailable | Indicates if sharing is available on the current platform | true | false |
Available in Expo Go and bare workflow apps |
Example: Check Sharing Availability
import * as Sharing from 'expo-sharing';
const isAvailable = Sharing.isAvailable;
console.log('Sharing available:', isAvailable);
4. Sending SMS Messages
| Property | Description | Values |
|---|---|---|
| expo-constants | Provides access to constants like the app's bundle ID | Constants.manifest?.id |
| expo-sharing | Enables sharing content via system share sheets | Sharing.shareAsync |
Example: Sending SMS via Expo
import * as Sharing from 'expo-sharing';
import Constants from 'expo-constants';
const sendSMS = async () => {
const message = 'Hello from Expo!';
const phoneNumber = '+1234567890';
try {
const result = await Sharing.shareAsync(
`sms:${phoneNumber}?body=${encodeURIComponent(message)}`,
{ mimeType: 'text/plain' }
);
} catch (error) {
console.error('Failed to send SMS:', error);
}
};
Note: The
sms: URI scheme is supported on iOS and Android, but behavior varies by platform.
Warning: SMS functionality is limited to the system’s default messaging app and requires user interaction.
5. Composing SMS
| Property | Description | Values |
|---|---|---|
| to | The phone number(s) to send the SMS to | string | string[] |
| body | The message content to send | string |
| cc | CC recipients (optional) | string | string[] |
| bcc | BCC recipients (optional) | string | string[] |
Example: Compose SMS with Expo
import { SMS } from 'expo-sms';
const sendSMS = async () => {
const isAvailable = await SMS.isAvailableAsync();
if (isAvailable) {
const result = await SMS.sendSMSAsync(
'+1234567890',
'Hello from Expo!'
);
console.log('SMS sent:', result);
} else {
console.log('SMS not available on this device');
}
};
Note: The
sendSMSAsync function requires the SEND_SMS permission on Android and is only available on physical devices.
6. Sending Email
| Property | Description | Values |
|---|---|---|
| to | Email address to send the email to | string |
| subject | Subject line of the email | string |
| body | Body content of the email | string |
| cc | CC email addresses | string[] |
| bcc | BCC email addresses | string[] |
Example: Sending an Email
import * as Sharing from 'expo-sharing';
const emailOptions = {
to: 'user@example.com',
subject: 'Hello from Expo!',
body: 'This is a test email sent from an Expo app.'
};
Sharing.sendToInboxAsync(emailOptions);
Note: The
sendToInboxAsync method only works on devices that have an email client configured.
Warning: Ensure that the email address is valid and properly formatted to avoid delivery issues.
7. Composing Email
| Property | Description | Values |
|---|---|---|
| to | Email address of the recipient | string |
| cc | CC email addresses | string[] |
| bcc | BCC email addresses | string[] |
| subject | Subject line of the email | string |
| body | Body content of the email | string |
Example: Compose Email
import { openComposer } from 'expo-sharing';
const email = {
to: 'recipient@example.com',
subject: 'Hello from Expo!',
body: 'This is a test email sent via Expo.',
};
openComposer(email);
8. Making Phone Calls
| Property | Values | Description |
|---|---|---|
| phone | string |
The phone number to call |
| prompt | boolean |
Whether to show a prompt before calling |
Example: Making a Phone Call
import { makePhoneCall } from 'expo-constants';
makePhoneCall('123-456-7890');
Note: The phone number must be a valid format for the device's operating system.
Warning: This feature requires the
CALL_PHONE permission on Android.
9. Opening External URLs
| Property | Description | Example |
|---|---|---|
| url | The external URL to open | https://expo.dev |
Example: Opening an External URL
import * as Linking from 'expo-linking';
const openExternalUrl = () => {
Linking.openURL('https://expo.dev');
};
Note: Ensure the URL is properly formatted and accessible to avoid navigation errors.
10. Handling Deep Links
| Property | Description | Example |
|---|---|---|
| useDeepLink | Hook to handle deep links in Expo apps | const { pathname, params } = useDeepLink(); |
| Linking | Module for handling deep links and URL schemes | Linking.openURL('exp://192.168.0.1:8081'); |
Example: Handling Deep Links
import { useDeepLink } from 'expo';\n\nconst handleDeepLink = () => {\n const { pathname, params } = useDeepLink();\n console.log('Pathname:', pathname);\n console.log('Params:', params);\n};
Example: Opening Deep Links
import { Linking } from 'expo';\n\nconst openDeepLink = () => {\n Linking.openURL('exp://192.168.0.1:8081');\n};
Note: Deep links in Expo apps can be handled via the
Linking API or through the useDeepLink hook. Ensure that your app's configuration includes proper URL scheme definitions in app.json.
Warning: Make sure to handle deep links securely, especially when passing sensitive data through URL parameters.
11. Parsing URL Parameters
| Parameter | Description | Example |
|---|---|---|
| url | The full URL string to parse | "https://expo.dev/@user/project?param1=value1¶m2=value2" |
| paramName | Name of the query parameter to extract | "param1" |
Example: Extracting a Single Parameter
import { parse } from 'expo-linking';\n\nconst url = 'https://expo.dev/@user/project?param1=value1&param2=value2';\nconst paramValue = parse(url).query.param1;\nconsole.log(paramValue); // "value1"
Example: Extracting All Parameters
import { parse } from 'expo-linking';\n\nconst url = 'https://expo.dev/@user/project?param1=value1&param2=value2';\nconst parsed = parse(url);\nconsole.log(parsed.query); // { param1: "value1", param2: "value2" }
Note: The
parse function returns a structured object with query, path, and other components of the URL.12. Creating App Links
App Links in Expo allow you to create deep links into your app from external sources like emails, SMS, or other apps. These links can open specific screens or pass data to your app.
| Property | Description | Example |
|---|---|---|
| expo-linking | Library for handling deep links in Expo apps. | import * as Linking from 'expo-linking'; |
| deepLink | URL that opens the app to a specific screen. | exp://192.168.1.100:8081/--/my-screen |
Example: Setting up a Deep Link
import * as Linking from 'expo-linking';
const prefix = Linking.createURL('/');
export default function App() {
return (
<View style={styles.container}>
<Text>Open app with deep link</Text>
</View>
);
}
Example: Handling Deep Links
import * as Linking from 'expo-linking';
const handleDeepLink = (url) => {
console.log('Received deep link:', url);
};
Linking.addEventListener('url', handleDeepLink);
export default function App() {
return (
<View style={styles.container}>
<Text>App is listening for deep links</Text>
</View>
);
}
Note: Make sure to configure your app's scheme in
app.json or app.config.js to handle deep links correctly.
Warning: Deep links may not work in development mode without proper configuration.