React Native SDK Integration

Add Helplane chat support to your React Native app with our official SDK.

Requirements

• React Native 0.70 or later
• react-native-webview 11.0 or later
• iOS 14.0+ / Android API 24+

Installation

npm

npm install @helplane/react-native react-native-webview

Yarn

yarn add @helplane/react-native react-native-webview

iOS Pod Install

For iOS, install the native dependencies:

cd ios && pod install

Configuration

Set Up the Provider

Wrap your app with HelpLaneProvider:

import { HelpLaneProvider } from '@helplane/react-native';
export default function App() {
  return (
    <HelpLaneProvider brandToken="your-brand-token">
      <YourApp />
    </HelpLaneProvider>
  );
}

Identify Users (Optional)

For logged-in users, pass their information to maintain conversation history:

<HelpLaneProvider
  brandToken="your-brand-token"
  user={{
    externalId: 'user-123',
    name: 'John Doe',
    email: '[email protected]',
    avatarURL: 'https://example.com/avatar.jpg',
    customAttributes: { plan: 'premium', company: 'Acme Inc' }
  }}
>
  <YourApp />
</HelpLaneProvider>

Displaying the Chat

Full-Screen Chat Component

import { HelpLaneChat } from '@helplane/react-native';
function ChatScreen() {
  return <HelpLaneChat style={{ flex: 1 }} />;
}

Modal Presentation

import { useState } from 'react';
import { Modal, Button } from 'react-native';
import { HelpLaneChat } from '@helplane/react-native';
function SupportButton() {
  const [visible, setVisible] = useState(false);
  return (
    <>
      <Button title="Get Help" onPress={() => setVisible(true)} />
      <Modal visible={visible} animationType="slide">
        <HelpLaneChat
          style={{ flex: 1 }}
          onClose={() => setVisible(false)}
        />
      </Modal>
    </>
  );
}

Using the Hook

Access chat state with the useHelpLane hook:

import { useHelpLane } from '@helplane/react-native';
function SupportIndicator() {
  const { unreadCount, isConnected } = useHelpLane();
  return (
    <View>
      <Text>Connection: {isConnected ? 'Online' : 'Offline'}</Text>
      {unreadCount > 0 && (
        <Badge count={unreadCount} />
      )}
    </View>
  );
}

React Navigation Integration

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { HelpLaneChat } from '@helplane/react-native';
const Stack = createNativeStackNavigator();
function AppNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen
        name="Support"
        component={HelpLaneChat}
        options={{ title: 'Help & Support' }}
      />
    </Stack.Navigator>
  );
}
// Navigate to chat
navigation.navigate('Support');

Expo Support

The SDK works with Expo projects that have native modules enabled (Expo Go is not supported due to WebView dependency).

npx expo install @helplane/react-native react-native-webview
npx expo prebuild

TypeScript Support

The SDK includes full TypeScript definitions:

import type { HelpLaneUser, HelpLaneChatProps } from '@helplane/react-native';
const user: HelpLaneUser = {
  externalId: 'user-123',
  name: 'John Doe',
  email: '[email protected]'
};

Customization

The chat widget inherits your brand colors and styling configured in your Helplane dashboard under Settings > Chat Widget.