@pinwheel/react-native-pinwheel 2.3.17 → 2.5.0-alpha

package/CHANGELOG.md

@@ -0,0 +1,64 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## 2.4.x Releases
+
+### [2.4.0](https://github.com/underdog-tech/react-native-pinwheel/releases/tag/2.4.0)
+
+- Removing `overrides` from main package.
+- Updating example app to use newest ReactNative versions.
+- Changing devDependencies to use newest React Native Webview (for typing).
+
+## 2.3.x Releases
+
+- `2.3.x` Releases - [2.3.4](#234) | [2.3.5](#235) | [2.3.6](#236) | [2.3.10](#2310) | [2.3.12](#2312) | [2.3.13](#2313) | [2.3.14](#2314) | [2.3.17](#2317)
+
+---
+
+### [2.3.17](https://github.com/underdog-tech/react-native-pinwheel/releases/tag/2.3.17)
+
+Export `ScreenTransition` event payload type for the `screen_transition` event.
+
+
+### [2.3.14](https://github.com/underdog-tech/react-native-pinwheel/releases/tag/2.3.14)
+
+Remove `hermes-engine` and `shell-quote` sub-dependencies from package-lock files.
+
+### [2.3.13](https://github.com/underdog-tech/react-native-pinwheel/releases/tag/2.3.13)
+
+Bump `hermes-engine` and `shell-quote` sub-dependency package.
+
+### [2.3.12](https://github.com/underdog-tech/react-native-pinwheel/releases/tag/2.3.12)
+
+Add CircleCI scripting and local scripts.
+- Add `npm run dev` script.
+- Remove need for hardcoding api secret in code to run locally.
+
+### [2.3.10](https://github.com/underdog-tech/react-native-pinwheel/releases/tag/2.3.10)
+
+Use node 16.7.0 instead of 12.16.1 to install dependencies.
+
+### [2.3.6](https://github.com/underdog-tech/react-native-pinwheel/releases/tag/2.3.6)
+
+N/A
+
+### [2.3.5](https://github.com/underdog-tech/react-native-pinwheel/releases/tag/2.3.5)
+
+N/A
+
+### [2.3.4](https://github.com/underdog-tech/react-native-pinwheel/releases/tag/2.3.4)
+
+#### Added
+
+- Export `EventPayload` type.
+- Export `PinwheelError` type.
+- Export `PinwheelErrorType` type.
+- Export `EmptyPayloadObject` type as `Record<string, never>`.
+
+##### Updated
+
+- `EventPayload` is no longer a union containing `{}`. It now contains `Record<string, never>` instead due to [this behavior](https://github.com/Microsoft/TypeScript/wiki/FAQ#why-are-all-types-assignable-to-empty-interfaces).
+- Mark exported `Error` type as **@deprecated** because it collides with the built-in javascript `Error` object. Replaced with `PinwheelError`.
+- Mark exported `ErrorType` type as **@deprecated** because the new naming convention is prefixing with "`PinwheelError`". Replaced with `PinwheelErrorType`.
+- Update `onExit` type to be `(error: PinwheelError | Record<string, never>)` to be accurate with current functionality.

package/README.md

@@ -28,17 +28,14 @@ You may want to run the example app locally to get started.
 ###### Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65
 - Try downloading Xcode 14.2 from https://developer.apple.com/download/all/?q=xcode
 
+###### Failed to locate 'git', requesting installation of command line developer tools
+For this or other errors related to command line developer tools:
+- Make sure you have Command Line Tools for Xcode 14.2 installed
+- Open Xcode > Click Xcode in the app menu > Settings > Locations > Command Line Tools dropdown and set the correct location 
 
 ## Installation
 
-1. Install [`react-native-webview`](https://www.npmjs.com/package/react-native-webview) peer dependency.
-
-```bash
-$ npm install --save react-native-webview
-$ cd ios && pod install
-```
-
-2. Install Pinwheel React Native SDK
+1. Install Pinwheel React Native SDK
 
 ```bash
 $ npm install --save @pinwheel/react-native-pinwheel
@@ -50,7 +47,7 @@ $ npm install --save @pinwheel/react-native-pinwheel
 
 To initialize Link Modal, a short-lived link token will need to be generated first. Your server can generate the link token by sending a POST request to the /v1/link_tokens endpoint. DO NOT ever send this request from the client side and publicly expose your api_secret.
 
-The link token returned is valid for 15 minutes, after which it expires and can no longer be used to initialize Link. The expiration time is returned as a unix timestamp.
+The link token returned is valid for one hour, after which it expires and can no longer be used to initialize Link. The expiration time is returned as a unix timestamp.
 
 ### Pinwheel Component
 

package/RNPinwheelSDK.podspec

@@ -0,0 +1,18 @@
+Pod::Spec.new do |s|
+    s.name         = "RNPinwheelSDK"
+    s.version      = "2.5.0-alpha"
+    s.summary      = "React Native plugin for Pinwheel's SDK"
+    s.description  = <<-DESC
+                     An open source React Native plugin for calling Pinwheel's native SDKs to manage payroll data.
+                     DESC
+    s.homepage     = "https://github.com/underdog-tech/react-native-pinwheel"
+    s.license      = { :file => 'LICENSE' }
+    s.author       = { 'Pinwheel' => 'info@pinwheelapi.com' }
+    s.platform     = :ios, "12.0"
+    s.source       = { :path => 'ios' }
+    s.source_files  = "ios/**/*.{h,m}"
+    s.public_header_files = 'ios/**/*.h'
+    s.requires_arc = true
+    s.dependency "React"
+    s.dependency 'PinwheelSDK', '2.4.3'
+  end

package/android/build.gradle

@@ -0,0 +1,50 @@
+buildscript {
+    def kotlin_version = rootProject.ext.has('kotlinVersion') ? rootProject.ext.get('kotlinVersion') : '1.7.22'
+
+    repositories {
+        google()
+        mavenCentral()
+    }
+
+    dependencies {
+        classpath 'com.android.tools.build:gradle:7.2.2'
+        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
+    }
+}
+
+apply plugin: 'com.android.library'
+apply plugin: 'kotlin-android'
+
+def MIN_PW_SDK_VERSION = '2.4.1'
+
+android {
+    compileSdkVersion 33
+
+    defaultConfig {
+        minSdkVersion 24
+        targetSdkVersion 33
+        versionCode 1
+        versionName "1.0"
+    }
+    compileOptions {
+        sourceCompatibility = 1.8
+        targetCompatibility = 1.8
+    }
+
+    sourceSets {
+        main.java.srcDirs += 'src/main/java'
+    }
+}
+
+rootProject.allprojects {
+    repositories {
+        google()
+        mavenCentral()
+    }
+}
+
+dependencies {
+    def pwVersion = rootProject.hasProperty('pwVersion') ? rootProject.pwVersion : MIN_PW_SDK_VERSION
+    implementation 'com.facebook.react:react-native:+'
+    implementation "com.getpinwheel:pinwheel-android:$pwVersion"
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,6 @@
+
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+          package="com.underdog_tech.react">
+
+</manifest>
+

package/android/src/main/java/com/underdog_tech/react/PinwheelPackage.kt

@@ -0,0 +1,16 @@
+package com.underdog_tech.react
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.uimanager.ViewManager
+
+class PinwheelPackage : ReactPackage {
+  override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
+        return listOf(RNTPinwheelEvents(reactContext)).toMutableList()
+    }
+        
+  override fun createViewManagers(
+      reactContext: ReactApplicationContext
+  ) = listOf(PinwheelViewManager(reactContext))
+}

package/android/src/main/java/com/underdog_tech/react/PinwheelViewManager.kt

@@ -0,0 +1,213 @@
+package com.underdog_tech.react
+
+import android.view.Choreographer
+import android.view.View
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import androidx.fragment.app.FragmentActivity
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.bridge.WritableNativeMap
+import com.facebook.react.modules.core.DeviceEventManagerModule
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.annotations.ReactPropGroup
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.underdog_tech.pinwheel_android.PinwheelFragment
+import com.underdog_tech.pinwheel_android.PinwheelEventListener
+import com.underdog_tech.pinwheel_android.model.PinwheelEventType
+import com.underdog_tech.pinwheel_android.model.PinwheelEventPayload
+import com.underdog_tech.pinwheel_android.model.PinwheelAmount
+import com.underdog_tech.pinwheel_android.model.PinwheelTarget
+import com.underdog_tech.pinwheel_android.model.PinwheelAllocation
+import com.underdog_tech.pinwheel_android.model.PinwheelParams
+import com.underdog_tech.pinwheel_android.model.PinwheelResult
+import com.underdog_tech.pinwheel_android.model.PinwheelError
+import com.underdog_tech.pinwheel_android.model.PinwheelSelectedEmployerPayload
+import com.underdog_tech.pinwheel_android.model.PinwheelSelectedPlatformPayload
+import com.underdog_tech.pinwheel_android.model.PinwheelLoginPayload
+import com.underdog_tech.pinwheel_android.model.PinwheelLoginAttemptPayload
+import com.underdog_tech.pinwheel_android.model.PinwheelDDFormCreatePayload
+import com.underdog_tech.pinwheel_android.model.PinwheelScreenTransitionPayload
+import com.underdog_tech.pinwheel_android.model.PinwheelInputAmountPayload
+
+fun PinwheelTarget.toWritableMap(): WritableMap {
+  return Arguments.createMap().apply {
+    putString("accountType", this@toWritableMap.accountType)
+    putString("accountName", this@toWritableMap.accountName)
+  }
+}
+
+fun PinwheelAllocation.toWritableMap(): WritableMap {
+  return Arguments.createMap().apply {
+    putString("type", this@toWritableMap.type)
+    this@toWritableMap.value?.let { putDouble("value", it.toDouble()) }
+    putMap("target", this@toWritableMap.target?.toWritableMap())
+  }
+}
+
+fun PinwheelParams.toWritableMap(): WritableMap {
+  return Arguments.createMap().apply {
+    putMap("amount", this@toWritableMap.amount?.toWritableMap())
+  }
+}
+
+fun PinwheelEventPayload.toWritableMap(): WritableMap = when (this) {
+  is PinwheelAmount -> Arguments.createMap().apply {
+    putDouble("value", this@toWritableMap.value.toDouble())
+    putString("unit", this@toWritableMap.unit)
+  }
+
+  is PinwheelInputAmountPayload -> Arguments.createMap().apply {
+    putString("action", this@toWritableMap.action)
+    putMap("allocation", this@toWritableMap.allocation?.toWritableMap())
+  }
+
+  is PinwheelResult -> Arguments.createMap().apply {
+    putString("accountId", this@toWritableMap.accountId)
+    putString("platformId", this@toWritableMap.platformId)
+    putString("job", this@toWritableMap.job)
+    putMap("params", this@toWritableMap.params?.toWritableMap())
+  }
+  is PinwheelError -> Arguments.createMap().apply {
+    putString("type", this@toWritableMap.type)
+    putString("code", this@toWritableMap.code)
+    putString("message", this@toWritableMap.message)
+    putBoolean("pendingRetry", this@toWritableMap.pendingRetry)
+  }
+  is PinwheelSelectedEmployerPayload -> Arguments.createMap().apply {
+    putString("selectedEmployerId", this@toWritableMap.selectedEmployerId)
+    putString("selectedEmployerName", this@toWritableMap.selectedEmployerName)
+  }
+  is PinwheelSelectedPlatformPayload -> Arguments.createMap().apply {
+    putString("selectedPlatformId", this@toWritableMap.selectedPlatformId)
+    putString("selectedPlatformName", this@toWritableMap.selectedPlatformName)
+  }
+  is PinwheelLoginPayload -> Arguments.createMap().apply {
+    putString("accountId", this@toWritableMap.accountId)
+    putString("platformId", this@toWritableMap.platformId)
+  }
+  is PinwheelLoginAttemptPayload -> Arguments.createMap().apply {
+    putString("platformId", this@toWritableMap.platformId)
+  }
+  is PinwheelDDFormCreatePayload -> Arguments.createMap().apply {
+    putString("url", this@toWritableMap.url)
+  }
+  is PinwheelScreenTransitionPayload -> Arguments.createMap().apply {
+    putString("screenName", this@toWritableMap.screenName)
+    putString("selectedEmployerId", this@toWritableMap.selectedEmployerId)
+    putString("selectedEmployerName", this@toWritableMap.selectedEmployerName)
+    putString("selectedPlatformId", this@toWritableMap.selectedPlatformId)
+    putString("selectedPlatformName", this@toWritableMap.selectedPlatformName)
+  }
+  else -> throw IllegalArgumentException("Unsupported PinwheelEventPayload type")
+}
+
+class PinwheelViewManager(
+  private val reactContext: ReactApplicationContext
+) : ViewGroupManager<FrameLayout>(), PinwheelEventListener {
+  private var propWidth: Int? = reactContext.resources.displayMetrics.widthPixels
+  private var propHeight: Int? = reactContext.resources.displayMetrics.heightPixels
+  private var token: String? = null
+
+  override fun getName() = REACT_CLASS
+
+  /**
+   * Return a FrameLayout which will later hold the Fragment
+   */
+  override fun createViewInstance(reactContext: ThemedReactContext): FrameLayout {
+    return FrameLayout(reactContext)
+  }
+
+  /**
+   * Map the "create" command to an integer
+   */
+  override fun getCommandsMap() = mapOf("create" to COMMAND_CREATE)
+
+  /**
+   * Handle "create" command (called from JS) and call createFragment method
+   */
+  override fun receiveCommand(
+    root: FrameLayout,
+    commandId: String,
+    args: ReadableArray?
+  ) {
+    super.receiveCommand(root, commandId, args)
+    val reactNativeViewId = requireNotNull(args).getInt(0)
+
+    when (commandId.toInt()) {
+      COMMAND_CREATE -> createFragment(root, reactNativeViewId)
+    }
+  }
+
+  @ReactPropGroup(names = ["width", "height"], customType = "Style")
+  fun setStyle(view: FrameLayout, index: Int, value: Int) {
+    if (index == 0) propWidth = value
+    if (index == 1) propHeight = value
+  }
+
+  @ReactProp(name="token")
+  fun setToken(view: FrameLayout, token: String) {
+    this.token = token
+  }
+
+  /**
+   * Replace your React Native view with a custom fragment
+   */
+  fun createFragment(root: FrameLayout, reactNativeViewId: Int) {
+    val parentView = root.findViewById<ViewGroup>(reactNativeViewId)
+    setupLayout(parentView)
+
+
+    this.token?.let {
+      val pinwheelFragment = PinwheelFragment.newInstance(it, "react native")
+      pinwheelFragment.pinwheelEventListener = this
+      val activity = reactContext.currentActivity as FragmentActivity
+      activity.supportFragmentManager
+        .beginTransaction()
+        .replace(reactNativeViewId, pinwheelFragment, reactNativeViewId.toString())
+        .commit()
+    }
+  }
+
+  fun setupLayout(view: View) {
+    Choreographer.getInstance().postFrameCallback(object: Choreographer.FrameCallback {
+      override fun doFrame(frameTimeNanos: Long) {
+        manuallyLayoutChildren(view)
+        view.viewTreeObserver.dispatchOnGlobalLayout()
+        Choreographer.getInstance().postFrameCallback(this)
+      }
+    })
+  }
+
+  override fun onEvent(eventName: PinwheelEventType, payload: PinwheelEventPayload?) {
+    val params = WritableNativeMap()
+    params.putString("name", eventName.toString())
+    params.putMap("payload", payload?.toWritableMap())
+    reactContext
+        .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
+        .emit("PINWHEEL_EVENT", params)
+  }
+
+  /**
+   * Layout all children properly
+   */
+  private fun manuallyLayoutChildren(view: View) {
+    // propWidth and propHeight coming from react-native props
+    val width = requireNotNull(propWidth)
+    val height = requireNotNull(propHeight)
+
+    view.measure(
+        View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
+        View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY))
+
+    view.layout(0, 0, width, height)
+  }
+
+  companion object {
+    private const val REACT_CLASS = "RNTPinwheel"
+    private const val COMMAND_CREATE = 1
+  }
+}

package/android/src/main/java/com/underdog_tech/react/RNTPinwheelEvents.kt

@@ -0,0 +1,51 @@
+package com.underdog_tech.react
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReactContextBaseJavaModule
+import com.facebook.react.bridge.ReactMethod
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.modules.core.DeviceEventManagerModule
+
+class RNTPinwheelEvents(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {
+    companion object {
+        private const val EVENT_KEY = "PINWHEEL_EVENT"
+    }
+
+    override fun getName(): String {
+        return "RNTPinwheelEvents"
+    }
+
+    @ReactMethod
+    fun anExposedMethod() {
+        val currentContext = reactApplicationContext
+        val eventName = "PINWHEEL_EVENT"
+        val params: WritableMap = Arguments.createMap().apply {
+            putString("type", "myEventType")
+        }
+        sendEvent(currentContext, eventName, params)
+    }
+
+    fun sendEvent(reactContext: ReactApplicationContext, eventName: String, params: WritableMap?) {
+        reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java).emit(eventName, params)
+    }
+
+    private var listenerCount = 0
+
+    @ReactMethod
+    fun addListener(eventName: String) {
+      if (listenerCount == 0) {
+        // Set up any upstream listeners or background tasks as necessary
+      }
+
+      listenerCount += 1
+    }
+
+    @ReactMethod
+    fun removeListeners(count: Int) {
+      listenerCount -= count
+      if (listenerCount == 0) {
+        // Remove upstream listeners, stop unnecessary background tasks
+      }
+    }
+}

package/{lib/constants.d.ts → constants.d.ts}

@@ -1,6 +1,6 @@
 /**
  * Importing package.json here causes a problem with the folder structure when we npm pack and publish.
  */
-export declare const VERSION = "2.3.17";
+export declare const VERSION = "2.5.0-alpha";
 export declare const LINK_PAGE_URL = "https://cdn.getpinwheel.com/link-v2.3.0.html";
 export declare const PINWHEEL_DOMAIN = "getpinwheel.com";

package/{lib/constants.js → constants.js}

@@ -1,6 +1,6 @@
 /**
  * Importing package.json here causes a problem with the folder structure when we npm pack and publish.
  */
-export const VERSION = '2.3.17';
+export const VERSION = '2.5.0-alpha';
 export const LINK_PAGE_URL = 'https://cdn.getpinwheel.com/link-v2.3.0.html';
 export const PINWHEEL_DOMAIN = 'getpinwheel.com';

package/{lib/index.d.ts → index.d.ts}

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 export declare const PINWHEEL_MESSAGE_TYPES: {
     PINWHEEL_EXIT: string;
     PINWHEEL_MODAL_CLOSE: string;
@@ -6,7 +6,7 @@ export declare const PINWHEEL_MESSAGE_TYPES: {
     PINWHEEL_SUCCESS: string;
     PINWHEEL_EVENT: string;
 };
-export declare type LinkResult = {
+export type LinkResult = {
     accountId: string;
     platformId: string;
     job: string;
@@ -17,7 +17,7 @@ export declare type LinkResult = {
         };
     };
 };
-export declare type ScreenTransition = {
+export type ScreenTransition = {
     screenName: string;
     selectedEmployerId?: string;
     selectedEmployerName?: string;
@@ -28,21 +28,21 @@ export declare type ScreenTransition = {
  * @deprecated This type will be removed in version 2.4. Use the renamed type `PinwheelErrorType`
  * instead.
  */
-export declare type ErrorType = 'clientError' | 'systemError' | 'userActionRequired' | 'platformError' | 'invalidAccountsConfiguration' | 'invalidUserInput' | 'invalidLinkToken';
-export declare type PinwheelErrorType = ErrorType;
+export type ErrorType = 'clientError' | 'systemError' | 'userActionRequired' | 'platformError' | 'invalidAccountsConfiguration' | 'invalidUserInput' | 'invalidLinkToken';
+export type PinwheelErrorType = ErrorType;
 /**
  * @deprecated The type should not be used as it clashes with the native JS `Error` object.
  * You should use `PinwheelError` instead. `Error` will be removed in version 2.4
  */
-export declare type Error = {
+export type Error = {
     type: PinwheelErrorType;
     code: string;
     message: string;
     pendingRetry: boolean;
 };
-export declare type PinwheelError = Error;
-export declare type EmptyPayloadObject = Record<string, never>;
-export declare type EventPayload = {
+export type PinwheelError = Error;
+export type EmptyPayloadObject = Record<string, never>;
+export type EventPayload = {
     selectedEmployerId: string;
     selectedEmployerName: string;
 } | {
@@ -55,7 +55,7 @@ export declare type EventPayload = {
     accountId: string;
     platformId: string;
 } | ScreenTransition | PinwheelError | EmptyPayloadObject | undefined;
-declare type PinwheelProps = {
+type PinwheelProps = {
     linkToken: string;
     onLogin?: (result: {
         accountId: string;
@@ -69,5 +69,5 @@ declare type PinwheelProps = {
     onExit?: (error: PinwheelError | EmptyPayloadObject) => void;
     onEvent?: (eventName: string, payload: EventPayload) => void;
 };
-declare const _default: ({ linkToken, onLogin, onLoginAttempt, onSuccess, onError, onExit, onEvent }: PinwheelProps) => JSX.Element;
+declare const _default: ({ linkToken, onLogin, onLoginAttempt, onSuccess, onError, onExit, onEvent }: PinwheelProps) => React.JSX.Element;
 export default _default;

package/index.js

@@ -0,0 +1,52 @@
+import React from 'react';
+// @ts-ignore-next-line
+import Pinwheel from './pinwheel-wrapper';
+import { SafeAreaView, StyleSheet } from 'react-native';
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+});
+export const PINWHEEL_MESSAGE_TYPES = {
+    PINWHEEL_EXIT: 'PINWHEEL_EXIT',
+    PINWHEEL_MODAL_CLOSE: 'PINWHEEL_MODAL_CLOSE',
+    PINWHEEL_LOAD_COMPLETE: 'PINWHEEL_LOAD_COMPLETE',
+    PINWHEEL_SUCCESS: 'PINWHEEL_SUCCESS',
+    PINWHEEL_EVENT: 'PINWHEEL_EVENT',
+};
+export default ({ linkToken, onLogin, onLoginAttempt, onSuccess, onError, onExit, onEvent }) => {
+    const handleEvent = (event) => {
+        if (!event) {
+            // first event is always an empty string
+            return;
+        }
+        const { name, payload } = event;
+        onEvent && onEvent(name, payload);
+        switch (name.toLowerCase()) {
+            case 'exit':
+                // console.log(`case: exit, onExit: ${onExit}`);
+                onExit && onExit(payload);
+                break;
+            case 'success':
+                // console.log(`case: success, onSuccess: ${onSuccess}`);
+                onSuccess && onSuccess(payload);
+                break;
+            case 'login':
+                // console.log(`case: login, onLogin: ${onLogin}`);
+                onLogin && onLogin(payload);
+                break;
+            case 'login_attempt':
+                // console.log(`case: login_attempt, onLoginAttempt: ${onLoginAttempt}`);
+                onLoginAttempt && onLoginAttempt(payload);
+                break;
+            case 'error':
+                // console.log(`case: error, onError: ${onError}`);
+                onError && onError(payload);
+                break;
+            default:
+        }
+    };
+    return (<SafeAreaView style={styles.container}>
+      {linkToken && <Pinwheel token={linkToken} style={{ flex: 1 }} onEvent={handleEvent}/>}
+    </SafeAreaView>);
+};

package/ios/RNTPinwheelEvents.h

@@ -0,0 +1,9 @@
+#import <React/RCTBridgeModule.h>
+#import <React/RCTEventEmitter.h>
+
+@interface RNTPinwheelEvents : RCTEventEmitter <RCTBridgeModule>
+
++ (instancetype)sharedInstance;
+- (void)handlePinwheelEvent:(NSDictionary<NSString *, id> *)payload;
+
+@end

package/ios/RNTPinwheelEvents.m

@@ -0,0 +1,62 @@
+#import "RNTPinwheelEvents.h"
+
+@implementation RNTPinwheelEvents
+{
+  bool hasListeners; // This is an instance variable declaration.
+}
+
+RCT_EXPORT_MODULE();
++ (BOOL)requiresMainQueueSetup {
+  return NO; // change this to NO if you don't need the main thread
+}
+
++ (instancetype)sharedInstance {
+    static RNTPinwheelEvents *sharedInstance = nil;
+    static dispatch_once_t onceToken;
+    dispatch_once(&onceToken, ^{
+        sharedInstance = [[super allocWithZone:NULL] init];
+    });
+    return sharedInstance;
+}
+
++ (id)allocWithZone:(struct _NSZone *)zone {
+    return [self sharedInstance];
+}
+
+- (id)copyWithZone:(NSZone *)zone {
+    return self;
+}
+// Overriding the default init to make sure it's not used directly
+- (instancetype)init {
+    if (self = [super init]) {
+        // Custom initialization if needed
+    }
+    return self;
+}
+
+// Will be called when this module's first listener is added.
+-(void)startObserving {
+    NSLog(@"startObserving called");
+    hasListeners = YES;
+    // Set up any upstream listeners or background tasks as necessary
+}
+
+// Will be called when this module's last listener is removed, or on dealloc.
+-(void)stopObserving {
+    NSLog(@"stopObserving called");
+    hasListeners = NO;
+    // Remove upstream listeners, stop unnecessary background tasks
+}
+
+- (void)handlePinwheelEvent:(NSDictionary<NSString *, id> *)payload
+{
+  if (hasListeners) {// Only send events if anyone is listening
+    [self sendEventWithName:@"PINWHEEL_EVENT" body:payload];
+  }
+}
+
+- (NSArray<NSString *> *)supportedEvents {
+  return @[@"PINWHEEL_EVENT"]; // Add more event names here.
+}
+
+@end

package/ios/RNTPinwheelManager.m

@@ -0,0 +1,21 @@
+#import <React/RCTViewManager.h>
+#import "RNTPinwheelView.h"
+
+@interface RNTPinwheelManager : RCTViewManager
+
+@end
+
+@implementation RNTPinwheelManager : RCTViewManager
+
+RCT_EXPORT_MODULE(RNTPinwheelManager);
+
+- (UIView *)view
+{   
+    RNTPinwheelView *pv = [[RNTPinwheelView alloc] init];
+    return pv;
+}
+
+RCT_EXPORT_VIEW_PROPERTY(token, NSString);
+
+@end
+

package/ios/RNTPinwheelView.h

@@ -0,0 +1,12 @@
+#import <UIKit/UIKit.h>
+#import <PinwheelSDK/PinwheelSDK-Swift.h>
+#import "RNTPinwheelEvents.h"
+
+@interface RNTPinwheelView : UIView <PinwheelWrapperDelegate>
+
+@property (nonatomic, strong) PinwheelWrapperVC *pinwheelWrapperVC;
+@property (nonatomic, assign) NSString *token;
+
+- (instancetype)initWithFrame:(CGRect)frame token:(NSString *)token;
+
+@end

package/ios/RNTPinwheelView.m

@@ -0,0 +1,65 @@
+#import "RNTPinwheelView.h"
+
+@implementation RNTPinwheelView
+
+- (instancetype)initWithFrame:(CGRect)frame {
+    if ((self = [super initWithFrame:frame])) {
+        [self initPinwheelWrapperVC];
+    }
+    return self;
+}
+
+- (instancetype)initWithFrame:(CGRect)frame token:(NSString *)token {
+    if ((self = [super initWithFrame:frame])) {
+        _token = token;
+    }
+    return self;
+}
+
+- (void)initPinwheelWrapperVC {
+    if (self.token != nil && self.pinwheelWrapperVC == nil) {
+        self.pinwheelWrapperVC = [[PinwheelWrapperVC alloc] initWithToken:self.token delegate:self sdk:@"react native"];
+        [self addSubview:self.pinwheelWrapperVC.view];
+    }
+}
+
+- (void)setToken:(NSString *)newToken {
+    if (![_token isEqualToString:newToken]) {
+        _token = newToken;
+        [self initPinwheelWrapperVC];
+    }
+}
+
+- (void)layoutSubviews
+{
+  [super layoutSubviews];
+  self.pinwheelWrapperVC.view.frame = self.bounds;
+}
+
+- (void)onEventWithName:(NSString *)name event:(NSDictionary<NSString *, id> *)event {
+    NSLog(@"%@", name);
+    NSDictionary *dataToSend = @{@"name": name, @"payload": event};
+    [RNTPinwheelEvents.sharedInstance handlePinwheelEvent:dataToSend];
+}
+
+- (void)onExit:(NSDictionary<NSString *, id> *)error {
+    NSLog(@"%@", error);
+}
+
+- (void)onSuccess:(NSDictionary<NSString *, id> *)result {
+    NSLog(@"%@", result);
+}
+
+- (void)onLogin:(NSDictionary<NSString *, id> *)result {
+    NSLog(@"%@", result);
+}
+
+- (void)onLoginAttempt:(NSDictionary<NSString *, id> *)result {
+    NSLog(@"%@", result);
+}
+
+- (void)onError:(NSDictionary<NSString *, id> *)error {
+    NSLog(@"%@", error);
+}
+
+@end

package/package.json

@@ -1,13 +1,10 @@
 {
   "name": "@pinwheel/react-native-pinwheel",
-  "version": "2.3.17",
+  "version": "2.5.0-alpha",
   "type": "module",
   "description": "Pinwheel React Native SDK",
-  "main": "lib/index.js",
-  "types": "lib/index.d.ts",
-  "files": [
-    "lib/**/*"
-  ],
+  "main": "index.js",
+  "types": "index.d.ts",
   "scripts": {
     "build": "tsc",
     "bump-pkg-version": "./scripts/bump-pkg-version.sh",
@@ -17,20 +14,10 @@
   "license": "MIT",
   "peerDependencies": {
     "react": "^16.13.1 || ^17 || ^18",
-    "react-native": "*",
-    "react-native-webview": "^10.10.0 || ^11.0.0"
+    "react-native": "*"
   },
   "devDependencies": {
-    "@types/react-native": "^0.63.29",
-    "react-native-webview": "^11.0.0",
+    "@types/react-native": "^0.72.2",
     "typescript": "^4.0.3"
-  },
-  "overrides": {
-    "react-native": {
-      "hermes-engine": "0.11.0"
-    },
-    "@react-native-community/cli-tools": {
-      "shell-quote": "^1.7.4"
-    }
   }
 }

package/pinwheel-view.d.ts

@@ -0,0 +1,6 @@
+export interface RNTPinwheelProps {
+    token: string;
+    style: any;
+    onEvent: (event: any) => void;
+}
+export declare const RNTPinwheel: import("react-native").HostComponent<RNTPinwheelProps>;

package/pinwheel-view.js

@@ -0,0 +1,2 @@
+import { requireNativeComponent } from 'react-native';
+export const RNTPinwheel = requireNativeComponent('RNTPinwheel');

package/pinwheel-wrapper.android.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { RNTPinwheelProps } from './pinwheel-view';
+declare const RNTPinwheelView: (props: RNTPinwheelProps) => React.JSX.Element;
+export default RNTPinwheelView;

package/pinwheel-wrapper.android.js

@@ -0,0 +1,28 @@
+import React, { useEffect, useRef } from 'react';
+import { UIManager, findNodeHandle, NativeEventEmitter, NativeModules } from 'react-native';
+import { RNTPinwheel } from './pinwheel-view';
+const createFragment = (viewId) => {
+    UIManager.dispatchViewManagerCommand(viewId, 
+    // we are calling the 'create' command
+    // @ts-ignore
+    UIManager.RNTPinwheel.Commands.create.toString(), [viewId]);
+};
+const RNTPinwheelView = (props) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        setTimeout(() => {
+            const viewId = findNodeHandle(ref.current);
+            if (viewId) {
+                createFragment(viewId);
+            }
+            // events
+            const { RNTPinwheelEvents } = NativeModules;
+            const eventEmitter = new NativeEventEmitter(RNTPinwheelEvents);
+            const eventListener = eventEmitter.addListener('PINWHEEL_EVENT', (event) => {
+                props.onEvent(event);
+            });
+        }, 10);
+    }, []);
+    return <RNTPinwheel {...props} onEvent={(event) => { console.log `rawbee: ${JSON.stringify(event)}`; }} ref={ref}/>;
+};
+export default RNTPinwheelView;

package/pinwheel-wrapper.ios.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { RNTPinwheelProps } from './pinwheel-view';
+declare const RNTPinwheelView: (props: RNTPinwheelProps) => React.JSX.Element;
+export default RNTPinwheelView;

package/pinwheel-wrapper.ios.js

@@ -0,0 +1,17 @@
+import React, { useEffect } from 'react';
+import { NativeEventEmitter, NativeModules } from 'react-native';
+import { RNTPinwheel } from './pinwheel-view';
+const RNTPinwheelView = (props) => {
+    useEffect(() => {
+        const { RNTPinwheelEvents } = NativeModules;
+        const eventEmitter = new NativeEventEmitter(RNTPinwheelEvents);
+        const eventListener = eventEmitter.addListener('PINWHEEL_EVENT', (event) => {
+            props.onEvent(event);
+        });
+        return () => {
+            eventListener.remove();
+        };
+    }, []);
+    return <RNTPinwheel {...props}/>;
+};
+export default RNTPinwheelView;

package/lib/index.js

@@ -1,122 +0,0 @@
-import React from 'react';
-import { WebView } from 'react-native-webview';
-import { Linking, Platform, SafeAreaView, StyleSheet } from 'react-native';
-import { LINK_PAGE_URL, PINWHEEL_DOMAIN, VERSION } from './constants';
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-});
-export const PINWHEEL_MESSAGE_TYPES = {
-    PINWHEEL_EXIT: 'PINWHEEL_EXIT',
-    PINWHEEL_MODAL_CLOSE: 'PINWHEEL_MODAL_CLOSE',
-    PINWHEEL_LOAD_COMPLETE: 'PINWHEEL_LOAD_COMPLETE',
-    PINWHEEL_SUCCESS: 'PINWHEEL_SUCCESS',
-    PINWHEEL_EVENT: 'PINWHEEL_EVENT',
-};
-export default ({ linkToken, onLogin, onLoginAttempt, onSuccess, onError, onExit, onEvent }) => {
-    const handleEvent = (event) => {
-        if (!event) {
-            // first event is always an empty string
-            return;
-        }
-        let eventData;
-        try {
-            eventData = JSON.parse(event.nativeEvent.data);
-        }
-        catch (_error) {
-            let error = _error;
-            console.error(error);
-            onExit && onExit(error);
-            onError && onError(error);
-            onEvent && onEvent('error', error);
-            return;
-        }
-        const { type, eventName, payload } = eventData;
-        if (type === 'PINWHEEL_EVENT') {
-            onEvent && onEvent(eventName, payload);
-            switch (eventName) {
-                case 'exit':
-                    onExit && onExit(payload);
-                    break;
-                case 'success':
-                    onSuccess && onSuccess(payload);
-                    break;
-                case 'login':
-                    onLogin && onLogin(payload);
-                    break;
-                case 'login_attempt':
-                    onLoginAttempt && onLoginAttempt(payload);
-                    break;
-                case 'error':
-                    onError && onError(payload);
-                    break;
-                default:
-            }
-        }
-    };
-    const now = Date.now();
-    const [major, minor, patch] = VERSION.split('.').map(x => Number(x));
-    const runFirst = `
-      const uuidKey = 'pinwheel-uuid';
-      const localStorage = window.localStorage;
-      let uuid = localStorage.getItem(uuidKey);
-      if(!uuid) {
-        uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-          var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
-          return v.toString(16);
-        });
-        localStorage.setItem(uuidKey, uuid);
-      }
-      try {
-        window.addEventListener('message', event => {
-          window.ReactNativeWebView.postMessage(JSON.stringify(event.data))
-        });
-        window.postMessage(
-          { 
-            type: 'PINWHEEL_INIT', 
-            payload: { 
-              platform: "${Platform.OS}",
-              sdk: 'react native',
-              version: {
-                major: ${major},
-                minor: ${minor},
-                patch: ${patch}
-              },
-              initializationOptions: {
-                hasOnSuccess: ${!!onSuccess},
-                hasOnEvent: ${!!onEvent},
-                hasOnExit: ${!!onExit},
-                hasOnError: ${!!onError},
-                hasOnLogin: ${!!onLogin},
-              },
-              linkToken: '${linkToken}', 
-              uniqueUserId: uuid,
-              initializationTimestamp: ${now}
-            } 
-          }
-        );
-      } catch (err) {
-        console.error(err);
-      }
-      true;
-    `;
-    return (<SafeAreaView style={styles.container}>
-      <WebView source={{ uri: LINK_PAGE_URL }} onMessage={handleEvent} injectedJavaScript={runFirst} onShouldStartLoadWithRequest={(request) => {
-        const targetURL = request.url;
-        const isLinkPage = targetURL.includes(PINWHEEL_DOMAIN);
-        if (!isLinkPage) {
-            Linking.canOpenURL(targetURL).then(supported => {
-                if (supported) {
-                    Linking.openURL(targetURL).then(() => { });
-                }
-                else {
-                    console.warn('Don\'t know how to open URL: ' + targetURL);
-                }
-                return false;
-            }).catch(err => console.error('An error occurred ', err));
-        }
-        return isLinkPage;
-    }}/>
-    </SafeAreaView>);
-};