kalyncoose/READ_ME.md

## READ_ME.md

      
    Raw
  

              READ_ME.md
            
          
    Preface

As of writing this Gist (Dec. 7 2023) Realm cannot be used with Chrome-based debuggers like React DevTools and Redux DevTools.

#4364 - Impossible to debug on Android with JSC under new version of Realm?

What happens?

With realm installed in your RN app, attempting to enable Debug mode will cause the fatal error:
Error: This version of Realm JS doesn't support the legacy Chrome Debugger. Please use Flipper instead.

This is because Chrome-based debugging does not work with this version of Realm.
Failed Solutions


react-native-debugger - Standalone RN/Redux debugger app which listens to your bundler port (Metro or Expo bundler)

You will still encounter the Realm error


I attempted to disable the throw Error by commenting the source code in node_modules/realm/lib/react-native/index.js

This causes subsequent Realm code to start failing as Realm is now running in an environment where the Realm context no longer exists


Working Solution

Unfortunately with no possible workaround for the error that Realm throws we have to now fully rely on Flipper plugins.

Project Versions

Before we continue, let me paste all of my relevant RN project config/versions for you to compare with yours. These are the versions of which I have determined the working solution.

  🔴 Click here to see my project versions ⬇️

React Native: "react-native": "0.70.5",

Only configured and using for Android
Uses Hermes engine


Relevant Packages:

"realm": "^11.3.1",
"@realm/react": "^0.4.3",
"react-redux": "^8.1.3",
"@reduxjs/toolkit": "^1.9.7",
"react-native-flipper": "^0.212.0",
"realm-flipper-plugin-device": "^1.1.0"
"redux-flipper": "^2.0.2",


RN Android Configs:

android/gradle.properties: FLIPPER_VERSION=0.182.0
android/build.gradle:

buildscript { 
  ext {
    buildToolsVersion = "32.0.0"
    minSdkVersion = 21
    compileSdkVersion = 32
    targetSdkVersion = 32
    kotlinVersion = '1.7.0'
  }
  //...

android/app/build.gradle: Under dependencies {}:

debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
    exclude group: 'com.facebook.fbjni'
}

debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
    exclude group: 'com.facebook.flipper'
    exclude group: 'com.squareup.okhttp3', module: 'okhttp'
}

// NOTE: MVN Central does not show versions higher than 0.182.0 (on Dec 7 2023)
// https://mvnrepository.com/artifact/com.facebook.flipper/flipper-fresco-plugin
debugImplementation("com.facebook.flipper:flipper-fresco-plugin:0.182.0") {
    exclude group: 'com.facebook.flipper'
}

cd android && ./gradlew --version

------------------------------------------------------------
Gradle 7.5.1
------------------------------------------------------------

Build time:   2022-08-05 21:17:56 UTC
Revision:     d1daa0cbf1a0103000b71484e1dbfe096e095918

Kotlin:       1.6.21
Groovy:       3.0.10
Ant:          Apache Ant(TM) version 1.10.11 compiled on July 10 2021
JVM:          11.0.17 (Azul Systems, Inc. 11.0.17+8-LTS)
OS:           Mac OS X 13.4 x86_64


Please comment on this Gist if you need references for anything else.


Solution Implementation

Assuming you already have the following pre-requisites:

React Native setup/configured
Realm setup/configured
Redux/RTK setup/configured

Here is how to get Realm and Redux Plugins working with your RN App:

Update or ensure your FLIPPER_VERSION variable in mobile/android/gradle.properties is AT LEAST set to version 0.182.0

Note: As of writing this Gist 0.240.0 is available but requires a newer JDK and I did not want to introduce that as a variable to the project and getting the tools to work
Also note: I am not sure if I need flipper-fresco-plugin or not but it came with my RN project template and latest version available is stuck on 0.182.0 so I will use that as my max-version for now


If you changed your FLIPPER_VERSION be sure to run ./gradlew --stop && ./gradlew clean to ensure the next Gradle build uses the new version
Install and configure the realm-flipper-plugin: https://github.com/realm/realm-flipper-plugin/blob/main/documentation/GettingStarted.md

Optional: If you setup Realm using createRealmContext() you can follow what I did here:

I created a new component file next to my Realm context file called realm-connector.tsx:

import React from 'react'
import RealmPlugin from 'realm-flipper-plugin-device'
import { RealmContext } from './schemas' // Change this to import your realm context
const { useRealm } = RealmContext

export const RealmConnector = () => {
  const realm = useRealm()
  return <RealmPlugin realms={[realm]} />
}

Then I imported the new RealmConnector component and put it directly under my existing RealmProvider component that I have in my App.tsx which is the main app file for my RN project:

import { RealmContext } from './db/schemas' // Your existing realm context
import { RealmConnector } from './db/realm-connector' // The new RealmConnector component
const { RealmProvider } = RealmContext // The RealmProvider component from your existing realm context

export const App = () => {
  return (
    <RealmProvider>
      <RealmConnector />
      {/* Your other app stuff here */}
    </RealmProvider>
  )
}

Important: I am not certain but I believe you should have <RealmProvier> at the very root of your App and make sure no other elements or providers are above it (like PaperProvider, ReduxProvider or other React ContextProvider's)


Install and configure the flipper-plugin-redux-debugger: https://github.com/jk-gan/flipper-plugin-redux-debugger

Optional: Since I am using Redux Toolkit (RTK), I followed the suggested implementation that goes with configureStore() instead, from this article.

 // store.ts file in my source code
 import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
 import notificationSlice from '../screens/Notifications/notificationSlice' // A slice I use for example

 const middlewares = getDefaultMiddleware({
   // https://github.com/reduxjs/redux-toolkit/issues/415
   immutableCheck: false,
 })

 if (__DEV__) {
   // Add redux-flipper middleware in dev mode
   const createDebugger = require('redux-flipper').default
   middlewares.push(createDebugger())
 }

 const store = configureStore({
   reducer: {
     notifications: notificationSlice, // The slice I use for example
   },
   middleware: middlewares,
 })

 // Infer the `RootState` and `AppDispatch` types from the store itself
 export type RootState = ReturnType<typeof store.getState>
 export type AppDispatch = typeof store.dispatch
 export default store

Now you have all of the required packages and configurations, go ahead and run your app!

npm run start (for Metro etc.)
npm run android (or whichever debug app variant you want to run)


Now, with Flipper desktop app open, you should be able to select your device/emulator and it will see your app (if you have your app open on the target emulator/device)

Check the Disabled plugins menu and if Realm and Redux Debugger are there, click the + icon to the right of the names to enable them
Note: I have Flipper desktop app 0.239.0 installed and it shows [Unsupported] in the window title bar but everything seems to work fine (despite the target app's Flipper using 0.182.0)


Feedback

Let me know under the comments section under this Gist whether the solution worked for you or if any other version/config differences were successful or caused failure.