teads-react-native 6.0.2

package/package.json

@@ -0,0 +1,227 @@
+{
+  "name": "teads-react-native",
+  "version": "6.0.2",
+  "description": "Easily embed Teads Widgets in your React Native app!",
+  "source": "./src/index.tsx",
+  "main": "./lib/commonjs/index.js",
+  "module": "./lib/module/index.js",
+  "react-native": "src/index.tsx",
+  "types": "./lib/typescript/module/src/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./lib/typescript/module/src/index.d.ts",
+        "default": "./lib/module/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/src/index.d.ts",
+        "default": "./lib/commonjs/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "preinstall": "node -e \"const [major, minor, patch] = process.versions.node.split('.').map(Number); if (major < 20 || (major === 20 && minor < 19)) { console.error('❌ Node 20.19.0+ required'); process.exit(1); }\"",
+    "example": "yarn workspace teads-react-native-example",
+    "test": "jest",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
+    "prepare": "bob build",
+    "release": "release-it"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/teads"
+  },
+  "author": "Teads Development Team",
+  "license": "Copyright © 2025 Teads. All rights reserved.",
+  "bugs": {
+    "url": "https://github.com/teads"
+  },
+  "homepage": "https://developers.teads.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.6.0",
+    "@eslint/compat": "^1.2.7",
+    "@eslint/eslintrc": "^3.3.0",
+    "@eslint/js": "^9.22.0",
+    "@evilmartians/lefthook": "^1.5.0",
+    "@react-native-community/cli": "15.0.1",
+    "@react-native/eslint-config": "^0.78.0",
+    "@release-it/conventional-changelog": "^9.0.2",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^19.0.0",
+    "commitlint": "^19.6.1",
+    "del-cli": "^5.1.0",
+    "eslint": "^9.22.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-prettier": "^5.2.3",
+    "jest": "^29.7.0",
+    "prettier": "^3.0.3",
+    "react": "19.0.0",
+    "react-native": "0.78.2",
+    "react-native-builder-bob": "^0.40.12",
+    "react-native-codegen": "^0.70.7",
+    "react-native-safe-area-context": "^5.4.0",
+    "release-it": "^17.10.0",
+    "turbo": "^1.10.7",
+    "typescript": "^5.2.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-safe-area-context": ">=4.0.0"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@3.6.1",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@react-native",
+      "prettier"
+    ],
+    "rules": {
+      "react/react-in-jsx-scope": "off",
+      "prettier/prettier": [
+        "error",
+        {
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 2,
+          "trailingComma": "es5",
+          "useTabs": false
+        }
+      ]
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "codegen",
+      [
+        "commonjs",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "engines": {
+    "node": ">=20.19.0"
+  },
+  "codegenConfig": {
+    "name": "RNTeadsReactNativeViewSpec",
+    "type": "all",
+    "jsSrcsDir": "src",
+    "outputDir": {
+      "ios": "ios/generated",
+      "android": "android/generated"
+    },
+    "android": {
+      "javaPackageName": "tv.teads.reactnative"
+    },
+    "ios": {
+      "componentProvider": {
+        "TeadsAdPlacementFeed": "RCTTeadsAdPlacementFeed",
+        "TeadsAdPlacementMedia": "RCTTeadsAdPlacementMedia"
+      }
+    },
+    "includesGeneratedCode": true
+  },
+  "create-react-native-library": {
+    "languages": "kotlin-objc",
+    "type": "fabric-view",
+    "version": "0.49.8"
+  },
+  "dependencies": {
+    "@react-native/gradle-plugin": "0.78.2",
+    "@react-navigation/native": "^7.1.6",
+    "@react-navigation/stack": "^7.2.10",
+    "react-native-gesture-handler": "^2.29.1",
+    "react-native-inappbrowser-reborn": "^3.7.0"
+  }
+}

package/src/DefaultTeadsWidgetHandler.ts

@@ -0,0 +1,17 @@
+import type { TeadsAdPlacementHandler } from './types';
+import { TeadsInAppBrowser } from './TeadsInAppBrowser';
+
+const DefaultHandler: TeadsAdPlacementHandler = {
+  onHeightChange: (_newHeight) => {},
+  onRecClick: (url) => {
+    console.log('onRecClick', url);
+    // no need to open - SDK will open outside of the app
+  },
+  onOrganicClick: (url) => {
+    console.log('onOrganicClick', url);
+    TeadsInAppBrowser.open(url);
+  },
+  onWidgetEvent: (_eventName, _data) => {},
+};
+
+export default DefaultHandler;

package/src/TeadsAdPlacementFeed.tsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import {
+  NativeEventEmitter,
+  NativeModules,
+  type ViewStyle,
+} from 'react-native';
+import type {
+  TeadsAdPlacementFeedProps,
+  TeadsAdPlacementHandler,
+  TeadsAdPlacementFeedDefaultProps,
+} from './types';
+import DefaultHandler from './DefaultTeadsWidgetHandler';
+import { packageVersion } from './version';
+import TeadsAdPlacementFeedNative from './WebViewNativeComponent';
+import { requiredPropsNames } from './constants';
+
+class TeadsWidgetCls extends React.Component<TeadsAdPlacementFeedProps> {
+  static defaultProps = {
+    darkMode: false,
+  } as TeadsAdPlacementFeedDefaultProps;
+
+  private widgetRandomId: number;
+  private eventEmitter: NativeEventEmitter;
+  private handler: TeadsAdPlacementHandler;
+  listeners: Array<{ remove: () => void }> = [];
+  private _isMounted: boolean = false;
+
+  state = {
+    height: 0,
+  };
+
+  constructor(props: TeadsAdPlacementFeedProps) {
+    super(props);
+
+    requiredPropsNames.forEach((propName) => {
+      if (props[propName] === undefined || props[propName] === null) {
+        throw new Error(`Missing required prop: ${propName}`);
+      }
+    });
+
+    this.widgetRandomId = Math.floor(Math.random() * 1000000); // random ID to identify the widget instance
+    this.handler = props.handler === undefined ? DefaultHandler : props.handler;
+    this.eventEmitter = new NativeEventEmitter(NativeModules.TeadsEventModule);
+
+    this.handleHeightChange = this.handleHeightChange.bind(this);
+    this.handleRecClick = this.handleRecClick.bind(this);
+    this.handleOrganicClick = this.handleOrganicClick.bind(this);
+    this.handleWidgetEvent = this.handleWidgetEvent.bind(this);
+  }
+
+  componentDidMount() {
+    this._isMounted = true;
+    this.setupEventListeners();
+  }
+
+  componentWillUnmount() {
+    this._isMounted = false;
+    this.listeners.forEach((listener) => listener.remove());
+    this.listeners = [];
+  }
+
+  setupEventListeners() {
+    const events = [
+      { name: 'didChangeHeight', handler: this.handleHeightChange },
+      { name: 'onRecClick', handler: this.handleRecClick },
+      { name: 'onOrganicClick', handler: this.handleOrganicClick },
+      { name: 'onWidgetEvent', handler: this.handleWidgetEvent },
+    ];
+
+    events.forEach((event) => {
+      const listener = this.eventEmitter.addListener(event.name, event.handler);
+      this.listeners.push(listener);
+    });
+  }
+
+  handleHeightChange(event: any) {
+    if (event.widgetRandomId !== this.widgetRandomId) {
+      return;
+    }
+    // Guard against setState on unmounted component
+    if (!this._isMounted) {
+      return;
+    }
+    console.log(`${this.props.widgetId}; onHeightChange: ${event.height} - was: ${this.state.height}`);
+    if (event.height != this.state.height) {
+      this.setState({ height: event.height });
+      console.log(`${this.props.widgetId}; onHeightChange: ${event.height}`);
+      this.handler.onHeightChange?.(event.height);
+    }
+  }
+
+  handleRecClick(event: any) {
+    if (event.widgetRandomId !== this.widgetRandomId || !this._isMounted) {
+      return;
+    }
+
+    console.log(`${this.props.widgetId}; onRecClick`);
+    this.handler.onRecClick?.(event.url);
+  }
+
+  handleOrganicClick(event: any) {
+    if (event.widgetRandomId !== this.widgetRandomId || !this._isMounted) {
+      return;
+    }
+
+    console.log(`${this.props.widgetId}; onOrganicClick`);
+    this.handler.onOrganicClick?.(event.url);
+  }
+
+  handleWidgetEvent(event: any) {
+    if (event.widgetRandomId !== this.widgetRandomId || !this._isMounted) {
+      return;
+    }
+
+    console.log(`${this.props.widgetId}; onWidgetEvent: ${event.eventName}`);
+    this.handler.onWidgetEvent?.(event.eventName, event.additionalData);
+  }
+
+  render() {
+    return (
+      <TeadsAdPlacementFeedNative
+        style={{ height: this.state.height } as ViewStyle}
+        widgetId={this.props.widgetId}
+        widgetRandomId={this.widgetRandomId}
+        widgetIndex={this.props.widgetIndex}
+        url={this.props.articleUrl}
+        installationKey={this.props.partnerKey}
+        packageVersion={packageVersion}
+        extId={this.props.extId}
+        extSecondaryId={this.props.extSecondaryId}
+        userId={this.props.userId}
+        pubImpId={this.props.pubImpId}
+        darkMode={this.props.darkMode}
+      />
+    );
+  }
+}
+
+// This is a workaround to be able to export the class-based component
+export function TeadsAdPlacementFeed(props: TeadsAdPlacementFeedProps) {
+  return <TeadsWidgetCls {...props} />;
+}

package/src/TeadsAdPlacementMedia.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import {
+  NativeEventEmitter,
+  NativeModules,
+  type ViewStyle,
+} from 'react-native';
+import type {
+  TeadsAdPlacementHandler,
+  TeadsAdPlacementFeedDefaultProps,
+  TeadsAdPlacementMediaProps,
+} from './types';
+import DefaultHandler from './DefaultTeadsWidgetHandler';
+import { packageVersion } from './version';
+import TeadsAdPlacementMediaNativeComponent from './TeadsMediaNativeComponent';
+import { teadsRequiredPropsNames } from './constants';
+
+class TeadsAdPlacementMediaCls extends React.Component<TeadsAdPlacementMediaProps> {
+  static defaultProps = {
+    darkMode: false,
+  } as TeadsAdPlacementFeedDefaultProps;
+
+  private widgetRandomId: number;
+  private eventEmitter: NativeEventEmitter;
+  private handler: TeadsAdPlacementHandler;
+  listeners: Array<{ remove: () => void }> = [];
+  private _isMounted: boolean = false;
+
+  state = {
+    height: 0,
+  };
+
+  constructor(props: TeadsAdPlacementMediaProps) {
+    super(props);
+
+    teadsRequiredPropsNames.forEach((propName) => {
+      if (props[propName] === undefined || props[propName] === null) {
+        throw new Error(`Missing required prop: ${propName}`);
+      }
+    });
+
+    this.widgetRandomId = Math.floor(Math.random() * 1000000); // random ID to identify the widget instance
+    this.handler = props.handler === undefined ? DefaultHandler : props.handler;
+    this.eventEmitter = new NativeEventEmitter(NativeModules.TeadsEventModule);
+
+    this.handleHeightChange = this.handleHeightChange.bind(this);
+    this.handleRecClick = this.handleRecClick.bind(this);
+    this.handleWidgetEvent = this.handleWidgetEvent.bind(this);
+  }
+
+  componentDidMount() {
+    this._isMounted = true;
+    this.setupEventListeners();
+  }
+
+  componentWillUnmount() {
+    this._isMounted = false;
+    this.listeners.forEach((listener) => listener.remove());
+    this.listeners = [];
+  }
+
+  setupEventListeners() {
+    const events = [
+      { name: 'didChangeHeight', handler: this.handleHeightChange },
+      { name: 'onRecClick', handler: this.handleRecClick },
+      { name: 'onWidgetEvent', handler: this.handleWidgetEvent },
+    ];
+
+    events.forEach((event) => {
+      const listener = this.eventEmitter.addListener(event.name, event.handler);
+      this.listeners.push(listener);
+    });
+  }
+
+  handleHeightChange(event: any) {
+    if (event.widgetRandomId !== this.widgetRandomId) {
+      return;
+    }
+    // Guard against setState on unmounted component
+    if (!this._isMounted) {
+      return;
+    }
+
+    if (event.height !== this.state.height) {
+      this.setState({ height: event.height });
+      console.log(`TeadsAdPlacementMediaCls: pid: ${this.props.pid}; onHeightChange: ${event.height}`);
+      this.handler.onHeightChange?.(event.height);
+    } else {
+      console.log(`TeadsAdPlacementMediaCls: pid: ${this.props.pid}; onHeightChange: ${event.height} (no change)`);
+    }
+  }
+
+  handleRecClick(event: any) {
+    if (event.widgetRandomId !== this.widgetRandomId || !this._isMounted) {
+      return;
+    }
+
+    console.log(`TeadsWidget: pid: ${this.props.pid}; onRecClick`);
+    this.handler.onRecClick?.(event.url);
+  }
+
+  handleWidgetEvent(event: any) {
+    if (event.widgetRandomId !== this.widgetRandomId || !this._isMounted) {
+      return;
+    }
+
+    console.log(`TeadsWidget: pid: ${this.props.pid}; onWidgetEvent: ${event.eventName}`);
+    this.handler.onWidgetEvent?.(event.eventName, event.additionalData);
+  }
+
+  render() {
+    return (
+      <TeadsAdPlacementMediaNativeComponent
+        style={{ height: this.state.height } as ViewStyle}
+        widgetRandomId={this.widgetRandomId}
+        url={this.props.url}
+        pid={this.props.pid}
+        packageVersion={packageVersion}
+        installationKey={this.props.installationKey}
+      />
+    );
+  }
+}
+
+// This is a workaround to be able to export the class-based component
+export function TeadsAdPlacementMedia(props: TeadsAdPlacementMediaProps) {
+  return <TeadsAdPlacementMediaCls {...props} />;
+}

package/src/TeadsInAppBrowser.ts

@@ -0,0 +1,42 @@
+import { Linking } from 'react-native';
+import { InAppBrowser } from 'react-native-inappbrowser-reborn';
+
+export const TeadsInAppBrowser = Object.freeze({
+  open: async function (url: string) {
+    try {
+      if (InAppBrowser?.isAvailable && (await InAppBrowser.isAvailable())) {
+        await InAppBrowser.open(url, {
+          // iOS Properties
+          readerMode: false,
+          animated: true,
+          modalPresentationStyle: 'fullScreen',
+          modalTransitionStyle: 'coverVertical',
+          modalEnabled: true,
+          enableBarCollapsing: false,
+          // Android Properties
+          showTitle: true,
+          enableUrlBarHiding: true,
+          enableDefaultShare: true,
+          forceCloseOnRedirection: false,
+          // Specify full animation resource identifier(package:anim/name)
+          // or only resource name(in case of animation bundled with app).
+          animations: {
+            startEnter: 'slide_in_right',
+            startExit: 'slide_out_left',
+            endEnter: 'slide_in_left',
+            endExit: 'slide_out_right',
+          },
+          headers: {
+            'my-custom-header': 'my custom header value',
+          },
+        });
+      } else {
+        await Linking.openURL(url);
+      }
+    } catch (error) {
+      console.log('Error opening URL:', error);
+      // Fallback to Linking.openURL if InAppBrowser fails
+      await Linking.openURL(url);
+    }
+  },
+});

package/src/TeadsMediaNativeComponent.ts

@@ -0,0 +1,15 @@
+import type { HostComponent, ViewProps } from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { Int32 } from 'react-native/Libraries/Types/CodegenTypes';
+
+export interface NativeProps extends ViewProps {
+  pid: string;
+  widgetRandomId: Int32;
+  url: string;
+  packageVersion: string;
+  installationKey?: string;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'TeadsAdPlacementMedia'
+) as HostComponent<NativeProps>;

package/src/WebViewNativeComponent.ts

@@ -0,0 +1,21 @@
+import type { HostComponent, ViewProps } from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { Int32 } from 'react-native/Libraries/Types/CodegenTypes';
+
+export interface NativeProps extends ViewProps {
+  widgetId: string;
+  widgetRandomId: Int32;
+  widgetIndex: Int32;
+  url: string;
+  installationKey: string;
+  packageVersion: string;
+  extId?: string;
+  extSecondaryId?: string;
+  userId?: string;
+  pubImpId?: string;
+  darkMode?: boolean;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'TeadsAdPlacementFeed'
+) as HostComponent<NativeProps>;

package/src/constants.ts

@@ -0,0 +1,11 @@
+export const requiredPropsNames = [
+  'widgetId',
+  'widgetIndex',
+  'articleUrl',
+  'partnerKey',
+] as const;
+
+export const teadsRequiredPropsNames = [
+  'pid',
+  'url',
+] as const;

package/src/index.tsx

@@ -0,0 +1,9 @@
+export { TeadsAdPlacementFeed } from './TeadsAdPlacementFeed';
+export { TeadsAdPlacementMedia } from './TeadsAdPlacementMedia';
+export type {
+  TeadsAdPlacementHandler,
+  TeadsAdPlacementFeedProps,
+  TeadsAdPlacementFeedDefaultProps,
+  TeadsAdPlacementMediaProps,
+  NativeComponentProps,
+} from './types';

package/src/types.d.ts

@@ -0,0 +1,32 @@
+export interface TeadsAdPlacementHandler {
+  onHeightChange?: (newHeight: number) => void;
+  onRecClick?: (url: string) => void;
+  onOrganicClick?: (url: string) => void;
+  onWidgetEvent?: (eventName: string, data: { [key: string]: any }) => void;
+}
+
+export interface TeadsAdPlacementFeedProps {
+  widgetId: string;
+  widgetIndex: number;
+  articleUrl: string;
+  partnerKey: string;
+  extId?: string;
+  extSecondaryId?: string;
+  userId?: string;
+  pubImpId?: string;
+  darkMode?: boolean;
+  handler?: TeadsAdPlacementHandler;
+}
+
+export interface TeadsAdPlacementMediaProps {
+  pid: string;
+  url: string;
+  installationKey?: string;
+  handler?: TeadsAdPlacementHandler;
+}
+
+export type TeadsAdPlacementFeedDefaultProps = {
+  darkMode: boolean;
+};
+
+export type NativeComponentProps = React.ComponentProps<typeof View>;

package/src/version.ts

@@ -0,0 +1 @@
+export const packageVersion = '6.0.2';