@ragsuite/react-native

RAGSuite React Native embed SDK for Expo, React Native CLI, and React Native Web.

Website: www.ragsuite.de
Source: github.com/ragsuite/RAGSuite-SDK

Native chat and search UI powered by @ragsuite/core — no WebView.

The SDK automatically picks the right native stack for Expo vs CLI. Developers install the packages below for their platform — no native wiring in app code.

Install — Expo

npx expo install @ragsuite/react-native react-native-safe-area-context expo-blur expo-linear-gradient expo-clipboard

| Package | Why | |---------|-----| | @ragsuite/react-native | RAGSuite SDK | | react-native-safe-area-context | Layout / safe area insets | | expo-blur | Native backdrop blur (version-aligned to your Expo SDK) | | expo-linear-gradient | Native header gradient (version-aligned to your Expo SDK) | | expo-clipboard | Copy to clipboard |

Icons are bundled inside the SDK (Lucide PNG assets — no SVG dependency).

Install — React Native CLI

npm install @ragsuite/react-native react-native-safe-area-context @react-native-community/blur react-native-linear-gradient @react-native-clipboard/clipboard
cd ios && pod install
npx react-native run-ios   # or run-android

| Package | Why | |---------|-----| | @ragsuite/react-native | RAGSuite SDK | | react-native-safe-area-context | Layout / safe area insets | | @react-native-community/blur | Native backdrop blur | | react-native-linear-gradient | Native header gradient | | @react-native-clipboard/clipboard | Copy to clipboard |

Icons and session storage are bundled inside the SDK.

Platform install summary

| | Expo | RN CLI | |--|------|--------| | SDK | @ragsuite/react-native | @ragsuite/react-native | | Layout | react-native-safe-area-context | react-native-safe-area-context | | Blur | expo-blur | @react-native-community/blur | | Gradient | expo-linear-gradient | react-native-linear-gradient | | Copy | expo-clipboard | @react-native-clipboard/clipboard | | Icons | (bundled Lucide PNGs) | (bundled Lucide PNGs) | | Storage | (bundled in SDK) | (bundled in SDK) |

Do not install react-native-svg or lucide-react-native — the SDK ships Lucide-matched PNG icons with no SVG dependency.

Required peer dependencies (both platforms)

| Package | Version | |---------|---------| | react | >= 18.0.0 | | react-native | >= 0.72.0 | | react-native-safe-area-context | >= 4.0.0 |

Tested against Expo SDK 52–55 / React Native 0.76+.

Native behavior

| Feature | Expo (auto) | RN CLI (auto) | Fallback | |---------|-------------|---------------|----------| | Backdrop blur | expo-blur | @react-native-community/blur | Dim overlay | | Header gradient | expo-linear-gradient | react-native-linear-gradient | Solid color | | Copy | expo-clipboard (peer) | @react-native-clipboard/clipboard | Silent no-op | | Icons | Lucide PNG assets | Lucide PNG assets | — | | Avatars | React Native Image | React Native Image | — |

Credentials

Use a project-scoped mobile API key (rgs_live_... or rgs_test_...). Do not use the web embed token as apiKey.

Quick start

import { View } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { RAGSuiteProvider, RAGSuiteChat, RAGSuiteSearch } from '@ragsuite/react-native';

export default function App() {
  return (
    <SafeAreaProvider>
      <StatusBar translucent />
      <RAGSuiteProvider
        projectId="YOUR_PROJECT_ID"
        apiKey="rgs_live_YOUR_MOBILE_KEY"
        endpoint="YOUR_API_BASE_URL"
        features={['chat', 'search']}
      >
        <View style={{ flex: 1 }}>
          <RAGSuiteChat />
        </View>
      </RAGSuiteProvider>
    </SafeAreaProvider>
  );
}

Place <RAGSuiteChat /> as the last child inside a flex: 1 root View.

Use a translucent status bar at the app root so the chat modal matches the RAGSUITE app.

Tab navigator apps

import { getTabBarStackHeight } from '@ragsuite/react-native';

<RAGSuiteChat tabBarOffset={getTabBarStackHeight(insets.bottom)} />

Stack-only apps: <RAGSuiteChat tabBarOffset={0} />.

Components

| Export | Purpose | |--------|---------| | RAGSuiteProvider | Validates config, exposes client | | RAGSuiteChat | Floating launcher + chat panel | | RAGSuiteSearch | Search bar + streamed results | | getTabBarStackHeight | Tab bar stack height helper |

See also

examples/expo-demo for a full demo app.

License

Copyright 2026 NITSAN. Apache License, Version 2.0.