react-native-s-pen 0.1.0

package/android/src/main/java/com/samsungspen/SpenCanvasManager.java

@@ -0,0 +1,67 @@
+package com.samsungspen;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+import com.facebook.react.common.MapBuilder;
+import com.facebook.react.uimanager.SimpleViewManager;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.ViewManagerDelegate;
+import com.facebook.react.uimanager.annotations.ReactProp;
+import com.facebook.react.viewmanagers.SpenCanvasManagerDelegate;
+import com.facebook.react.viewmanagers.SpenCanvasManagerInterface;
+
+import java.util.Map;
+
+public final class SpenCanvasManager extends SimpleViewManager<SpenCanvasView>
+    implements SpenCanvasManagerInterface<SpenCanvasView> {
+  static final String NAME = "SpenCanvas";
+  private final ViewManagerDelegate<SpenCanvasView> delegate =
+      new SpenCanvasManagerDelegate<>(this);
+
+  @Override
+  protected ViewManagerDelegate<SpenCanvasView> getDelegate() {
+    return delegate;
+  }
+
+  @NonNull
+  @Override
+  public String getName() {
+    return NAME;
+  }
+
+  @NonNull
+  @Override
+  protected SpenCanvasView createViewInstance(@NonNull ThemedReactContext context) {
+    return new SpenCanvasView(context);
+  }
+
+  @ReactProp(name = "inkColor")
+  public void setInkColor(SpenCanvasView view, @Nullable String color) {
+    if (color != null) {
+      view.setInkColor(color);
+    }
+  }
+
+  @ReactProp(name = "minStrokeWidth", defaultFloat = 2f)
+  public void setMinStrokeWidth(SpenCanvasView view, float width) {
+    view.setMinStrokeWidth(width);
+  }
+
+  @ReactProp(name = "maxStrokeWidth", defaultFloat = 16f)
+  public void setMaxStrokeWidth(SpenCanvasView view, float width) {
+    view.setMaxStrokeWidth(width);
+  }
+
+  @ReactProp(name = "clearToken", defaultInt = 0)
+  public void setClearToken(SpenCanvasView view, int token) {
+    view.setClearToken(token);
+  }
+
+  @Override
+  public Map<String, Object> getExportedCustomDirectEventTypeConstants() {
+    return MapBuilder.<String, Object>builder()
+        .put("topSpenDraw", MapBuilder.of("registrationName", "onSpenDraw"))
+        .build();
+  }
+}

package/android/src/main/java/com/samsungspen/SpenCanvasView.java

@@ -0,0 +1,186 @@
+package com.samsungspen;
+
+import android.content.Context;
+import android.graphics.Canvas;
+import android.graphics.Color;
+import android.graphics.Paint;
+import android.graphics.Path;
+import android.view.MotionEvent;
+import android.view.View;
+
+import androidx.annotation.NonNull;
+
+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.facebook.react.uimanager.events.EventDispatcher;
+
+import java.util.ArrayList;
+import java.util.List;
+
+final class SpenCanvasView extends View {
+  private static final class StrokePoint {
+    final float x;
+    final float y;
+    final float pressure;
+    final boolean startsStroke;
+
+    StrokePoint(float x, float y, float pressure, boolean startsStroke) {
+      this.x = x;
+      this.y = y;
+      this.pressure = pressure;
+      this.startsStroke = startsStroke;
+    }
+  }
+
+  private final Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
+  private final List<StrokePoint> points = new ArrayList<>();
+  private float minStrokeWidth = 2f;
+  private float maxStrokeWidth = 16f;
+  private int clearToken = 0;
+
+  SpenCanvasView(Context context) {
+    super(context);
+    paint.setColor(Color.rgb(17, 20, 15));
+    paint.setStyle(Paint.Style.STROKE);
+    paint.setStrokeCap(Paint.Cap.ROUND);
+    paint.setStrokeJoin(Paint.Join.ROUND);
+    setBackgroundColor(Color.rgb(233, 237, 223));
+    setFocusable(true);
+  }
+
+  void setInkColor(String color) {
+    try {
+      paint.setColor(Color.parseColor(color));
+      invalidate();
+    } catch (IllegalArgumentException ignored) {
+      // Keep the previous valid color.
+    }
+  }
+
+  void setMinStrokeWidth(float width) {
+    minStrokeWidth = Math.max(0.5f, width);
+    invalidate();
+  }
+
+  void setMaxStrokeWidth(float width) {
+    maxStrokeWidth = Math.max(minStrokeWidth, width);
+    invalidate();
+  }
+
+  void setClearToken(int token) {
+    if (clearToken != token) {
+      clearToken = token;
+      points.clear();
+      invalidate();
+    }
+  }
+
+  @Override
+  protected void onDraw(@NonNull Canvas canvas) {
+    super.onDraw(canvas);
+    if (points.isEmpty()) {
+      return;
+    }
+
+    StrokePoint previous = null;
+    for (StrokePoint point : points) {
+      float width = pressureToWidth(point.pressure);
+      paint.setStrokeWidth(width);
+      if (previous == null || point.startsStroke) {
+        canvas.drawPoint(point.x, point.y, paint);
+      } else {
+        Path segment = new Path();
+        segment.moveTo(previous.x, previous.y);
+        segment.lineTo(point.x, point.y);
+        canvas.drawPath(segment, paint);
+      }
+      previous = point;
+    }
+  }
+
+  @Override
+  public boolean onTouchEvent(MotionEvent event) {
+    int pointerIndex = Math.max(0, event.getActionIndex());
+    int toolType = event.getToolType(pointerIndex);
+    if (toolType != MotionEvent.TOOL_TYPE_STYLUS && toolType != MotionEvent.TOOL_TYPE_ERASER) {
+      return false;
+    }
+
+    int action = event.getActionMasked();
+    if (action == MotionEvent.ACTION_DOWN) {
+      getParent().requestDisallowInterceptTouchEvent(true);
+      addPoint(event, pointerIndex, true);
+      emitPoint(event, pointerIndex, "down", toolType);
+      return true;
+    }
+    if (action == MotionEvent.ACTION_MOVE) {
+      addPoint(event, pointerIndex, false);
+      emitPoint(event, pointerIndex, "move", toolType);
+      return true;
+    }
+    if (action == MotionEvent.ACTION_UP || action == MotionEvent.ACTION_CANCEL) {
+      addPoint(event, pointerIndex, false);
+      emitPoint(event, pointerIndex, action == MotionEvent.ACTION_CANCEL ? "cancel" : "up", toolType);
+      getParent().requestDisallowInterceptTouchEvent(false);
+      return true;
+    }
+    return true;
+  }
+
+  private void addPoint(MotionEvent event, int pointerIndex, boolean startsStroke) {
+    points.add(new StrokePoint(event.getX(pointerIndex), event.getY(pointerIndex), event.getPressure(pointerIndex), startsStroke));
+    invalidate();
+  }
+
+  private float pressureToWidth(float pressure) {
+    float normalized = Math.max(0f, Math.min(1f, pressure));
+    return minStrokeWidth + ((maxStrokeWidth - minStrokeWidth) * normalized);
+  }
+
+  private void emitPoint(MotionEvent event, int pointerIndex, String action, int toolType) {
+    WritableMap payload = Arguments.createMap();
+    payload.putDouble("x", event.getX(pointerIndex));
+    payload.putDouble("y", event.getY(pointerIndex));
+    payload.putDouble("pressure", event.getPressure(pointerIndex));
+    payload.putDouble("tilt", event.getAxisValue(MotionEvent.AXIS_TILT, pointerIndex));
+    payload.putDouble("hoverDistance", event.getAxisValue(MotionEvent.AXIS_DISTANCE, pointerIndex));
+    payload.putDouble("timestamp", event.getEventTime());
+    payload.putString("action", action);
+    payload.putString("toolType", toolType == MotionEvent.TOOL_TYPE_ERASER ? "eraser" : "stylus");
+
+    EventDispatcher dispatcher =
+        UIManagerHelper.getEventDispatcherForReactTag((ReactContext) getContext(), getId());
+    if (dispatcher != null) {
+      int surfaceId = UIManagerHelper.getSurfaceId(this);
+      dispatcher.dispatchEvent(new SpenCanvasEvent(surfaceId, getId(), payload));
+    }
+  }
+
+  private static final class SpenCanvasEvent extends Event<SpenCanvasEvent> {
+    private final WritableMap payload;
+
+    SpenCanvasEvent(int surfaceId, int viewTag, WritableMap payload) {
+      super(surfaceId, viewTag);
+      this.payload = payload;
+    }
+
+    @NonNull
+    @Override
+    public String getEventName() {
+      return "topSpenDraw";
+    }
+
+    @Override
+    public boolean canCoalesce() {
+      return false;
+    }
+
+    @Override
+    protected WritableMap getEventData() {
+      return payload;
+    }
+  }
+}

package/android/src/main/java/com/samsungspen/SpenPackage.java

@@ -0,0 +1,57 @@
+package com.samsungspen;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+import com.facebook.react.TurboReactPackage;
+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.Collections;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+public class SpenPackage extends TurboReactPackage {
+  private static final String MODULE_NAME = "SpenModule";
+
+  @Nullable
+  @Override
+  public NativeModule getModule(String name, ReactApplicationContext reactContext) {
+    if (MODULE_NAME.equals(name)) {
+      return new NativeSpenModule(reactContext);
+    }
+    return null;
+  }
+
+  @Override
+  public ReactModuleInfoProvider getReactModuleInfoProvider() {
+    return new ReactModuleInfoProvider() {
+      @NonNull
+      @Override
+      public Map<String, ReactModuleInfo> getReactModuleInfos() {
+        Map<String, ReactModuleInfo> infos = new HashMap<>();
+        infos.put(
+            MODULE_NAME,
+            new ReactModuleInfo(
+                MODULE_NAME,
+                NativeSpenModule.class.getName(),
+                false,
+                false,
+                false,
+                false,
+                true));
+        return infos;
+      }
+    };
+  }
+
+  @NonNull
+  @Override
+  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+    return Collections.<ViewManager>singletonList(new SpenCanvasManager());
+  }
+}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "react-native-s-pen",
+  "version": "0.1.0",
+  "description": "React Native library for Samsung S Pen support on Android",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alihamzaazhar/react-native-s-pen.git"
+  },
+  "homepage": "https://github.com/alihamzaazhar/react-native-s-pen#readme",
+  "bugs": "https://github.com/alihamzaazhar/react-native-s-pen/issues",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src",
+    "android/build.gradle",
+    "android/consumer-rules.pro",
+    "android/gradle.properties",
+    "android/libs/README.md",
+    "android/src",
+    "react-native.config.js",
+    "README.md"
+  ],
+  "codegenConfig": {
+    "name": "SpenModule",
+    "type": "all",
+    "jsSrcsDir": "src",
+    "android": {
+      "javaPackageName": "com.samsungspen"
+    }
+  },
+  "scripts": {
+    "clean": "rm -rf node_modules android/build ios/build",
+    "typecheck": "tsc --noEmit"
+  },
+  "react-native": "src/index.ts",
+  "peerDependencies": {
+    "react": ">=19.2.3",
+    "react-native": ">=0.86.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.0",
+    "react": "19.2.3",
+    "react-native": "0.86.0",
+    "typescript": "^5.5.4"
+  }
+}

package/react-native.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  dependency: {
+    platforms: {
+      android: {
+        sourceDir: "./android",
+      },
+    },
+  },
+};

package/src/SPen.ts

@@ -0,0 +1,179 @@
+import { Platform } from "react-native";
+import { createEventEmitter, requireNativeModule } from "./native";
+import type {
+  SpenConnectionState,
+  SpenDeviceInfo,
+  SpenEventPayload,
+  SpenInsertionState,
+  SpenListener,
+  SpenRemoteFeature,
+} from "./types";
+
+class SPenManager {
+  private eventSubscriptions = new Set<{ remove: () => void }>();
+  private emitter: ReturnType<typeof createEventEmitter> | null = null;
+  private listenerCount = 0;
+
+  private getEmitter() {
+    if (!this.emitter) {
+      this.emitter = createEventEmitter();
+    }
+
+    return this.emitter;
+  }
+
+  async isSupported(): Promise<boolean> {
+    if (Platform.OS !== "android") {
+      return false;
+    }
+
+    return requireNativeModule().isSupported();
+  }
+
+  async getDeviceInfo(): Promise<SpenDeviceInfo> {
+    if (Platform.OS !== "android") {
+      throw new Error("react-native-s-pen only supports Android.");
+    }
+
+    return requireNativeModule().getDeviceInfo();
+  }
+
+  async getVersionCode(): Promise<number> {
+    if (Platform.OS !== "android") {
+      return 0;
+    }
+
+    return requireNativeModule().getVersionCode();
+  }
+
+  async getVersionName(): Promise<string> {
+    if (Platform.OS !== "android") {
+      return "";
+    }
+
+    return requireNativeModule().getVersionName();
+  }
+
+  async getPenInsertionState(): Promise<SpenInsertionState> {
+    if (Platform.OS !== "android") {
+      return "unknown";
+    }
+
+    return requireNativeModule().getPenInsertionState();
+  }
+
+  async isConnected(): Promise<boolean> {
+    if (Platform.OS !== "android") {
+      return false;
+    }
+
+    return requireNativeModule().isConnected();
+  }
+
+  async isFeatureEnabled(feature: SpenRemoteFeature): Promise<boolean> {
+    if (Platform.OS !== "android") {
+      return false;
+    }
+
+    return requireNativeModule().isFeatureEnabled(feature);
+  }
+
+  async startListening(): Promise<void> {
+    if (Platform.OS !== "android") {
+      return;
+    }
+
+    await requireNativeModule().startListening();
+  }
+
+  async stopListening(): Promise<void> {
+    if (Platform.OS !== "android") {
+      return;
+    }
+
+    await requireNativeModule().stopListening();
+  }
+
+  addListener(listener: SpenListener) {
+    const subscription = this.getEmitter().addListener("SpenEvent", (event: SpenEventPayload) => {
+      listener(event);
+    });
+
+    this.eventSubscriptions.add(subscription);
+    this.listenerCount += 1;
+    void this.startListening();
+
+    return () => {
+      subscription.remove();
+      this.eventSubscriptions.delete(subscription);
+      this.listenerCount = Math.max(0, this.listenerCount - 1);
+
+      if (this.listenerCount === 0) {
+        void this.stopListening();
+      }
+    };
+  }
+
+  addConnectionStateListener(listener: (state: SpenConnectionState) => void) {
+    let receivedLiveState = false;
+    const subscription = this.getEmitter().addListener("SpenEvent", (event: SpenEventPayload) => {
+      if (event.name === "spen-connection-state" && event.connectionState) {
+        receivedLiveState = true;
+        listener(event.connectionState);
+      }
+    });
+
+    this.eventSubscriptions.add(subscription);
+    this.listenerCount += 1;
+    void this.startListening()
+      .then(() => this.isConnected())
+      .then((connected) => {
+        if (connected && !receivedLiveState && this.eventSubscriptions.has(subscription)) {
+          listener("connected");
+        }
+      });
+
+    return () => {
+      subscription.remove();
+      this.eventSubscriptions.delete(subscription);
+      this.listenerCount = Math.max(0, this.listenerCount - 1);
+
+      if (this.listenerCount === 0) {
+        void this.stopListening();
+      }
+    };
+  }
+
+  addPenInsertionStateListener(listener: (state: SpenInsertionState) => void) {
+    const subscription = this.getEmitter().addListener("SpenEvent", (event: SpenEventPayload) => {
+      if (event.name === "spen-insertion-state" && event.insertionState) {
+        listener(event.insertionState);
+      }
+    });
+
+    this.eventSubscriptions.add(subscription);
+    this.listenerCount += 1;
+    void this.startListening();
+
+    return () => {
+      subscription.remove();
+      this.eventSubscriptions.delete(subscription);
+      this.listenerCount = Math.max(0, this.listenerCount - 1);
+
+      if (this.listenerCount === 0) {
+        void this.stopListening();
+      }
+    };
+  }
+
+  removeAllListeners() {
+    for (const subscription of this.eventSubscriptions) {
+      subscription.remove();
+    }
+    this.eventSubscriptions.clear();
+    this.listenerCount = 0;
+    void this.stopListening();
+  }
+}
+
+export const SPen = new SPenManager();

package/src/SpenCanvas.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import {
+  Platform,
+  View,
+  type NativeSyntheticEvent,
+  type ViewProps,
+} from "react-native";
+import * as RequireNativeComponentModule from "react-native/Libraries/ReactNative/requireNativeComponent";
+
+export type SpenCanvasPoint = {
+  x: number;
+  y: number;
+  pressure: number;
+  tilt: number;
+  hoverDistance: number;
+  timestamp: number;
+  action: "down" | "move" | "up" | "cancel";
+  toolType: "stylus" | "eraser";
+};
+
+export type SpenCanvasProps = ViewProps & {
+  inkColor?: string;
+  minStrokeWidth?: number;
+  maxStrokeWidth?: number;
+  clearToken?: number;
+  onDraw?: (point: SpenCanvasPoint) => void;
+};
+
+type NativeCanvasProps = Omit<SpenCanvasProps, "onDraw"> & {
+  onSpenDraw?: (event: NativeSyntheticEvent<SpenCanvasPoint>) => void;
+};
+
+// The separate NativeComponent spec generates Fabric metadata and the Android manager delegate.
+const requireNativeComponent = (
+  RequireNativeComponentModule as unknown as {
+    default: <T>(name: string) => React.ComponentType<T>;
+  }
+).default;
+const NativeSpenCanvas = requireNativeComponent<NativeCanvasProps>("SpenCanvas");
+
+export function SpenCanvas({ onDraw, ...props }: SpenCanvasProps) {
+  if (Platform.OS !== "android") {
+    return <View {...props} />;
+  }
+
+  return <NativeSpenCanvas {...props} onSpenDraw={(event) => onDraw?.(event.nativeEvent)} />;
+}

package/src/index.ts

@@ -0,0 +1,15 @@
+export { SPen } from "./SPen";
+export { SpenCanvas } from "./SpenCanvas";
+export type { SpenCanvasPoint, SpenCanvasProps } from "./SpenCanvas";
+export type {
+  SpenConnectionState,
+  SpenInsertionState,
+  SpenCapability,
+  SpenErrorCode,
+  SpenDeviceInfo,
+  SpenEventName,
+  SpenEventPayload,
+  SpenPoint,
+  SpenRemoteFeature,
+  SpenListener,
+} from "./types";

package/src/native.ts

@@ -0,0 +1,29 @@
+import { NativeEventEmitter, NativeModules, Platform } from "react-native";
+import NativeSpenModule from "./specs/NativeSpenModule";
+import type { Spec as NativeSpenModuleSpec } from "./specs/NativeSpenModule";
+import type { SpenEventPayload } from "./types";
+
+const LINKING_ERROR =
+  `The package 'react-native-s-pen' doesn't seem to be linked. ` +
+  Platform.select({ ios: "This library only supports Android.", default: "Run the native build step again." });
+
+export function requireNativeModule(): NativeSpenModuleSpec {
+  if (Platform.OS !== "android") {
+    throw new Error(LINKING_ERROR);
+  }
+
+  const legacyModule = NativeModules.SpenModule as NativeSpenModuleSpec | undefined;
+  const nativeModule = NativeSpenModule ?? legacyModule;
+
+  if (!nativeModule) {
+    throw new Error(LINKING_ERROR);
+  }
+
+  return nativeModule;
+}
+
+export function createEventEmitter() {
+  return new NativeEventEmitter(requireNativeModule());
+}
+
+export type { SpenEventPayload };

package/src/specs/NativeSpenModule.ts

@@ -0,0 +1,50 @@
+import type {TurboModule} from "react-native";
+import {TurboModuleRegistry} from "react-native";
+
+type TurboSpenCapability =
+  | "stylusInput"
+  | "hover"
+  | "button"
+  | "airActions"
+  | "airCommand"
+  | "pressure";
+
+type TurboSpenDeviceInfo = {
+  platform: "android";
+  manufacturer: string;
+  brand: string;
+  model: string;
+  sdkInt: number;
+  isSamsungDevice: boolean;
+  capabilities: Array<TurboSpenCapability>;
+  samsungSdk?: {
+    available: boolean;
+    versionCode?: number;
+    versionName?: string;
+    connected?: boolean;
+    featureFlags?: {
+      button?: boolean;
+      airMotion?: boolean;
+    };
+  };
+};
+
+export interface Spec extends TurboModule {
+  isSupported(): Promise<boolean>;
+  getDeviceInfo(): Promise<TurboSpenDeviceInfo>;
+  getVersionCode(): Promise<number>;
+  getVersionName(): Promise<string>;
+  getPenInsertionState(): Promise<"inserted" | "detached" | "unknown">;
+  isConnected(): Promise<boolean>;
+  isFeatureEnabled(feature: "button" | "airMotion"): Promise<boolean>;
+  startListening(): Promise<void>;
+  stopListening(): Promise<void>;
+  addListener(eventName: string): void;
+  removeListeners(count: number): void;
+  addConnectionStateListener(eventName: string): void;
+  removeConnectionStateListeners(count: number): void;
+}
+
+const NativeSpenModule = TurboModuleRegistry.get<Spec>("SpenModule");
+
+export default NativeSpenModule;