realm-js: Unable to use the flipper realm pluggin

How frequently does the bug occur?

Always

Description

I was expecting to integrate the realm plugin into flipper and view the state/content/hierarchy of my realm tables . After following the instructions provided here :https://www.mongodb.com/docs/realm/sdk/react-native/test-and-debug/debugging-with-flipper/ . After doing the steps mentioned the flipper app isnt able to connect to realm

Stacktrace & log output

I am getting a lot of crashes in the native code but I dont know what are the relevant logs

Can you reproduce the bug?

Always

Reproduction Steps

Create a react native app integrate realm and then try to integrate flipper in the same . I have followed the steps mentioned in the guide but I am not able to debug the same . “realm”: “11.0.0”, “realm-flipper-plugin-device”: “^1.1.0” “react”: “18.1.0”, “react-native”: “0.70.0”, “react-native-flipper”: “^0.180.0”,

Version

11.0.0

What services are you using?

Local Database only

Are you using encryption?

No

Platform OS and version(s)

apple macbook pro M1

Build environment

Which debugger for React Native: … realm-flipper

Cocoapods version

NA

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Comments: 17 (4 by maintainers)

Most upvoted comments

@KaulSalil I made a PR on your sample repository to show where the issue may be. You may not be wrapping your app in a RealmProvider as noted by the @realm/react package which may be interfering with the Realms being passed to the plugin component. You will also need to make sure to have both react-native-flipper and realm-flipper-plugin-device installed. i.e. it should end up being something like

// TaskContext being createRealmContext({schema: [Task]});
import TaskContext, {Task} from './DBSchema';
import RealmPlugin from 'realm-flipper-plugin-device';
...
function MainScreen() {
  const {useRealm, useQuery, RealmProvider} = TaskContext;
  const realm = useRealm();
  ...
  return (
       <RealmProvider>
               <RealmPlugin realms=[realm] />
               {/* Rest of the content... */}
       </RealmProvider>
  );
}

This worked for me with 1.1.0. Note you will need to run cd ios && pod install to make the native libraries work. You can refer to the getting started guide for the Flipper Plugin although the example there does not use @realm/react yet.

@KaulSalil

I would create a fresh new React Native project, add realm and a test schema, and get that up and running. Then add the flipper plugin and get that up and running.

Then you can compare your project code with the clean version to better pinpoint the issue.