Sharing and clipboard in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when this React Native clipboard code runs?

Consider this React Native code snippet that copies text to the clipboard and then reads it back to display in an alert. What will the alert show?

React Native

import Clipboard from '@react-native-clipboard/clipboard';
import {Alert} from 'react-native';

Clipboard.setString('Hello World');
Clipboard.getString().then(text => Alert.alert('Clipboard content', text));

A An alert with title 'Clipboard content' and message 'Hello World'

B An alert with title 'Clipboard content' and an empty message

C No alert appears because getString returns undefined

D A runtime error because Clipboard methods are not asynchronous

💡 Hint

Clipboard.setString stores text, getString returns a Promise with that text.

Clipboard.setString('Hello World') stores the string. Clipboard.getString() returns a Promise resolving to that string. The alert shows the stored text.

🧠 Conceptual

intermediate

Which React Native API is best for sharing text to other apps?

You want to let users share a text message from your app to other apps like email or messaging. Which React Native API should you use?

A Animated API to animate the text before sharing

B Linking API to open a URL with the text

C Clipboard API to copy text and ask user to paste

D Share API to open the native share dialog

💡 Hint

Sharing means sending data to other apps, not just copying.

The Share API opens the native share dialog letting users send text to other apps directly.

❓ lifecycle

advanced

What is the effect of calling Clipboard.getString() inside useEffect without dependencies?

In a React Native functional component, what happens if you call Clipboard.getString() inside useEffect with no dependency array?

React Native

import React, {useEffect} from 'react';
import Clipboard from '@react-native-clipboard/clipboard';

function MyComponent() {
  useEffect(() => {
    Clipboard.getString().then(text => console.log(text));
  });
  return null;
}

A Clipboard.getString() runs on every render causing repeated logs

B Clipboard.getString() runs once when component mounts

C Clipboard.getString() never runs because useEffect needs dependencies

D Clipboard.getString() causes a runtime error without dependencies

💡 Hint

useEffect without [] runs after every render.

Without a dependency array, useEffect runs after every render, so Clipboard.getString() is called repeatedly.

🔧 Debug

advanced

Why does this sharing code fail to open the share dialog?

This React Native code tries to share text but nothing happens. What is the likely cause?

React Native

import {Share} from 'react-native';

async function shareText() {
  try {
    await Share.share({message: 'Hello!'});
  } catch (error) {
    console.error(error);
  }
}

A message property should be called text, not message

B Missing await before Share.share causes the dialog not to open

C Share API requires a URL, not plain text

D Try-catch block prevents the share dialog from showing

💡 Hint

Share.share returns a Promise that should be awaited.

Without await, the Promise is not handled properly and the share dialog may not appear.

📝 Syntax

expert

What error does this clipboard code produce?

What error will this React Native clipboard code cause?

React Native

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

Clipboard.setString('Test');
Clipboard.getString().then(text => console.log(text));

A ReferenceError because Clipboard is not imported correctly

B SyntaxError due to missing semicolon after setString

C TypeError because getString does not take a callback

D No error, logs 'Test' correctly

💡 Hint

Check the signature of Clipboard.getString() in React Native.

Clipboard.getString() returns a Promise and does not accept a callback, so passing a callback causes a TypeError.

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