Skip to content

Better Multi React DOM support #6233

Closed
Closed
@aight8

Description

Problem

I use react-native-navigation, which uses many React DOM's (every Screen is a separate DOM)
Every screen shares a common Wrapper, which initializes Realm, App and optionally the User Context.
The problem is that:

  1. AppProvider and RealmProvider creates and configure a fresh instance of Realm.App and Realm object for the DOM. I just want to initialize and reuse the global realm and realm.app object externally. Also the observing doesn't work like this, I don't know exactly why, but I think that the global realm and realm.app object only corresponds to the last changed screen.
  2. I have tried to simply set Realm and Realm.App through the Context.Provider but they are not exported. Also, the AppProvider contains some extra logic (also renders AuthOperationProvider).
<AppProvider
	appRef={appRef}
	id={'XXXXX'}
>
	<ConditionalWrap
		condition={userRequired}
		wrap={(children) => (
			<UserProvider fallback={<Text>UserProvider fallback</Text>}>
				{children}
			</UserProvider>
		)}
	>
		<RealmProvider
			realmRef={realmRef}
			closeOnUnmount={false}
			deleteRealmIfMigrationNeeded={true}
			schema={[Model]}
		>
			{children}
		</RealmProvider>
	</ConditionalWrap>
</AppProvider>

Solution

const realmApp = new Realm.App({})
const realm = new Realm({})

// Here I can setup the single instance:

realmApp.addEventListener(() => {
    // something
})
realmApp.currentUser?.addEventListener(() => {
    // change Screen (e.g. login screen)
})
<AppProvider
	...
	appInstance={realmApp}
	...
>
	<ConditionalWrap
		condition={userRequired}
		wrap={(children) => (
			<UserProvider fallback={<Text>UserProvider fallback</Text>}>
				{children}
			</UserProvider>
		)}
	>
		<RealmProvider
			...
			realmInstance={realm} // explicitly also closeOnUnmount
			...
		>
			{children}
		</RealmProvider>
	</ConditionalWrap>
</AppProvider>

As result the Realm and Realm.App Object is managed externally and as side effect the code React DOM stays little bit cleaner.

Alternatives

There is no real alternatives. I currently forked realm-js, exported the React Context.Provider, manually add AuthOperationProvider etc.

How important is this improvement for you?

Dealbreaker

Feature would mainly be used with

Atlas Device Sync

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions