@luciq/react-native 18.0.0-5556-SNAPSHOT

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## [18.0.0](https://github.com/luciqai/luciq-reactnative-sdk/compare/v18.0.0...dev) (September 24, 2025)
+
+- SDK rebranded from Instabug to Luciq.

package/FONTS_SETUP_GUIDE.md

@@ -0,0 +1,521 @@
+# Complete Font Setup Guide for Luciq React Native
+
+This guide covers all ways to use fonts with the `setTheme` function in Luciq React Native, including Google Fonts, custom fonts, system fonts, and both Expo and regular React Native projects.
+
+## Table of Contents
+
+1. [Overview](#overview)
+2. [Font Types Supported](#font-types-supported)
+3. [Regular React Native Setup](#regular-react-native-setup)
+4. [Expo Setup](#expo-setup)
+5. [Asset Linking Options](#asset-linking-options)
+6. [Usage Examples](#usage-examples)
+7. [Troubleshooting](#troubleshooting)
+8. [Platform Compatibility Notes](#platform-compatibility-notes)
+
+## Overview
+
+The Luciq React Native bridge supports font loading from multiple sources:
+
+- **App Bundle**: Fonts included in your app assets
+- **System Fonts**: Built-in platform fonts
+- **Custom Fonts**: Any TTF/OTF font files
+- **Google Fonts**: Downloaded TTF files from Google Fonts
+
+## Font Types Supported
+
+### 1. Google Fonts
+
+- Download TTF files from [Google Fonts](https://fonts.google.com/)
+- Examples: Roboto, Inter, Nunito, Open Sans, Lato
+
+### 2. Custom Fonts
+
+- Any TTF/OTF font files
+- Commercial fonts, free fonts, custom designs
+
+### 3. System Fonts
+
+- Platform default fonts
+- No setup required
+- Examples: San Francisco (iOS), Roboto (Android)
+
+## Regular React Native Setup
+
+### Method 1: Bundle Fonts (Recommended)
+
+#### Step 1: Download Font Files
+
+```bash
+# Create fonts directory
+mkdir fonts
+
+# Download your desired fonts (example with Google Fonts)
+# Download from Google Fonts or any font provider
+# Place TTF files in the fonts directory
+```
+
+#### Step 2: Add to Android
+
+```bash
+# Create assets/fonts directory
+mkdir -p android/app/src/main/assets/fonts
+
+# Copy font files
+cp fonts/*.ttf android/app/src/main/assets/fonts/
+```
+
+#### Step 3: Add to iOS
+
+1. **Add to Xcode Project:**
+   - Open your iOS project in Xcode
+   - Right-click on your project → "Add Files to [ProjectName]"
+   - Select your TTF files
+   - Make sure "Add to target" is checked
+
+2. **Update Info.plist:**
+
+```xml
+<key>UIAppFonts</key>
+<array>
+    <string>Roboto-Regular.ttf</string>
+    <string>Roboto-Bold.ttf</string>
+    <string>Inter-Regular.ttf</string>
+    <string>Inter-Bold.ttf</string>
+</array>
+```
+
+#### Step 4: Use with setTheme
+
+```typescript
+import Luciq from '@luciq/react-native';
+import { Platform } from 'react-native';
+
+const applyCustomTheme = () => {
+  Luciq.setTheme({
+    // Colors
+    primaryColor: '#2196F3',
+    backgroundColor: '#FFFFFF',
+    primaryTextColor: '#333333',
+
+    // Text styles (Android only)
+    primaryTextStyle: 'normal',
+    secondaryTextStyle: 'normal',
+    ctaTextStyle: 'bold',
+
+    // Fonts - Android (use font paths)
+    ...(Platform.OS === 'android' && {
+      primaryFontPath: '/data/user/0/ai.yourapp/files/fonts/Roboto-Regular.ttf',
+      secondaryFontPath: '/data/user/0/ai.yourapp/files/fonts/Roboto-Light.ttf',
+      ctaFontPath: '/data/user/0/ai.yourapp/files/fonts/Roboto-Bold.ttf',
+    }),
+
+    // Fonts - iOS (use font paths, not assets)
+    ...(Platform.OS === 'ios' && {
+      primaryFontPath: 'fonts/Roboto-Regular.ttf',
+      secondaryFontPath: 'fonts/Roboto-Light.ttf',
+      ctaFontPath: 'fonts/Roboto-Bold.ttf',
+    }),
+  });
+};
+```
+
+### Method 2: System Fonts Only
+
+```typescript
+import Luciq from '@luciq/react-native';
+
+const applySystemTheme = () => {
+  Luciq.setTheme({
+    // Colors only - uses system fonts
+    primaryColor: '#2196F3',
+    backgroundColor: '#FFFFFF',
+    primaryTextColor: '#333333',
+    secondaryTextColor: '#666666',
+    titleTextColor: '#000000',
+
+    // Text styles (Android only)
+    primaryTextStyle: 'normal',
+    secondaryTextStyle: 'normal',
+    ctaTextStyle: 'bold',
+
+    // No font paths = uses system fonts
+  });
+};
+```
+
+## Expo Setup
+
+### Method 1: Expo Fonts (Recommended for Expo)
+
+#### Step 1: Install Expo Fonts
+
+```bash
+npx expo install expo-font
+```
+
+#### Step 2: Download and Add Fonts
+
+```bash
+# Create fonts directory
+mkdir fonts
+
+# Download your fonts and place them in the fonts directory
+# Example: Roboto-Regular.ttf, Roboto-Bold.ttf, Inter-Regular.ttf
+```
+
+#### Step 3: Configure app.json
+
+```json
+{
+  "expo": {
+    "fonts": [
+      {
+        "asset": "./fonts/Roboto-Regular.ttf",
+        "family": "Roboto-Regular"
+      },
+      {
+        "asset": "./fonts/Roboto-Bold.ttf",
+        "family": "Roboto-Bold"
+      },
+      {
+        "asset": "./fonts/Inter-Regular.ttf",
+        "family": "Inter-Regular"
+      }
+    ]
+  }
+}
+```
+
+#### Step 4: Load Fonts in Your App
+
+```typescript
+import * as Font from 'expo-font';
+import { useEffect, useState } from 'react';
+
+export default function App() {
+  const [fontsLoaded, setFontsLoaded] = useState(false);
+
+  useEffect(() => {
+    async function loadFonts() {
+      await Font.loadAsync({
+        'Roboto-Regular': require('./fonts/Roboto-Regular.ttf'),
+        'Roboto-Bold': require('./fonts/Roboto-Bold.ttf'),
+        'Inter-Regular': require('./fonts/Inter-Regular.ttf'),
+      });
+      setFontsLoaded(true);
+    }
+    loadFonts();
+  }, []);
+
+  if (!fontsLoaded) {
+    return <LoadingScreen />;
+  }
+
+  return <YourApp />;
+}
+```
+
+#### Step 5: Use with setTheme
+
+```typescript
+import Luciq from '@luciq/react-native';
+import { Platform } from 'react-native';
+
+const applyExpoTheme = () => {
+  Luciq.setTheme({
+    // Colors
+    primaryColor: '#2196F3',
+    backgroundColor: '#FFFFFF',
+    primaryTextColor: '#333333',
+
+    // Text styles (Android only)
+    primaryTextStyle: 'normal',
+    secondaryTextStyle: 'normal',
+    ctaTextStyle: 'bold',
+
+    // Fonts - use font paths for both platforms
+    primaryFontPath: 'fonts/Roboto-Regular.ttf',
+    secondaryFontPath: 'fonts/Inter-Regular.ttf',
+    ctaFontPath: 'fonts/Roboto-Bold.ttf',
+  });
+};
+```
+
+### Method 2: Expo with Bundle Fonts
+
+Same as Regular React Native Method 1, but fonts are automatically included in the Expo build.
+
+## Asset Linking Options
+
+### Option 1: Manual Copy (Current Method)
+
+- Copy TTF files to native directories
+- Update Info.plist manually
+- Works with all setups
+
+### Option 2: React Native CLI Linking
+
+```bash
+# Create a react-native.config.js file
+module.exports = {
+  assets: ['./fonts/'],
+};
+```
+
+Then run:
+
+```bash
+npx react-native link
+```
+
+### Option 3: Expo Asset Linking
+
+```json
+{
+  "expo": {
+    "fonts": [
+      {
+        "asset": "./fonts/Roboto-Regular.ttf",
+        "family": "Roboto-Regular"
+      }
+    ]
+  }
+}
+```
+
+### Option 4: Metro Asset Plugin
+
+```bash
+npm install --save-dev react-native-asset
+```
+
+Create `react-native.config.js`:
+
+```javascript
+module.exports = {
+  assets: ['./fonts/'],
+};
+```
+
+## Usage Examples
+
+### Example 1: Google Fonts (Roboto)
+
+```typescript
+// Download: Roboto-Regular.ttf, Roboto-Bold.ttf, Roboto-Light.ttf
+// Add to project using any method above
+
+const applyRobotoTheme = () => {
+  Luciq.setTheme({
+    primaryColor: '#1976D2',
+    backgroundColor: '#FAFAFA',
+    primaryTextColor: '#212121',
+    secondaryTextColor: '#757575',
+    titleTextColor: '#000000',
+
+    // Text styles (Android only)
+    primaryTextStyle: 'normal',
+    secondaryTextStyle: 'normal',
+    ctaTextStyle: 'bold',
+
+    // Font paths for both platforms
+    primaryFontPath: 'fonts/Roboto-Regular.ttf',
+    secondaryFontPath: 'fonts/Roboto-Light.ttf',
+    ctaFontPath: 'fonts/Roboto-Bold.ttf',
+  });
+};
+```
+
+### Example 2: Custom Fonts (Inter)
+
+```typescript
+// Download: Inter-Regular.ttf, Inter-Bold.ttf, Inter-Medium.ttf
+// Add to project using any method above
+
+const applyInterTheme = () => {
+  Luciq.setTheme({
+    primaryColor: '#3B82F6',
+    backgroundColor: '#FFFFFF',
+    primaryTextColor: '#1F2937',
+    secondaryTextColor: '#6B7280',
+    titleTextColor: '#111827',
+
+    // Text styles (Android only)
+    primaryTextStyle: 'normal',
+    secondaryTextStyle: 'normal',
+    ctaTextStyle: 'bold',
+
+    // Font paths for both platforms
+    primaryFontPath: 'fonts/Inter-Regular.ttf',
+    secondaryFontPath: 'fonts/Inter-Medium.ttf',
+    ctaFontPath: 'fonts/Inter-Bold.ttf',
+  });
+};
+```
+
+### Example 3: System Fonts Only
+
+```typescript
+const applySystemTheme = () => {
+  Luciq.setTheme({
+    primaryColor: '#007AFF',
+    backgroundColor: '#F2F2F7',
+    primaryTextColor: '#000000',
+    secondaryTextColor: '#8E8E93',
+    titleTextColor: '#000000',
+
+    // Text styles (Android only) - no font paths = uses system fonts
+    primaryTextStyle: 'normal',
+    secondaryTextStyle: 'normal',
+    ctaTextStyle: 'bold',
+  });
+};
+```
+
+### Example 4: Mixed Approach
+
+```typescript
+const applyMixedTheme = () => {
+  Luciq.setTheme({
+    primaryColor: '#FF6B6B',
+    backgroundColor: '#FFFFFF',
+    primaryTextColor: '#2D3436',
+    secondaryTextColor: '#636E72',
+    titleTextColor: '#2D3436',
+
+    // Text styles (Android only)
+    primaryTextStyle: 'normal',
+    secondaryTextStyle: 'normal',
+    ctaTextStyle: 'bold',
+
+    // Custom font only for CTA - rest use system fonts
+    ctaFontPath: 'fonts/Roboto-Bold.ttf',
+  });
+};
+```
+
+## Platform Compatibility Notes
+
+### **Important: iOS Font Asset Limitation**
+
+The iOS implementation currently **only supports** `primaryFontPath`, `secondaryFontPath`, and `ctaFontPath` properties. The `*FontAsset` properties are **not supported** on iOS.
+
+**Android**: Supports both `*FontPath` and `*FontAsset` properties
+**iOS**: Only supports `*FontPath` properties
+
+### **Recommended Approach**
+
+Use `*FontPath` properties for both platforms to ensure compatibility:
+
+```typescript
+// ✅ Works on both platforms
+Luciq.setTheme({
+  primaryFontPath: 'fonts/Roboto-Regular.ttf',
+  secondaryFontPath: 'fonts/Roboto-Light.ttf',
+  ctaFontPath: 'fonts/Roboto-Bold.ttf',
+});
+
+// ❌ iOS doesn't support these
+Luciq.setTheme({
+  primaryFontAsset: 'fonts/Roboto-Regular.ttf', // iOS ignores this
+  secondaryFontAsset: 'fonts/Roboto-Light.ttf', // iOS ignores this
+  ctaFontAsset: 'fonts/Roboto-Bold.ttf', // iOS ignores this
+});
+```
+
+### **Font Path Format**
+
+- **Android**: Can use full paths or just filenames
+- **iOS**: Use relative paths like `fonts/Roboto-Regular.ttf`
+
+## Troubleshooting
+
+### Common Issues
+
+#### 1. Font Not Loading
+
+**Symptoms:** Font appears as system font or doesn't change
+**Solutions:**
+
+- Check font filename matches exactly (case-sensitive)
+- Verify font is added to both Android and iOS
+- For iOS, check Info.plist entries
+- For Expo, ensure fonts are loaded before using setTheme
+- **iOS users**: Make sure you're using `*FontPath` properties, not `*FontAsset`
+
+#### 2. Font Loading in Expo
+
+**Symptoms:** Font works in development but not in production
+**Solutions:**
+
+- Use `expo-font` to load fonts before app starts
+- Ensure fonts are included in app.json
+- Test with `expo build` or EAS Build
+
+#### 3. Font File Issues
+
+**Symptoms:** App crashes or font doesn't load
+**Solutions:**
+
+- Verify TTF file is not corrupted
+- Check file size (should be reasonable, not 0 bytes)
+- Ensure font file is valid TTF/OTF format
+
+#### 4. Performance Issues
+
+**Symptoms:** App slow to start or font loading delays
+**Solutions:**
+
+- Use system fonts for better performance
+- Limit number of custom fonts
+- Preload fonts in app initialization
+
+### Debug Steps
+
+1. **Check Font Loading:**
+
+```typescript
+// Add this to debug font loading
+console.log('Available fonts:', Luciq.getAvailableFonts()); // If available
+```
+
+2. **Verify File Paths:**
+
+```bash
+# Check if fonts are in the right place
+ls -la android/app/src/main/assets/fonts/
+ls -la ios/YourApp/
+```
+
+3. **Test with System Fonts First:**
+
+```typescript
+// Test with system fonts to ensure setTheme works
+Luciq.setTheme({
+  primaryColor: '#FF0000',
+  // No fontFamily = system fonts
+});
+```
+
+## Best Practices
+
+1. **Use System Fonts When Possible:** Better performance and consistency
+2. **Limit Custom Fonts:** Use 1-2 custom fonts maximum
+3. **Preload Fonts:** Load fonts before app starts
+4. **Test on Both Platforms:** Fonts may behave differently on iOS vs Android
+5. **Use Standard Font Weights:** Regular, Bold, Light are most reliable
+6. **Keep Font Files Small:** Optimize TTF files for mobile
+7. **Use \*FontPath Properties:** Ensures compatibility with both platforms
+
+## Summary
+
+- **Regular React Native:** Use bundle fonts or system fonts
+- **Expo:** Use expo-font or bundle fonts
+- **Asset Linking:** Available through CLI tools and Expo config
+- **Google Fonts:** Download TTF files and add to project
+- **Custom Fonts:** Any TTF/OTF file works the same way
+- **System Fonts:** No setup required, best performance
+- **Platform Compatibility:** Use `*FontPath` properties for both platforms
+
+The native bridge handles all font loading automatically once fonts are properly added to your project!

package/Gemfile

@@ -0,0 +1 @@
+source "https://rubygems.org"

package/Gemfile.lock

@@ -0,0 +1,11 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+
+BUNDLED WITH
+   2.4.17

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2025 LUCIQ
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,146 @@
+# Luciq for React Native
+
+[![npm](https://img.shields.io/npm/v/@luciq/react-native.svg)](https://www.npmjs.com/package/@luciq/react-native)
+[![npm](https://img.shields.io/npm/dt/@luciq/react-native.svg)](https://www.npmjs.com/package/@luciq/react-native)
+[![npm](https://img.shields.io/npm/l/@luciq/react-native.svg)](https://github.com/luciqai/luciq-reactnative-sdk/blob/master/LICENSE)
+[![Twitter](https://img.shields.io/badge/twitter-@Luciq-blue.svg)](https://twitter.com/Luciqai)
+[![Analytics](https://luciq-ga.appspot.com/UA-41982088-6/github/Luciq/@luciq/react-native?pixel)](https://luciq.ai)
+
+Luciq is the Agentic Observability Platform built for Mobile.
+
+Our intelligent AI agents help you capture rich, contextual data for every issue, including full session replays, console logs, and detailed network requests, to proactively detect, prioritize, and resolve problems automatically. From traditional bug reporting to proactive resolution, Luciq equips you with the building blocks to your app’s success.
+
+Ship faster, deliver frustration-free user sessions, and focus on building what matters.
+
+For more info, visit Luciq.ai.
+
+## Installation
+
+1. In Terminal, navigate to your React Native directory and install the `@luciq/react-native` package:
+
+   ```bash
+   npm install @luciq/react-native
+   ```
+
+   Or if you prefer to use Yarn instead of npm:
+
+   ```bash
+   yarn add @luciq/react-native
+   ```
+
+2. if you are using expo you need to add `@luciq/react-native` plugin to `app.json`:
+
+   ```json
+      "plugins" : [
+         [
+           "@luciq/react-native",
+           {
+              // optional that add Mic,Photo permission on iOS and FOREGROUND_SERVICE_MEDIA_PROJECTION on android
+             "addScreenRecordingBugReportingPermission": true
+           }
+         ]
+   ]
+   ```
+
+3. CocoaPods on iOS needs this extra step:
+
+   ```bash
+   cd ios && pod install && cd ..
+   ```
+
+## Initializing Luciq
+
+To start using Luciq, import it as follows, then initialize it in the `constructor` or `componentWillMount`. This line will let the SDK work with the default behavior. The SDK will be invoked when the device is shaken. You can customize this behavior through the APIs.
+
+```javascript
+import Luciq from '@luciq/react-native';
+
+Luciq.init({
+  token: 'APP_TOKEN',
+  invocationEvents: [Luciq.invocationEvent.shake],
+});
+```
+
+_You can find your app token by selecting the SDK tab from your [**Luciq dashboard**](https://dashboard.luciq.ai)._
+
+## Microphone and Photo Library Usage Description (iOS Only)
+
+Luciq needs access to the microphone and photo library to be able to let users add audio and video attachments. Starting from iOS 10, apps that don’t provide a usage description for those 2 permissions would be rejected when submitted to the App Store.
+
+For your app not to be rejected, you’ll need to add the following 2 keys to your app’s info.plist file with text explaining to the user why those permissions are needed:
+
+- `NSMicrophoneUsageDescription`
+- `NSPhotoLibraryUsageDescription`
+
+If your app doesn’t already access the microphone or photo library, we recommend using a usage description like:
+
+- "`<app name>` needs access to the microphone to be able to attach voice notes."
+- "`<app name>` needs access to your photo library for you to be able to attach images."
+
+**The permission alert for accessing the microphone/photo library will NOT appear unless users attempt to attach a voice note/photo while using Luciq.**
+
+## Uploading Source Map Files for Crash Reports
+
+For your app crashes to show up with a fully symbolicated stack trace, we will automatically generate the source map files and upload them to your dashboard on release build. To do so, we rely on your app token being explicitly added to `Luciq.init({token: 'YOUR_APP_TOKEN'})` in JavaScript.
+
+If your app token is defined as a constant, you can set an environment variable `LUCIQ_APP_TOKEN` to be used instead.
+We also automatically read your `versionName` and `versionCode` to upload your sourcemap file. alternatively, can also set the environment variables `LUCIQ_APP_VERSION_NAME` and `LUCIQ_APP_VERSION_CODE` to be used instead.
+
+To disable the automatic upload, you can set the environment variable `LUCIQ_SOURCEMAPS_UPLOAD_DISABLE` to TRUE.
+
+## Network Logging
+
+Luciq network logging is enabled by default. It intercepts any requests performed with `fetch` or `XMLHttpRequest` and attaches them to the report that will be sent to the dashboard. To disable network logs:
+
+```javascript
+import { NetworkLogger } from '@luciq/react-native';
+```
+
+```javascript
+NetworkLogger.setEnabled(false);
+```
+
+## Repro Steps
+
+Luciq Repro Steps are enabled by default. It captures a screenshot of each screen the user navigates to. These screens are attached to the BugReport when sent.
+
+We support the two most popular React Native navigation libraries:
+
+- **[react-navigation](https://github.com/react-navigation/react-navigation)**
+  - **v5**
+    set the `onStateChange` to `Luciq.onStateChange` in your NavigationContainer as follows:
+
+    ```javascript
+    <NavigationContainer onStateChange={Luciq.onStateChange} />
+    ```
+
+  - **<=v4**
+    set the `onNavigationStateChange` to `Luciq.onNavigationStateChange` in your App wrapper as follows:
+
+    ```javascript
+    export default () => <App onNavigationStateChange={Luciq.onNavigationStateChange} />;
+    ```
+
+- **[react-native-navigation](https://github.com/wix/react-native-navigation)**
+
+  Register `luciq.aiponentDidAppearListener` listener using:
+
+  ```javascript
+  Navigation.events().registerComponentDidAppearListener(luciq.aiponentDidAppearListener);
+  ```
+
+Alternatively, you can report your screen changes manually using the following API
+
+```javascript
+Luciq.reportScreenChange('screenName');
+```
+
+You can disable Repro Steps using the following API:
+
+```javascript
+Luciq.setReproStepsConfig({ all: ReproStepsMode.disabled });
+```
+
+## Documentation
+
+For more details about the supported APIs and how to use them, check our [**Documentation**](https://docs.luciq.ai/docs/react-native-overview).