feat: updated example tsx

killi8n · Nov 4, 2020 · 928320e · 928320e
1 parent 9b2995c
commit 928320e
Showing 1 changed file with 30 additions and 8 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StyleSheet, Button, SafeAreaView, Image } from 'react-native';
+import { StyleSheet, Button, SafeAreaView, Image, Text } from 'react-native';
 import ImageSelector, {
   ImageSelectorCallbackResponse,
 } from 'react-native-image-selector';
@@ -17,7 +17,6 @@ export default function App() {
             console.log(error);
             return;
           }
-          console.log(response);
           setResponse(response);
         }
       );
@@ -30,12 +29,26 @@ export default function App() {
     <SafeAreaView style={styles.container}>
       <Button title="GET USER PHOTOS" onPress={handlePhotos} />
       {response !== null && (
-        <Image
-          style={{ width: 150, height: 150 }}
-          source={{
-            uri: response.uri,
-          }}
-        />
+        <>
+          <Text style={styles.textStyle}>Base64 Image</Text>
+          <Image
+            style={styles.imageStyle}
+            source={{
+              uri: `data:image/png;base64,${response.data}`,
+            }}
+          />
+          <Text style={styles.textStyle}>URI Image</Text>
+          <Image
+            style={styles.imageStyle}
+            source={{
+              uri: response.uri,
+            }}
+          />
+          <Text style={styles.textStyle}>path: {response.path}</Text>
+          <Text style={styles.textStyle}>fileName: {response.fileName}</Text>
+          <Text style={styles.textStyle}>fileSize: {response.fileSize}</Text>
+          <Text style={styles.textStyle}>fileType: {response.type}</Text>
+        </>
       )}
     </SafeAreaView>
   );
@@ -47,4 +60,13 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  textStyle: {
+    marginTop: 15,
+  },
+  imageStyle: {
+    width: 150,
+    height: 150,
+    borderWidth: 1,
+    borderColor: '#ababab',
+  },
 });