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 }```