App crashes after using useQuery or Realm.objects()

Hello friends I come to ask for help because I’m developing an application using React Native, Expo and Realm and I got stuck at one point because my app is crashing instantly after I try to see the data from a query.
I really wish someone could help as I’m stuck on this problem and can’t move forward.

How to describe the problem:
When I perform a query to list the data that are in the database through the useQuery(MyModel) command, the data is apparently loaded correctly, because I can count how many records there are in the database.
However, if I try to interact with these records, the app closes instantly. Even if it’s a simple console.log(result). A few examples below:

  const result = useQuery(MyModel);
  const items =  result.sorted('name');

  console.log(items.length);  //This code works fine and returns the number of items.
  console.log(items.isValid());  //This code works fine and returns true.

  console.log(items);  //This code will crash the App.
  items.map(item => console.log(item)); // Another example that crashes app.

To add more context, I’d like to share some of the libraries I’m using in the project.

"expo": "~45.0.0",
"react": "17.0.2",
"react-native": "0.68.2",
"realm": "^10.17.0",
"react-native-reanimated": "~2.8.0",
"@realm/react": "^0.3.0",
"styled-components": "^5.3.5",
"typescript": "~4.3.5"

I’m using partition-based strategy for syncing.

Authentication is working normally and the App does not display any logs or error messages, including in the Realm UI logs panel.

I made the integration using the @realm/react lib, according to the most recent examples that are in the Github repository.

This is my App structure:

<GestureHandlerRootView style={{ flex: 1 }}>
        <ThemeProvider theme={theme}> // <-- from Styled Components
          <AppProvider id={SYNC_CONFIG.appId}> // < -- from @realm/react
            <PortalProvider>
              <UserProvider fallback={SignIn}> // < -- from @realm/react
                <AppSyncWrapper> // <-- This is a wrapper to RealmProvider. Code is below.
                  <Routes /> // <-- from @react-navigation/native
                </AppSyncWrapper>
              </UserProvider>
            </PortalProvider>
          </AppProvider>
        </ThemeProvider>
      </GestureHandlerRootView>

AppSyncWrapper code:

import React, { ReactNode } from 'react';
import { useUser } from '@realm/react';

import { MainRealmContext } from './realm/RealmContext';

interface IProps {
  children: ReactNode;
}

export function AppSyncWrapper({ children }: IProps) {
  const user = useUser();
  const { RealmProvider } = MainRealmContext;

  return (
    <RealmProvider sync={{ user, partitionValue: 'portal' }}>
      {children}
    </RealmProvider>
  );
}

And this is how i have created the Context:

import { createRealmContext } from '@realm/react';

import { AnswerOption } from './models/Form/AnswerOption';
import { Author } from './models/Form/Author';
import { Form } from './models/Form/Form';
import { Question } from './models/Form/Question';
import { Section } from './models/Form/Section';

const MainRealmContext = createRealmContext({
  schema: [
    Form,
    Author,
    Section,
    Question,
    AnswerOption,
  ]
});

export { MainRealmContext };

And all Models have an structure like this:

import Realm from “realm”;
import { Author } from “./Author”;
import { Section } from “./Section”;

type IForm = {
_id?: Realm.BSON.ObjectId;
_partition: string;
active?: boolean;
author?: Author;
name: string;
sections: Realm.List;
}

type IFormObject = IForm & Realm.Object;

class Form {
_id?: Realm.BSON.ObjectId;
_partition: string;
active?: boolean;
author?: Author;
name: string;
sections: Realm.List;

static schema: Realm.ObjectSchema = {
name: ‘Form’,
properties: {
_id: ‘objectId?’,
_partition: ‘string’,
active: ‘bool?’,
author: ‘Author’,
name: ‘string’,
sections: ‘Section[]’,
},
primaryKey: ‘_id’,
}
}

export { Form, IFormObject }```

realm-js and react-native-reanimated v2 do not play well together. We have a beta version of realm that does work with react-native-reanimated. Can you try to npm install realm@10.20.0-beta.5?

Hello @Andrew_Meyer , first of all thanks for trying to help!

Unfortunately Installing version 10.20.0-beta.5 led me to the Realm Missing Constructor error, but I’m already using expo-dev-client. Same as this thread.

I couldn’t solve this problem either.

@Diego_Jose_Goulart Can you try doing a clean rebuild of your app?

@Andrew_Meyer es! But how can I do a clean rebuild? Would be expo start --clear --dev-client ?

@Andrew_Meyer I did some testing and even on a clean install using expo and expo-dev-cli I was not able to work around the above error. Could this be a bug?

@Diego_Jose_Goulart Possibly. File an issue on our github repo and i’ll investigate it after the weekend.

@Andrew_Meyer issue opened: 4621 on github repo.
Thanks for your help.