@instaread-co/react-native-instaread-sdk 1.3.4

package/lib/typescript/src/InstareadPlayerView.d.ts

@@ -0,0 +1,49 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+declare const OWNED_STYLE_KEYS: readonly ["height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "flex", "flexGrow", "flexShrink", "flexBasis", "aspectRatio"];
+export type InstareadPlayerStyle = Omit<ViewStyle, (typeof OWNED_STYLE_KEYS)[number]>;
+export type InstareadPlayerViewProps = {
+    /** The article's own page URL — the same one the web player is given. */
+    articleUrl: string;
+    /**
+     * Your Instaread publication slug. Leave it out to use the one passed to
+     * `InstareadPlayer.configure`.
+     */
+    publication?: string;
+    /**
+     * Render the dark palette. Your app decides — the SDK never reads the
+     * device's appearance itself, because an app with its own in-app theme
+     * toggle can be dark while the phone is light.
+     */
+    dark?: boolean;
+    /**
+     * Placement only — margins, alignment, padding. The player's own size is not
+     * yours to set: width, height, their min/max forms, flex and aspectRatio are
+     * ignored. It fills the container you put it in and is as tall as the player
+     * itself reports.
+     */
+    style?: StyleProp<InstareadPlayerStyle>;
+    /**
+     * Called once this player has shown something for `articleUrl` — the
+     * player itself, or Instaread's "Audio Coming Soon" state. Fires at most
+     * once per `articleUrl`/`publication`; changing either resets it.
+     *
+     * There is no `onPlay`/`onPause`/`onEnded`: playback stays inside the
+     * player by design (see the README).
+     */
+    onReady?: () => void;
+    /**
+     * Called once if nothing has rendered {@link EMPTY_AFTER_MS} after
+     * mounting, or after `articleUrl`/`publication` changes — typically a
+     * wrong or not-yet-enabled `publication`, or no network. A heuristic, not
+     * a real error from the player (see the type's own note above); never
+     * fires after `onReady` has.
+     */
+    onError?: () => void;
+};
+/**
+ * The Instaread player for an article. It sizes itself: zero height until there
+ * is something to show, then the loader, then the player.
+ */
+export declare function InstareadPlayerView({ articleUrl, publication, dark, style, onReady, onError, }: InstareadPlayerViewProps): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=InstareadPlayerView.d.ts.map

package/lib/typescript/src/NativeInstareadReactNative.d.ts

@@ -0,0 +1,7 @@
+import { type TurboModule } from 'react-native';
+export interface Spec extends TurboModule {
+    configure(publication: string): void;
+}
+declare const _default: Spec | null | undefined;
+export default _default;
+//# sourceMappingURL=NativeInstareadReactNative.d.ts.map

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,4 @@
+export { InstareadPlayer } from './InstareadPlayer.js';
+export { InstareadPlayerView } from './InstareadPlayerView.js';
+export type { InstareadPlayerViewProps } from './InstareadPlayerView.js';
+//# sourceMappingURL=index.d.ts.map

package/package.json

@@ -0,0 +1,124 @@
+{
+  "name": "@instaread-co/react-native-instaread-sdk",
+  "version": "1.3.4",
+  "description": "Instaread audio player for React Native, iOS and Android (wraps the native InstareadSDK)",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "ios",
+    "android",
+    "*.podspec",
+    "!ios/build",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*",
+    "CHANGELOG.md",
+    "!lib/**/*.map",
+    "!android/build",
+    "!android/.gradle"
+  ],
+  "scripts": {
+    "clean": "del-cli lib dist",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\""
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android",
+    "instaread",
+    "audio"
+  ],
+  "author": "Instaread",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/instaread-co/instaread-react-native-sdk.git"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^2.1.0",
+    "@eslint/eslintrc": "^3.3.6",
+    "@eslint/js": "^9.39.5",
+    "@react-native/babel-preset": "0.86.2",
+    "@react-native/eslint-config": "0.86.2",
+    "@types/react": "^19.2.0",
+    "del-cli": "^7.0.0",
+    "eslint": "^9.39.5",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-ft-flow": "^3.0.11",
+    "eslint-plugin-prettier": "^5.5.6",
+    "prettier": "^3.9.6",
+    "react": "19.2.3",
+    "react-native": "0.86.2",
+    "react-native-builder-bob": "^0.43.1",
+    "typescript": "^6.0.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": ">=0.76.0"
+  },
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "codegenConfig": {
+    "name": "InstareadReactNativeSpec",
+    "type": "all",
+    "jsSrcsDir": "src",
+    "ios": {
+      "components": {
+        "InstareadNativePlayer": {
+          "className": "InstareadNativePlayerComponentView"
+        }
+      }
+    },
+    "android": {
+      "javaPackageName": "com.instaread.reactnative"
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "create-react-native-library": {
+    "type": "fabric-view",
+    "languages": "kotlin-objc",
+    "tools": [
+      "eslint"
+    ],
+    "version": "0.63.1"
+  }
+}

package/src/InstareadNativePlayerNativeComponent.ts

@@ -0,0 +1,22 @@
+// The codegen types are imported from their original paths, not from the
+// `react-native` root: the root only re-exports them (as `CodegenTypes`) in
+// newer React Native, and the code generator on older versions doesn't
+// recognise that namespace form.
+import type { ViewProps } from 'react-native';
+import type {
+  DirectEventHandler,
+  Double,
+} from 'react-native/Libraries/Types/CodegenTypes';
+// eslint-disable-next-line @react-native/no-deep-imports -- deliberate, see above
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+type HeightChangeEvent = Readonly<{ height: Double }>;
+
+export interface NativeProps extends ViewProps {
+  publication?: string;
+  articleUrl?: string;
+  dark?: boolean;
+  onHeightChange?: DirectEventHandler<HeightChangeEvent>;
+}
+
+export default codegenNativeComponent<NativeProps>('InstareadNativePlayer');

package/src/InstareadPlayer.ts

@@ -0,0 +1,14 @@
+import NativeInstareadReactNative from './NativeInstareadReactNative';
+
+export const InstareadPlayer = {
+  /**
+   * Call once at app start, before anything renders.
+   *
+   * Sets the publication that `<InstareadPlayerView articleUrl=... />` uses and
+   * turns on the Instaread mini player, which floats above your app while
+   * something plays.
+   */
+  configure(publication: string): void {
+    NativeInstareadReactNative?.configure(publication);
+  },
+};

package/src/InstareadPlayerView.tsx

@@ -0,0 +1,219 @@
+import {
+  Component,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import {
+  Platform,
+  StyleSheet,
+  type NativeSyntheticEvent,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+type NativePlayerComponent =
+  typeof import('./InstareadNativePlayerNativeComponent').default;
+
+// In a release build the player stays silent whatever goes wrong; while
+// developing, say why nothing shows.
+function warnInDev(message: string) {
+  if (__DEV__) {
+    console.warn(`[InstareadSDK] ${message}`);
+  }
+}
+
+// iOS and Android both ship the native component. Anywhere else (web, for
+// instance) requiring it would register a component that doesn't exist, so the
+// player renders nothing instead.
+function loadNativePlayer(): NativePlayerComponent | null {
+  if (Platform.OS !== 'ios' && Platform.OS !== 'android') {
+    return null;
+  }
+  try {
+    return require('./InstareadNativePlayerNativeComponent').default;
+  } catch (error) {
+    warnInDev(`The native player could not be loaded: ${String(error)}`);
+    return null;
+  }
+}
+
+const NativePlayer = loadNativePlayer();
+
+/**
+ * The player never puts an error in your app: if the native side is missing
+ * (say the app wasn't rebuilt after installing the SDK), it renders nothing.
+ */
+class FailSilent extends Component<
+  { children: ReactNode },
+  { failed: boolean }
+> {
+  override state = { failed: false };
+
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+
+  override componentDidCatch(error: Error) {
+    warnInDev(
+      `The player could not be shown (${error.message}). Rebuild the app after installing the SDK` +
+        (Platform.OS === 'ios' ? ', running `pod install` first.' : '.')
+    );
+  }
+
+  override render() {
+    return this.state.failed ? null : this.props.children;
+  }
+}
+
+// The player's size is decided on Instaread's side — the height is reported by
+// the player itself and the width always fills whatever container it is placed
+// in, matching the native SDKs (Compose appends fillMaxWidth(), the Android
+// View takes its parent's width, SwiftUI takes the available width). So none of
+// these can be set from the app; placement — margins, alignment, padding — is
+// still yours.
+const OWNED_STYLE_KEYS = [
+  'height',
+  'minHeight',
+  'maxHeight',
+  'width',
+  'minWidth',
+  'maxWidth',
+  'flex',
+  'flexGrow',
+  'flexShrink',
+  'flexBasis',
+  'aspectRatio',
+] as const;
+
+export type InstareadPlayerStyle = Omit<
+  ViewStyle,
+  (typeof OWNED_STYLE_KEYS)[number]
+>;
+
+function layoutOnly(style: StyleProp<InstareadPlayerStyle>): ViewStyle {
+  const flat: Record<string, unknown> = { ...StyleSheet.flatten(style) };
+  for (const key of OWNED_STYLE_KEYS) {
+    delete flat[key];
+  }
+  return flat as ViewStyle;
+}
+
+// How long to wait, after mounting or after articleUrl/publication changes,
+// before treating a still-empty player as onError. Not a signal from the
+// player itself — the native SDK never reports a distinct error, so this is
+// a React Native-side guess, and a legitimately slow load looks the same as
+// a real failure until it either resolves or this fires. 15s, not something
+// shorter: the server can be slow to respond while autoscaling.
+const EMPTY_AFTER_MS = 15000;
+
+export type InstareadPlayerViewProps = {
+  /** The article's own page URL — the same one the web player is given. */
+  articleUrl: string;
+  /**
+   * Your Instaread publication slug. Leave it out to use the one passed to
+   * `InstareadPlayer.configure`.
+   */
+  publication?: string;
+  /**
+   * Render the dark palette. Your app decides — the SDK never reads the
+   * device's appearance itself, because an app with its own in-app theme
+   * toggle can be dark while the phone is light.
+   */
+  dark?: boolean;
+  /**
+   * Placement only — margins, alignment, padding. The player's own size is not
+   * yours to set: width, height, their min/max forms, flex and aspectRatio are
+   * ignored. It fills the container you put it in and is as tall as the player
+   * itself reports.
+   */
+  style?: StyleProp<InstareadPlayerStyle>;
+  /**
+   * Called once this player has shown something for `articleUrl` — the
+   * player itself, or Instaread's "Audio Coming Soon" state. Fires at most
+   * once per `articleUrl`/`publication`; changing either resets it.
+   *
+   * There is no `onPlay`/`onPause`/`onEnded`: playback stays inside the
+   * player by design (see the README).
+   */
+  onReady?: () => void;
+  /**
+   * Called once if nothing has rendered {@link EMPTY_AFTER_MS} after
+   * mounting, or after `articleUrl`/`publication` changes — typically a
+   * wrong or not-yet-enabled `publication`, or no network. A heuristic, not
+   * a real error from the player (see the type's own note above); never
+   * fires after `onReady` has.
+   */
+  onError?: () => void;
+};
+
+/**
+ * The Instaread player for an article. It sizes itself: zero height until there
+ * is something to show, then the loader, then the player.
+ */
+export function InstareadPlayerView({
+  articleUrl,
+  publication,
+  dark = false,
+  style,
+  onReady,
+  onError,
+}: InstareadPlayerViewProps) {
+  const [height, setHeight] = useState(0);
+  const isReady = useRef(false);
+  const emptyTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // A new article/publication is a fresh attempt: forget the last result and
+  // give this one its own onError timeout.
+  useEffect(() => {
+    isReady.current = false;
+    setHeight(0);
+    emptyTimer.current = setTimeout(() => {
+      if (!isReady.current) {
+        onError?.();
+      }
+    }, EMPTY_AFTER_MS);
+    return () => {
+      if (emptyTimer.current) {
+        clearTimeout(emptyTimer.current);
+      }
+    };
+    // Only articleUrl/publication/dark should restart the attempt — not
+    // identity changes of onReady/onError themselves.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [articleUrl, publication, dark]);
+
+  const onHeightChange = useCallback(
+    (event: NativeSyntheticEvent<Readonly<{ height: number }>>) => {
+      const next = event.nativeEvent.height;
+      setHeight(next);
+      if (next > 0 && !isReady.current) {
+        isReady.current = true;
+        if (emptyTimer.current) {
+          clearTimeout(emptyTimer.current);
+        }
+        onReady?.();
+      }
+    },
+    [onReady]
+  );
+  const layout = useMemo(() => layoutOnly(style), [style]);
+
+  if (!NativePlayer) {
+    return null;
+  }
+  return (
+    <FailSilent>
+      <NativePlayer
+        articleUrl={articleUrl}
+        publication={publication ?? ''}
+        dark={dark}
+        onHeightChange={onHeightChange}
+        style={[layout, { height }]}
+      />
+    </FailSilent>
+  );
+}

package/src/NativeInstareadReactNative.ts

@@ -0,0 +1,9 @@
+import { TurboModuleRegistry, type TurboModule } from 'react-native';
+
+export interface Spec extends TurboModule {
+  configure(publication: string): void;
+}
+
+// `get`, not `getEnforcing`: on a platform without the native module (Android)
+// `InstareadPlayer.configure` is a no-op instead of a crash in the app.
+export default TurboModuleRegistry.get<Spec>('InstareadReactNative');

package/src/index.tsx

@@ -0,0 +1,3 @@
+export { InstareadPlayer } from './InstareadPlayer';
+export { InstareadPlayerView } from './InstareadPlayerView';
+export type { InstareadPlayerViewProps } from './InstareadPlayerView';

package/src/react-native-deep-imports.d.ts

@@ -0,0 +1,21 @@
+// Types for the two original-path imports used by the codegen spec
+// (InstareadNativePlayerNativeComponent.ts). The React Native we type-check
+// against no longer ships declarations at these paths. The code generator reads
+// the spec's source, not these; they only keep `tsc` happy.
+declare module 'react-native/Libraries/Types/CodegenTypes' {
+  import type { NativeSyntheticEvent } from 'react-native';
+
+  export type Double = number;
+  export type DirectEventHandler<T> = (
+    event: NativeSyntheticEvent<T>
+  ) => void | Promise<void>;
+}
+
+declare module 'react-native/Libraries/Utilities/codegenNativeComponent' {
+  import type { HostComponent } from 'react-native';
+
+  export default function codegenNativeComponent<Props extends object>(
+    componentName: string,
+    options?: object
+  ): HostComponent<Props>;
+}