Jazz 0.13.0 - React Native Split

Version 0.13.0 introduces a significant architectural change in how Jazz supports React Native applications. We've separated the React Native implementation into two distinct packages to better serve different React Native development approaches:

  1. jazz-react-native: Focused package for framework-less React Native applications
  2. jazz-expo: Dedicated package for Expo applications
  3. jazz-react-native-core: Shared core functionality used by both implementations

This guide focuses on upgrading React Native without Expo applications. If you're using Expo, please see the Expo upgrade guide.

Migration Steps for React Native

  1. Update Dependencies
# Ensure you have the required dependencies
npm install @op-engineering/op-sqlite react-native-mmkv @react-native-community/netinfo

# Remove the old packages
npm install jazz-react-native-expo

# Install the new packages
npm install jazz-react-native jazz-react-native-media-images

# Run pod install for iOS
npx pod-install
  1. No Import Changes Required Your existing imports from jazz-react-native should continue to work, but the implementation now uses a different storage solution (op-sqlite and MMKV).

Storage Adapter Changes

The jazz-react-native package now uses:

  • OpSQLiteAdapter for database storage (using @op-engineering/op-sqlite)
  • MMKVStoreAdapter for key-value storage (using react-native-mmkv) These are now the default storage adapters in the JazzProvider for framework-less React Native applications.

Example Provider Setup

// App.tsx
import { function JazzProvider(props: JazzProviderProps): React.JSX.ElementJazzProvider } from "jazz-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 | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | 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 JazzProvider(props: JazzProviderProps): React.JSX.ElementJazzProvider
      sync: SyncConfigsync={{ peer: "wss://cloud.jazz.tools/?key=you@example.com"peer: "wss://cloud.jazz.tools/?key=you@example.com" }}
      AccountSchema?: AccountClass<MyAppAccount> | undefinedAccountSchema={import MyAppAccountMyAppAccount}
    >
      {children: React.ReactNodechildren}
    </function JazzProvider(props: JazzProviderProps): React.JSX.ElementJazzProvider>
  );
}
// Register the Account schema
declare module "jazz-react-native" {
  interface Register {
    Register.Account: MyAppAccountAccount: import MyAppAccountMyAppAccount;
  }
}

New Architecture Support

The jazz-react-native implementation fully supports the React Native New Architecture. This includes compatibility with:

  • JavaScript Interface (JSI) for more efficient JavaScript-to-native communication
  • Fabric rendering system for improved UI performance
  • TurboModules for better native module management
  • Codegen for type-safe interfaces

No additional configuration is needed to use Jazz with the New Architecture.

Potential Podfile Issues

If you encounter pod installation issues in a pnpm workspace environment (such as undefined method '[]' for nil in the Podfile at the line config = use_native_modules!), replace the problematic line with a manual path reference:

react_native_path = "../node_modules/react-native"
config = { :reactNativePath => react_native_path }

This approach bypasses issues with dependency resolution in workspace setups where packages may be hoisted to the root node_modules.

For More Information

For detailed setup instructions, refer to the React Native Setup Guide