react-native-rn-story-editor

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

npm install react-native-rn-story-editor

Usage

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 |

Events

onExportImage

Emitted when user selects "Send to Database" in the export dialog.

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

npm test

Manual Testing

# Test on Android
npm run example:android

# Test on iOS
npm run example:ios

# Test different React Native versions
cd example
npm install [email protected]
npm install [email protected]

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, 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

• Development workflow
• Sending a pull request
• Code of conduct

License

MIT

Made with create-react-native-library