{"id":22707284,"url":"https://github.com/tutv/rn-realm","last_synced_at":"2026-01-07T15:49:20.883Z","repository":{"id":85524354,"uuid":"143446591","full_name":"tutv/rn-realm","owner":"tutv","description":"An example React Native App uses Realm Database","archived":false,"fork":false,"pushed_at":"2018-08-05T12:33:16.000Z","size":2501,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-04T21:45:26.332Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Makefile","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tutv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-08-03T15:53:13.000Z","updated_at":"2018-08-05T16:44:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"9994468c-18d8-4dd4-b29d-8548dcb046d2","html_url":"https://github.com/tutv/rn-realm","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tutv%2Frn-realm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tutv%2Frn-realm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tutv%2Frn-realm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tutv%2Frn-realm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tutv","download_url":"https://codeload.github.com/tutv/rn-realm/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246243548,"owners_count":20746308,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-10T10:11:56.308Z","updated_at":"2026-01-07T15:49:20.829Z","avatar_url":"https://github.com/tutv.png","language":"Makefile","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sử dụng Realm Database trong React Native\n\n## Mục tiêu\n\n- Hiểu và sử dụng Realm Databases để lưu trữ dữ liệu có cấu trúc.\n- Biết cách thêm, sửa, xóa, lấy dữ liệu.\n\n## Mô tả\n\n- Tạo 1 project với `creact-react-native-app`.\n- Tích hợp `realm` database vào project.\n- Tạo màn hình hiển thị danh sách các công việc cần làm hàng ngày (tasks).\n- Các task cho phép `xóa` hoặc `complete/uncomplete`.\n- Tạo 1 form để tạo task mới.\n- Ứng dụng cho phép lưu lại danh sách các tasks khi đã tắt ứng dụng và mở lại ứng dụng lần sau.\n\n## Hướng dẫn\n\n### Bước 1\n\n- Thêm `realm` vào project React Native\n\n```\nnpm install --save realm\n```\n\n- Link `realm` vào project.\n\n```\nreact-native link realm\n```\n\nNote: Nếu project có sử dụng `create-react-native-app` thì phải `reject` để sử dụng được `realm`.\n\n### Bước 2\n\n- Tạo file `StorageServices.js` để thêm, sửa, xóa, và lấy dữ liệu.\n```javascript\nimport realm from '../realm'\n\nexport const getListTasks = () =\u003e {\n    const tasks = realm.objects('Task')\n\n    return Promise.resolve(tasks)\n}\n\nexport const addTask = (name) =\u003e {\n    if (!name) {\n        return Promise.reject('Task name is empty')\n    }\n\n    const data = {\n        created: new Date(),\n        name,\n        completed: false\n    }\n\n    const tasks = realm.objects('Task')\n\n    return new Promise((resolve, reject) =\u003e {\n        realm.write(() =\u003e {\n            realm.create('Task', data)\n\n            resolve(tasks)\n        })\n    })\n}\n\nexport const removeTask = (task) =\u003e {\n    const tasks = realm.objects('Task')\n\n    return new Promise(resolve =\u003e {\n        realm.write(() =\u003e {\n            realm.delete(task)\n\n            resolve(tasks)\n        })\n    })\n}\n\nexport const toggleTask = (task) =\u003e {\n    const tasks = realm.objects('Task')\n\n    return new Promise(resolve =\u003e {\n        realm.write(() =\u003e {\n            task.completed = !task.completed\n\n            resolve(tasks)\n        })\n    })\n}\n```\n\n### Bước 3\n\n- Tạo 1 component tên là: `HomePage.js`, trong componenent này sẽ quản lý các tasks trong state và giao tiếp với `realm` thông qua StorageServices.js để thay dổi dữ liệu.\n\n- Khi `componentDidMount` thì ta sẽ lấy ra list tasks hiện tại đã lưu lại trước đó. Còn lại là lắng nghe các event từ các child components để thêm, sửa, xóa các task.\n\n```javascript\nimport React, {Component} from 'react'\nimport {View, StyleSheet} from 'react-native'\nimport ListTasks from \"./ListTasks\"\nimport FormCreate from \"./FormCreate\"\nimport {getListTasks, addTask, removeTask, toggleTask} from '../services/StorageServices'\n\nclass HomePage extends Component {\n    state = {\n        tasks: [],\n        loading: false\n    }\n\n    componentDidMount() {\n        this._fetchListTasks()\n    }\n\n    _fetchListTasks = () =\u003e {\n        this.setState({loading: true})\n\n        getListTasks().then(tasks =\u003e {\n            this.setState({\n                loading: false,\n                tasks,\n            })\n        }).catch(error =\u003e {\n            console.error(error)\n\n            this.setState({loading: false})\n        })\n    }\n\n    _handleOnCreate = name =\u003e {\n        addTask(name)\n            .then(tasks =\u003e {\n                this.setState({\n                    tasks\n                })\n            })\n    }\n\n    _handleOnRemove = task =\u003e {\n        removeTask(task)\n            .then((currentTasks) =\u003e {\n                this.setState({\n                    tasks: currentTasks\n                })\n            })\n    }\n\n    _handleToggleTask = (id) =\u003e {\n        toggleTask(id)\n            .then((tasks) =\u003e {\n                this.setState({\n                    tasks,\n                })\n            })\n    }\n\n    render() {\n        const {tasks} = this.state\n\n        return (\n            \u003cView style={styles.container}\u003e\n                \u003cFormCreate onCreate={this._handleOnCreate}/\u003e\n                \u003cListTasks onToggle={this._handleToggleTask} onRemove={this._handleOnRemove} tasks={tasks}/\u003e\n            \u003c/View\u003e\n        )\n    }\n}\n\nconst styles = StyleSheet.create({\n    container: {\n        flex: 1,\n        justifyContent: 'flex-start',\n        flexDirection: 'column',\n        width: '100%',\n        backgroundColor: '#eee'\n    }\n})\n\nexport default HomePage\n```\n\n### Bước 4\n\n- Chạy chương trình và quan sát kết quả.\n\n\n## Mã nguồn\n\nTham khảo tại: https://github.com/tutv/rn-realm\n\n# Ảnh demo\n\n![Home page](/demo/home.png)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftutv%2Frn-realm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftutv%2Frn-realm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftutv%2Frn-realm/lists"}