React Native

Learn how to use the Lens React SDK with React Native.

Quick Start

To get started with the Lens React SDK in a React Native app, follow these steps:

Install SDK

Install the @lens-protocol/react-native package.

npm install @lens-protocol/react-native@latest

Install Shims

Install the necessary shims.

npm install @ethersproject/[email protected] react-native-get-random-values

Import them at the top of your app's entry file. The react-native-get-random-values shim must be imported before the shims from @ethersproject/shims.

App.tsx// Import the crypto getRandomValues shim (**BEFORE** the shims)import "react-native-get-random-values";
// Import the the ethers shims (**BEFORE** ethers or @lens-protocol/react-native)import "@ethersproject/shims";
// ...

Create Bindings

Next, you need to create bindings, an object that implements the IBindings interface. The Lens SDK uses this to access the Signer and Provider instances. In this example, we'll use ethers.js, but you can modify it according to your specific requirements.

bindings.tsimport { IBindings } from "@lens-protocol/react-native";import { providers, Wallet } from "ethers";
const provider = new providers.InfuraProvider("maticmum");const wallet = new Wallet("<your-private-key>", provider);
export const bindings: IBindings = {  getProvider: async () => provider,  getSigner: async () => wallet,};

Create Storage

Next, you need to choose a storage provider. The Lens React SDK includes an adapter for react-native-mmkv, a popular key-value storage library for React Native. However, you can create your own by implementing the IStorageProvider interface.

Install the react-native-mmkv package.

npm install react-native-mmkv

Since this library includes native modules, you'll need to update your CocoaPods on iOS.

CocoaPodscd ios
bundle exec pod install

Create Config

Now, you can create the LensConfig object.

import { LensConfig, production } from "@lens-protocol/react-native";import { storage } from "@lens-protocol/react-native/storage/mmkv";
import { bindings } from "./bindings.ts";
const lensConfig: LensConfig = {  bindings,  environment: production,  storage: storage(),};

Wrap Your App

Finally, wrap your app with the <LensProvider> component and pass the LensConfig object you created earlier.

App.tsximport { LensProvider } from "@lens-protocol/react-native";
export function App() {  return <LensProvider config={lensConfig}>{/* Your App */}</LensProvider>;}

That's it—you are now ready to use the Lens React SDK in your React Native app.

For a working example see the reference integration.

Additional Options

React Suspense

The Lens React SDK offers experimental support for data fetching using React Suspense. This feature is being introduced gradually across all relevant hooks.

To use React Suspense with React Native, you must opt into React Native's new architecture, specifically the Fabric rendering system.

Hooks that support React Suspense include a suspense option. When this option is set to true, the hook suspends rendering until data is available. If an unexpected error occurs during this process, it will be thrown, allowing you to handle it using an error boundary.

Any known failure scenarios will be returned as part of the error object, which you can handle as part of your rendering logic.

import { SessionType, useSession } from "@lens-protocol/react-native";
export function Root() {  const { data } = useSession({    suspense: true,  });
  switch (data.type) {    case SessionType.Anonymous:      // data is a AnonymousSession      return <LoginScreen />;
    case SessionType.JustWallet:      // data is a WalletOnlySession      return <Onboarding address={data.address} />;
    case SessionType.WithProfile:      // data is a ProfileSession      return <Dashboard profile={data.profile} />;
    default:      return <AppError />;  }}

The methodology described above can be applied to any of the following hooks: