@magicpixel/rn-mp-client-sdk 1.13.22 → 1.13.23

package/README.md

@@ -14,16 +14,55 @@ npm install @magicpixel/rn-mp-client-sdk
 npm install react-native @react-native-async-storage/async-storage
 ```
 
-### For Bare React Native (Optional)
+### For Bare React Native
 
-For enhanced device info detection:
+Bare React Native apps require additional setup:
 
+#### 1. Install Required Dependencies
+
+```sh
+npm install react-native-get-random-values react-native-device-info
+```
+
+#### 2. Link Native Modules (Required)
+
+**iOS:**
 ```sh
-npm install react-native-device-info
-npx pod-install
+cd ios && pod install && cd ..
+```
+
+**Android:** Native modules are auto-linked via Gradle.
+
+> ⚠️ **Important:** After running `pod install`, you must fully restart the app:
+> 1. Kill the app in the simulator/device
+> 2. Stop Metro bundler (`Ctrl+C`)
+> 3. Restart Metro (`npx react-native start`)
+> 4. Rebuild and launch the app
+>
+> Simply reloading Metro is not sufficient - the native binary must be rebuilt.
+
+#### 3. Add Polyfill Import (Required)
+
+Add this import at the very top of your app's entry file (`index.js`), **before any other imports**:
+
+```javascript
+import 'react-native-get-random-values'; // Must be first import!
+
+import {AppRegistry} from 'react-native';
+import App from './App';
+import {name as appName} from './app.json';
+
+AppRegistry.registerComponent(appName, () => App);
 ```
 
-> **Note**: For Expo apps, device info is automatically detected using Expo modules. No additional setup required.
+> ⚠️ **Without this setup, you will see the error:**
+> ```
+> MagicPixel SDK initialization failed: Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'RNGetRandomValues' could not be found.
+> ```
+
+The SDK uses ULID for generating unique identifiers, which requires `crypto.getRandomValues()`. This polyfill must be loaded before any other code runs.
+
+> **Note**: For Expo managed apps, no additional setup is required - the polyfill is handled automatically.
 
 ## Quick Start
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magicpixel/rn-mp-client-sdk",
-  "version": "1.13.22",
+  "version": "1.13.23",
   "description": "React Native SDK for MagicPixel analytics and tag management",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -10,6 +10,7 @@
   "files": [
     "src",
     "lib",
+    "scripts",
     "!lib/typescript/example",
     "!**/__tests__",
     "!**/__fixtures__",
@@ -20,6 +21,7 @@
     "typescript": "tsc --noEmit",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "prepare": "bob build",
+    "postinstall": "node scripts/postinstall.js",
     "release": "release-it",
     "example": "yarn --cwd example",
     "bootstrap": "yarn example && yarn && yarn example pods",
@@ -91,7 +93,13 @@
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-get-random-values": ">=1.8.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native-get-random-values": {
+      "optional": true
+    }
   },
   "commitlint": {
     "extends": [

package/scripts/bootstrap.js

@@ -0,0 +1,29 @@
+const os = require('os');
+const path = require('path');
+const child_process = require('child_process');
+
+const root = path.resolve(__dirname, '..');
+const args = process.argv.slice(2);
+const options = {
+  cwd: process.cwd(),
+  env: process.env,
+  stdio: 'inherit',
+  encoding: 'utf-8',
+};
+
+if (os.type() === 'Windows_NT') {
+  options.shell = true;
+}
+
+let result;
+
+if (process.cwd() !== root || args.length) {
+  // We're not in the root of the project, or additional arguments were passed
+  // In this case, forward the command to `yarn`
+  result = child_process.spawnSync('yarn', args, options);
+} else {
+  // If `yarn` is run without arguments, perform bootstrap
+  result = child_process.spawnSync('yarn', ['bootstrap'], options);
+}
+
+process.exitCode = result.status;

package/scripts/postinstall.js

@@ -0,0 +1,136 @@
+#!/usr/bin/env node
+
+/**
+ * MagicPixel SDK Postinstall Script
+ * Detects bare React Native projects and displays setup instructions
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+// ANSI color codes
+const colors = {
+  reset: '\x1b[0m',
+  bright: '\x1b[1m',
+  dim: '\x1b[2m',
+  yellow: '\x1b[33m',
+  cyan: '\x1b[36m',
+  white: '\x1b[37m',
+  bgMagenta: '\x1b[45m',
+  bgBlue: '\x1b[44m',
+};
+
+function getAppRoot() {
+  // Navigate up from node_modules/@magicpixel/rn-mp-client-sdk/scripts
+  // Structure: <app>/node_modules/@magicpixel/rn-mp-client-sdk/scripts/postinstall.js
+  // Or with yalc: <app>/.yalc/@magicpixel/rn-mp-client-sdk/scripts/postinstall.js
+  let current = __dirname;
+
+  for (let i = 0; i < 10; i++) {
+    current = path.dirname(current);
+    const packageJsonPath = path.join(current, 'package.json');
+
+    if (fs.existsSync(packageJsonPath)) {
+      try {
+        const pkg = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+        // Skip our own package.json
+        if (pkg.name === '@magicpixel/rn-mp-client-sdk') {
+          continue;
+        }
+        // Found the host app
+        return current;
+      } catch (e) {
+        // Continue searching
+      }
+    }
+  }
+  return null;
+}
+
+function detectProjectType(appRoot) {
+  if (!appRoot) return 'unknown';
+
+  const hasIosFolder = fs.existsSync(path.join(appRoot, 'ios'));
+  const hasAndroidFolder = fs.existsSync(path.join(appRoot, 'android'));
+  const hasPodfile = fs.existsSync(path.join(appRoot, 'ios', 'Podfile'));
+
+  // Check for Expo
+  let hasExpo = false;
+  try {
+    const packageJsonPath = path.join(appRoot, 'package.json');
+    if (fs.existsSync(packageJsonPath)) {
+      const pkg = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+      hasExpo = !!(
+        pkg.dependencies?.expo ||
+        pkg.devDependencies?.expo ||
+        pkg.dependencies?.['expo-modules-core']
+      );
+    }
+  } catch (e) {
+    // Ignore errors
+  }
+
+  if (hasExpo && !hasIosFolder && !hasAndroidFolder) {
+    return 'expo-managed';
+  }
+  if (hasExpo && (hasIosFolder || hasAndroidFolder)) {
+    return 'expo-bare';
+  }
+  if (!hasExpo && (hasIosFolder || hasAndroidFolder)) {
+    return 'bare-rn';
+  }
+  return 'unknown';
+}
+
+function printBareRNMessage() {
+  const c = colors;
+  // Use stderr for better visibility (npm sometimes hides stdout from postinstall)
+  const log = (msg) => process.stderr.write(msg + '\n');
+
+  log('');
+  log(`${c.bgMagenta}${c.white}${c.bright}                                                                      ${c.reset}`);
+  log(`${c.bgMagenta}${c.white}${c.bright}   ╔═══════════════════════════════════════════════════════════════╗  ${c.reset}`);
+  log(`${c.bgMagenta}${c.white}${c.bright}   ║                                                               ║  ${c.reset}`);
+  log(`${c.bgMagenta}${c.white}${c.bright}   ║   🔮 MAGICPIXEL SDK - BARE REACT NATIVE SETUP REQUIRED 🔮     ║  ${c.reset}`);
+  log(`${c.bgMagenta}${c.white}${c.bright}   ║                                                               ║  ${c.reset}`);
+  log(`${c.bgMagenta}${c.white}${c.bright}   ╚═══════════════════════════════════════════════════════════════╝  ${c.reset}`);
+  log(`${c.bgMagenta}${c.white}${c.bright}                                                                      ${c.reset}`);
+  log('');
+  log(`${c.cyan}${c.bright}   Complete these steps to finish SDK installation:${c.reset}`);
+  log('');
+  log(`${c.yellow}${c.bright}   STEP 1:${c.reset} Link native modules (iOS)`);
+  log(`${c.dim}   ─────────────────────────────────────${c.reset}`);
+  log(`   ${c.white}cd ios && pod install && cd ..${c.reset}`);
+  log('');
+  log(`${c.yellow}${c.bright}   STEP 2:${c.reset} Add polyfill to index.js ${c.dim}(MUST be first import!)${c.reset}`);
+  log(`${c.dim}   ─────────────────────────────────────${c.reset}`);
+  log(`   ${c.white}import 'react-native-get-random-values';${c.reset}`);
+  log('');
+  log(`${c.yellow}${c.bright}   STEP 3:${c.reset} Rebuild your app ${c.dim}(required after pod install)${c.reset}`);
+  log(`${c.dim}   ─────────────────────────────────────${c.reset}`);
+  log(`   ${c.white}• Kill the app in simulator/device${c.reset}`);
+  log(`   ${c.white}• Stop Metro (Ctrl+C)${c.reset}`);
+  log(`   ${c.white}• Run: npx react-native run-ios${c.reset}`);
+  log('');
+  log(`${c.dim}   ⚠️  Without these steps, you'll see:${c.reset}`);
+  log(`${c.dim}   TurboModuleRegistry.getEnforcing(...): 'RNGetRandomValues' not found${c.reset}`);
+  log('');
+  log(`${c.dim}   📖 Full docs: https://github.com/digital-madtech/mp-rn-client-sdk#readme${c.reset}`);
+  log('');
+}
+
+function main() {
+  try {
+    const appRoot = getAppRoot();
+    const projectType = detectProjectType(appRoot);
+
+    if (projectType === 'bare-rn' || projectType === 'expo-bare') {
+      printBareRNMessage();
+    }
+    // For expo-managed, no message needed - it handles native modules automatically
+  } catch (error) {
+    // Silently fail - don't break npm install
+  }
+}
+
+main();