feat: format base64 data from the api

mym0404 · May 4, 2024 · 39cebba · 39cebba
1 parent 138abbc
commit 39cebba
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 20 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -44,20 +44,22 @@ export default function App() {
           drawingPolicy={'anyinput'}
           backgroundColor={'#aaaaff22'}
         />
-        <Image
-          style={{
-            borderWidth: 1,
-            borderColor: '#2224',
-            borderRadius: 12,
-            position: 'absolute',
-            right: 0,
-            bottom: 0,
-            backgroundColor: 'white',
-            width: 160,
-            height: 160,
-          }}
-          source={{ uri: `data:image/png;base64,${imageBase64}` }}
-        />
+        {imageBase64 ? (
+          <Image
+            style={{
+              borderWidth: 1,
+              borderColor: '#2224',
+              borderRadius: 12,
+              position: 'absolute',
+              right: 0,
+              bottom: 0,
+              backgroundColor: 'white',
+              width: 160,
+              height: 160,
+            }}
+            source={{ uri: imageBase64 }}
+          />
+        ) : null}
       </View>
       <View
         style={{

diff --git a/src/component/PencilKit.ios.tsx b/src/component/PencilKit.ios.tsx
@@ -38,32 +38,36 @@ function PencilKitComponent(
       saveDrawing: async (path) => {
         const handle = findNodeHandle(nativeRef.current) ?? -1;
 
-        return await NativeRNPencilKitUtil.saveDrawing(handle, path);
+        return NativeRNPencilKitUtil.saveDrawing(handle, path);
       },
       loadDrawing: async (path) => {
         const handle = findNodeHandle(nativeRef.current) ?? -1;
 
-        return await NativeRNPencilKitUtil.loadDrawing(handle, path);
+        return NativeRNPencilKitUtil.loadDrawing(handle, path);
       },
       getBase64Data: async () => {
         const handle = findNodeHandle(nativeRef.current) ?? -1;
 
-        return await NativeRNPencilKitUtil.getBase64Data(handle);
+        return NativeRNPencilKitUtil.getBase64Data(handle);
       },
       getBase64PngData: async ({ scale = 0 } = { scale: 0 }) => {
         const handle = findNodeHandle(nativeRef.current) ?? -1;
 
-        return await NativeRNPencilKitUtil.getBase64PngData(handle, scale);
+        return NativeRNPencilKitUtil.getBase64PngData(handle, scale).then(
+          (d) => `data:image/png;base64,${d}`,
+        );
       },
       getBase64JpegData: async ({ scale = 0, compression = 0 } = { scale: 0, compression: 0 }) => {
         const handle = findNodeHandle(nativeRef.current) ?? -1;
 
-        return await NativeRNPencilKitUtil.getBase64JpegData(handle, scale, compression);
+        return NativeRNPencilKitUtil.getBase64JpegData(handle, scale, compression).then(
+          (d) => `data:image/jpeg;base64,${d}`,
+        );
       },
       loadBase64Data: async (base64) => {
         const handle = findNodeHandle(nativeRef.current) ?? -1;
 
-        return await NativeRNPencilKitUtil.loadBase64Data(handle, base64);
+        return NativeRNPencilKitUtil.loadBase64Data(handle, base64);
       },
       setTool: ({ color, toolType, width }) =>
         Commands.setTool(