react-native-s-pen 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md ADDED
@@ -0,0 +1,172 @@
1
+ # react-native-s-pen
2
+
3
+ React Native 0.86+ library for Samsung S Pen input, built with TurboModules and a Fabric-compatible native canvas.
4
+
5
+ ## Features
6
+
7
+ - Stylus down, move, up, and hover events
8
+ - Contact pressure, hover distance, and tilt
9
+ - Pressure-sensitive native `SpenCanvas`
10
+ - Samsung Remote button events
11
+ - Samsung Air Motion X/Y deltas
12
+ - S Pen Framework connection state
13
+ - Best-effort physical insertion/removal state on compatible Samsung phones
14
+ - Typed TypeScript API
15
+ - Android New Architecture support
16
+
17
+ ## Requirements
18
+
19
+ - React Native `0.86.0` or newer
20
+ - React `19.2.3` or newer
21
+ - Android API 24+
22
+ - A Samsung device for Samsung-specific Remote features
23
+ - S Pen Remote SDK `1.0.x` for button and Air Motion support
24
+
25
+ Generic stylus events and `SpenCanvas` use Android `MotionEvent`. Remote button and Air Motion events require Samsung's SDK.
26
+
27
+ ## Installation
28
+
29
+ ```sh
30
+ npm install react-native-s-pen
31
+ ```
32
+
33
+ The Samsung SDK is not available from Maven and its downloaded binaries cannot be redistributed by this repository. Sign in to [Samsung Developer](https://developer.samsung.com/galaxy-spen-remote/s-pen-remote-sdk.html), download the S Pen Remote SDK, and place these files in your application:
34
+
35
+ ```text
36
+ android/app/src/main/libs/sdk-v1.0.0.jar
37
+ android/app/src/main/libs/spenremote-v1.0.1.jar
38
+ ```
39
+
40
+ Add the local SDK directory to `android/app/build.gradle`:
41
+
42
+ ```gradle
43
+ dependencies {
44
+ implementation fileTree(dir: "src/main/libs", include: ["*.jar", "*.aar"])
45
+ }
46
+ ```
47
+
48
+ Rebuild the Android application after adding the JARs.
49
+
50
+ ## Basic usage
51
+
52
+ ```ts
53
+ import { SPen } from "react-native-s-pen";
54
+
55
+ const supported = await SPen.isSupported();
56
+ const deviceInfo = await SPen.getDeviceInfo();
57
+ const insertionState = await SPen.getPenInsertionState();
58
+ const connected = await SPen.isConnected();
59
+
60
+ const removeEvents = SPen.addListener((event) => {
61
+ console.log(event.name, event.point, event.action);
62
+ });
63
+
64
+ const removeConnection = SPen.addConnectionStateListener((state) => {
65
+ console.log("S Pen Framework:", state);
66
+ });
67
+
68
+ const removeInsertion = SPen.addPenInsertionStateListener((state) => {
69
+ console.log("Physical pen:", state);
70
+ });
71
+
72
+ // Call each returned function when the consuming component unmounts.
73
+ ```
74
+
75
+ ## Native canvas
76
+
77
+ `SpenCanvas` owns Android touch dispatch, so it works inside React Navigation and scroll views.
78
+
79
+ ```tsx
80
+ import { useState } from "react";
81
+ import { Button, View } from "react-native";
82
+ import { SpenCanvas } from "react-native-s-pen";
83
+
84
+ export function SignatureScreen() {
85
+ const [clearToken, setClearToken] = useState(0);
86
+
87
+ return (
88
+ <View>
89
+ <SpenCanvas
90
+ style={{ height: 400 }}
91
+ inkColor="#11140f"
92
+ minStrokeWidth={2}
93
+ maxStrokeWidth={18}
94
+ clearToken={clearToken}
95
+ onDraw={(point) => {
96
+ console.log(point.x, point.y, point.pressure, point.tilt);
97
+ }}
98
+ />
99
+ <Button title="Clear" onPress={() => setClearToken((value) => value + 1)} />
100
+ </View>
101
+ );
102
+ }
103
+ ```
104
+
105
+ `onDraw` returns `x`, `y`, `pressure`, `tilt`, `hoverDistance`, `timestamp`, `action`, and `toolType`.
106
+
107
+ ## Events
108
+
109
+ | Event | Meaning |
110
+ | --- | --- |
111
+ | `spen-down` | Stylus touches the display |
112
+ | `spen-move` | Stylus moves while touching |
113
+ | `spen-up` | Stylus leaves the display |
114
+ | `spen-hover` | Stylus moves above the display |
115
+ | `spen-button` | Remote button `down` or `up` |
116
+ | `spen-air-action` | Air Motion X/Y delta |
117
+ | `spen-insertion-state` | Physical pen `inserted`, `detached`, or `unknown` |
118
+ | `spen-connection-state` | Samsung S Pen Framework state |
119
+ | `spen-error` | Samsung SDK error |
120
+
121
+ Pressure is normally zero while hovering. Use `hoverDistance` above the display and `pressure` while touching it.
122
+
123
+ ## Testing Remote features
124
+
125
+ 1. Enable **Settings > Advanced features > S Pen > Air actions**.
126
+ 2. Charge and remove the S Pen.
127
+ 3. Keep the application in the foreground.
128
+ 4. Press and release the side button to receive `spen-button` events.
129
+ 5. Move the detached pen to receive Air Motion deltas. On some devices, hold the button while moving.
130
+
131
+ `isConnected()` means the app is connected to Samsung's S Pen Framework. It does not mean that the physical pen is inserted or currently hovering.
132
+
133
+ ## Example app
134
+
135
+ The `example` directory contains separate screens for:
136
+
137
+ - Framework and SDK diagnostics
138
+ - Physical insertion/removal
139
+ - Hover and tilt
140
+ - Pressure-sensitive drawing
141
+ - Remote button
142
+ - Air Motion
143
+ - Raw event inspection
144
+
145
+ After placing your downloaded SDK JARs in `example/android/app/src/main/libs`:
146
+
147
+ ```sh
148
+ cd example
149
+ npm install
150
+ npm start
151
+ npm run android
152
+ ```
153
+
154
+ ## Compatibility notes
155
+
156
+ - Android only. Non-Android methods return safe fallback values where documented.
157
+ - Insertion detection uses Samsung's sticky `com.samsung.pen.INSERT` broadcast. It is not part of the public Remote SDK contract, so unsupported devices return `unknown`.
158
+ - Feature availability differs by Samsung model and S Pen generation.
159
+
160
+ ## Development
161
+
162
+ ```sh
163
+ npm install
164
+ npm run typecheck
165
+
166
+ cd example/android
167
+ ./gradlew :app:assembleDebug
168
+ ```
169
+
170
+ ## Samsung SDK notice
171
+
172
+ Samsung SDK binaries are proprietary and are not included in this repository. Samsung and S Pen are trademarks of Samsung Electronics. This project is not affiliated with or endorsed by Samsung.
@@ -0,0 +1,33 @@
1
+ apply plugin: "com.android.library"
2
+ apply plugin: "com.facebook.react"
3
+
4
+ android {
5
+ namespace "com.samsungspen"
6
+ compileSdkVersion 36
7
+
8
+ defaultConfig {
9
+ minSdkVersion 24
10
+ targetSdkVersion 36
11
+ consumerProguardFiles "consumer-rules.pro"
12
+ }
13
+
14
+ buildTypes {
15
+ release {
16
+ minifyEnabled false
17
+ }
18
+ }
19
+ }
20
+
21
+ react {
22
+ root = file("..")
23
+ jsRootDir = file("..")
24
+ reactNativeDir = file("../../react-native")
25
+ codegenDir = file("../../@react-native/codegen")
26
+ codegenJavaPackageName = "com.samsungspen"
27
+ }
28
+
29
+ dependencies {
30
+ implementation("com.facebook.react:react-android")
31
+ compileOnly fileTree(dir: "libs", include: ["*.jar", "*.aar"])
32
+ compileOnly fileTree(dir: rootProject.file("app/src/main/libs"), include: ["*.jar", "*.aar"])
33
+ }
@@ -0,0 +1,2 @@
1
+ # Keep the public API available to React Native consumers.
2
+
@@ -0,0 +1,3 @@
1
+ android.useAndroidX=true
2
+ android.enableJetifier=true
3
+
@@ -0,0 +1,10 @@
1
+ # Samsung SDK binaries
2
+
3
+ Do not commit Samsung SDK binaries to this repository.
4
+
5
+ Download the S Pen Remote SDK from Samsung Developer and copy these files into the consuming application's `android/app/src/main/libs` directory:
6
+
7
+ - `sdk-v1.0.0.jar`
8
+ - `spenremote-v1.0.1.jar` (or a compatible `1.0.x` release)
9
+
10
+ See the root README for the complete Android configuration.
@@ -0,0 +1,3 @@
1
+ <manifest xmlns:android="http://schemas.android.com/apk/res/android">
2
+ <application />
3
+ </manifest>