paint_box_react_native 0.1.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2026 sinem.avci
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/PaintBoxReactNative.podspec

@@ -0,0 +1,20 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "PaintBoxReactNative"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => min_ios_version_supported }
+  s.source       = { :git => "https://github.com/sinemavci/paint_box_react_native.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift,cpp}"
+  s.private_header_files = "ios/**/*.h"
+
+  install_modules_dependencies(s)
+end

package/README.md

@@ -0,0 +1,161 @@
+# 🎨 paint_box_react_native
+
+<p align="center">
+  <img src="./assets/demo.gif" width="200" />
+</p>
+
+paint_box_react_native is a lightweight drawing component for React Native that allows users to draw on a canvas with customizable brush settings.
+
+## ⚙️ Installation
+```sh
+npm install paint_box_react_native
+```
+
+## 🚀 Usage
+```js
+import { PaintBoxRNView, PaintEditor } from 'paint_box_react_native';
+
+// ...
+
+<PaintBoxRNView
+  paintEditor={paintEditor1}
+  onPaintBoxReady={async () => {
+  paintEditor1.isEnable().then((val) => {
+    if (val) {
+        paintEditor1.getStrokeSize().then((size) => {
+          setStrokeWidth1(size);
+        });
+        paintEditor1.getPaintMode().then((mode) => {
+          setPaintMode1(mode);
+        });
+    }
+  });
+}}
+/>
+```
+
+
+## Api Reference
+
+#### 🧠 Core Concepts
+PaintEditor
+
+PaintEditor is the controller object used to interact with a specific PaintBoxRNView instance.
+
+Each PaintBoxRNView must have its own PaintEditor instance.
+
+#### ⚠️ Multiple PaintBox Support
+You can use multiple paint boxes independently:
+
+```js
+const paintEditor1 = new PaintEditor();
+const paintEditor2 = new PaintEditor();
+```
+
+```js
+<PaintBoxRNView paintEditor={paintEditor1} />
+<PaintBoxRNView paintEditor={paintEditor2} />
+```
+
+#### Undo
+Reverts the last drawing action.
+
+```js
+paintEditor.undo();
+```
+
+#### Redo
+Restores the last undone action.
+
+```js
+paintEditor.redo();
+```
+
+#### Reset
+Clears the entire canvas.
+
+```js
+paintEditor.reset();
+```
+
+#### Import
+| Param  | Type   | Required | Description     |
+| ------ | ------ | -------- | --------------- |
+| path   | string | ✅        | Image file path |
+| width  | number | ❌        | Target width    |
+| height | number | ❌        | Target height   |
+
+```js
+import(path: string, width?: number, height?: number): Promise<void>
+```
+
+#### Export
+```js
+export(path: string, fileName: string, mimeType: MimeType): Promise<string>
+```
+
+```js
+type MimeType = "jpeg" | "png" | "gif" | "tif" | "bmp" | "pdf";
+```
+
+| Param    | Type     | Required | Description                 |
+| -------- | -------- | -------- | --------------------------- |
+| path     | string   | ✅        | Output directory path       |
+| fileName | string   | ✅        | File name without extension |
+| mimeType | MimeType | ✅        | Output format               |
+
+
+#### Enable
+```js
+isEnable(): Promise<boolean>
+setEnable(value: boolean): void
+```
+
+
+#### 🎨 Paint Mode
+```js
+enum PaintMode {
+  PEN = "Pen",
+  MARKER = "Marker",
+  BUCKET = "Bucket",
+  BRUSH = "Brush",
+  ERASER = "Eraser"
+}
+```
+
+```js
+getPaintMode(): Promise<PaintMode>
+setPaintMode(mode: PaintMode): void
+```
+
+#### 🌈 Stroke Color
+```js
+getStrokeColor(): Promise<Color>
+setStrokeColor(color: Color): void
+```
+
+Color Definition
+
+```js
+class Color {
+  constructor(r: number, g: number, b: number)
+}
+```
+
+#### Stroke Size
+```js
+getStrokeSize(): Promise<number>
+setStrokeSize(size: number): void
+```
+
+## ⚙️ Component Props
+| Prop            | Type        | Required | Description                 |
+| --------------- | ----------- | -------- | --------------------------- |
+| paintEditor     | PaintEditor | ✅        | Controller instance         |
+| onPaintBoxReady | () => void  | ❌        | Called when canvas is ready |
+
+## Best Practices
+- Always create one PaintEditor per PaintBox
+- Wait for onPaintBoxReady before calling methods
+- Avoid very large stroke sizes (performance impact)
+

package/android/build.gradle

@@ -0,0 +1,70 @@
+buildscript {
+  ext.PaintBoxReactNative = [
+    kotlinVersion: "2.0.21",
+    minSdkVersion: 24,
+    compileSdkVersion: 36,
+    targetSdkVersion: 36
+  ]
+
+  ext.getExtOrDefault = { prop ->
+    if (rootProject.ext.has(prop)) {
+      return rootProject.ext.get(prop)
+    }
+
+    return PaintBoxReactNative[prop]
+  }
+
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:8.7.2"
+    // noinspection DifferentKotlinGradleVersion
+    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${getExtOrDefault('kotlinVersion')}"
+  }
+}
+
+
+apply plugin: "com.android.library"
+apply plugin: "kotlin-android"
+
+apply plugin: "com.facebook.react"
+
+android {
+  namespace "com.paintboxreactnative"
+
+  compileSdkVersion getExtOrDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrDefault("minSdkVersion")
+    targetSdkVersion getExtOrDefault("targetSdkVersion")
+  }
+
+  buildFeatures {
+    buildConfig true
+  }
+
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  lint {
+    disable "GradleCompatible"
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_1_8
+  }
+}
+
+dependencies {
+  implementation(project(":nativebox"))
+  implementation("com.google.code.gson:gson:2.13.2")
+  implementation "com.facebook.react:react-android"
+  implementation("io.github.beyka:Android-TiffBitmapFactory:0.9.9.1")
+}

package/android/gradle.properties

@@ -0,0 +1,45 @@
+# Project-wide Gradle settings.
+
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+# Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
+org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m
+
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. More details, visit
+# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
+# org.gradle.parallel=true
+
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app's APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
+android.useAndroidX=true
+
+# Use this property to specify which architecture you want to build.
+# You can also override it from the CLI using
+# ./gradlew <task> -PreactNativeArchitectures=x86_64
+reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
+
+# Use this property to enable support to the new architecture.
+# This will allow you to use TurboModules and the Fabric render in
+# your application. You should enable this flag either if you want
+# to write custom TurboModules/Fabric components OR use libraries that
+# are providing them.
+newArchEnabled=true
+
+# Use this property to enable or disable the Hermes JS engine.
+# If set to false, you will be using JSC instead.
+hermesEnabled=true
+
+# Use this property to enable edge-to-edge display support.
+# This allows your app to draw behind system bars for an immersive UI.
+# Note: Only works with ReactActivity and should not be used with custom Activity.
+edgeToEdgeEnabled=false
+NODE_BINARY=/Users/sinemavci/.nvm/versions/node/v20.19.0/bin/node

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+</manifest>

package/android/src/main/java/com/paintboxreactnative/NativeViewHandler.kt

@@ -0,0 +1,26 @@
+package com.paintboxreactnative
+
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.bridge.UiThreadUtil
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.UIManagerModule
+import com.facebook.react.uimanager.common.UIManagerType
+
+object NativeViewHandler {
+  fun resolve(
+    reactContext: ReactContext,
+    viewTag: Int,
+    callback: (view: PaintBoxNativeView) -> Unit
+  ) {
+    UiThreadUtil.runOnUiThread {
+
+      val uiManager = UIManagerHelper.getUIManager(
+        reactContext,
+        UIManagerType.FABRIC
+      )
+
+      val paintBoxView: PaintBoxNativeView = uiManager?.resolveView(viewTag) as PaintBoxNativeView
+      callback(paintBoxView)
+    }
+  }
+}

package/android/src/main/java/com/paintboxreactnative/PaintBoxNativeView.kt

@@ -0,0 +1,61 @@
+package com.paintboxreactnative
+
+import android.annotation.SuppressLint
+import android.util.Log
+import android.widget.FrameLayout
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.events.Event
+import com.kotlin.native_drawing_plugin.PaintBoxView
+
+class ViewAttachedEvent(surfaceId: Int, viewId: Int, val payload: WritableMap) : Event<ViewAttachedEvent>(surfaceId, viewId) {
+  override fun getEventName(): String {
+    return EVENT_NAME
+  }
+
+  override fun getEventData(): WritableMap {
+    return payload
+  }
+
+  companion object {
+    const val EVENT_NAME: String = "onPaintBoxReady"
+  }
+}
+
+@SuppressLint("ViewConstructor")
+class PaintBoxNativeView(context: ReactContext): FrameLayout(context) {
+  val paintBox: PaintBoxView = PaintBoxView(context)
+  private var hasDispatchedReady = false
+
+  init {
+    this.addView(paintBox)
+  }
+
+  fun dispatchEvent() {
+    if (!hasDispatchedReady) {
+      post {
+        if (id == -1) {
+          post { dispatchEvent() }
+          return@post
+        } else {
+          val surfaceId = UIManagerHelper.getSurfaceId(context)
+          val eventDispatcher =
+            UIManagerHelper.getEventDispatcher(context as ReactContext, id)
+          val payload = Arguments.createMap().apply {
+            putBoolean("result", true)
+          }
+          val event = ViewAttachedEvent(surfaceId, id, payload)
+          eventDispatcher?.dispatchEvent(event)
+          hasDispatchedReady = true
+        }
+      }
+    }
+  }
+
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+    dispatchEvent()
+  }
+}

package/android/src/main/java/com/paintboxreactnative/PaintBoxNativeViewManager.kt

@@ -0,0 +1,105 @@
+package com.paintboxreactnative
+
+import android.os.Build
+import android.util.Log
+import android.widget.FrameLayout
+import androidx.annotation.RequiresApi
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.viewmanagers.PaintBoxViewManagerDelegate
+import com.facebook.react.viewmanagers.PaintBoxViewManagerInterface
+import com.google.gson.Gson
+import com.kotlin.native_drawing_plugin.PaintMode
+import com.paintboxreactnative.dto.ColorDTO
+
+class PaintBoxNativeViewManager(private val callerContext: ReactApplicationContext) :
+  SimpleViewManager<PaintBoxNativeView>(), PaintBoxViewManagerInterface<PaintBoxNativeView> {
+
+  override fun getName() = REACT_CLASS
+
+  override fun createViewInstance(context: ThemedReactContext): PaintBoxNativeView {
+    return PaintBoxNativeView(context).apply {
+      isClickable = true
+      isFocusable = true
+      layoutParams = FrameLayout.LayoutParams(
+        FrameLayout.LayoutParams.MATCH_PARENT,
+        FrameLayout.LayoutParams.MATCH_PARENT
+      )
+    }
+  }
+
+  override fun getCommandsMap() = mapOf(
+    "setViewMode" to COMMAND_SET_VIEW_MODE,
+  )
+
+  override fun getDelegate(): ViewManagerDelegate<PaintBoxNativeView> {
+    return PaintBoxViewManagerDelegate(this)
+  }
+
+  @RequiresApi(Build.VERSION_CODES.VANILLA_ICE_CREAM)
+  override fun undo(view: PaintBoxNativeView?) {
+    view?.paintBox?.paintEditor?.undo()
+  }
+
+  override fun redo(view: PaintBoxNativeView?) {
+    view?.paintBox?.paintEditor?.redo()
+  }
+
+  override fun reset(view: PaintBoxNativeView?) {
+    view?.paintBox?.paintEditor?.reset()
+  }
+
+  override fun importImage(
+    view: PaintBoxNativeView?,
+    path: String?,
+    width: Double,
+    height: Double
+  ) {
+    if (path != null) {
+      Log.e("import image path exist", "import image path exist: ${path}")
+      val _width = if (width != -1.0) {
+        width
+      } else {
+        null
+      }
+      val _height = if (height != -1.0) {
+        height
+      } else {
+        null
+      }
+      Log.e("import image path exist", "import image path exist: ${_width} ${_height}")
+      view?.paintBox?.paintEditor?.import(path, _width, _height)
+    }
+  }
+
+  override fun setEnable(view: PaintBoxNativeView, enable: Boolean) {
+    view.paintBox.paintEditor.setEnable(enable)
+  }
+
+
+  override fun setPaintMode(view: PaintBoxNativeView?, paintMode: String?) {
+    if(paintMode != null) {
+      view?.paintBox?.paintEditor?.setPaintMode(PaintMode.valueOf(paintMode))
+    }
+  }
+
+  override fun setStrokeColor(view: PaintBoxNativeView?, color: String?) {
+    if (color != null) {
+      val colorDTO = Gson().fromJson(color, ColorDTO::class.java)
+      val _color = colorDTO.toDataModel()
+      Log.e("color: ", "setStrokeColor: ${_color.alpha()}")
+      view?.paintBox?.paintEditor?.setStrokeColor(_color)
+    }
+  }
+
+  override fun setStrokeSize(view: PaintBoxNativeView?, size: Double) {
+    view?.paintBox?.paintEditor?.setStrokeWidth(size)
+  }
+
+  companion object {
+    private const val REACT_CLASS = "PaintBoxView"
+    private const val COMMAND_SET_VIEW_MODE = 1
+  }
+}

package/android/src/main/java/com/paintboxreactnative/PaintBoxReactNativeModule.kt

@@ -0,0 +1,74 @@
+package com.paintboxreactnative
+
+import com.facebook.react.bridge.Promise
+import com.facebook.react.bridge.ReactApplicationContext
+import com.google.gson.Gson
+import com.google.gson.GsonBuilder
+import com.kotlin.native_drawing_plugin.MimeType
+import com.paintboxreactnative.dto.ColorDTO
+
+class PaintBoxReactNativeModule(val reactContext: ReactApplicationContext) :
+  NativePaintBoxReactNativeSpec(reactContext) {
+  val converter: Gson = GsonBuilder()
+    .create()
+
+  override fun export(viewTag: Double?, path: String?, fileName: String?, mimeType: String?, promise: Promise) {
+    if (viewTag != null) {
+
+      NativeViewHandler.resolve(reactContext, viewTag.toInt(), { paintBoxView: PaintBoxNativeView ->
+        if (path != null && mimeType != null) {
+          paintBoxView.paintBox.paintEditor.export(path, MimeType.fromValue(mimeType), fileName)
+        } else {
+          promise.reject(Throwable("Path or file Name is not valid"))
+        }
+      })
+    }
+  }
+
+  override fun isEnable(viewTag: Double?, promise: Promise) {
+    if(viewTag != null) {
+      NativeViewHandler.resolve(reactContext, viewTag.toInt(), { paintBoxView: PaintBoxNativeView ->
+        val isEnabled = paintBoxView.paintBox.isEnabled
+        promise.resolve(isEnabled)
+      })
+    }
+  }
+
+
+  override fun getPaintMode(viewTag: Double?, promise: Promise) {
+    if(viewTag != null) {
+      NativeViewHandler.resolve(reactContext, viewTag.toInt(), { paintBoxView: PaintBoxNativeView ->
+        val paintMode = paintBoxView.paintBox.paintEditor.getPaintMode()
+        promise.resolve(paintMode.name)
+      })
+    }
+  }
+
+  override fun getStrokeColor(viewTag: Double?, promise: Promise) {
+    if (viewTag != null) {
+      NativeViewHandler.resolve(reactContext, viewTag.toInt(), { paintBoxView: PaintBoxNativeView ->
+        try {
+          val strokeColor = paintBoxView.paintBox.paintEditor.getStrokeColor()
+          var strokeColorDTO: ColorDTO?
+          strokeColorDTO = ColorDTO.fromDataModel(strokeColor)
+          promise.resolve(converter.toJson(strokeColorDTO))
+        } catch (error: Error) {
+          promise.reject(Throwable(error))
+        }
+      })
+    }
+  }
+
+  override fun getStrokeSize(viewTag: Double?, promise: Promise) {
+    if (viewTag != null) {
+      NativeViewHandler.resolve(reactContext, viewTag.toInt(), { paintBoxView: PaintBoxNativeView ->
+        val size = paintBoxView.paintBox.paintEditor.getStrokeWidth()
+        promise.resolve(size)
+      })
+    }
+  }
+
+  companion object {
+    const val NAME = NativePaintBoxReactNativeSpec.NAME
+  }
+}

package/android/src/main/java/com/paintboxreactnative/PaintBoxReactNativePackage.kt

@@ -0,0 +1,41 @@
+package com.paintboxreactnative
+
+import com.facebook.react.BaseReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.model.ReactModuleInfo
+import com.facebook.react.module.model.ReactModuleInfoProvider
+import com.facebook.react.uimanager.ViewManager
+import java.util.HashMap
+
+class PaintBoxReactNativePackage : BaseReactPackage() {
+  override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? {
+    return (if (name == PaintBoxReactNativeModule.NAME) {
+      PaintBoxReactNativeModule(reactContext)
+    } else {
+      null
+    }) as NativeModule?
+  }
+
+  override fun getReactModuleInfoProvider(): ReactModuleInfoProvider {
+    return ReactModuleInfoProvider {
+      val moduleInfos: MutableMap<String, ReactModuleInfo> = HashMap()
+      moduleInfos[PaintBoxReactNativeModule.NAME] = ReactModuleInfo(
+        PaintBoxReactNativeModule.NAME,
+        PaintBoxReactNativeModule.NAME,
+        false,  // canOverrideExistingModule
+        false,  // needsEagerInit
+        true,  // isCxxModule
+        false,
+        true,// isTurboModule
+      )
+      moduleInfos
+    }
+  }
+
+  override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<in Nothing, in Nothing>> {
+    return listOf(
+      PaintBoxNativeViewManager(reactContext)
+    )
+  }
+}

package/android/src/main/java/com/paintboxreactnative/dto/ColorDTO.kt

@@ -0,0 +1,37 @@
+package com.paintboxreactnative.dto
+
+import android.annotation.TargetApi
+import android.graphics.Color
+import android.os.Build
+import androidx.annotation.RequiresApi
+
+data class ColorDTO(
+  val red: Double,
+  val green: Double,
+  val blue: Double,
+  val alpha: Double = 255.0,
+) {
+  companion object {
+    @TargetApi(Build.VERSION_CODES.O)
+    @RequiresApi(Build.VERSION_CODES.O)
+    fun fromDataModel(color: Color): ColorDTO {
+      return ColorDTO(
+        red = color.red().toDouble(),
+        green = color.green().toDouble(),
+        blue = color.blue().toDouble(),
+        alpha = color.alpha().toDouble()
+      )
+    }
+  }
+
+  @TargetApi(Build.VERSION_CODES.O)
+  @RequiresApi(Build.VERSION_CODES.O)
+  fun toDataModel(): Color {
+    return Color.valueOf(
+      (red / 255.0).toFloat(),
+      (green / 255.0).toFloat(),
+      (blue.toFloat() / 255.0).toFloat(),
+      (alpha.toFloat() / 255.0).toFloat(),
+    )
+  }
+}

package/ios/PaintBoxReactNative.h

@@ -0,0 +1,5 @@
+#import <PaintBoxReactNativeSpec/PaintBoxReactNativeSpec.h>
+
+@interface PaintBoxReactNative : NSObject <NativePaintBoxReactNativeSpec>
+
+@end

package/ios/PaintBoxReactNative.mm

@@ -0,0 +1,21 @@
+#import "PaintBoxReactNative.h"
+
+@implementation PaintBoxReactNative
+- (NSNumber *)multiply:(double)a b:(double)b {
+    NSNumber *result = @(a * b);
+
+    return result;
+}
+
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
+    (const facebook::react::ObjCTurboModule::InitParams &)params
+{
+    return std::make_shared<facebook::react::NativePaintBoxReactNativeSpecJSI>(params);
+}
+
++ (NSString *)moduleName
+{
+  return @"PaintBoxReactNative";
+}
+
+@end