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:
npx expo install @dynamic-labs/react-native-extension@alpha react-native-webview expo-web-browser expo-linking expo-secure-store
npx expo install @dynamic-labs/react-native-extension@alpha react-native-webview expo-web-browser expo-linking expo-secure-store
npm install @dynamic-labs/react-native-extension@alpha react-native-webview expo-web-browser expo-linking expo-secure-store
yarn install @dynamic-labs/react-native-extension@alpha 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.