Sharing and clipboard in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Clipboard API from React Native.

React Native

import { [1] } from 'react-native';

Drag options to blanks, or click blank then click option'

ATextInput

BShare

CButton

DClipboard

Attempts:

3 left

💡 Hint

Common Mistakes

Importing Share instead of Clipboard

Using Button or TextInput which are UI components

The Clipboard API is imported from 'react-native' using Clipboard.

2fill in blank

medium

Complete the code to copy text to the clipboard using the Clipboard API.

React Native

Clipboard.[1]('Hello from React Native!');

Drag options to blanks, or click blank then click option'

AcopyText

BgetString

CsetString

DpasteText

Attempts:

3 left

💡 Hint

Common Mistakes

Using getString to copy text

Using non-existing methods like copyText or pasteText

Use setString to copy text to the clipboard.

3fill in blank

hard

Fix the error in the code to share a message using the Share API.

React Native

import { Share } from 'react-native';

async function shareMessage() {
  try {
    const result = await Share.[1]({ message: 'Check this out!' });
  } catch (error) {
    console.error(error);
  }
}

Drag options to blanks, or click blank then click option'

Asend

Bshare

Cpost

Dpublish

Attempts:

3 left

💡 Hint

Common Mistakes

Using send or post instead of share

Forgetting to await the async call

The correct method to share content is Share.share().

4fill in blank

hard

Fill both blanks to read text from the clipboard and log it.

React Native

async function readClipboard() {
  const text = await Clipboard.[1]();
  console.[2](text);
}

Drag options to blanks, or click blank then click option'

AgetString

Blog

Cprint

DsetString

Attempts:

3 left

💡 Hint

Common Mistakes

Using setString to read text

Using console.print which does not exist

Use Clipboard.getString() to read clipboard text and console.log() to print it.

5fill in blank

hard

Fill all three blanks to share a URL with a title using the Share API.

React Native

async function shareUrl() {
  try {
    await Share.[1]({
      [2]: 'https://example.com',
      [3]: 'Example Website'
    });
  } catch (error) {
    console.error(error);
  }
}

Drag options to blanks, or click blank then click option'

Ashare

Burl

Ctitle

Dmessage

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'message' instead of 'url' or 'title'

Using incorrect method names like 'send'

Use Share.share() with keys url and title to share a link with a title.

Practice

1. What is the main purpose of the Clipboard API in React Native?

easy

A. To copy and paste text between apps

B. To share images on social media

C. To send emails from the app

D. To open external web links

Solution

1. Step 1: Understand Clipboard functionality

   The Clipboard API is designed to handle text copying and pasting between apps.

2. Step 2: Compare with other options

   Sharing images, sending emails, and opening links are not Clipboard's main tasks.

3. Final Answer:

   To copy and paste text between apps -> Option A

4. Quick Check:

   Clipboard = copy-paste text [OK]

Hint: Clipboard is for copy-paste text only [OK]

Common Mistakes:

• Confusing Clipboard with sharing images
• Thinking Clipboard sends emails
• Assuming Clipboard opens web links

2. Which of the following is the correct way to import the Clipboard API in React Native?

easy

A. import { Clipboard } from 'react-native';

B. import Clipboard from '@react-native-clipboard/clipboard';

C. import Clipboard from 'react-native';

D. import Clipboard from 'react-native-clipboard';

Solution

1. Step 1: Identify the official Clipboard package

   React Native moved Clipboard to a separate package '@react-native-clipboard/clipboard'.

2. Step 2: Check import syntax

   The correct import is default import from '@react-native-clipboard/clipboard'.

3. Final Answer:

   import Clipboard from '@react-native-clipboard/clipboard'; -> Option B

4. Quick Check:

   Clipboard import = '@react-native-clipboard/clipboard' [OK]

Hint: Clipboard is from '@react-native-clipboard/clipboard' package [OK]

Common Mistakes:

• Importing Clipboard directly from 'react-native'
• Using named import instead of default
• Using wrong package names

3. What will be the output of this React Native code snippet?

import Clipboard from '@react-native-clipboard/clipboard';

Clipboard.setString('Hello World');
const text = await Clipboard.getString();
console.log(text);

medium

A. undefined

B. Error: Clipboard.getString is not a function

C. 'Hello World'

D. null

Solution

1. Step 1: Understand Clipboard.setString usage

   This sets the clipboard content to 'Hello World'.

2. Step 2: Understand Clipboard.getString usage

   It asynchronously retrieves the clipboard content, which is 'Hello World'.

3. Final Answer:

   'Hello World' -> Option C

4. Quick Check:

   Clipboard content = 'Hello World' [OK]

Hint: Clipboard.getString returns the last set string [OK]

Common Mistakes:

• Forgetting await on Clipboard.getString
• Expecting undefined or null instead of set string
• Confusing Clipboard API methods

4. You wrote this code to share text but it does not work:

import { Share } from 'react-native';

const shareText = async () => {
  Share.share('Hello!');
};

What is the error?

medium

A. You cannot share text in React Native

B. Share must be imported from '@react-native-share/share'

C. Share.share is not async function

D. Share.share requires an object with a message property

Solution

1. Step 1: Check Share.share argument type

   Share.share expects an object like { message: 'text' }, not a string.

2. Step 2: Identify correct usage

   Passing a string directly causes failure; must pass { message: 'Hello!' }.

3. Final Answer:

   Share.share requires an object with a message property -> Option D

4. Quick Check:

   Share.share argument = object with message [OK]

Hint: Share.share needs { message: 'text' } object [OK]

Common Mistakes:

• Passing string directly instead of object
• Importing Share from wrong package
• Ignoring async/await usage

5. You want to create a button that copies user input text to clipboard and then shares it. Which code snippet correctly combines Clipboard and Share APIs?

hard

A. const copyAndShare = async (text) => {
await Clipboard.setString(text);
await Share.share({ message: text });
};

B. const copyAndShare = (text) => {
Clipboard.setString(text);
Share.share(text);
};

C. const copyAndShare = async (text) => {
Clipboard.setString(text);
Share.share({ message: await Clipboard.getString() });
};

D. const copyAndShare = async (text) => {
await Clipboard.getString();
await Share.share({ message: text });
};

Solution

1. Step 1: Use async/await for Clipboard.setString

   Clipboard.setString returns a promise, so await ensures text is copied before sharing.

2. Step 2: Pass correct object to Share.share

   Share.share requires an object with message property containing the text to share.

3. Step 3: Verify combined usage

   const copyAndShare = async (text) => { await Clipboard.setString(text); await Share.share({ message: text }); }; correctly awaits Clipboard.setString and then shares the same text properly.

4. Final Answer:

   const copyAndShare = async (text) => { await Clipboard.setString(text); await Share.share({ message: text }); }; -> Option A

5. Quick Check:

   Await Clipboard.setString + Share.share({ message }) [OK]

Hint: Await Clipboard.setString before Share.share({ message }) [OK]

Common Mistakes:

• Not awaiting Clipboard.setString
• Passing string directly to Share.share
• Calling Clipboard.getString unnecessarily