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 }