import React, { useState } from 'react';
import { View, TextInput, Button, Alert, StyleSheet } from 'react-native';
import Clipboard from '@react-native-clipboard/clipboard';
import Share from 'react-native-share';
export default function ShareClipboardScreen() {
const [text, setText] = useState('');
const copyToClipboard = () => {
Clipboard.setString(text);
Alert.alert('Copied!', 'Text copied to clipboard.');
};
const shareText = async () => {
try {
await Share.open({
message: text
});
} catch (error) {
// User cancelled or error
}
};
return (
<View style={styles.container}>
<TextInput
style={styles.input}
placeholder="Type something here"
value={text}
onChangeText={setText}
accessibilityLabel="Text input for sharing and clipboard"
/>
<Button title="Copy to Clipboard" onPress={copyToClipboard} />
<Button title="Share Text" onPress={shareText} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 16,
justifyContent: 'center',
backgroundColor: '#fff'
},
input: {
borderColor: '#888',
borderWidth: 1,
padding: 12,
marginBottom: 12,
borderRadius: 4
}
});We use React Native's useState to keep track of the text input by the user. The copyToClipboard function uses the Clipboard.setString method to copy the current text to the device clipboard and then shows a simple alert to confirm the action.
The shareText function uses the react-native-share library to open the device's native share dialog with the text message. We handle errors silently, such as when the user cancels sharing.
Both functions are connected to their respective buttons' onPress handlers. The UI is simple and accessible, with labels and clear buttons.
