import React, { useState } from
'react'
;
import {
View,
Text,
TextInput,
TouchableOpacity,
Clipboard,
ToastAndroid,
AlertIOS,
Platform
} from
'react-native'
;
const App = () => {
const [copyText, setCopyText] = useState(
''
);
const [copied, setCopied] = useState(
false
);
const handleCopyText = (text) => {
setCopyText(text);
setCopied(
false
);
};
const copyToClipboard = () => {
if
(copyText) {
Clipboard.setString(copyText);
if
(Platform.OS ===
'android'
) {
ToastAndroid.show(
'Text copied to clipboard!'
,
ToastAndroid.SHORT);
}
else
if
(Platform.OS ===
'ios'
) {
AlertIOS.alert(
'Text copied to clipboard!'
);
}
setCopied(
true
);
}
};
const containerStyle = {
flex: 1,
alignItems:
'center'
,
justifyContent:
'center'
,
marginTop: 40,
};
const headingStyle = {
fontSize: 32,
fontWeight:
'bold'
,
marginBottom: 20,
};
const inputStyle = {
padding: 10,
marginBottom: 20,
borderWidth: 2,
borderColor:
'green'
,
borderRadius: 4,
width: 300,
fontSize: 16,
margin: 10,
};
const buttonStyle = {
backgroundColor:
'green'
,
color:
'white'
,
padding: 10,
borderRadius: 4,
fontSize: 16,
};
const successMessageStyle = {
color:
'green'
,
marginTop: 10,
};
return
(
<View style={containerStyle}>
<Text style={headingStyle}>
Copy Text to Clipboard
</Text>
<TextInput
value={copyText}
onChangeText={handleCopyText}
style={inputStyle}
placeholder=
"Enter the text you want to copy"
/>
<TouchableOpacity onPress={copyToClipboard}
style={buttonStyle}>
<Text style={{ color:
'white'
}}>
Copy
</Text>
</TouchableOpacity>
{copied &&
<Text style={successMessageStyle}>
Text copied to clipboard!
</Text>}
<TextInput
style={inputStyle}
placeholder=
"Enter the copied text"
/>
</View>
);
};
export
default
App;