Providers

<JazzReactNativeProvider /> is the core component that connects your React Native application to Jazz. It handles:

Data Synchronization: Manages connections to peers and the Jazz cloud
Local Storage: Persists data locally between app sessions
Schema Types: Provides APIs for the AccountSchema
Authentication: Connects your authentication system to Jazz

Setting up the provider

Wrap your app components with the <JazzReactNativeProvider /> component:

// App.tsx
import { function JazzReactNativeProvider<S extends (AccountClass<Account> & CoValueFromRaw<Account>) | CoreAccountSchema>(props: JazzProviderProps<S>): JSX.ElementJazzReactNativeProvider } from "jazz-tools/react-native";
import { import MyAppAccountMyAppAccount } from "./schema";

export function function MyJazzProvider({ children }: {
    children: React.ReactNode;
}): React.JSX.ElementMyJazzProvider({ children: React.ReactNodechildren }: { children: React.ReactNodechildren: export namespace ReactReact.type React.ReactNode = string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | Promise<...> | null | undefinedRepresents all of the things React can render.

Where 
{@link 
ReactElement
}
 only represents JSX, `ReactNode` represents everything that can be rendered.
@see{@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/reactnode/ React TypeScript Cheatsheet}@example```tsx
// Typing children
type Props = { children: ReactNode }

const Component = ({ children }: Props) => <div>{children}</div>

<Component>hello</Component>
```@example```tsx
// Typing a custom element
type Props = { customElement: ReactNode }

const Component = ({ customElement }: Props) => <div>{customElement}</div>

<Component customElement={<div>hello</div>} />
```ReactNode }) {
  return (
    <function JazzReactNativeProvider<S extends (AccountClass<Account> & CoValueFromRaw<Account>) | CoreAccountSchema>(props: JazzProviderProps<S>): JSX.ElementJazzReactNativeProvider
      sync: SyncConfigsync={{ peer: "wss://cloud.jazz.tools/?key=you@example.com"peer: `wss://cloud.jazz.tools/?key=${const apiKey: "you@example.com"Use your email as a temporary key, or get a free
API Key at dashboard.jazz.tools for higher limits.
@linkhttps://dashboard.jazz.toolsapiKey}` }}
      AccountSchema?: anyAccountSchema={import MyAppAccountMyAppAccount}
    >
      {children: React.ReactNodechildren}
    </function JazzReactNativeProvider<S extends (AccountClass<Account> & CoValueFromRaw<Account>) | CoreAccountSchema>(props: JazzProviderProps<S>): JSX.ElementJazzReactNativeProvider>
  );
}

Tip

Sign up for a free API key at dashboard.jazz.tools for higher limits or production use, or use your email address as a temporary key to get started quickly.

Provider Options

kvStore
- MMKVStoreAdapter (default)
AccountSchema
- Account (default)
CryptoProvider
- PureJSCrypto (default) - Pure JavaScript crypto provider
- RNQuickCrypto - C++ accelerated crypto provider

Authentication in the Provider

<JazzReactNativeProvider /> works with various authentication methods, with PassphraseAuth being the easiest way to get started for development and testing. For authentication details, refer to our Authentication Overview guide.

The authentication hooks must always be used inside the <JazzReactNativeProvider /> component.

Implementing PassphraseAuth is straightforward:

Import the wordlist for generating recovery phrases
Use the usePassphraseAuth hook to handle authentication
Create simple registration and sign-in screens

// Example with PassphraseAuth
import { function JazzReactNativeProvider<S extends (AccountClass<Account> & CoValueFromRaw<Account>) | CoreAccountSchema>(props: JazzProviderProps<S>): JSX.ElementJazzReactNativeProvider, function usePassphraseAuth({ wordlist }: {
    wordlist: string[];
}): {
    readonly state: "anonymous" | "signedIn";
    readonly logIn: (passphrase: string) => Promise<void>;
    readonly signUp: (name?: string) => Promise<string>;
    readonly registerNewAccount: (passphrase: string, name: string) => Promise<string>;
    readonly generateRandomPassphrase: () => string;
    readonly passphrase: string;
}`usePassphraseAuth` hook provides a `JazzAuth` object for passphrase authentication.
@example```ts
const auth = usePassphraseAuth({ appName, appHostname, wordlist });
```@categoryAuth ProvidersusePassphraseAuth } from "jazz-tools/react-native";
import { import englishWordlistenglishWordlist } from "./wordlist";

function function JazzAuthentication({ children }: {
    children: ReactNode;
}): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<AwaitedReactNode> | React.JSX.Element | null | undefinedJazzAuthentication({ children: React.ReactNodechildren }: { children: React.ReactNodechildren: type ReactNode = string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | Promise<...> | null | undefinedRepresents all of the things React can render.

Where 
{@link 
ReactElement
}
 only represents JSX, `ReactNode` represents everything that can be rendered.
@see{@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/reactnode/ React TypeScript Cheatsheet}@example```tsx
// Typing children
type Props = { children: ReactNode }

const Component = ({ children }: Props) => <div>{children}</div>

<Component>hello</Component>
```@example```tsx
// Typing a custom element
type Props = { customElement: ReactNode }

const Component = ({ customElement }: Props) => <div>{customElement}</div>

<Component customElement={<div>hello</div>} />
```ReactNode }) {
  const const auth: {
    readonly state: "anonymous" | "signedIn";
    readonly logIn: (passphrase: string) => Promise<void>;
    readonly signUp: (name?: string) => Promise<string>;
    readonly registerNewAccount: (passphrase: string, name: string) => Promise<string>;
    readonly generateRandomPassphrase: () => string;
    readonly passphrase: string;
}auth = function usePassphraseAuth({ wordlist }: {
    wordlist: string[];
}): {
    readonly state: "anonymous" | "signedIn";
    readonly logIn: (passphrase: string) => Promise<void>;
    readonly signUp: (name?: string) => Promise<string>;
    readonly registerNewAccount: (passphrase: string, name: string) => Promise<string>;
    readonly generateRandomPassphrase: () => string;
    readonly passphrase: string;
}`usePassphraseAuth` hook provides a `JazzAuth` object for passphrase authentication.
@example```ts
const auth = usePassphraseAuth({ appName, appHostname, wordlist });
```@categoryAuth ProvidersusePassphraseAuth({
    wordlist: string[]wordlist: import englishWordlistenglishWordlist,
  });

  // If the user is already signed in, render the App
  if (const auth: {
    readonly state: "anonymous" | "signedIn";
    readonly logIn: (passphrase: string) => Promise<void>;
    readonly signUp: (name?: string) => Promise<string>;
    readonly registerNewAccount: (passphrase: string, name: string) => Promise<string>;
    readonly generateRandomPassphrase: () => string;
    readonly passphrase: string;
}auth.state: "anonymous" | "signedIn"state === "signedIn") {
    return children: React.ReactNodechildren
  }
  
  // Otherwise, show a sign-in screen
  return <function SignInScreen({ auth }: {
    auth: any;
}): nullSignInScreen auth: anyauth={const auth: {
    readonly state: "anonymous" | "signedIn";
    readonly logIn: (passphrase: string) => Promise<void>;
    readonly signUp: (name?: string) => Promise<string>;
    readonly registerNewAccount: (passphrase: string, name: string) => Promise<string>;
    readonly generateRandomPassphrase: () => string;
    readonly passphrase: string;
}auth} />;
}

function function AuthenticatedProvider({ children }: {
    children: ReactNode;
}): React.JSX.ElementAuthenticatedProvider({ children: React.ReactNodechildren }: { children: React.ReactNodechildren: type ReactNode = string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | Promise<...> | null | undefinedRepresents all of the things React can render.

Where 
{@link 
ReactElement
}
 only represents JSX, `ReactNode` represents everything that can be rendered.
@see{@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/reactnode/ React TypeScript Cheatsheet}@example```tsx
// Typing children
type Props = { children: ReactNode }

const Component = ({ children }: Props) => <div>{children}</div>

<Component>hello</Component>
```@example```tsx
// Typing a custom element
type Props = { customElement: ReactNode }

const Component = ({ customElement }: Props) => <div>{customElement}</div>

<Component customElement={<div>hello</div>} />
```ReactNode }) {
  return (
    <function JazzReactNativeProvider<S extends (AccountClass<Account> & CoValueFromRaw<Account>) | CoreAccountSchema>(props: JazzProviderProps<S>): JSX.ElementJazzReactNativeProvider
      sync: SyncConfigsync={{ peer: "wss://cloud.jazz.tools/?key=you@example.com"peer: `wss://cloud.jazz.tools/?key=${const apiKey: "you@example.com"Use your email as a temporary key, or get a free
API Key at dashboard.jazz.tools for higher limits.
@linkhttps://dashboard.jazz.toolsapiKey}` }}
    >
      <function JazzAuthentication({ children }: {
    children: ReactNode;
}): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<AwaitedReactNode> | React.JSX.Element | null | undefinedJazzAuthentication>
        {children: React.ReactNodechildren}
      </function JazzAuthentication({ children }: {
    children: ReactNode;
}): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<AwaitedReactNode> | React.JSX.Element | null | undefinedJazzAuthentication>
    </function JazzReactNativeProvider<S extends (AccountClass<Account> & CoValueFromRaw<Account>) | CoreAccountSchema>(props: JazzProviderProps<S>): JSX.ElementJazzReactNativeProvider>
  );
}

Local Persistence

Jazz for React Native includes built-in local persistence using SQLite. This implementation uses:

Database Storage: @op-engineering/op-sqlite - A high-performance SQLite implementation
Key-Value Storage: react-native-mmkv - A fast key-value storage system

Local persistence is enabled by default with no additional configuration required. Your data will automatically persist across app restarts.

Quick Crypto

For accelerated crypto operations, you can use the RNQuickCrypto crypto provider.

To use it, install the following Packages:

pnpm add react-native-quick-crypto@1.0.0-beta.18 react-native-nitro-modules react-native-fast-encoder

Then add the following to your JazzReactNativeProvider:

import { function JazzReactNativeProvider<S extends (AccountClass<Account> & CoValueFromRaw<Account>) | CoreAccountSchema>(props: JazzProviderProps<S>): JSX.ElementJazzReactNativeProvider } from "jazz-tools/react-native";
import { import RNQuickCryptoRNQuickCrypto } from "jazz-tools/react-native/crypto";

function function MyJazzProvider({ children }: {
    children: ReactNode;
}): React.JSX.ElementMyJazzProvider({ children: React.ReactNodechildren }: { children: React.ReactNodechildren: type ReactNode = string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | Promise<...> | null | undefinedRepresents all of the things React can render.

Where 
{@link 
ReactElement
}
 only represents JSX, `ReactNode` represents everything that can be rendered.
@see{@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/reactnode/ React TypeScript Cheatsheet}@example```tsx
// Typing children
type Props = { children: ReactNode }

const Component = ({ children }: Props) => <div>{children}</div>

<Component>hello</Component>
```@example```tsx
// Typing a custom element
type Props = { customElement: ReactNode }

const Component = ({ customElement }: Props) => <div>{customElement}</div>

<Component customElement={<div>hello</div>} />
```ReactNode }) {
  return (
    <function JazzReactNativeProvider<S extends (AccountClass<Account> & CoValueFromRaw<Account>) | CoreAccountSchema>(props: JazzProviderProps<S>): JSX.ElementJazzReactNativeProvider
      sync: SyncConfigsync={{ peer: "wss://cloud.jazz.tools/?key=you@example.com"peer: `wss://cloud.jazz.tools/?key=${const apiKey: "you@example.com"Use your email as a temporary key, or get a free
API Key at dashboard.jazz.tools for higher limits.
@linkhttps://dashboard.jazz.toolsapiKey}` }}
      CryptoProvider?: anyCryptoProvider={import RNQuickCryptoRNQuickCrypto}
    >
      {children: React.ReactNodechildren}
    </function JazzReactNativeProvider<S extends (AccountClass<Account> & CoValueFromRaw<Account>) | CoreAccountSchema>(props: JazzProviderProps<S>): JSX.ElementJazzReactNativeProvider>
  );
}

For configuration, add the following settings:

# ios/Podfile
ENV['SODIUM_ENABLED'] = '1'

and

// android/gradle.properties
sodiumEnabled=true

Docs issue?⌝Join Discord⌝

Server-side rendering

Providers

#Setting up the provider

#Provider Options

#Authentication in the Provider

#Local Persistence

#Quick Crypto

Setting up the provider

Provider Options

Authentication in the Provider

Local Persistence

Quick Crypto