Skip to content

Conversation

jonmumm
Copy link
Member

@jonmumm jonmumm commented Apr 10, 2025

This PR addresses several issues identified during testing and debugging, primarily focusing on fixing the state synchronization from the native environment to the WebView. A major part of this effort involved refactoring the expo-app example to correctly utilize and showcase the dedicated @open-game-system/app-bridge-react-native package.

Key Changes:

  1. Fixed Native-to-Web State Synchronization:

    • Identified and resolved a core bug in packages/app-bridge-native where state updates were not correctly generating patches for the WebView.
    • The store.subscribe callback was comparing the new state with itself. This was fixed by capturing the prevState before the update occurs within the setStore scope, allowing fast-json-patch/compare to generate the correct operations.
    • Native state changes are now correctly propagated to the web bridge counter in the example app.
  2. Leveraged @open-game-system/app-bridge-react-native in examples/expo-app:

    • The example app (App.tsx) was significantly refactored to adopt the @open-game-system/app-bridge-react-native package, demonstrating its intended usage.
    • Replaced manual WebView handling and state synchronization logic with the abstractions provided by this package, including:
      • BridgedWebView component
      • createNativeBridgeContext for context management
      • Store hooks (useSelector, useStore) for simplified state access and dispatching.
    • This simplifies the example code significantly and makes it a proper showcase for integrating the app bridge in React Native.
    • Corrected all necessary imports and type references (e.g., using NativeBridge re-exported from the react-native package).
  3. Improved Testing in examples/expo-app:

    • Added Jest tests (App-test.tsx) for the refactored App component.
    • Implemented mocks specifically for the @open-game-system/app-bridge-react-native functions and components used.
    • Corrected Jest (jest.config.js), Babel (babel.config.js), and TypeScript (tsconfig.json) configurations to properly handle testing, transformations (including necessary node_modules), and JSX for React Native.
    • Fixed dependency references in package.json.
    • All tests in examples/expo-app are now passing.
  4. Updated Type Definitions:

    • Adjusted the NativeBridge interface in packages/app-bridge-types to align with the methods provided by the native implementation and re-exported by the react-native package.

Outcome:

  • Native state changes are correctly reflected in the WebView.
  • The expo-app example now effectively demonstrates the use of the dedicated app-bridge-react-native package, providing a clearer integration pattern.
  • The test suite for the expo-app example is functional and passing, validating the refactored approach.

Copy link
Contributor

📦 Dev version published for @open-game-system/app-bridge-types: @open-game-system/app-bridge-types@0.20250410.1-pr7

Install via GitHub Packages (ensure .npmrc is configured):

pnpm add @open-game-system/app-bridge-types@0.20250410.1-pr7

Copy link
Contributor

📦 Dev version published for @open-game-system/app-bridge-react-native: @open-game-system/app-bridge-react-native@0.20250410.1-pr7

Install via GitHub Packages (ensure .npmrc is configured):

pnpm add @open-game-system/app-bridge-react-native@0.20250410.1-pr7

Copy link
Contributor

📦 Dev version published for @open-game-system/app-bridge-native: @open-game-system/app-bridge-native@0.20250410.1-pr7

Install via GitHub Packages (ensure .npmrc is configured):

pnpm add @open-game-system/app-bridge-native@0.20250410.1-pr7

Copy link
Contributor

📦 Dev version published for @open-game-system/app-bridge-web: @open-game-system/app-bridge-web@0.20250410.1-pr7

Install via GitHub Packages (ensure .npmrc is configured):

pnpm add @open-game-system/app-bridge-web@0.20250410.1-pr7

Copy link
Contributor

📦 Dev version published for @open-game-system/app-bridge-testing: @open-game-system/app-bridge-testing@0.20250410.1-pr7

Install via GitHub Packages (ensure .npmrc is configured):

pnpm add @open-game-system/app-bridge-testing@0.20250410.1-pr7

Copy link
Contributor

📦 Dev version published for @open-game-system/app-bridge-react: @open-game-system/app-bridge-react@0.20250410.1-pr7

Install via GitHub Packages (ensure .npmrc is configured):

pnpm add @open-game-system/app-bridge-react@0.20250410.1-pr7

@jonmumm jonmumm changed the title Rn2 Fix Native-to-Web State Sync & Refactor Expo App with React Native Package Apr 11, 2025
@jonmumm jonmumm merged commit de2f7f3 into main Apr 11, 2025
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant