react native / react-native-navigation / mobx / realm-js

snippet.ts

function createRalmApp() {
	return new Realm.App({
		id: 'xxxxxx',
	})
}

function createRalm(user: Realm.User | null) {
	const realmConfig = {
		schema: [
			// your schemas..
		],
		deleteRealmIfMigrationNeeded: true,
	} as Realm.Configuration
	
	// if (user) {
	// 	realmConfig.sync = {
	// 		flexible: true,
	// 		user: user,
	// 	}
	// }
	return new Realm(realmConfig)
}

class AppState {
	app: Realm.App = createRalmApp()
	user: Realm.User | null = this.app.currentUser
	realm: Realm = createRalm(this.user)
	
	constructor() {
		makeAutoObservable(this, {
			app: observable.ref,
			user: observable.ref,
			realm: observable.ref,
		})
		devDebugMobxEvents()
	}
	
	// write back the app user the user property to trigger a rerender
	updateUser() {
		this.user = this.app.currentUser
	}
}

export const State = new AppState()

Navigation
	.events()
	.registerAppLaunchedListener(() => {
		// a function which sets the default options
		defaults()
		
                // runs initially
	        // re-render when the user property changes
		autorun(() => {
			if (!State.user) {
				// calls Navigation.setRoot for the login layout
				Layout.setLoginRoot()
			} else {
				// calls Navigation.setRoot for the user layout
				Layout.setUserRoot()
			}
		}, {
			name: 'Set Navigation Layout on User Change',
		})
	})

// runs initially
// re-renders when the app reports a change (especially user login/logout/switch)
autorun(() => {
	State.app.addListener(() => {
		State.updateUser()
	})
}, {
	name: '[State.app] notification -> update State.user',
})

// runs initially
// re-renders when the user reports a change (something of the user changed so it must be invalidated)
autorun(() => {
	State.user?.addListener(() => {
		State.updateUser()
	})
}, {
	name: '[State.user] notification -> update State.user',
})