feat: prevent other platform import pencilkit

RNPencilKit.podspec

@@ -11,7 +11,7 @@ Pod::Spec.new do |s|
   s.license      = package["license"]
   s.authors      = package["author"]
 
-  s.platforms    = { :ios => '14.0' }
+  s.platforms    = { :ios => min_ios_version_supported }
   s.source       = { :git => "https://github.com/mym0404/react-native-pencil-kit.git", :tag => "#{s.version}" }
 
   s.source_files = "ios/**/*.{h,m,mm}"

example/ios/PencilKitExample.xcodeproj/project.pbxproj

@@ -487,7 +487,7 @@
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = PencilKitExample/Info.plist;
 				INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.developer-tools";
-				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 12.1;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
@@ -516,7 +516,7 @@
 				CURRENT_PROJECT_VERSION = 1;
 				INFOPLIST_FILE = PencilKitExample/Info.plist;
 				INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.developer-tools";
-				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 12.1;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",

example/ios/Podfile.lock

@@ -1184,7 +1184,7 @@ PODS:
     - React-logger (= 0.74.0)
     - React-perflogger (= 0.74.0)
     - React-utils (= 0.74.0)
-  - RNPencilKit (0.1.0-alpha.2):
+  - RNPencilKit (0.1.0-alpha.3):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1442,7 +1442,7 @@ SPEC CHECKSUMS:
   React-runtimescheduler: 7fe561d179b97cecd0c2bec0bbd08f9fd8581c26
   React-utils: f013537c3371270d2095bff1d594d00d4bc9261b
   ReactCommon: 2cde697fd80bd31da1d6448d25a5803088585219
-  RNPencilKit: f290fbdcadd41189b33df9d6ba300b2fe7d272c8
+  RNPencilKit: 817ef7e2050c5e7095428d0cd1acdf8c62b9e80a
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
   Yoga: 56f906bf6c11c931588191dde1229fd3e4e3d557
 

src/component/PencilKit.ios.tsx

@@ -0,0 +1,81 @@
+import { type ForwardedRef, forwardRef, useImperativeHandle, useRef } from 'react';
+import { processColor, Text } from 'react-native';
+import { type PencilKitProps, type PencilKitRef, PencilKitUtil } from 'react-native-pencil-kit';
+
+import NativePencilKitView, { Commands } from '../spec/RNPencilKitNativeComponent';
+
+function PencilKitComponent(
+  {
+    alwaysBounceHorizontal = true,
+    alwaysBounceVertical = true,
+    isRulerActive = false,
+    drawingPolicy = 'default',
+    backgroundColor,
+    isOpaque = true,
+    onToolPickerFramesObscuredDidChange,
+    onToolPickerIsRulerActiveDidChange,
+    onToolPickerSelectedToolDidChange,
+    onToolPickerVisibilityDidChange,
+    onCanvasViewDidBeginUsingTool,
+    onCanvasViewDidEndUsingTool,
+    onCanvasViewDidFinishRendering,
+    onCanvasViewDrawingDidChange,
+    ...rest
+  }: PencilKitProps,
+  ref: ForwardedRef<PencilKitRef>,
+) {
+  const nativeRef = useRef(null);
+  useImperativeHandle(
+    ref,
+    () => ({
+      clear: () => Commands.clear(nativeRef.current!),
+      showToolPicker: () => Commands.showToolPicker(nativeRef.current!),
+      hideToolPicker: () => Commands.hideToolPicker(nativeRef.current!),
+      redo: () => Commands.redo(nativeRef.current!),
+      undo: () => Commands.undo(nativeRef.current!),
+      saveDrawing: (path) => Commands.saveDrawing(nativeRef.current!, path),
+      loadDrawing: (path) => Commands.loadDrawing(nativeRef.current!, path),
+      getBase64Data: () => Commands.getBase64Data(nativeRef.current!),
+      loadBase64Data: (base64) => Commands.loadBase64Data(nativeRef.current!, base64),
+      setTool: ({ color, toolType, width }) =>
+        Commands.setTool(
+          nativeRef.current!,
+          toolType,
+          width ?? 0,
+          color ? (processColor(color) as number) : 0,
+        ),
+    }),
+    [],
+  );
+
+  if (!PencilKitUtil.isPencilKitAvailable()) {
+    return (
+      <Text>{"This iOS version doesn't support pencilkit. The minimum requirement is 14.0"}</Text>
+    );
+  }
+
+  return (
+    <NativePencilKitView
+      ref={nativeRef}
+      {...{
+        alwaysBounceHorizontal,
+        alwaysBounceVertical,
+        isRulerActive,
+        drawingPolicy,
+        backgroundColor: processColor(backgroundColor) as number,
+        isOpaque,
+        onToolPickerFramesObscuredDidChange,
+        onToolPickerIsRulerActiveDidChange,
+        onToolPickerSelectedToolDidChange,
+        onToolPickerVisibilityDidChange,
+        onCanvasViewDidBeginUsingTool,
+        onCanvasViewDidEndUsingTool,
+        onCanvasViewDidFinishRendering,
+        onCanvasViewDrawingDidChange,
+      }}
+      {...rest}
+    />
+  );
+}
+
+export const PencilKit = forwardRef(PencilKitComponent);

src/component/PencilKit.tsx

@@ -0,0 +1,48 @@
+import { type ForwardedRef, forwardRef } from 'react';
+import { type ColorValue, Text, type ViewProps } from 'react-native';
+import type { DirectEventHandler, WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
+
+export type PencilKitProps = {
+  alwaysBounceVertical?: boolean;
+  alwaysBounceHorizontal?: boolean;
+  isRulerActive?: boolean;
+  backgroundColor?: ColorValue;
+  drawingPolicy?: WithDefault<'default' | 'anyinput' | 'pencilonly', 'default'>;
+  isOpaque?: boolean;
+
+  onToolPickerVisibilityDidChange?: DirectEventHandler<{}>;
+  onToolPickerIsRulerActiveDidChange?: DirectEventHandler<{}>;
+  onToolPickerFramesObscuredDidChange?: DirectEventHandler<{}>;
+  onToolPickerSelectedToolDidChange?: DirectEventHandler<{}>;
+  onCanvasViewDidBeginUsingTool?: DirectEventHandler<{}>;
+  onCanvasViewDidEndUsingTool?: DirectEventHandler<{}>;
+  onCanvasViewDrawingDidChange?: DirectEventHandler<{}>;
+  onCanvasViewDidFinishRendering?: DirectEventHandler<{}>;
+} & ViewProps;
+export type PencilKitTool =
+  | 'pen'
+  | 'pencil'
+  | 'marker'
+  | 'monoline'
+  | 'fountainPen'
+  | 'watercolor'
+  | 'crayon'
+  | 'eraserVector'
+  | 'eraserBitmap'
+  | 'eraserFixedWidthBitmap';
+export type PencilKitRef = {
+  clear: () => void;
+  showToolPicker: () => void;
+  hideToolPicker: () => void;
+  redo: () => void;
+  undo: () => void;
+  saveDrawing: (path: string) => void;
+  loadDrawing: (path: string) => string;
+  getBase64Data: () => void;
+  loadBase64Data: (base64: string) => void;
+  setTool: (params: { toolType: PencilKitTool; width?: number; color?: ColorValue }) => void;
+};
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const PencilKit = forwardRef((props: PencilKitProps, ref: ForwardedRef<PencilKitRef>) => {
+  return <Text>{"This platform doesn't support pencilkit"}</Text>;
+});

src/index.tsx

@@ -1,117 +1,15 @@
-import { type ForwardedRef, forwardRef, useImperativeHandle, useRef } from 'react';
-import { type ColorValue, processColor, type ViewProps } from 'react-native';
-import type { DirectEventHandler, WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
+import { type ForwardedRef, forwardRef } from 'react';
 
-import NativePencilKitView, { Commands } from './spec/RNPencilKitNativeComponent';
+import type { PencilKitProps, PencilKitRef, PencilKitTool } from './component/PencilKit';
+import { PencilKit } from './component/PencilKit';
+import { PencilKitUtil } from './util/PencilKitUtil';
 
-export type PencilKitProps = {
-  alwaysBounceVertical?: boolean;
-  alwaysBounceHorizontal?: boolean;
-  isRulerActive?: boolean;
-  backgroundColor?: ColorValue;
-  drawingPolicy?: WithDefault<'default' | 'anyinput' | 'pencilonly', 'default'>;
-  isOpaque?: boolean;
-
-  onToolPickerVisibilityDidChange?: DirectEventHandler<{}>;
-  onToolPickerIsRulerActiveDidChange?: DirectEventHandler<{}>;
-  onToolPickerFramesObscuredDidChange?: DirectEventHandler<{}>;
-  onToolPickerSelectedToolDidChange?: DirectEventHandler<{}>;
-  onCanvasViewDidBeginUsingTool?: DirectEventHandler<{}>;
-  onCanvasViewDidEndUsingTool?: DirectEventHandler<{}>;
-  onCanvasViewDrawingDidChange?: DirectEventHandler<{}>;
-  onCanvasViewDidFinishRendering?: DirectEventHandler<{}>;
-} & ViewProps;
-export type PencilKitTool =
-  | 'pen'
-  | 'pencil'
-  | 'marker'
-  | 'monoline'
-  | 'fountainPen'
-  | 'watercolor'
-  | 'crayon'
-  | 'eraserVector'
-  | 'eraserBitmap'
-  | 'eraserFixedWidthBitmap';
-export type PencilKitRef = {
-  clear: () => void;
-  showToolPicker: () => void;
-  hideToolPicker: () => void;
-  redo: () => void;
-  undo: () => void;
-  saveDrawing: (path: string) => void;
-  loadDrawing: (path: string) => string;
-  getBase64Data: () => void;
-  loadBase64Data: (base64: string) => void;
-  setTool: (params: { toolType: PencilKitTool; width?: number; color?: ColorValue }) => void;
-};
-function PencilKit(
-  {
-    alwaysBounceHorizontal = true,
-    alwaysBounceVertical = true,
-    isRulerActive = false,
-    drawingPolicy = 'default',
-    backgroundColor,
-    isOpaque = true,
-    onToolPickerFramesObscuredDidChange,
-    onToolPickerIsRulerActiveDidChange,
-    onToolPickerSelectedToolDidChange,
-    onToolPickerVisibilityDidChange,
-    onCanvasViewDidBeginUsingTool,
-    onCanvasViewDidEndUsingTool,
-    onCanvasViewDidFinishRendering,
-    onCanvasViewDrawingDidChange,
-    ...rest
-  }: PencilKitProps,
-  ref: ForwardedRef<PencilKitRef>,
-) {
-  const nativeRef = useRef(null);
-  useImperativeHandle(
-    ref,
-    () => ({
-      clear: () => Commands.clear(nativeRef.current!),
-      showToolPicker: () => Commands.showToolPicker(nativeRef.current!),
-      hideToolPicker: () => Commands.hideToolPicker(nativeRef.current!),
-      redo: () => Commands.redo(nativeRef.current!),
-      undo: () => Commands.undo(nativeRef.current!),
-      saveDrawing: (path) => Commands.saveDrawing(nativeRef.current!, path),
-      loadDrawing: (path) => Commands.loadDrawing(nativeRef.current!, path),
-      getBase64Data: () => Commands.getBase64Data(nativeRef.current!),
-      loadBase64Data: (base64) => Commands.loadBase64Data(nativeRef.current!, base64),
-      setTool: ({ color, toolType, width }) =>
-        Commands.setTool(
-          nativeRef.current!,
-          toolType,
-          width ?? 0,
-          color ? (processColor(color) as number) : 0,
-        ),
-    }),
-    [],
-  );
-
-  return (
-    <NativePencilKitView
-      ref={nativeRef}
-      {...{
-        alwaysBounceHorizontal,
-        alwaysBounceVertical,
-        isRulerActive,
-        drawingPolicy,
-        backgroundColor: processColor(backgroundColor) as number,
-        isOpaque,
-        onToolPickerFramesObscuredDidChange,
-        onToolPickerIsRulerActiveDidChange,
-        onToolPickerSelectedToolDidChange,
-        onToolPickerVisibilityDidChange,
-        onCanvasViewDidBeginUsingTool,
-        onCanvasViewDidEndUsingTool,
-        onCanvasViewDidFinishRendering,
-        onCanvasViewDrawingDidChange,
-      }}
-      {...rest}
-    />
-  );
-}
-
-const PencilKitView = forwardRef(PencilKit);
+export const PencilKitView = forwardRef(
+  (props: PencilKitProps, ref: ForwardedRef<PencilKitRef>) => {
+    return <PencilKit {...props} ref={ref} />;
+  },
+);
 export default PencilKitView;
-export { PencilKitView as PencilKit };
+
+export type { PencilKitProps, PencilKitRef, PencilKitTool };
+export { PencilKitUtil };

src/util/PencilKitUtil.ios.ts

@@ -0,0 +1,6 @@
+import NativeRNPencilKitUtil from '../spec/NativeRNPencilKitUtil';
+
+export const PencilKitUtil = {
+  isPencilKitAvailable: NativeRNPencilKitUtil.isPencilKitAvailable,
+  getAvailableTools: NativeRNPencilKitUtil.getAvailableTools,
+};

src/util/PencilKitUtil.ts

@@ -0,0 +1,4 @@
+export const PencilKitUtil = {
+  isPencilKitAvailable: (): boolean => false,
+  getAvailableTools: (): string[] => [],
+};

tsconfig.json

@@ -18,7 +18,7 @@
     "noStrictGenericChecks": false,
     "noUncheckedIndexedAccess": true,
     "noUnusedLocals": true,
-    "noUnusedParameters": true,
+    "noUnusedParameters": false,
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,