Message Sharing

share You can display the native share sheet so users can easily share content with a function. For example, users can select a desired app (e.g., a messenger app or notes app) from the list of installed apps to share invitation messages or text information. It uses the default sharing interface provided by each platform (Android, iOS).

options.message If you pass the message to share into the property, a list of apps the user can choose from is displayed. For example, it's useful when the user wants to share a text message or save it to a notes app.

Signature

function share(message: { message: string }): Promise<void>;

Parameters

options · Required · object
An object containing the message to share.
- options.message · Required · string
  A text string to share. For example, "Hello! I'm sharing this content."

Example: Implementing the share function

Below is a simple example of sharing a message when a button is clicked.

import { share } from '@apps-in-toss/web-framework';

async function handleShare() {
  try {
    await share({ message: 'Message to share' });
    console.log('Share complete');
  } catch (error) {
    console.error('Share failed:', error);
  }
}

import { share } from '@apps-in-toss/web-framework';

const ShareButton = () => {
  const handleShare = async () => {
    try {
      await share({ message: 'Message to share' });
      console.log('Share complete');
    } catch (error) {
      console.error('Share failed:', error);
    }
  };

  return <button onClick={handleShare}>Share</button>;
};

import { share } from '@apps-in-toss/framework';
import { Button } from 'react-native';

function MyPage() {
  return <Button title="Share" onPress={() => share({ message: 'This is a message to share.' })} />;
}

Sharing a message by accepting user input

You can also implement it so users share a message they entered themselves. The following is an example of a feature for composing an invitation message.

import { useState } from 'react';
import { TextInput, Button, View, Alert } from 'react-native';
import { share } from '@apps-in-toss/framework';

function ShareWithInput() {
  const [invitationMessage, setInvitationMessage] = useState(''); // [!code highlight]

  const handleShare = () => {
    if (!invitationMessage.trim()) {
      Alert.alert('Please enter a message to share.');
      return;
    }
    share({ message: invitationMessage }); // [!code highlight]
  };

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1,
          marginBottom: 10,
          paddingHorizontal: 8,
        }}
        placeholder="Enter an invitation message"
        value={invitationMessage}
        onChangeText={setInvitationMessage}
      />
      <Button title="Share invitation message" onPress={handleShare} />
    </View>
  );
}

Try the sample app

apps-in-toss-examples from the repository with-share-text Download the code, or scan the QR code below to try it yourself.