1import * as Clipboard from 'expo-clipboard';
2import { ClipboardPasteButton, TextPasteEvent, ImagePasteEvent } from 'expo-clipboard';
3import React from 'react';
4import { Text, View, StyleSheet, Image } from 'react-native';
5import { ScrollView } from 'react-native-gesture-handler';
6
7const available = Clipboard.isPasteButtonAvailable;
8
9export default function ClipboardPasteButtonScreen() {
10  const [textData, setTextData] = React.useState<TextPasteEvent | null>(null);
11  const [imageData, setImageData] = React.useState<ImagePasteEvent | null>(null);
12
13  if (!available) {
14    return (
15      <View style={styles.screen}>
16        <Text>ClipboardPasteButton is not available on this device</Text>
17      </View>
18    );
19  }
20
21  return (
22    <ScrollView>
23      <View style={styles.screen}>
24        <ClipboardPasteButton
25          imageOptions={{ format: 'png' }}
26          onPress={(data) => {
27            if (data.type === 'image') {
28              setImageData(data);
29            } else {
30              setTextData(data);
31            }
32          }}
33          style={styles.buttonStyle}
34        />
35        {textData && (
36          <View style={styles.sectionContainer}>
37            <Text style={styles.heading}>Text Paste Result:</Text>
38
39            <View style={styles.textResult}>
40              <Text style={{ textAlign: 'center' }}>{textData.text}</Text>
41            </View>
42          </View>
43        )}
44        {imageData && (
45          <View style={styles.sectionContainer}>
46            <Text style={styles.heading}>Image Paste Result:</Text>
47            <Image source={{ uri: imageData.data }} style={styles.image} />
48          </View>
49        )}
50      </View>
51    </ScrollView>
52  );
53}
54
55const styles = StyleSheet.create({
56  screen: {
57    flex: 1,
58    justifyContent: 'center',
59    alignItems: 'center',
60    gap: 20,
61    padding: 20,
62  },
63  heading: {
64    fontSize: 16,
65    fontWeight: 'bold',
66  },
67  sectionContainer: {
68    alignItems: 'center',
69    gap: 5,
70  },
71  image: {
72    width: 200,
73    aspectRatio: 1,
74    borderRadius: 10,
75  },
76  buttonStyle: {
77    width: 120,
78    height: 50,
79  },
80  textResult: {
81    backgroundColor: 'white',
82    padding: 10,
83    borderWidth: 1,
84    borderColor: 'black',
85  },
86});
87