Skip to content

Commit 5c0c73c

Browse files
krollins-mdbmongodben
krollins-mdb
and
mongodben
authored
(DOCSP-26995) Reframe RN SDK open and close realm page (#2529)
## Pull Request Info The Open and Close a Realm page needed a nearly complete overhaul because these concepts are very different with `@realm/react`. I plan to re-evaluate the "Key Concept" section after we've finished the current Realm React epic. ### Jira - https://jira.mongodb.org/browse/DOCSP-26995 ### Staged Changes - [Configure a Realm](https://docs-mongodbcom-staging.corp.mongodb.com/realm/docsworker-xlarge/DOCSP-26995/sdk/react-native/realm-database/configure-a-realm/) ### Reminder Checklist If your PR modifies the docs, you might need to also update some corresponding pages. Check if completed or N/A. - [x] Create Jira ticket for corresponding docs-app-services update(s), if any - [x] Checked/updated Admin API - [x] Checked/updated CLI reference ### Review Guidelines [REVIEWING.md](https://github.com/mongodb/docs-realm/blob/master/REVIEWING.md) ### Animal wearing a hat ![](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTC2T1wlVitCxsZHwKb18NazHbiFmtF0_FeNw&usqp=CAU) --------- Co-authored-by: Ben Perlmutter <90647379+mongodben@users.noreply.github.com>
1 parent 7820869 commit 5c0c73c

18 files changed

+369
-89
lines changed

‎config/redirects

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1004,3 +1004,7 @@ raw: ${prefix}/sdk/dotnet/examples/work-with-users -> ${base}/sdk/dotnet/work-wi
10041004
raw: ${prefix}/sdk/dotnet/advanced-guides -> ${base}/sdk/dotnet/
10051005
raw: ${prefix}/sdk/dotnet/advanced-guides/debugging -> ${base}/sdk/dotnet/
10061006
raw: ${prefix}/sdk/dotnet/advanced-guides/testing -> ${base}/sdk/dotnet/
1007+
1008+
# Realm React Guidance (https://jira.mongodb.org/browse/DOCSP-23395)
1009+
1010+
raw: ${prefix}/sdk/react-native/realm-database/open-and-close-a-realm -> ${base}/sdk/react-native/realm-database/configure-a-realm

‎examples/react-native/README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@ This project uses [npm](https://www.npmjs.com/) to manage dependencies. To get s
1818
npm install
1919
```
2020

21+
> **Warning**
22+
> Currently, `npm install` fails in Node.js v16.17.0. We recommend using Node.js v16.14.0.
23+
2124
### Run Tests
2225

2326
This project defines a unit test suite that tests both JS and TS code examples. You can run them via:

‎examples/react-native/__tests__/ts/RealmConfig.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// :snippet-start: create-realm-context
2+
import {createRealmContext} from '@realm/react';
3+
// Import all of your models.
4+
import Invoice from './Models/Invoice';
5+
import Business from './Models/Business';
6+
// :remove-start:
7+
import Address from './Models/Address';
8+
import Contact from './Models/Contact';
9+
// :remove-end:
10+
11+
export const RealmContext = createRealmContext({
12+
// Pass all of your models into the schema value.
13+
schema: [Invoice, Business],
14+
});
15+
// :snippet-end:
16+
17+
export const SecondRealmContext = createRealmContext({
18+
// Pass all of your secondary models into the schema value.
19+
schema: [Address, Contact],
20+
});
21+
22+
// :snippet-start: in-memory-realm
23+
export const InMemoryRealmContext = createRealmContext({
24+
schema: [Address, Contact],
25+
inMemory: true,
26+
});
27+
// :snippet-end:

‎examples/react-native/__tests__/ts/realm-database/configure-realm-local.test.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
// :snippet-start: configure-realm
2+
import React from 'react';
3+
import {RealmContext} from '../RealmConfig';
4+
// :remove-start:
5+
import {render} from '@testing-library/react-native';
6+
import {useApp} from '@realm/react';
7+
import {View, Text} from 'react-native';
8+
9+
const APP_ID = 'example-testers-kvjdy';
10+
11+
function MyApp() {
12+
const app = useApp();
13+
14+
if (app.id !== APP_ID) {
15+
throw new Error('Did not instantiate app client');
16+
}
17+
18+
return (
19+
<View>
20+
<Text>Foo</Text>
21+
</View>
22+
);
23+
}
24+
// :remove-end:
25+
26+
function AppWrapperLocal() {
27+
const {RealmProvider} = RealmContext;
28+
29+
return (
30+
<RealmProvider>
31+
<MyApp />
32+
</RealmProvider>
33+
);
34+
}
35+
// :snippet-end:
36+
37+
test('Instantiate RealmProvider correctly', () => {
38+
render(<AppWrapperLocal />);
39+
});

‎examples/react-native/__tests__/ts/realm-database/configure-realm-multiple.test.tsx

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
// :snippet-start: two-realm-contexts
2+
import React from 'react';
3+
import {AppProvider, UserProvider} from '@realm/react';
4+
import {RealmContext} from '../RealmConfig';
5+
import {SecondRealmContext} from '../RealmConfig';
6+
// :remove-start:
7+
import {render} from '@testing-library/react-native';
8+
import {useApp} from '@realm/react';
9+
import {View, Text} from 'react-native';
10+
11+
const APP_ID = 'example-testers-kvjdy';
12+
13+
function AppSectionOne() {
14+
const app = useApp();
15+
16+
if (app.id !== APP_ID) {
17+
throw new Error('Did not instantiate app client');
18+
}
19+
20+
return (
21+
<View>
22+
<Text>Foo</Text>
23+
</View>
24+
);
25+
}
26+
27+
function AppSectionTwo() {
28+
const app = useApp();
29+
30+
if (app.id !== APP_ID) {
31+
throw new Error('Did not instantiate app client');
32+
}
33+
34+
return (
35+
<View>
36+
<Text>Bar</Text>
37+
</View>
38+
);
39+
}
40+
// :remove-end:
41+
42+
function TwoRealmsWrapper() {
43+
const {RealmProvider: RealmProvider} = RealmContext;
44+
const {RealmProvider: SecondRealmProvider} = SecondRealmContext;
45+
46+
return (
47+
<AppProvider id={APP_ID}>
48+
<UserProvider>
49+
{/* This realm uses Flexible Sync. */}
50+
<RealmProvider
51+
sync={{flexible: true, onError: error => console.error(error)}}
52+
>
53+
<AppSectionOne />
54+
</RealmProvider>
55+
{/* This is a separate local-only realm. */}
56+
<SecondRealmProvider>
57+
<AppSectionTwo />
58+
</SecondRealmProvider>
59+
</UserProvider>
60+
</AppProvider>
61+
);
62+
}
63+
// :snippet-end:
64+
65+
test('Instantiate SecondRealmProvider correctly', () => {
66+
render(<TwoRealmsWrapper />);
67+
});

‎examples/react-native/__tests__/ts/realm-database/configure-realm-sync.test.tsx

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// :snippet-start: configure-realm-sync
2+
import React from 'react';
3+
import {AppProvider, UserProvider} from '@realm/react';
4+
import {RealmContext} from '../RealmConfig';
5+
// :remove-start:
6+
import {render} from '@testing-library/react-native';
7+
import {useApp} from '@realm/react';
8+
import {View, Text} from 'react-native';
9+
10+
const APP_ID = 'example-testers-kvjdy';
11+
12+
function MyApp() {
13+
const app = useApp();
14+
15+
if (app.id !== APP_ID) {
16+
throw new Error('Did not instantiate app client');
17+
}
18+
19+
return (
20+
<View>
21+
<Text>Foo</Text>
22+
</View>
23+
);
24+
}
25+
// :remove-end:
26+
27+
function AppWrapperSync() {
28+
const {RealmProvider} = RealmContext;
29+
30+
return (
31+
<AppProvider id={APP_ID}>
32+
<UserProvider>
33+
<RealmProvider sync={{flexible: true, onError: error => console.error(error)}}>
34+
<MyApp />
35+
</RealmProvider>
36+
</UserProvider>
37+
</AppProvider>
38+
);
39+
}
40+
// :snippet-end:
41+
42+
test('Instantiate RealmProvider correctly', () => {
43+
render(<AppWrapperSync />);
44+
});

‎source/examples/generated/react-native/js/RealmConfig.snippet.create-realm-context.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import {createRealmContext} from '@realm/react';
2+
// Import all of your models.
3+
import Invoice from './Models/Invoice';
4+
import Business from './Models/Business';
5+
6+
export const RealmContext = createRealmContext({
7+
// Pass all of your models into the schema value.
8+
schema: [Invoice, Business],
9+
});

‎source/examples/generated/react-native/js/RealmConfig.snippet.in-memory-realm.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export const InMemoryRealmContext = createRealmContext({
2+
schema: [Address, Contact],
3+
inMemory: true,
4+
});

‎source/examples/generated/react-native/ts/configure-realm-local.test.snippet.configure-realm.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react';
2+
import {RealmContext} from '../RealmConfig';
3+
4+
function AppWrapperLocal() {
5+
const {RealmProvider} = RealmContext;
6+
7+
return (
8+
<RealmProvider>
9+
<MyApp />
10+
</RealmProvider>
11+
);
12+
}

‎source/examples/generated/react-native/ts/configure-realm-multiple.test.snippet.two-realm-contexts.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
import {AppProvider, UserProvider} from '@realm/react';
3+
import {RealmContext} from '../../RealmConfig';
4+
import {SecondRealmContext} from '../../RealmConfig';
5+
6+
function TwoRealmsWrapper() {
7+
const {RealmProvider: RealmProvider} = RealmContext;
8+
const {RealmProvider: SecondRealmProvider} = SecondRealmContext;
9+
10+
return (
11+
<AppProvider id={APP_ID}>
12+
<UserProvider>
13+
{/* This realm uses Flexible Sync. */}
14+
<RealmProvider
15+
sync={{flexible: true, onError: error => console.error(error)}}
16+
>
17+
<AppSectionOne />
18+
</RealmProvider>
19+
{/* This is a separate local-only realm. */}
20+
<SecondRealmProvider>
21+
<AppSectionTwo />
22+
</SecondRealmProvider>
23+
</UserProvider>
24+
</AppProvider>
25+
);
26+
}

‎source/examples/generated/react-native/ts/configure-realm-sync.test.snippet.configure-realm-sync.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
import {AppProvider, UserProvider} from '@realm/react';
3+
import {RealmContext} from '../RealmConfig';
4+
5+
function AppWrapperSync() {
6+
const {RealmProvider} = RealmContext;
7+
8+
return (
9+
<AppProvider id={APP_ID}>
10+
<UserProvider>
11+
<RealmProvider sync={{flexible: true, onError: error => console.error(error)}}>
12+
<MyApp />
13+
</RealmProvider>
14+
</UserProvider>
15+
</AppProvider>
16+
);
17+
}

‎source/sdk/react-native.txt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ clients.
102102
You can configure your realm to do things
103103
like populate initial data on load, be encrypted, and more.
104104
To begin working with your data,
105-
:ref:`configure and open a realm <react-native-open-close-realm>`.
105+
:ref:`configure and open a realm <react-native-configure-realm>`.
106106

107107
.. step:: Read and Write Data
108108

‎source/sdk/react-native/realm-database.txt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ Realm Database - React Native SDK
1717
Define a Realm Object Model </sdk/react-native/realm-database/define-a-realm-object-model>
1818
Change an Object Model </sdk/react-native/realm-database/change-an-object-model>
1919
Schemas </sdk/react-native/realm-database/schemas/overview>
20-
Open & Close a Realm </sdk/react-native/realm-database/open-and-close-a-realm>
20+
Configure a Realm </sdk/react-native/realm-database/configure-a-realm>
2121
Write Transactions </sdk/react-native/realm-database/write-transactions>
2222
CRUD </sdk/react-native/realm-database/crud>
2323
React to Changes </sdk/react-native/realm-database/react-to-changes>

‎source/sdk/react-native/realm-database/bundle.txt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ On a high level you:
113113
The realm is now bundled and will be included when a user downloads the app.
114114
To add the bundled realm file to your app's document directory, call
115115
:js-sdk:`Realm.copyBundledRealmFiles() <Realm.html#.copyBundledRealmFiles>`
116-
before you :ref:`open the realm <react-native-open-close-realm>`.
116+
before you open the realm.
117117

118118
``Realm.copyBundledRealmFiles()`` adds all ``*.realm`` files from the application
119119
bundle to the application documents directory. This method doesn't override

0 commit comments

Comments
 (0)