Fixed typescript types not showing

Breaking change: Use useRef<CameraApi>() instead of useRef<Camera>()
Fixed incorrect type of errorMessage

package.json

@@ -26,6 +26,8 @@
   "main": "dist/index.js",
   "module": "dist/index.js",
   "source": "./src/",
+  "types": "dist/index.d.ts",
+  "react-native": "src/index",
   "dependencies": {},
   "license": "MIT",
   "devDependencies": {

src/Camera.android.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import { requireNativeComponent, findNodeHandle, NativeModules, processColor } from 'react-native';
-import { CameraApi } from './types';
-import { CameraProps } from './Camera';
+import type { CameraApi } from './types';
+import type { CameraProps } from './CameraProps';
 
 const { RNCameraKitModule } = NativeModules;
 const NativeCamera = requireNativeComponent('CKCameraManager');
 
-const Camera = React.forwardRef((props: CameraProps, ref) => {
-  const nativeRef = React.useRef();
+const Camera = React.forwardRef<CameraApi, CameraProps>((props, ref) => {
+  const nativeRef = React.useRef(null);
 
-  React.useImperativeHandle<any, CameraApi>(ref, () => ({
+  React.useImperativeHandle(ref, () => ({
     capture: async (options = {}) => {
       // Because RN doesn't support return types for ViewManager methods
       // we must use the general module and tell it what View it's supposed to be using

src/Camera.ios.tsx

@@ -1,15 +1,18 @@
 import React from 'react';
 import { requireNativeComponent, NativeModules } from 'react-native';
-import { CameraApi } from './types';
-import { CameraProps } from './Camera';
+import type { CameraApi } from './types';
+import type { CameraProps } from './CameraProps';
 
 const { CKCameraManager } = NativeModules;
 const NativeCamera = requireNativeComponent('CKCamera');
 
-const Camera = React.forwardRef((props: CameraProps, ref: any) => {
-  const nativeRef = React.useRef();
+const Camera = React.forwardRef<CameraApi, CameraProps>((props, ref) => {
+  const nativeRef = React.useRef(null);
 
-  React.useImperativeHandle<any, CameraApi>(ref, () => ({
+  props.resetFocusTimeout = props.resetFocusTimeout ?? 0;
+  props.resetFocusWhenMotionDetected = props.resetFocusWhenMotionDetected ?? true;
+
+  React.useImperativeHandle(ref, () => ({
     capture: async () => {
       return await CKCameraManager.capture({});
     },
@@ -24,9 +27,4 @@ const Camera = React.forwardRef((props: CameraProps, ref: any) => {
   return <NativeCamera style={{ minWidth: 100, minHeight: 100 }} ref={nativeRef} {...props} />;
 });
 
-Camera.defaultProps = {
-  resetFocusTimeout: 0,
-  resetFocusWhenMotionDetected: true,
-};
-
 export default Camera;

src/Camera.tsx

@@ -0,0 +1,10 @@
+import { lazy } from 'react';
+import { Platform } from 'react-native';
+
+const Camera = lazy(() =>
+  Platform.OS === 'ios'
+    ? import('./Camera.ios')
+    : import('./Camera.android'),
+);
+
+export default Camera;

src/Camera.d.ts → src/CameraProps.ts

@@ -1,4 +1,13 @@
-import { CameraApi, FlashMode, FocusMode, ZoomMode, TorchMode, CameraType, CodeFormat, ResizeMode } from './types';
+import { type ViewProps } from 'react-native';
+import {
+  CameraType,
+  type FlashMode,
+  type FocusMode,
+  type ZoomMode,
+  type TorchMode,
+  type ResizeMode,
+  type CodeFormat,
+} from './types';
 import { Orientation } from './index';
 
 export type OnReadCodeData = {
@@ -10,7 +19,7 @@ export type OnReadCodeData = {
 
 export type OnOrientationChangeData = {
   nativeEvent: {
-    orientation: Orientation;
+    orientation: typeof Orientation;
   };
 };
 
@@ -20,9 +29,7 @@ export type OnZoom = {
   };
 }
 
-export interface CameraProps {
-  ref?: LegacyRef<Component<CameraApi, {}, any>>;
-  style?: StyleProp<ViewStyle>;
+export interface CameraProps extends ViewProps {
   // Behavior
   flashMode?: FlashMode;
   focusMode?: FocusMode;
@@ -84,7 +91,7 @@ export interface CameraProps {
    */
   onZoom?: (event: OnZoom) => void;
   /** **Android only**. Triggered when camera fails to initialize */
-  onError?: (event: { nativeEvent: { errorMessage: number } }) => void;
+  onError?: (event: { nativeEvent: { errorMessage: string } }) => void;
   // Barcode only
   scanBarcode?: boolean;
   showFrame?: boolean;
@@ -104,7 +111,3 @@ export interface CameraProps {
   onCaptureButtonPressIn?: ({ nativeEvent: {} }) => void;
   onCaptureButtonPressOut?: ({ nativeEvent: {} }) => void;
 }
-
-declare const Camera: React.FC<CameraProps>;
-
-export default Camera;

src/index.ts

@@ -1,7 +1,16 @@
 import { NativeModules } from 'react-native';
 
 import Camera from './Camera';
-import { CameraApi, CameraType, CaptureData, FlashMode, FocusMode, TorchMode, ZoomMode, ResizeMode } from './types';
+import {
+  CameraType,
+  type CameraApi,
+  type CaptureData,
+  type FlashMode,
+  type FocusMode,
+  type TorchMode,
+  type ZoomMode,
+  type ResizeMode,
+} from './types';
 
 const { CameraKit } = NativeModules;
 
@@ -15,4 +24,5 @@ export const Orientation = {
 
 export default CameraKit;
 
-export type { Camera, CameraType, TorchMode, FlashMode, FocusMode, ZoomMode, CameraApi, CaptureData, ResizeMode };
+export { Camera, CameraType };
+export type { TorchMode, FlashMode, FocusMode, ZoomMode, CameraApi, CaptureData, ResizeMode };

src/types.ts

@@ -3,7 +3,20 @@ export enum CameraType {
   Back = 'back',
 }
 
-export type CodeFormat = 'code-128' | 'code-39' | 'code-93' | 'codabar' | 'ean-13' | 'ean-8' | 'itf' | 'upc-e' | 'qr' | 'pdf-417' | 'aztec' | 'data-matrix' | 'unknown';
+export type CodeFormat =
+  | 'code-128'
+  | 'code-39'
+  | 'code-93'
+  | 'codabar'
+  | 'ean-13'
+  | 'ean-8'
+  | 'itf'
+  | 'upc-e'
+  | 'qr'
+  | 'pdf-417'
+  | 'aztec'
+  | 'data-matrix'
+  | 'unknown';
 
 export type TorchMode = 'on' | 'off';
 
@@ -32,5 +45,3 @@ export type CameraApi = {
   requestDeviceCameraAuthorization: () => Promise<boolean>;
   checkDeviceCameraAuthorizationStatus: () => Promise<boolean>;
 };
-
-

tsconfig.json

@@ -1,26 +1,27 @@
 {
-  "extends": "@react-native/typescript-config/tsconfig.json",
   "compilerOptions": {
+    "rootDir": "./src",
     "declaration": true,
     "declarationDir": "./dist/",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "importHelpers": true,
     "jsx": "react-native",
-    "lib": ["ES6"],
-    "module": "ES6",
-    "moduleResolution": "Node16",
+    "lib": ["esnext"],
+    "module": "esnext",
+    "moduleResolution": "node",
     "noImplicitAny": true,
     "noImplicitReturns": true,
     "noImplicitThis": true,
     "noUnusedLocals": false,
     "outDir": "./dist",
-    "rootDir": "./src",
     "sourceMap": true,
     "removeComments": true,
     "strictNullChecks": true,
-    "target": "ES6",
-    "skipLibCheck": true
+    "target": "esnext",
+    "skipLibCheck": true,
+    "strict": true,
+    "verbatimModuleSyntax": true
   },
   "include": ["./src/**/*.ts", "./src/**/*.tsx"],
   "exclude": ["**/__tests__/*", "*.test.tsx"]