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>) | AnyAccountSchema>(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.Element
MyJazzProvider
({ 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 | undefined
Represents 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>) | AnyAccountSchema>(props: JazzProviderProps<S>): JSX.ElementJazzReactNativeProvider sync: SyncConfigsync={{ peer: "wss://cloud.jazz.tools/?key=you@example.com"peer: "wss://cloud.jazz.tools/?key=you@example.com" }} AccountSchema?: anyAccountSchema={import MyAppAccountMyAppAccount} > {children: React.ReactNodechildren} </function JazzReactNativeProvider<S extends (AccountClass<Account> & CoValueFromRaw<Account>) | AnyAccountSchema>(props: JazzProviderProps<S>): JSX.ElementJazzReactNativeProvider> ); }

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:

  1. Import the wordlist for generating recovery phrases
  2. Use the usePassphraseAuth hook to handle authentication
  3. Create simple registration and sign-in screens
// Example with PassphraseAuth
import { function JazzReactNativeProvider<S extends (AccountClass<Account> & CoValueFromRaw<Account>) | AnyAccountSchema>(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 Providers
usePassphraseAuth
} 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 | undefined
JazzAuthentication
({ 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 | undefined
Represents 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 Providers
usePassphraseAuth
({
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;
}): null
SignInScreen
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.Element
AuthenticatedProvider
({ 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 | undefined
Represents 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>) | AnyAccountSchema>(props: JazzProviderProps<S>): JSX.ElementJazzReactNativeProvider sync: SyncConfigsync={{ peer: "wss://cloud.jazz.tools/?key=your-api-key"peer: "wss://cloud.jazz.tools/?key=your-api-key" }} > <
function JazzAuthentication({ children }: {
    children: ReactNode;
}): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<AwaitedReactNode> | React.JSX.Element | null | undefined
JazzAuthentication
>
{children: React.ReactNodechildren} </
function JazzAuthentication({ children }: {
    children: ReactNode;
}): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<AwaitedReactNode> | React.JSX.Element | null | undefined
JazzAuthentication
>
</function JazzReactNativeProvider<S extends (AccountClass<Account> & CoValueFromRaw<Account>) | AnyAccountSchema>(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

Then add the following to your JazzReactNativeProvider:

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

function 
function MyJazzProvider({ children }: {
    children: ReactNode;
}): React.JSX.Element
MyJazzProvider
({ 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 | undefined
Represents 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>) | AnyAccountSchema>(props: JazzProviderProps<S>): JSX.ElementJazzReactNativeProvider sync: SyncConfigsync={{ peer: "wss://cloud.jazz.tools/?key=your-api-key"peer: "wss://cloud.jazz.tools/?key=your-api-key" }} CryptoProvider?: typeof PureJSCrypto | typeof RNQuickCrypto | undefinedCryptoProvider={var RNQuickCrypto: typeof _RNQuickCryptoRNQuickCrypto} > {children: React.ReactNodechildren} </function JazzReactNativeProvider<S extends (AccountClass<Account> & CoValueFromRaw<Account>) | AnyAccountSchema>(props: JazzProviderProps<S>): JSX.ElementJazzReactNativeProvider> ); }

For configuration, add the following settings:

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

and

// android/gradle.properties
sodiumEnabled=true