How to Add HelpKit to Your React Native Mobile App – HelpKit

In this help article we’ll learn how to add a professional help center to your React Native app in minutes using Notion and HelpKit's Mobile SDK.

Overview

HelpKit's Mobile SDK lets you embed a native help center directly in your React Native app. Users can search articles, browse categories, and contact support without ever leaving your app.

Key Features:

Native mobile interface with customizable themes

Full-text search across all articles

Built-in contact form with metadata support

Real-time content updates from Notion

Analytics to track user behavior

Prerequisites

Existing HelpKit account and project (if you don't have one yet, start your 7-day free trial)

React Native development environment

Notion workspace with your help content

Feel free to check out the NPM Package as well as our Github repo: GitHub Repository for the API documentation including an example app you can experiment with.

More of a visual person? Watch the tutorial on how to add a HelpKit help center to your React Native app here ↓

Setup Steps

1. Prepare Your Content

If you haven't already set up your help center content:

Go to your HelpKit dashboard

Select the "App Template" for pre-written mobile app articles (you can also start with the blank template)

Duplicate the template to your Notion workspace

Customize articles with your app-specific information

Make the page public: Click "Share" → "Share to web" in Notion

Connect to HelpKit: Paste the public link in your HelpKit dashboard

2. Install the SDK

npm install @helpkit/helpkit-help-center-react-native

3. Add HelpKit to Your App

In your app's root component (typically App.tsx, _layout.tsx, or similar), import and add the HelpKit component:

import { HelpKit } from '@helpkit/helpkit-help-center-react-native'

export default function App() {
  return (
    <YourAppComponents>
      {/* Add at the bottom of your root component */}
      <HelpKit projectId="YOUR_PROJECT_ID" />
    </YourAppComponents>
  )
}

💡 Find Your Project ID: Available in your HelpKit dashboard under Settings > General. Your Project ID is your project name. In the example of demos.helpkit.so the Project ID would be demos

4. Open the Help Center

import { HelpKitSDK } from '@helpkit/helpkit-help-center-react-native'

// Open the main help center
const openHelp = () => {
  HelpKitSDK.open()
}

// Open a specific article
const openArticle = () => {
  HelpKitSDK.openArticle('YOUR_ARTICLE_ID')
}

// Open a category
const openCategory = () => {
  HelpKitSDK.openCategory('YOUR_CATEGORY_ID')
}

// Open contact form
const openContact = () => {
  HelpKitSDK.openContact()
}

Configuration Options

Customizing the Experience

Navigate to Settings > App in your dashboard:

App View Configuration

✅ Show All Categories: Display all help topics on the main screen

✅ Show Suggested Articles: Feature your most important articles prominently

✅ Show Contact Us Button: Provide an easy escalation path to human support

🎛️ Note: These settings currently apply to both the mobile SDK and embeddable widget at the same time.

Theme Selection

Choose a theme that complements your consumer app's design:

HelpKit Theme: Professional design with colored headers and rounded corners

Minimal Theme: Clean, subtle design that blends seamlessly with any app style

Pre-filling Contact Information

Enhance support requests with user context:

HelpKitSDK.setContactFields({
  name: 'John Doe',
  email: 'john@example.com',
  metadata: JSON.stringify({
    userId: '12345',
    appVersion: '1.2.0',
    deviceModel: 'iPhone 15',
    lastAction: 'checkout'
  })
})

Implementation Examples

Add help center access points throughout your mobile app. Common locations include the Settings screen or context aware on specific feature pages.

Example Settings Screen Integration

import { HelpKitSDK } from '@helpkit/helpkit-help-center-react-native'

const SettingsScreen = () => {
  const openHelpCenter = () => {
    HelpKitSDK.open()
  }

  const openBillingHelp = () => {
    HelpKitSDK.openCategory('YOUR_BILLING_CATEGORY_ID')
  }

  return (
    <ScrollView>
      <SettingItem
        title="Help Center"
        icon="help-circle"
        onPress={openHelpCenter}
      />

      <SettingItem
        title="Billing Help"
        icon="credit-card"
        onPress={openBillingHelp}
      />

      <SettingItem
        title="Contact Support"
        icon="mail"
        onPress={() => HelpKitSDK.openContact()}
      />
    </ScrollView>
  )
}

In most cases simply having a button that opens your help center modal should do the trick but if you need more granularity our SDK has got you covered.

Example Context-Aware Help

Show relevant help content based on where users are in your consumer app:

const SubscriptionScreen = () => {
  const showSubscriptionHelp = () => {
    // Open help specific to subscription management
    HelpKitSDK.openArticle('YOUR_SUBSCRIPTION_HELP_ARTICLE_ID')
  }

  return (
    <View>
      <Text>Subscription Settings</Text>
      <Button title="Need Help?" onPress={showSubscriptionHelp} />
    </View>
  )
}

Kickstart your Mobile App Help Center Content

We've already done the heavy lifting for you. Our Mobile App Q&A Template includes the most common questions your consumer app might receive. We spent days perfecting these articles so you don't have to start from zero; just copy our template, customize it for your app, and you're ready to go. The mobile app template includes essential articles that cover the most common questions consumer apps receive.

Click me to see the template content

👤 Account & Authentication:

How to create an account (with separate guides for Apple and Android users)

Password reset instructions

Profile management

Account deletion process

🚀 App Installation & Setup:

How to install the app (iOS and Android specific guides)

First-time setup walkthrough

Troubleshooting installation issues

💰 Subscription & Billing:

Subscription plan comparison

How to upgrade/downgrade

Cancellation instructions

Billing troubleshooting

Refund policy

⚡ Core Features & Usage:

Getting started guide

Feature explanations

Tips and best practices

🛠️ Technical Support:

Common troubleshooting steps

Performance optimization

Bug reporting process

Managing Content

Updating Articles

Edit in Notion: Make changes to your articles using Notion's familiar interface

Sync in HelpKit: Click "Re-sync" in your dashboard

Instant updates: Changes appear immediately in your app (no app store update needed)

Analytics & Optimization

Monitor your help center performance:

Search Analytics: See what users are looking for

Article Performance: Track views and user feedback

Content Gaps: Identify missing information from failed searches

Contact Patterns: Understand when self-service isn't enough

Use these insights to continuously improve your content and reduce support tickets.

Troubleshooting

Common Issues

Help center not opening:

Ensure <HelpKit /> is added to your root component

Verify your Project ID is correct

Check console for errors with debug={true}

Articles not syncing:

Confirm your Notion page is public

Check for sync errors in the HelpKit dashboard

Try manually re-syncing your content

Styling issues:

Verify theme selection in Settings > App

Check that custom colors are properly configured

Ensure the SDK version is up to date

Documentation

Documentation: NPM Package

Github: GitHub Repository

Support: Contact our team through your HelpKit dashboard

Next Steps

Set up analytics tracking to monitor user behavior

Create contextual help triggers throughout your app

Regularly review and update your content based on user feedback

Consider HelpKit AI for instant question answering