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.