@june24/expo-pdf-reader 0.1.0

package/src/ExpoPdfReader.types.ts

@@ -0,0 +1,99 @@
+import { ViewProps, StyleProp, ViewStyle } from 'react-native';
+
+export type AnnotationTool = 'none' | 'pen' | 'highlighter' | 'text' | 'note' | 'eraser';
+
+export type DisplayMode = 'single' | 'continuous' | 'twoUp' | 'twoUpContinuous';
+
+export type Point = { x: number; y: number };
+
+export type Annotation = {
+  type: 'pen' | 'highlighter' | 'text';
+  color: string;
+  page?: number;
+  points?: Point[][]; // For pen/highlighter
+  width?: number; // Stroke width or font size for text? Let's use fontSize for text explicitly
+  text?: string; // For text
+  fontSize?: number; // For text
+  x?: number; // For text
+  y?: number; // For text
+};
+
+export type AnnotationChangeEvent = {
+  nativeEvent: {
+    annotations: Annotation[];
+  };
+};
+
+export type PageChangeEvent = {
+  nativeEvent: {
+    page: number;
+    total: number;
+  };
+};
+
+export type ScrollEvent = {
+  nativeEvent: {
+    x: number;
+    y: number;
+    contentWidth: number;
+    contentHeight: number;
+    layoutWidth: number;
+    layoutHeight: number;
+  };
+};
+
+export type SearchResult = {
+  page: number;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  textSnippet?: string;
+};
+
+// Public API: group drawing configuration into a single object
+export type AnnotationOptions = {
+  tool?: AnnotationTool;
+  color?: string; // Hex color
+  fontSize?: number;
+  text?: string;
+  strokeWidth?: number; // line thickness for pen/highlighter
+};
+
+// Props exposed to JS users of the component
+export type ExpoPdfReaderViewProps = ViewProps & {
+  url: string;
+  style?: StyleProp<ViewStyle>;
+  displayMode?: DisplayMode; // 'single' | 'continuous' | 'twoUp' | 'twoUpContinuous'
+  initialPage?: number; // starting page index (0-based)
+  minZoom?: number;
+  maxZoom?: number;
+  annotationOptions?: AnnotationOptions;
+  initialAnnotations?: Annotation[];
+  onAnnotationChange?: (event: AnnotationChangeEvent) => void;
+  onPageChange?: (event: PageChangeEvent) => void;
+  onScroll?: (event: ScrollEvent) => void;
+};
+
+// Internal props that the native view actually receives.
+// This keeps backwards-compat with the native module while giving
+// JS a cleaner grouped API via `annotationOptions`.
+export type NativeExpoPdfReaderViewProps = ViewProps & {
+  url: string;
+  style?: StyleProp<ViewStyle>;
+  displayMode?: DisplayMode;
+  initialPage?: number;
+  minZoom?: number;
+  maxZoom?: number;
+  annotationTool?: AnnotationTool;
+  annotationColor?: string; // Hex color
+  annotationFontSize?: number;
+  annotationText?: string; // Default text to place
+   // Native-only props derived from AnnotationOptions
+  annotationStrokeWidth?: number;
+  initialAnnotations?: Annotation[];
+  onAnnotationChange?: (event: AnnotationChangeEvent) => void;
+  onPageChange?: (event: PageChangeEvent) => void;
+  onScroll?: (event: ScrollEvent) => void;
+};
+

package/src/ExpoPdfReaderView.tsx

@@ -0,0 +1,137 @@
+import { requireNativeModule } from 'expo-modules-core';
+import { requireNativeViewManager } from 'expo-modules-core';
+import * as React from 'react';
+import { findNodeHandle } from 'react-native';
+
+import {
+  ExpoPdfReaderViewProps,
+  NativeExpoPdfReaderViewProps,
+  Annotation,
+  SearchResult,
+} from './ExpoPdfReader.types';
+
+const NativeView: React.ComponentType<
+  NativeExpoPdfReaderViewProps & { ref?: React.Ref<any> }
+> = requireNativeViewManager('ExpoPdfReader');
+
+const NativeModule = requireNativeModule('ExpoPdfReader');
+
+export type ExpoPdfReaderRef = {
+  save: () => Promise<string>;
+  getAnnotations: () => Promise<Annotation[]>;
+  searchText: (text: string) => Promise<SearchResult[]>;
+  goToPage: (page: number) => Promise<void>;
+  undo: () => Promise<boolean>;
+  redo: () => Promise<boolean>;
+  zoomIn: () => Promise<boolean>;
+  zoomOut: () => Promise<boolean>;
+  renderThumbnail: (page: number, width: number) => Promise<string>;
+};
+
+const ExpoPdfReaderView = React.forwardRef<ExpoPdfReaderRef, ExpoPdfReaderViewProps>(
+  (props, ref) => {
+    const nativeRef = React.useRef<any>(null);
+
+    React.useImperativeHandle(ref, () => ({
+      save: async () => {
+        if (nativeRef.current) {
+          const viewTag = findNodeHandle(nativeRef.current);
+          if (viewTag && NativeModule && NativeModule.save) {
+            return await NativeModule.save(viewTag);
+          }
+        }
+        throw new Error('Cannot save: Native view not found');
+      },
+      getAnnotations: async () => {
+        if (nativeRef.current) {
+          const viewTag = findNodeHandle(nativeRef.current);
+          if (viewTag && NativeModule && NativeModule.getAnnotations) {
+            return await NativeModule.getAnnotations(viewTag);
+          }
+        }
+        return [];
+      },
+      searchText: async (text: string) => {
+        if (nativeRef.current) {
+          const viewTag = findNodeHandle(nativeRef.current);
+          if (viewTag && NativeModule && NativeModule.searchText) {
+            return await NativeModule.searchText(viewTag, text);
+          }
+        }
+        return [];
+      },
+      goToPage: async (page: number) => {
+        if (nativeRef.current) {
+          const viewTag = findNodeHandle(nativeRef.current);
+          if (viewTag && NativeModule && NativeModule.goToPage) {
+            return await NativeModule.goToPage(viewTag, page);
+          }
+        }
+      },
+      undo: async () => {
+        if (nativeRef.current) {
+          const viewTag = findNodeHandle(nativeRef.current);
+          if (viewTag && NativeModule && NativeModule.undo) {
+            return await NativeModule.undo(viewTag);
+          }
+        }
+        return false;
+      },
+      redo: async () => {
+        if (nativeRef.current) {
+          const viewTag = findNodeHandle(nativeRef.current);
+          if (viewTag && NativeModule && NativeModule.redo) {
+            return await NativeModule.redo(viewTag);
+          }
+        }
+        return false;
+      },
+      zoomIn: async () => {
+        if (nativeRef.current) {
+          const viewTag = findNodeHandle(nativeRef.current);
+          if (viewTag && NativeModule && NativeModule.zoomIn) {
+            return await NativeModule.zoomIn(viewTag);
+          }
+        }
+        return false;
+      },
+      zoomOut: async () => {
+        if (nativeRef.current) {
+          const viewTag = findNodeHandle(nativeRef.current);
+          if (viewTag && NativeModule && NativeModule.zoomOut) {
+            return await NativeModule.zoomOut(viewTag);
+          }
+        }
+        return false;
+      },
+      renderThumbnail: async (page: number, width: number) => {
+        if (nativeRef.current) {
+          const viewTag = findNodeHandle(nativeRef.current);
+          if (viewTag && NativeModule && NativeModule.renderThumbnail) {
+            return await NativeModule.renderThumbnail(viewTag, page, width);
+          }
+        }
+        return '';
+      },
+    }));
+
+    const { annotationOptions, ...restProps } = props;
+
+    const nativeProps: NativeExpoPdfReaderViewProps = {
+      ...(restProps as NativeExpoPdfReaderViewProps),
+      displayMode: props.displayMode,
+      initialPage: props.initialPage,
+      minZoom: props.minZoom,
+      maxZoom: props.maxZoom,
+      annotationTool: annotationOptions?.tool,
+      annotationColor: annotationOptions?.color,
+      annotationFontSize: annotationOptions?.fontSize,
+      annotationText: annotationOptions?.text,
+      annotationStrokeWidth: annotationOptions?.strokeWidth,
+    };
+
+    return <NativeView ref={nativeRef} {...nativeProps} />;
+  }
+);
+
+export default ExpoPdfReaderView;

package/src/index.ts

@@ -0,0 +1,4 @@
+import ExpoPdfReaderView from './ExpoPdfReaderView';
+import { ExpoPdfReaderViewProps } from './ExpoPdfReader.types';
+
+export { ExpoPdfReaderView, ExpoPdfReaderViewProps };

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./node_modules/expo-module-scripts/tsconfig.base",
+  "compilerOptions": {
+    "outDir": "build",
+    "rootDir": "src"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["**/__tests__/*", "example/**/*"]
+}