react-native-rn-story-editor 0.1.0 → 0.2.0

package/README.md

@@ -1,30 +1,125 @@
 # react-native-rn-story-editor
 
-This is library for the Editing tools 
+[![npm version](https://img.shields.io/npm/v/react-native-rn-story-editor.svg)](https://www.npmjs.com/package/react-native-rn-story-editor)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Platform - Android](https://img.shields.io/badge/platform-Android-green.svg)](https://www.android.com)
+[![Platform - iOS](https://img.shields.io/badge/platform-iOS-blue.svg)](https://www.apple.com)
+
+A powerful React Native story editor with layer management, drag-and-drop, text/image overlays, and export functionality. Built with React Native Fabric architecture for optimal performance.
+
+## Features
+
+- **Layer Management** - Add, edit, and delete text and image layers
+- **Drag & Drop** - Move layers around with touch gestures
+- **Base Image Support** - Set background images from base64
+- **Text Layers** - Add styled text with shadows and positioning
+- **Image Overlays** - Add overlay images with automatic scaling
+- **Touch Interactions** - Tap to edit/delete, drag to move
+- **Export Options** - Save to gallery or emit base64 to JavaScript
+- **Fabric Architecture** - Built with React Native's new rendering system
+- **Cross-Platform** - Works on both Android and iOS
+- **TypeScript Support** - Full type safety and IntelliSense
 
 ## Installation
 
-```sh
+```bash
 npm install react-native-rn-story-editor
 ```
 
 ## Usage
 
-```js
-import { StoryEditorView, StoryEditorCommands } from "react-native-rn-story-editor";
+```jsx
+import { useRef, useEffect } from 'react';
+import { View, StyleSheet, DeviceEventEmitter } from 'react-native';
+import { StoryEditorView, StoryEditorCommands } from 'react-native-rn-story-editor';
+
+export default function App() {
+  const editorRef = useRef(null);
+
+  useEffect(() => {
+    // Listen for export events
+    const subscription = DeviceEventEmitter.addListener('onExportImage', (event) => {
+      console.log('Exported image base64:', event.image);
+    });
+    return () => subscription.remove();
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <StoryEditorView 
+        ref={editorRef}
+        colorString="#32a852"
+        baseImage="data:image/png;base64,iVBORw0KGgo..."
+        style={styles.editor}
+      />
+      
+      {/* Export to gallery or get base64 */}
+      <Button 
+        title="Export Image" 
+        onPress={() => StoryEditorCommands.exportImage(editorRef.current)} 
+      />
+      
+      {/* Show text input dialog */}
+      <Button 
+        title="Add Text" 
+        onPress={() => StoryEditorCommands.showTextInput(editorRef.current)} 
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  editor: { width: 300, height: 400 }
+});
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|----------|-------------|
+| `color` | `number` | `Color.TRANSPARENT` | Numeric color value (e.g., `0xFF32a852`) |
+| `colorString` | `string` | `undefined` | Hex color string (e.g., `"#32a852"`) |
+| `baseImage` | `string` | `undefined` | Base64 encoded background image (supports data URI format) |
+| `addText` | `string` | `undefined` | Add text layer programmatically |
+| `addImage` | `string` | `undefined` | Add overlay image from base64 (supports data URI format) |
+| `style` | `ViewStyle` | `undefined` | React Native style object |
+
+## Commands
+
+| Command | Parameters | Description |
+|---------|------------|-------------|
+| `exportImage` | `(ref: React.Ref)` | Shows export dialog with gallery save and database options |
+| `showTextInput` | `(ref: React.Ref)` | Shows native text input dialog to add text layer |
 
-// Use the component with numeric color
-<StoryEditorView color={0xFF32a852} style={styles.box} />
+## Events
 
-// Or use the component with hex string color
-<StoryEditorView colorString="#32a852" style={styles.box} />
+### onExportImage
 
-// Use commands when needed
-const ref = useRef(null);
-StoryEditorCommands.exportImage(ref);
-StoryEditorCommands.showTextInput(ref);
+Emitted when user selects "Send to Database" in the export dialog.
+
+```javascript
+DeviceEventEmitter.addListener('onExportImage', (event) => {
+  // event.image contains the base64 string
+  console.log(event.image);
+});
 ```
 
+## Touch Interactions
+
+- **Drag**: Touch and hold to drag text/image layers around
+- **Tap Text**: Quick tap to open edit/delete dialog
+- **Tap Image**: Quick tap to open delete options
+- **Stacking**: Layers stack in order added, last added is on top
+
+## Export Options
+
+When `exportImage` is called, users see a dialog with:
+
+- **Download to Gallery**: Saves the composed image to device photos
+- **Send to Database**: Emits `onExportImage` event with base64 data
+- **Cancel**: Dismiss the dialog
+
 ## Testing
 
 ### Unit Tests
@@ -47,20 +142,29 @@ npm install react-native@0.73
 ```
 
 ### Cross-Platform Verification
-- ✅ Android: Tested on API 24+ (emulators/devices)
-- ✅ iOS: Test on iOS 12+ (simulators/devices) 
-- ✅ React Native: Test with multiple versions
-- ✅ TypeScript: All types compile correctly
-- ✅ Props: Color, style, and other props work
-- ✅ Commands: exportImage and showTextInput functions
-
-### Before Publishing Checklist
-- [ ] All tests pass
-- [ ] Manual testing on Android/iOS
-- [ ] TypeScript builds without errors
-- [ ] Example app runs successfully
-- [ ] Documentation is up to date
-- [ ] Version is incremented
+- Android: Tested on API 24+ (emulators/devices)
+- iOS: Test on iOS 12+ (simulators/devices) 
+- React Native: Test with multiple versions
+- TypeScript: All types compile correctly
+- Props: Color, style, baseImage, addText, addImage
+- Commands: exportImage and showTextInput functions
+- Events: onExportImage event emission
+
+## Version History
+
+### 0.2.0
+- Added layer management (text and image layers)
+- Added drag-and-drop functionality
+- Added base64 image support for backgrounds and overlays
+- Added export functionality (gallery save + base64 emission)
+- Added touch interactions (tap to edit, drag to move)
+- Fixed base64 data URI parsing
+- Improved event system for JavaScript communication
+
+### 0.1.0
+- Initial release
+- Basic view component with color support
+- Native commands structure
 
 ## Contributing
 

package/android/src/main/java/com/rnstoryeditor/RnStoryEditorEventEmitter.kt

@@ -0,0 +1,32 @@
+package com.rnstoryeditor
+
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReactContextBaseJavaModule
+import com.facebook.react.bridge.ReactMethod
+import com.facebook.react.modules.core.DeviceEventManagerModule
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+
+class RnStoryEditorEventEmitter(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {
+
+    override fun getName(): String {
+        return "RnStoryEditorEventEmitter"
+    }
+
+    companion object {
+        private var reactAppContext: ReactApplicationContext? = null
+
+        fun setReactContext(context: ReactApplicationContext) {
+            reactAppContext = context
+        }
+
+        fun emitEvent(eventName: String, base64: String) {
+            val params = Arguments.createMap()
+            params.putString("image", base64)
+            reactAppContext?.let { ctx ->
+                ctx.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
+                    .emit(eventName, params)
+            }
+        }
+    }
+}

package/android/src/main/java/com/rnstoryeditor/RnStoryEditorPackage.kt

@@ -8,9 +8,15 @@ import com.facebook.react.uimanager.ViewManager
 
 class RnStoryEditorViewPackage : BaseReactPackage() {
   override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+    RnStoryEditorEventEmitter.setReactContext(reactContext)
     return listOf(RnStoryEditorViewManager())
   }
 
+  override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
+    RnStoryEditorEventEmitter.setReactContext(reactContext)
+    return listOf(RnStoryEditorEventEmitter(reactContext))
+  }
+
   override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? = null
 
   override fun getReactModuleInfoProvider() = ReactModuleInfoProvider { emptyMap() }

package/android/src/main/java/com/rnstoryeditor/RnStoryEditorView.kt

@@ -1,15 +1,383 @@
 package com.rnstoryeditor
 
 import android.content.Context
+import android.graphics.*
 import android.util.AttributeSet
+import android.view.MotionEvent
 import android.view.View
+import android.app.AlertDialog
+import android.widget.EditText
+import android.widget.ImageView
+import android.util.Log
+import android.widget.ScrollView
+import android.widget.TextView
+import android.os.Environment
+import android.content.ContentValues
+import android.provider.MediaStore
+import android.net.Uri
+import android.os.Build
+import androidx.core.content.FileProvider
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.modules.core.DeviceEventManagerModule
+import android.util.Base64
+import java.io.ByteArrayOutputStream
+import java.io.File
+import java.io.FileOutputStream
+import java.io.OutputStream
+import java.text.SimpleDateFormat
+import java.util.Date
+import java.util.Locale
 
-class RnStoryEditorView : View {
-  constructor(context: Context?) : super(context)
-  constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)
-  constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(
-    context,
-    attrs,
-    defStyleAttr
-  )
+sealed class Layer {
+    data class TextLayer(var text: String, var x: Float, var y: Float, var paint: Paint) : Layer()
+    data class ImageLayer(var bitmap: Bitmap, var x: Float, var y: Float, var width: Float, var height: Float) : Layer()
+}
+
+class RnStoryEditorView(context: Context, attrs: AttributeSet? = null) : View(context, attrs) {
+
+    private var baseBitmap: Bitmap? = null
+    private val layers = mutableListOf<Layer>()
+    private var selectedLayer: Layer? = null
+    private var lastTouchX = 0f
+    private var lastTouchY = 0f
+    private var touchStartTime = 0L
+    private var isDragging = false
+
+    fun setBaseImage(bitmap: Bitmap) {
+        baseBitmap = bitmap
+        invalidate()
+    }
+
+    fun addText(text: String) {
+        val paint = Paint()
+        paint.color = Color.WHITE
+        paint.textSize = 48f
+        paint.isAntiAlias = true
+        paint.setShadowLayer(8f, 2f, 2f, Color.BLACK)
+        paint.style = Paint.Style.FILL
+        paint.textAlign = Paint.Align.CENTER
+        
+        // Position text in center of canvas
+        val x = width / 2f
+        val y = height / 2f + (layers.size * 60f) // Stack texts vertically from center
+        
+        layers.add(Layer.TextLayer(text, x, y, paint))
+        invalidate()
+    }
+
+    fun addImage(base64: String) {
+        base64?.let {
+            val bytes = Base64.decode(it, Base64.DEFAULT)
+            val bitmap = BitmapFactory.decodeByteArray(bytes, 0, bytes.size)
+            
+            // Scale image to reasonable size (max 200dp width)
+            val maxWidth = 200f * resources.displayMetrics.density
+            val scale = maxWidth / bitmap.width
+            val scaledWidth = bitmap.width * scale
+            val scaledHeight = bitmap.height * scale
+            
+            val scaledBitmap = Bitmap.createScaledBitmap(bitmap, scaledWidth.toInt(), scaledHeight.toInt(), true)
+            
+            // Position image in center
+            val x = (width - scaledWidth) / 2f
+            val y = (height - scaledHeight) / 2f
+            
+            layers.add(Layer.ImageLayer(scaledBitmap, x, y, scaledWidth, scaledHeight))
+            invalidate()
+        }
+    }
+
+    fun showTextInputDialog() {
+        Log.d("RnStoryEditorView", "showTextInputDialog called")
+        val editText = EditText(context)
+        editText.hint = "Enter text here"
+        
+        AlertDialog.Builder(context)
+            .setTitle("Add Text Layer")
+            .setView(editText)
+            .setPositiveButton("Add") { dialog, _ ->
+                val inputText = editText.text.toString()
+                Log.d("RnStoryEditorView", "Input text: $inputText")
+                if (inputText.isNotEmpty()) {
+                    addText(inputText)
+                }
+                dialog.dismiss()
+            }
+            .setNegativeButton("Cancel") { dialog, _ ->
+                dialog.dismiss()
+            }
+            .show()
+    }
+
+    fun showImageOptionsDialog(imageLayer: Layer.ImageLayer) {
+        Log.d("RnStoryEditorView", "showImageOptionsDialog called")
+        
+        AlertDialog.Builder(context)
+            .setTitle("Image Options")
+            .setItems(arrayOf("Delete Image")) { dialog, which ->
+                when (which) {
+                    0 -> {
+                        layers.remove(imageLayer)
+                        invalidate()
+                    }
+                }
+                dialog.dismiss()
+            }
+            .setNegativeButton("Cancel") { dialog, _ ->
+                dialog.dismiss()
+            }
+            .show()
+    }
+
+    fun showEditTextDialog(textLayer: Layer.TextLayer) {
+        Log.d("RnStoryEditorView", "showEditTextDialog called for: ${textLayer.text}")
+        val editText = EditText(context)
+        editText.setText(textLayer.text)
+        editText.hint = "Enter text here"
+        
+        AlertDialog.Builder(context)
+            .setTitle("Edit Text Layer")
+            .setView(editText)
+            .setPositiveButton("Update") { dialog, _ ->
+                val inputText = editText.text.toString()
+                Log.d("RnStoryEditorView", "Updated text: $inputText")
+                if (inputText.isNotEmpty()) {
+                    textLayer.text = inputText
+                    invalidate()
+                }
+                dialog.dismiss()
+            }
+            .setNegativeButton("Cancel") { dialog, _ ->
+                dialog.dismiss()
+            }
+            .setNeutralButton("Delete") { dialog, _ ->
+                layers.remove(textLayer)
+                invalidate()
+                dialog.dismiss()
+            }
+            .show()
+    }
+
+    override fun onDraw(canvas: Canvas) {
+        super.onDraw(canvas)
+        baseBitmap?.let {
+            canvas.drawBitmap(it, null, Rect(0, 0, width, height), null)
+        }
+
+        layers.forEach { layer ->
+            when (layer) {
+                is Layer.TextLayer -> {
+                    canvas.drawText(layer.text, layer.x, layer.y, layer.paint)
+                }
+                is Layer.ImageLayer -> {
+                    canvas.drawBitmap(layer.bitmap, layer.x, layer.y, null)
+                }
+            }
+        }
+    }
+
+    override fun onTouchEvent(event: MotionEvent): Boolean {
+        when (event.action) {
+            MotionEvent.ACTION_DOWN -> {
+                touchStartTime = System.currentTimeMillis()
+                lastTouchX = event.x
+                lastTouchY = event.y
+                isDragging = false
+                
+                // Check if touch is on a layer (text or image)
+                selectedLayer = null
+                for (layer in layers.reversed()) { // Check from top to bottom
+                    when (layer) {
+                        is Layer.TextLayer -> {
+                            val textBounds = Rect()
+                            layer.paint.getTextBounds(layer.text, 0, layer.text.length, textBounds)
+                            
+                            // Calculate text bounds with center alignment
+                            val textLeft = layer.x - textBounds.width() / 2
+                            val textRight = layer.x + textBounds.width() / 2
+                            val textTop = layer.y - textBounds.height()
+                            val textBottom = layer.y
+                            
+                            if (event.x >= textLeft && event.x <= textRight &&
+                                event.y >= textTop && event.y <= textBottom) {
+                                selectedLayer = layer
+                                return true
+                            }
+                        }
+                        is Layer.ImageLayer -> {
+                            // Check if touch is within image bounds
+                            if (event.x >= layer.x && event.x <= layer.x + layer.width &&
+                                event.y >= layer.y && event.y <= layer.y + layer.height) {
+                                selectedLayer = layer
+                                return true
+                            }
+                        }
+                    }
+                }
+            }
+            MotionEvent.ACTION_MOVE -> {
+                if (!isDragging && selectedLayer != null) {
+                    val touchDuration = System.currentTimeMillis() - touchStartTime
+                    if (touchDuration > 100) { // Start dragging after 100ms
+                        isDragging = true
+                    }
+                }
+                
+                if (isDragging && selectedLayer != null) {
+                    val dx = event.x - lastTouchX
+                    val dy = event.y - lastTouchY
+                    
+                    val currentLayer = selectedLayer
+                    when (currentLayer) {
+                        is Layer.TextLayer -> {
+                            currentLayer.x += dx
+                            currentLayer.y += dy
+                        }
+                        is Layer.ImageLayer -> {
+                            currentLayer.x += dx
+                            currentLayer.y += dy
+                        }
+                        null -> { /* Handle null case */ }
+                    }
+                    invalidate()
+                    lastTouchX = event.x
+                    lastTouchY = event.y
+                }
+            }
+            MotionEvent.ACTION_UP -> {
+                val touchDuration = System.currentTimeMillis() - touchStartTime
+                val currentLayer = selectedLayer
+                if (!isDragging && currentLayer is Layer.TextLayer && touchDuration < 500) {
+                    // Quick tap on text - show edit dialog
+                    showEditTextDialog(currentLayer)
+                } else if (!isDragging && currentLayer is Layer.ImageLayer && touchDuration < 500) {
+                    // Quick tap on image - show options dialog
+                    showImageOptionsDialog(currentLayer)
+                }
+                isDragging = false
+            }
+        }
+        return true
+    }
+
+    fun saveImageToGallery(bitmap: Bitmap): Boolean {
+        return try {
+            val timestamp = SimpleDateFormat("yyyyMMdd_HHmmss", Locale.getDefault()).format(Date())
+            val filename = "StoryEditor_$timestamp.png"
+            
+            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+                // Android 10+ use MediaStore
+                val resolver = context.contentResolver
+                val contentValues = ContentValues().apply {
+                    put(MediaStore.MediaColumns.DISPLAY_NAME, filename)
+                    put(MediaStore.MediaColumns.MIME_TYPE, "image/png")
+                    put(MediaStore.MediaColumns.RELATIVE_PATH, Environment.DIRECTORY_PICTURES + "/StoryEditor")
+                }
+                
+                val uri = resolver.insert(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, contentValues)
+                uri?.let {
+                    val outputStream: OutputStream? = resolver.openOutputStream(it)
+                    outputStream?.use { stream ->
+                        bitmap.compress(Bitmap.CompressFormat.PNG, 100, stream)
+                    }
+                }
+            } else {
+                // Android 9 and below use File
+                val directory = File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES), "StoryEditor")
+                if (!directory.exists()) {
+                    directory.mkdirs()
+                }
+                
+                val imageFile = File(directory, filename)
+                val outputStream = FileOutputStream(imageFile)
+                outputStream.use { stream ->
+                    bitmap.compress(Bitmap.CompressFormat.PNG, 100, stream)
+                }
+                
+                // Add to gallery
+                val contentValues = ContentValues().apply {
+                    put(MediaStore.Images.Media.DATA, imageFile.absolutePath)
+                    put(MediaStore.Images.Media.MIME_TYPE, "image/png")
+                }
+                context.contentResolver.insert(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, contentValues)
+            }
+            
+            Log.d("RnStoryEditorView", "Image saved to gallery: $filename")
+            true
+        } catch (e: Exception) {
+            Log.e("RnStoryEditorView", "Error saving image: ${e.message}")
+            false
+        }
+    }
+
+    // Merge layers and send base64 back to JS
+    fun exportAndSendBase64() {
+        val bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
+        val canvas = Canvas(bitmap)
+        draw(canvas)
+
+        val outputStream = ByteArrayOutputStream()
+        bitmap.compress(Bitmap.CompressFormat.PNG, 100, outputStream)
+        val byteArray = outputStream.toByteArray()
+        val base64 = Base64.encodeToString(byteArray, Base64.NO_WRAP)
+
+        // Show export dialog with download and database options
+        showExportPreviewDialog(bitmap, base64)
+    }
+
+    fun showExportPreviewDialog(bitmap: Bitmap, base64: String) {
+        val imageView = ImageView(context)
+        imageView.setImageBitmap(bitmap)
+        imageView.setPadding(20, 20, 20, 20)
+        
+        val infoText = TextView(context)
+        val sizeKB = base64.length / 1024
+        val sizeMB = sizeKB / 1024.0
+        val imageCount = layers.count { it is Layer.ImageLayer }
+        val textCount = layers.count { it is Layer.TextLayer }
+        infoText.text = """
+            Export Information:
+            • Image Size: ${bitmap.width} x ${bitmap.height}px
+            • File Size: ${sizeKB} KB (${String.format("%.2f", sizeMB)} MB)
+            • Base64 Length: ${base64.length} characters
+            • Format: PNG with Base64 encoding
+            • Image Layers: $imageCount
+            • Text Layers: $textCount
+            • Total Layers: ${layers.size}
+            
+            Choose export option below.
+        """.trimIndent()
+        infoText.setPadding(20, 10, 20, 20)
+        infoText.textSize = 14f
+        
+        val scrollView = ScrollView(context)
+        val layout = android.widget.LinearLayout(context)
+        layout.orientation = android.widget.LinearLayout.VERTICAL
+        layout.addView(imageView)
+        layout.addView(infoText)
+        scrollView.addView(layout)
+        
+        AlertDialog.Builder(context)
+            .setTitle("Export Options")
+            .setView(scrollView)
+            .setPositiveButton("Download to Gallery") { dialog, _ ->
+                val success = saveImageToGallery(bitmap)
+                if (success) {
+                    android.widget.Toast.makeText(context, "Image saved to gallery!", android.widget.Toast.LENGTH_SHORT).show()
+                } else {
+                    android.widget.Toast.makeText(context, "Failed to save image", android.widget.Toast.LENGTH_SHORT).show()
+                }
+                dialog.dismiss()
+            }
+            .setNeutralButton("Send to Database") { dialog, _ ->
+                // Send event to JS with base64
+                RnStoryEditorEventEmitter.emitEvent("onExportImage", base64)
+                dialog.dismiss()
+            }
+            .setNegativeButton("Cancel") { dialog, _ ->
+                dialog.dismiss()
+            }
+            .show()
+    }
 }

package/android/src/main/java/com/rnstoryeditor/RnStoryEditorViewManager.kt

@@ -8,7 +8,7 @@ import com.facebook.react.uimanager.ViewManagerDelegate
 import com.facebook.react.uimanager.annotations.ReactProp
 import com.facebook.react.viewmanagers.RnStoryEditorViewManagerInterface
 import com.facebook.react.viewmanagers.RnStoryEditorViewManagerDelegate
-import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.bridge.ReadableArray
 
 @ReactModule(name = RnStoryEditorViewManager.NAME)
 class RnStoryEditorViewManager : SimpleViewManager<RnStoryEditorView>(),
@@ -51,6 +51,48 @@ class RnStoryEditorViewManager : SimpleViewManager<RnStoryEditorView>(),
     view?.setBackgroundColor(androidColor)
   }
 
+  private fun cleanBase64(base64: String): String {
+    return when {
+      base64.contains(",") -> base64.substringAfter(",")
+      else -> base64
+    }
+  }
+
+  @ReactProp(name = "baseImage")
+  override fun setBaseImage(view: RnStoryEditorView, base64: String?) {
+    base64?.let {
+      val cleanData = cleanBase64(it)
+      val bytes = android.util.Base64.decode(cleanData, android.util.Base64.DEFAULT)
+      val bitmap = android.graphics.BitmapFactory.decodeByteArray(bytes, 0, bytes.size)
+      view.setBaseImage(bitmap)
+    }
+  }
+
+  @ReactProp(name = "addText")
+  override fun setAddText(view: RnStoryEditorView, text: String?) {
+    text?.let { view.addText(it) }
+  }
+
+  @ReactProp(name = "addImage")
+  override fun setAddImage(view: RnStoryEditorView, base64: String?) {
+    base64?.let { 
+      val cleanData = cleanBase64(it)
+      view.addImage(cleanData) 
+    }
+  }
+
+  // Command to export image
+  override fun getCommandsMap(): MutableMap<String, Int> {
+    return mutableMapOf("exportImage" to 1, "showTextInput" to 2)
+  }
+
+  override fun receiveCommand(view: RnStoryEditorView, commandId: Int, args: ReadableArray?) {
+    when (commandId) {
+      1 -> view.exportAndSendBase64()
+      2 -> view.showTextInputDialog()
+    }
+  }
+
   companion object {
     const val NAME = "RnStoryEditorView"
   }

package/lib/module/RnStoryEditorViewNativeComponent.ts

@@ -7,6 +7,9 @@ import {
 interface NativeProps extends ViewProps {
   color?: ColorValue;
   colorString?: string;
+  baseImage?: string;
+  addText?: string;
+  addImage?: string;
 }
 
 export default codegenNativeComponent<NativeProps>('RnStoryEditorView');

package/lib/module/index.js

@@ -7,7 +7,7 @@ const COMPONENT_NAME = 'RnStoryEditorView';
 
 export const StoryEditorView = requireNativeComponent(COMPONENT_NAME);
 
-// Commands
+// Enhanced Commands with additional functionality
 export const StoryEditorCommands = {
   exportImage: ref => {
     const viewManagerConfig = UIManager.getViewManagerConfig(COMPONENT_NAME);
@@ -28,4 +28,12 @@ export const StoryEditorCommands = {
     }
   }
 };
+
+// Event listener for export results
+export const addExportImageListener = _callback => {
+  // This would be implemented with proper event handling
+  console.warn('Event listener not yet implemented. Use native export dialog instead.');
+};
+
+// Export types for TypeScript users
 //# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["requireNativeComponent","UIManager","findNodeHandle","COMPONENT_NAME","StoryEditorView","StoryEditorCommands","exportImage","ref","viewManagerConfig","getViewManagerConfig","Commands","nodeHandle","dispatchViewManagerCommand","showTextInput"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA,SAASA,sBAAsB,EAAEC,SAAS,EAAEC,cAAc,QAAQ,cAAc;AAGhF,MAAMC,cAAc,GAAG,mBAAmB;;AAE1C;;AAUA,OAAO,MAAMC,eAAe,GAAGJ,sBAAsB,CAAcG,cAAc,CAAC;;AAElF;AACA,OAAO,MAAME,mBAAmB,GAAG;EACjCC,WAAW,EAAGC,GAAQ,IAAK;IACzB,MAAMC,iBAAiB,GAAGP,SAAS,CAACQ,oBAAoB,CAACN,cAAc,CAA6B;IACpG,IAAIK,iBAAiB,EAAEE,QAAQ,EAAEJ,WAAW,EAAE;MAC5C,MAAMK,UAAU,GAAGT,cAAc,CAACK,GAAG,CAAC;MACtC,IAAII,UAAU,IAAI,IAAI,EAAE;QACtBV,SAAS,CAACW,0BAA0B,CAClCD,UAAU,EACVH,iBAAiB,CAACE,QAAQ,CAACJ,WAAW,EACtC,EACF,CAAC;MACH;IACF;EACF,CAAC;EAEDO,aAAa,EAAGN,GAAQ,IAAK;IAC3B,MAAMC,iBAAiB,GAAGP,SAAS,CAACQ,oBAAoB,CAACN,cAAc,CAA6B;IACpG,IAAIK,iBAAiB,EAAEE,QAAQ,EAAEG,aAAa,EAAE;MAC9C,MAAMF,UAAU,GAAGT,cAAc,CAACK,GAAG,CAAC;MACtC,IAAII,UAAU,IAAI,IAAI,EAAE;QACtBV,SAAS,CAACW,0BAA0B,CAClCD,UAAU,EACVH,iBAAiB,CAACE,QAAQ,CAACG,aAAa,EACxC,EACF,CAAC;MACH;IACF;EACF;AACF,CAAC","ignoreList":[]}
+{"version":3,"names":["requireNativeComponent","UIManager","findNodeHandle","COMPONENT_NAME","StoryEditorView","StoryEditorCommands","exportImage","ref","viewManagerConfig","getViewManagerConfig","Commands","nodeHandle","dispatchViewManagerCommand","showTextInput","addExportImageListener","_callback","console","warn"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA,SAASA,sBAAsB,EAAEC,SAAS,EAAEC,cAAc,QAAQ,cAAc;AAGhF,MAAMC,cAAc,GAAG,mBAAmB;;AAE1C;;AAUA,OAAO,MAAMC,eAAe,GAAGJ,sBAAsB,CAAcG,cAAc,CAAC;;AAElF;AACA,OAAO,MAAME,mBAAmB,GAAG;EACjCC,WAAW,EAAGC,GAAQ,IAAK;IACzB,MAAMC,iBAAiB,GAAGP,SAAS,CAACQ,oBAAoB,CAACN,cAAc,CAA6B;IACpG,IAAIK,iBAAiB,EAAEE,QAAQ,EAAEJ,WAAW,EAAE;MAC5C,MAAMK,UAAU,GAAGT,cAAc,CAACK,GAAG,CAAC;MACtC,IAAII,UAAU,IAAI,IAAI,EAAE;QACtBV,SAAS,CAACW,0BAA0B,CAClCD,UAAU,EACVH,iBAAiB,CAACE,QAAQ,CAACJ,WAAW,EACtC,EACF,CAAC;MACH;IACF;EACF,CAAC;EAEDO,aAAa,EAAGN,GAAQ,IAAK;IAC3B,MAAMC,iBAAiB,GAAGP,SAAS,CAACQ,oBAAoB,CAACN,cAAc,CAA6B;IACpG,IAAIK,iBAAiB,EAAEE,QAAQ,EAAEG,aAAa,EAAE;MAC9C,MAAMF,UAAU,GAAGT,cAAc,CAACK,GAAG,CAAC;MACtC,IAAII,UAAU,IAAI,IAAI,EAAE;QACtBV,SAAS,CAACW,0BAA0B,CAClCD,UAAU,EACVH,iBAAiB,CAACE,QAAQ,CAACG,aAAa,EACxC,EACF,CAAC;MACH;IACF;EACF;AACF,CAAC;;AAED;AACA,OAAO,MAAMC,sBAAsB,GAAIC,SAAmC,IAAK;EAC7E;EACAC,OAAO,CAACC,IAAI,CAAC,uEAAuE,CAAC;AACvF,CAAC;;AAED","ignoreList":[]}

package/lib/typescript/src/RnStoryEditorViewNativeComponent.d.ts

@@ -2,6 +2,9 @@ import { type ColorValue, type ViewProps } from 'react-native';
 interface NativeProps extends ViewProps {
     color?: ColorValue;
     colorString?: string;
+    baseImage?: string;
+    addText?: string;
+    addImage?: string;
 }
 declare const _default: import("react-native/types_generated/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;
 export default _default;

package/lib/typescript/src/RnStoryEditorViewNativeComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RnStoryEditorViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/RnStoryEditorViewNativeComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,UAAU,WAAY,SAAQ,SAAS;IACrC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;;AAED,wBAAwE;AAGxE,YAAY,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"RnStoryEditorViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/RnStoryEditorViewNativeComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,UAAU,WAAY,SAAQ,SAAS;IACrC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;;AAED,wBAAwE;AAGxE,YAAY,EAAE,WAAW,EAAE,CAAC"}

package/lib/typescript/src/index.d.ts

@@ -4,4 +4,6 @@ export declare const StoryEditorCommands: {
     exportImage: (ref: any) => void;
     showTextInput: (ref: any) => void;
 };
+export declare const addExportImageListener: (_callback: (base64: string) => void) => void;
+export type { NativeProps };
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AActE,eAAO,MAAM,eAAe,mDAAsD,CAAC;AAGnF,eAAO,MAAM,mBAAmB;uBACX,GAAG;yBAcD,GAAG;CAazB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AActE,eAAO,MAAM,eAAe,mDAAsD,CAAC;AAGnF,eAAO,MAAM,mBAAmB;uBACX,GAAG;yBAcD,GAAG;CAazB,CAAC;AAGF,eAAO,MAAM,sBAAsB,GAAI,WAAW,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,SAGzE,CAAC;AAGF,YAAY,EAAE,WAAW,EAAE,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-rn-story-editor",
-  "version": "0.1.0",
-  "description": "This is library for the Editing tools ",
+  "version": "0.2.0",
+  "description": "A React Native story editor with layers, drag-drop, text/image overlays, and export functionality",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
   "exports": {
@@ -33,8 +33,6 @@
   ],
   "scripts": {
     "example": "yarn workspace react-native-rn-story-editor-example",
-    "example:android": "cd example && npx react-native run-android",
-    "example:ios": "cd example && npx react-native run-ios",
     "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
     "prepare": "bob build",
     "typecheck": "tsc",
@@ -45,7 +43,12 @@
   "keywords": [
     "react-native",
     "ios",
-    "android"
+    "android",
+    "story-editor",
+    "editing-tools",
+    "native-components",
+    "fabric",
+    "typescript"
   ],
   "repository": {
     "type": "git",
@@ -69,7 +72,6 @@
     "@react-native/babel-preset": "0.83.0",
     "@react-native/eslint-config": "0.83.0",
     "@release-it/conventional-changelog": "^10.0.1",
-    "@testing-library/jest-native": "^5.4.3",
     "@testing-library/react-native": "^13.3.3",
     "@types/jest": "^29.5.14",
     "@types/react": "^19.2.0",

package/src/RnStoryEditorViewNativeComponent.ts

@@ -7,6 +7,9 @@ import {
 interface NativeProps extends ViewProps {
   color?: ColorValue;
   colorString?: string;
+  baseImage?: string;
+  addText?: string;
+  addImage?: string;
 }
 
 export default codegenNativeComponent<NativeProps>('RnStoryEditorView');

package/src/index.ts

@@ -15,7 +15,7 @@ interface ViewManagerConfig {
 
 export const StoryEditorView = requireNativeComponent<NativeProps>(COMPONENT_NAME);
 
-// Commands
+// Enhanced Commands with additional functionality
 export const StoryEditorCommands = {
   exportImage: (ref: any) => {
     const viewManagerConfig = UIManager.getViewManagerConfig(COMPONENT_NAME) as ViewManagerConfig | null;
@@ -44,4 +44,13 @@ export const StoryEditorCommands = {
       }
     }
   },
-};
+};
+
+// Event listener for export results
+export const addExportImageListener = (_callback: (base64: string) => void) => {
+  // This would be implemented with proper event handling
+  console.warn('Event listener not yet implemented. Use native export dialog instead.');
+};
+
+// Export types for TypeScript users
+export type { NativeProps };