-
Notifications
You must be signed in to change notification settings - Fork 90
/
Copy pathreact-native.txt
292 lines (214 loc) · 10 KB
/
react-native.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
.. meta::
:robots: noindex, nosnippet
:template: product-landing
:hidefeedback: header
:noprevnext:
.. _react-native-intro:
.. _react-native-realm-database:
.. _react-native-realm-database_overview:
=================================
Atlas Device SDK for React Native
=================================
.. facet::
:name: programming_language
:values: javascript/typescript
.. meta::
:description: Use Atlas Device SDK for React Native SDK to develop iOS and Android apps with JavaScript or TypeScript.
.. toctree::
:titlesonly:
:hidden:
Realm Files </sdk/react-native/realm-files>
Model Data </sdk/react-native/model-data>
CRUD </sdk/react-native/crud>
React to Changes </sdk/react-native/react-to-changes>
Atlas App Services </sdk/react-native/app-services>
Manage Users </sdk/react-native/manage-users>
Sync Data </sdk/react-native/sync-data>
Integration Guides </sdk/react-native/integrations>
Test & Debug </sdk/react-native/test-and-debug/>
Logging </sdk/react-native/logging>
SDK Telemetry </sdk/react-native/telemetry>
API Reference </sdk/react-native/api-reference>
Release Notes <https://github.com/realm/realm-js/releases>
Use Atlas Device SDK for React Native to develop iOS and Android apps with
JavaScript or TypeScript.
.. kicker:: Learning Paths
Get Started with Realm React Native
-----------------------------------
.. card-group::
:columns: 3
:style: extra-compact
.. card::
:headline: Quick Start
:cta: See Code Examples
:url: https://www.mongodb.com/docs/realm/sdk/react-native/quick-start/
:icon: atlas_functions
:icon-alt: Functions Icon
Minimal-explanation code examples of how to work with the SDK.
Write to the device database, and sync with other devices.
.. card::
:headline: Working Example App
:cta: Explore an Example App
:url: https://www.mongodb.com/docs/atlas/app-services/template-apps/
:icon: realm_mobile
:icon-alt: Atlas Device SDK Mobile Icon
Learn from example by dissecting a working React Native client app that
uses the React Native SDK.
.. card::
:headline: Guided Tutorial
:cta: Follow the Tutorial
:url: https://mongodb.com/docs/atlas/app-services/tutorial/react-native/
:icon: general_content_tutorial
:icon-alt: Tutorial Icon
Follow a guided tutorial to learn how to adapt the example app to
create your own working app.
.. kicker:: What You Can Do
Develop Apps with the SDK
-------------------------
Use the SDK's open-source database - Realm - to store data on a device. Use
Device Sync to keep data in sync with your MongoDB Atlas cluster and other
clients.
.. tabs::
.. tab:: Store Data with the SDK
:tabid: device-persistence
.. procedure::
.. step:: Install the React Native SDK
Set up your project with React Native and the SDK.
To get started, :ref:`install the React Native SDK <react-native-install>`.
.. step:: Define an Object Schema
Use JavaScript to idiomatically :ref:`define an object schema <react-native-define-a-realm-object-schema>`.
.. step:: Configure & Open a Database
You can configure your database to do things
like populate initial data on load, use an encryption key to
secure data, and more. To begin working with your data,
:ref:`configure and open a database <react-native-configure-realm>`.
.. step:: Read and Write Data
You can :ref:`create <react-native-create-objects>`, :ref:`read
<react-native-read-objects>`, :ref:`update
<react-native-update-objects>`, and :ref:`delete
<react-native-delete-objects>` objects from the device database.
Construct complex queries to :ref:`filter data <react-native-query-data>`.
.. step:: React to Changes
Live objects mean that your data is always up-to-date.
Register a change listener to :ref:`react to changes <react-native-react-to-changes>`
and perform logic like updating your UI.
.. image:: /images/illustrations/2024_branding/Technical_SOFTWARE_Connect(2)_Spot.png
:alt: Atlas Device SDK Mobile Illustration
.. tab:: Sync Data Across Devices
:tabid: device-sync
.. procedure::
.. step:: Connect to an Atlas App Services App
Configure :ref:`Device Sync in an App Services App <realm-sync-get-started>`.
Define data access rules or use Development Mode to infer a schema
from your client's data model.
Then, :ref:`connect to the backend App from your React Native App <react-native-connect-to-mongodb-realm-backend-app>`.
.. step:: Authenticate a User
App Services provides access to custom JWT authentication,
our built-in email/password provider, anonymous
authentication, and popular
authentication providers like Apple, Google, and Facebook.
Use these providers to :ref:`authenticate a user in your client <react-native-authenticate-users>`.
.. step:: Open a Synced Database
To get started syncing data, :ref:`open a synced database <react-native-open-a-synced-realm>`.
To determine what data a synced database can read and write,
:ref:`subscribe to a query <react-native-sync-subscribe-to-queryable-fields>`.
.. step:: Read and Write Synced Data
The APIs for reading and writing data
are the same for both synced and non-synced databases.
Data that you read and write to the device is automatically kept
in sync with your Atlas cluster and other clients.
Apps keep working offline and sync changes when a network connection
is available.
.. image:: /images/illustrations/2024_branding/Technical_SOFTWARE_Sync(2)_Spot.png
:alt: Device Sync Illustration
.. tab:: Build with Atlas App Services
:tabid: app-services
.. container::
Use Atlas App Services in your React Native application with the Realm SDK.
Call Serverless Functions
~~~~~~~~~~~~~~~~~~~~~~~~~
To invoke serverless backend logic from your React Native client,
:ref:`call Atlas Functions <react-native-call-a-function>`.
Query MongoDB Atlas
~~~~~~~~~~~~~~~~~~~
Query data stored in MongoDB directly from your client application code
with :ref:`MongoDB Data Access <react-native-mongodb-remote-access>`.
Authenticate Users
~~~~~~~~~~~~~~~~~~
Authenticate users with built-in and third-party :ref:`authentication providers <react-native-authenticate-users>`.
Access App Services with authenticated users.
.. image:: /images/illustrations/2024_branding/Technical_ACTION_WrenchSettings_Spot.png
:alt: App Services Illustration
.. tab:: Use @realm/react
:tabid: realm-react
.. container::
``@realm/react`` is an npm package that provides an easy-to-use API to
perform common SDK operations in your React Native app,
such as querying or writing to a database and listening for changes to
objects. ``@realm/react`` includes React context, providers, and hooks
for working with the SDK.
Use ``@realm/react`` to manage the database, Atlas App Services,
and Atlas Device Sync.
.. image:: /images/illustrations/2024_branding/Technical_SOFTWARE_GearSettings_Spot.png
:alt: Atlas Device SDK Mobile Illustration
.. kicker:: Essential Documentation
Recommended Reading
-------------------
.. card-group::
:columns: 2
:style: extra-compact
.. card::
:headline: JavaScript API Reference
:cta: React Native Reference
:url: https://www.mongodb.com/docs/realm-sdks/js/latest/
:icon: general_action_best_practices
:icon-alt: Atlas Device SDK Icon
Explore generated reference docs for the React Native SDK.
.. card::
:headline: React Native Quick Start with Expo
:cta: Explore the Quick Start
:url: https://www.mongodb.com/docs/realm/sdk/react-native/quick-start-expo/
:icon: /images/icons/expo_logo.svg
:icon-alt: Expo Icon
Build and deploy a React Native application quickly using an
Expo template application with ``@realm/react``.
Example Projects
----------------
Explore engineering and expert-provided example projects to learn best
practices and common development patterns using the React Native SDK. Check
out the :ref:`<realm-example-projects-table>` page for more React Native
sample apps.
.. card-group::
:columns: 3
:style: extra-compact
.. card::
:headline: Netflix-like Movie App
:cta: Example project
:url: https://github.com/realm/realm-js/tree/main/examples/rn-multiple-realms
:icon: realm_mobile
:icon-alt: Mobile Database Icon
Build a Netflix-like app for browsing movies from MongoDB's Mflix sample
dataset. Use multiple databases to allow users to sync and manage movies
in their own private lists.
.. card::
:headline: Offline Login and Database Access
:cta: Example project
:url: https://github.com/realm/realm-js/tree/main/examples/rn-todo-list
:icon: realm_offline
:icon-alt: Realm Offline Icon
Log in a Device Sync user and open a synced database offline.
.. card::
:headline: User's Online State
:cta: Example project
:url: https://github.com/realm/realm-kotlin-samples/tree/main/AppServicesUsageSamples/apps/presence-detection
:icon: general_content_users
:icon-alt: Users Icon
Detect connectivity and activity of users and devices.
.. card::
:headline: Connection State Change & Error Handling
:cta: Example project
:url: https://github.com/realm/realm-js/tree/main/examples/rn-connection-and-error
:icon: cloud_mobility
:icon-alt: Cloud Mobile Transfer Icon
Learn best practices around handling Sync errors and client reset
strategies.