Skip to content
This repository was archived by the owner on Dec 4, 2025. It is now read-only.

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 <[email protected]>
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+
}

0 commit comments

Comments
 (0)