// realm-config.ts
import { useState, useEffect } from ‘react’;
import Realm from ‘realm’;
export const TaskSchema = {
name: ‘Task’,
properties: {
_id: ‘objectId’,
isCompleted: ‘bool’,
isImportant: ‘bool’,
title: ‘string’,
},
primaryKey: ‘_id’,
};
export const useRealm = () => {
const [realm, setRealm] = useState(null);
useEffect(() => {
const initializeRealm = async () => {
const config = {
schema: [TaskSchema],
path: ‘myRealm.realm’,
schemaVersion: 1,
};
const newRealm = await Realm.open(config);
setRealm(newRealm);
};
initializeRealm();
return () => {
if (realm !== null) {
realm.close();
}
};
}, );
return realm;
};
// ExploreContainer.tsx
import React from ‘react’;
import { useRealm, TaskSchema } from ‘./realm-config’;
const ExploreContainer: React.FC = () => {
const realm = useRealm();
const addTask = async () => {
await realm.write(() => {
realm.create(‘Task’, {
_id: ‘34535332321231’,
isCompleted: false,
isImportant: true,
title: ‘Example Task’,
});
});
};
return (
<1div>
<1h1>Realm + Ionic React Example
<1button onClick={addTask}>Add Task
<1/div>
);
};
export default ExploreContainer;
What’s wrong of my codes? Actually, I’m using ionic react for my mobile. Please help me to solve this!
