React Native Realm: Constructor was not registered in the schema for this Realm

Question

I'm following this https://www.mongodb.com/docs/realm/sdk/react-native/use-realm-react/ to try and setup my database in a simple Task app. I'm getting a stubborn error "Render Error: Constructor was not registered in the schema for this Realm". This started happening after I tried adding a second schema to the context, so I removed it and I've stripped down my already simple app back to how it was. I can't find anything online about this error, and the Realm docs don't help much. Doesn't seem to be much tutorials or resources for getting a Realm app set up.

AppWrapper.js

import React from "react";
import { SafeAreaView, View, Text, TextInput, FlatList, Pressable } from "react-native";
import RealmContext from "./src/schemas/ContextCreation";
import Task from "./src/schemas/Task";

const { RealmProvider } = RealmContext;

export default function AppWrapper() {
   return (
      <RealmProvider>
         <TaskApp/>
      </RealmProvider>
   );
}

const TaskApp = () => {
   const { useRealm, useQuery, useObject } = RealmContext;
   const realm = useRealm();
   const tasks = useQuery(Task);
   const [newDescription, setNewDescription] = React.useState("");

   return (
      <SafeAreaView>
         <View style={{ flexDirection: 'row', justifyContent: 'center', margin: 10 }}>
            <TextInput
               value={newDescription}
               placeholder="Enter new task description"
               onChangeText={setNewDescription}
            />
            <Pressable
               onPress={() => {
                  realm.write(() => {
                     realm.create("Task", Task.generate(newDescription));
                  });
                  setNewDescription("");
               }} ><Text>➕</Text>
            </Pressable>
         </View>
         <FlatList data={tasks.sorted("createdAt")} keyExtractor={(item) => item._id.toHexString()} renderItem={({ item }) => {
            return (
               <View style={{ flexDirection: 'row', justifyContent: 'center', margin: 10 }}>
                  <Pressable
                     onPress={() =>
                        realm.write(() => {
                           item.isComplete = !item.isComplete
                        })
                     } ><Text>{item.isComplete ? "✅" : "☑️"}</Text>
                  </Pressable>
                  <Text style={{ paddingHorizontal: 10 }} >{item.description}</Text>
                  <Pressable
                     onPress={() => {
                        realm.write(() => {
                           realm.delete(item);
                        });
                     }} ><Text>{"🗑️"}</Text>
                  </Pressable>
               </View>
            );
         }} ></FlatList>
      </SafeAreaView >
   );
}

Task.ts

export default class Task extends Realm.Object {
   _id!: Realm.BSON.ObjectId;
   description!: string;
   isComplete!: boolean;
   createdAt!: Date;

   static generate(description: string) {
      return {
         _id: new Realm.BSON.ObjectId(),
         description: description,
         createdAt: new Date(),
      };
   }

   static schema = {
      name: 'Task',
      primaryKey: '_id',
      properties: {
         _id: 'objectId',
         description: 'string',
         isComplete: { type: 'bool', default: false },
         createdAt: 'date'
      },
   };
}

ContextCreation.ts

import { createRealmContext } from "@realm/react";
import Task from "./Task";

const config = {
   schema: [Task.schema],
};

export default createRealmContext(config);

Answer 1

I was about to give up on using realm when I found these resources:

Using Expo

• Typescript: https://github.com/realm/realm-js/tree/master/templates/expo-template-ts
• JavaScript: https://github.com/realm/realm-js/tree/master/templates/expo-template-js

React Native Cli

• TypeScript: https://github.com/realm/realm-js/tree/master/templates/react-native-template-realm-ts
• JavaScript: https://github.com/realm/realm-js/tree/master/templates/react-native-template-realm-js

My opinion: You can simply generate a new Typescript project like this: npx react-native init AwesomeRealmProject --template @realm/react-native-template-ts this command will generate a simple todo app... Play around with the code, it will give you more understanding on how to properly setup realm...