Adding React Native support

The way Dynamic integrates with React Native is by extending our client with the React Native Extension. This adds the reactNative module, which provides access to a webview component that must be rendered to your app.

Since our client was built with a modular approach, each extension must be installed as a separate package, so to keep the client’s package size to a minimum.

Installation

Simply run the following in your terminal:

expo

Shell

npx expo install @dynamic-labs/react-native-extension react-native-webview expo-web-browser expo-linking expo-secure-store

npm

Shell

npm install @dynamic-labs/react-native-extension react-native-webview expo-web-browser expo-linking expo-secure-store

yarn

Shell

yarn install @dynamic-labs/react-native-extension react-native-webview expo-web-browser expo-linking expo-secure-store

Usage with React Native

First, extend your client with our extension:

import { ReactNativeExtension } from '@dynamic-labs/react-native-extension';

export const dynamicClient = createClient({
  environmentId: 'YOUR-ENVIRONMENT-ID',
}).extend(ReactNativeExtension());

Next, render the webview injected into the client by the extension:

import { dynamicClient } from '<path to client file>';

export function App() {
  return (
    <>
      <dynamicClient.reactNative.WebView />

      <SafeAreaView>
        { ... }
      </SafeAreaView>
    </>
  )
}

You can read more about our react native package here.