React Native (Expo) SDK

Quick Start

The React Native (Expo) SDK provides React Native components and authentication for integrating Bible content into Expo apps on iOS and Android. See the source on GitHub.

Requirements

@youversion/platform-react-native-expo-ui and @youversion/platform-react-native-expo-core 2.0.0.
Expo SDK 57 (Expo SDK 57, React Native 0.86). The published expo peer is >=57.0.0 <58.0.0. YouVersion Platform React Native Expo 2.0.0 requires Expo 57.0.23 or later within that range (built against that patch for the iOS 27 lifecycle backport).
A development build — this SDK relies on native modules and does not run in Expo Go.
A YouVersion Platform App Key — register your app to get one for free.

New to Expo? Scaffold an app with npx create-expo-app, then follow Expo's development builds guide to create a dev client. The steps below assume you are adding the SDK to an existing Expo app.

Getting Started

Get your App Key

Sign up at platform.youversion.com to get your free App Key. Expose it to your app, for example as an environment variable:
```
.env
EXPO_PUBLIC_YOUVERSION_APP_KEY=your_app_key
```
Install the SDK packages
- @youversion/platform-react-native-expo-ui — styled components (BibleCard, BibleReader, BibleTextView, VerseOfTheDay) and YouVersionProvider
- @youversion/platform-react-native-expo-core — authentication (useYVAuth) and storage; install both so TypeScript resolves the auth APIs
```
expo
npx expo install @youversion/platform-react-native-expo-ui @youversion/platform-react-native-expo-core
```
Install the peer dependencies

Expo will pick versions compatible with your SDK version:
```
Peer dependencies
npx expo install @gorhom/bottom-sheet @expo/dom-webview \
  expo-application expo-clipboard expo-crypto expo-font expo-network expo-secure-store expo-web-browser \
  react-dom \
  react-native-gesture-handler react-native-mmkv \
  react-native-nitro-modules react-native-reanimated \
  react-native-safe-area-context react-native-svg \
  react-native-worklets
```
These peers include native modules, so rebuild your development build after installing them (for example npx expo run:ios or npx expo run:android, or a new EAS build). A JS-only reload is not enough.

Upgrading from an earlier SDK version? Install expo-font and rebuild the native client. YouVersionProvider loads YouVersion's brand fonts via expo-font, which became a peer in @youversion/platform-react-native-expo-ui 1.5.0. Reloading JS alone fails with Cannot find native module.

Expo, React, and React Native are also peer dependencies, but your Expo app already provides them. When integrating into an existing app, make sure these dependencies resolve to a single version. Duplicate or mismatched versions are the most common source of setup issues.

Add the YouVersionProvider

Wrap your app's root with YouVersionProvider, and wrap that in GestureHandlerRootView. The provider's built-in bottom sheets depend on React Native Gesture Handler, so the gesture root must be the outer wrapper.


app/_layout.tsx
import { YouVersionProvider } from "@youversion/platform-react-native-expo-ui";
import { Stack } from "expo-router";
import { GestureHandlerRootView } from "react-native-gesture-handler";

export default function RootLayout() {
  const appKey = process.env.EXPO_PUBLIC_YOUVERSION_APP_KEY;

  if (!appKey) return null;

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <YouVersionProvider appKey={appKey} theme="system">
        <Stack screenOptions={{ headerShown: false }} />
      </YouVersionProvider>
    </GestureHandlerRootView>
  );
}

Common mistake: Forgetting YouVersionProvider, or rendering it outside GestureHandlerRootView, will cause the SDK components and hooks to throw errors that may not have an obvious solution.

Display a Bible verse


app/(tabs)/index.tsx
import { BibleCard } from "@youversion/platform-react-native-expo-ui";
import { SafeAreaView } from "react-native-safe-area-context";

export default function HomeScreen() {
  return (
    <SafeAreaView style={{ flex: 1, justifyContent: "center", padding: 16 }}>
      <BibleCard reference="JHN.3.16" versionId={3034} />
    </SafeAreaView>
  );
}

reference is a USFM reference (BOOK.CHAPTER.VERSE), and versionId is the Bible version (3034 is the Berean Standard Bible). These two identifiers show up across every component, so it's worth understanding them before you integrate further. See Components for the full component reference.

That's it! You now have Bible content in your Expo app.

Next steps

Components. Every component and its props.
Search. Reader Search and useSearch.
Authentication. Sign in with YouVersion.
Copyright & Attribution — display required Bible version copyright
Sample app — a working Expo Router app with provider setup, auth, and every component

Last modified on October 16, 2026

Migration from Legacy Authentication Components

Requirements

@youversion/platform-react-native-expo-ui and @youversion/platform-react-native-expo-core 2.0.0.

Expo SDK 57 (Expo SDK 57, React Native 0.86). The published expo peer is >=57.0.0 <58.0.0. YouVersion Platform React Native Expo 2.0.0 requires Expo 57.0.23 or later within that range (built against that patch for the iOS 27 lifecycle backport).

A development build — this SDK relies on native modules and does not run in Expo Go.

A YouVersion Platform App Key — register your app to get one for free.

New to Expo? Scaffold an app with npx create-expo-app, then follow Expo's development builds guide to create a dev client. The steps below assume you are adding the SDK to an existing Expo app.

Getting Started

Get your App Key

Sign up at platform.youversion.com to get your free App Key. Expose it to your app, for example as an environment variable:
```
.env
EXPO_PUBLIC_YOUVERSION_APP_KEY=your_app_key
```
Install the SDK packages
- @youversion/platform-react-native-expo-ui — styled components (BibleCard, BibleReader, BibleTextView, VerseOfTheDay) and YouVersionProvider
- @youversion/platform-react-native-expo-core — authentication (useYVAuth) and storage; install both so TypeScript resolves the auth APIs
```
expo
npx expo install @youversion/platform-react-native-expo-ui @youversion/platform-react-native-expo-core
```
Install the peer dependencies

Expo will pick versions compatible with your SDK version:
```
Peer dependencies
npx expo install @gorhom/bottom-sheet @expo/dom-webview \
  expo-application expo-clipboard expo-crypto expo-font expo-network expo-secure-store expo-web-browser \
  react-dom \
  react-native-gesture-handler react-native-mmkv \
  react-native-nitro-modules react-native-reanimated \
  react-native-safe-area-context react-native-svg \
  react-native-worklets
```
These peers include native modules, so rebuild your development build after installing them (for example npx expo run:ios or npx expo run:android, or a new EAS build). A JS-only reload is not enough.

Upgrading from an earlier SDK version? Install expo-font and rebuild the native client. YouVersionProvider loads YouVersion's brand fonts via expo-font, which became a peer in @youversion/platform-react-native-expo-ui 1.5.0. Reloading JS alone fails with Cannot find native module.

Expo, React, and React Native are also peer dependencies, but your Expo app already provides them. When integrating into an existing app, make sure these dependencies resolve to a single version. Duplicate or mismatched versions are the most common source of setup issues.

Add the YouVersionProvider


app/_layout.tsx
import { YouVersionProvider } from "@youversion/platform-react-native-expo-ui";
import { Stack } from "expo-router";
import { GestureHandlerRootView } from "react-native-gesture-handler";

export default function RootLayout() {
  const appKey = process.env.EXPO_PUBLIC_YOUVERSION_APP_KEY;

  if (!appKey) return null;

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <YouVersionProvider appKey={appKey} theme="system">
        <Stack screenOptions={{ headerShown: false }} />
      </YouVersionProvider>
    </GestureHandlerRootView>
  );
}

Common mistake: Forgetting YouVersionProvider, or rendering it outside GestureHandlerRootView, will cause the SDK components and hooks to throw errors that may not have an obvious solution.

Display a Bible verse


app/(tabs)/index.tsx
import { BibleCard } from "@youversion/platform-react-native-expo-ui";
import { SafeAreaView } from "react-native-safe-area-context";

export default function HomeScreen() {
  return (
    <SafeAreaView style={{ flex: 1, justifyContent: "center", padding: 16 }}>
      <BibleCard reference="JHN.3.16" versionId={3034} />
    </SafeAreaView>
  );
}

That's it! You now have Bible content in your Expo app.

Next steps

Components. Every component and its props.

Search. Reader Search and useSearch.

Authentication. Sign in with YouVersion.

Sample app — a working Expo Router app with provider setup, auth, and every component

Last modified on October 16, 2026