react native: flashing of screens while realm loads. Cant navigate back #6333
Comments
github-actions
bot
added
Encryption:Off
Frequency:Always
Repro:Always
SDK-Use:Sync
labels
|
@Fuzzyma Is it possible for you to provide code snippets of the providers? Moreover, it could be interesting to see the size of the change sets coming from Atlas (you need to enabling logging - and share the log) to see how your data is shaped. |
sync-by-unito
bot
added
the
Waiting-For-Reporter
|
Here is the layout component with all providers: <SafeAreaProvider>
<View style={{ flex: 1 }} onLayout={onLayoutRootView}>
<QueryClientProvider client={queryClient}>
<RootSiblingParent>
<TamaguiProvider config={config}>
<OnlineProvider>
<AppProvider id={appId} baseUrl={baseUrl}>
<UserProvider fallback={Login}>
<RealmProvider
schema={[Service, Subscription]}
deleteRealmIfMigrationNeeded
// sync={{
// flexible: true,
// onError: (_session, error) => {
// console.error(error);
// },
// existingRealmFileBehavior: {
// type: OpenRealmBehaviorType.DownloadBeforeOpen,
// timeOut: 1000,
// timeOutBehavior: OpenRealmTimeOutBehavior.OpenLocalRealm,
// },
// }}
>
<ExpoStack
screenOptions={{
headerStyle: {
backgroundColor: '#fff',
},
headerTintColor: '#000',
headerShadowVisible: false,
headerTitleStyle: {
fontWeight: 'bold',
},
contentStyle: {
backgroundColor: '#fff',
},
}}
>
</ExpoStack>
</RealmProvider>
</UserProvider>
</AppProvider>
</OnlineProvider>
</TamaguiProvider>
</RootSiblingParent>
</QueryClientProvider>
</View>
</SafeAreaProvider>Have to look about the changesets later |
github-actions
bot
added
Needs-Attention
|
I wrote up a better explanation in the forum which I will post here for reference as well: I want to use react/realm in my expo project but I hit a roadblock that is a show stopper. Whenever I turn on sync and I use “DownloadBeforeOpen” as sync config, my expo router stopps working. So why on earth would that happen? Is realm resetting the whole react app and the router looses its state? On another note, when I use “OpenImmediatiely”, it still flashes when I navigate to another screen but at least it shows the screen. However, when I want to write anything to the realm, I am greeted with the error message: “Error: Cannot write to class [ModelName] when no flexible sync subscription has been created.” Here is the my Code for Reference: <AppProvider id={appId} baseUrl={baseUrl}>
<UserProvider fallback={Login}>
<RealmProvider
schema={[Model1, Model2
// deleteRealmIfMigrationNeeded
sync={{
newRealmFileBehavior: { type: OpenRealmBehaviorType.DownloadBeforeOpen },
flexible: true,
initialSubscriptions: {
update(subs, realm) {
subs.add(realm.objects(Model1));
// this is an embedded model and adding it here creates another error
// subs.add(realm.objects(Model2));
},
},
onError: (_session, error) => {
console.error(error);
},
existingRealmFileBehavior: {
type: OpenRealmBehaviorType.DownloadBeforeOpen,
// timeOut: 0,
// timeOutBehavior: OpenRealmTimeOutBehavior.OpenLocalRealm,
},
}}
>
<ExpoStack
screenOptions={{
headerStyle: {
backgroundColor: '#fff',
},
headerTintColor: '#000',
headerShadowVisible: false,
headerTitleStyle: {
fontWeight: 'bold',
},
contentStyle: {
backgroundColor: '#fff',
},
}}
></ExpoStack>
</RealmProvider>
</UserProvider>
</AppProvider> |
|
Here are the logs with log level trace. It is the process of starting the app and then clicking on a button that should navigate to a sub page but instead flickers and navigates back to home: Details
I am happy for any guidance on how to approach this issue. I am totally lost about whats going on here |
|
Hi @Fuzzyma |
|
We haven't been able to pinpoint it yet but it sounds a bit like expo/router#688 |
sync-by-unito
bot
added
Waiting-For-Reporter
|
@kneth I don't use Expo and I have this issue, also if I disable the sync it's not flashing. I'll try to fix that today. |
|
I tested everything in my app. The only thing that forces the whole app to rerender and flicker is the "RealmProvider":
|
|
I have the same issue described. The app gets stuck for minutes performing the sync, and I can't use or disable the functionality. Does anyone know how to disable sync without freezing the screen? On flexible true? |
|
@kneth the label "waiting for reporter" was added. Tell me what you need and I will happily provide! |
github-actions
bot
added
Needs-Attention
|
@HugoBounoua Great to hear @Fuzzyma Does the suggestion above also solve your problem? |
sync-by-unito
bot
added
Waiting-For-Reporter
|
I will need to test it out. Can take a few days tho since I am on vacation right now! Would be awesome if it would work out! |
github-actions
bot
added
Needs-Attention
sync-by-unito
bot
added
the
Waiting-For-Reporter
|
@Fuzzyma How does your |
sync-by-unito
bot
added
Waiting-For-Reporter
|
@kneth i posted my code above. It's the standard realm provider that is provided by the realm react package. Nothing special there (I think?) |
github-actions
bot
added
Needs-Attention
|
Are there any updates here? I'm facing the same issue and it started when I migrated the realm from v11 to v12 <AppProvider id={APP_ID}>
<UserProvider fallback={AuthContainer}>
<RealmWrapper />
</UserProvider>
</AppProvider>function RealmWrapper() {
const {RealmProvider} = RealmContext;
const realmAccessBehavior: Realm.OpenRealmBehaviorConfiguration = {
type: Realm.OpenRealmBehaviorType.OpenImmediately,
};
const user = useUser();
if (!user?.id) {
return null;
}
return (
<RealmProvider
schema={schema}
sync={
user?.profile?.email
? {
user,
flexible: true,
initialSubscriptions: {
update(subs, realm) {
subs.add(realm.objects('MyModel1'));
subs.add(realm.objects('MyModel2'));
subs.add(realm.objects('MyModel3'));
subs.add(realm.objects('MyModel4'));
subs.add(realm.objects('MyModel5'));
},
rerunOnOpen: true,
},
newRealmFileBehavior: realmAccessBehavior,
existingRealmFileBehavior: realmAccessBehavior,
onError: console.error,
}
: undefined
}>
<App />
</RealmProvider>
);
} |
|
We are experiencing this issue in a new dev build of our app using v12.6.2 and @realm/react v0.6.2; however, it only starts flashing (between the fallback and the RealProvider children) when the user goes "offline". The main reason we are using Realm is because of its "offline-first" approach, which seems to have changed. I have also been able to replicate this using the When you go offline you just see the If you add the realm opening behaviours to the config like: Then it starts flashing between the RealmProvider children and the fallback and the app becomes unusable: |
|
@kneth For a workaround that works for me: The idea behind this architecture is to create 2 layers at the root of your app inside a Redux Provider: RealmLayer + RenderLayer: Now, the RealmLayer can update and re-render as many times as needed (because it's super buggy); the idea is to keep the RealmProvider inside a useMemo, only dependent on the partition so it does not re-renders like crazy. So keep your whole app OUTSIDE of the RealmProvider (I honestly don't understand why Realm does not architects the project this way but whatever..). I'm sparing you some details on how to share the realm object, but basically create a context and wrap your app in the ContextProvider, set the variable "realm" in the context and you'll be able to use it across the app. Conclusion |
|
@greenafrican Thank you for provide the screencast which clearly demonstrate the issue. @HugoBounoua To be honest, we haven't been able to find the root cause, and your description of a workaround might help us to get closer to finding it - thanks for sharing. I'll put the issue on the team meeting early next week to get focus time allocated as I fear it is not a trivial issue to find the root cause of. |
sync-by-unito
bot
removed
the
Needs-Attention
|
We are able to reproduce it, and we are currently working on isolating the root cause. When offline, it looks like |
|
Update: This seems to be related to Note from the example {
"dependencies": {
"@realm/react": "0.6.1",
}
} |
|
@elle-j My config is |
|
If you try |
|
@elle-j initially I had version |
|
Thanks for confirming, we believe to have pinpointed the issue and aim to have a release out by the end of the week. |
|
@elle-j I don't know what "kitolog" uses, but it does not change anything on my end. Yes it works online, but as soon as you turn the airplane mode on, it blinks, it flickers, goes back to homepage and everything is destroyed. I'm using |
Please elaborate. |
|
@kneth One piece of info that might help with the investigation is that we have the flashing of screens as well, when using <RealmProvider
sync={{
flexible: true,
// initialSubscriptions: {
// update: (mutableSubs, realm) => {
// mutableSubs.add(realm.objects(Collection1));
// mutableSubs.add(realm.objects(Collection2));
// mutableSubs.add(realm.objects(Collection3));
// },
// rerunOnOpen: true,
// },
clientReset: {
mode: ClientResetMode.RecoverOrDiscardUnsyncedChanges,
},
newRealmFileBehavior: {
type: OpenRealmBehaviorType.DownloadBeforeOpen,
},
existingRealmFileBehavior: {
type: OpenRealmBehaviorType.OpenImmediately,
},
}}
schema={allSchemas}
closeOnUnmount={false}
>
<App />
</RealmProvider>import { useRealm } from '@realm/react';
...
const realm = useRealm();
...
useEffect(() => {
realm.subscriptions.update(mutableSubs => {
mutableSubs.add(realm.objects(Collection1));
mutableSubs.add(realm.objects(Collection2));
mutableSubs.add(realm.objects(Collection3));
});
}, [realm]); |
|
@kneth I can confirm that the offline flashing persists in the There may be 2 different issues here that result in the flashing and perhaps need to be tracked separately. |
FlickeringThere is an identified issue in @HugoBounoua, thanks for getting back. It's surprising that you're seeing the flickering behavior even after deleting your @greenafrican, since you're using @ampopdev, in your latest example, I think the reason you're not seeing the flickering is due to DownloadBeforeOpenThere may be a separate issue regarding |
Yes, apologies. I can confirm |
|
@elle-j thank you for following up on this. |
7 tasks
|
@HugoBounoua, it's certainly something Realm handles and we're actively looking into that issue to have it fixed as soon as possible. |
|
@elle-j Great, thank you. In the meantime, I will continue separating my app components from the RealmProvider, keep the RealmProvider in a useMemo, and pass the reference to the realm object via a context to the rest of the app while the subscriptions update the Redux slices used by all my components. |
|
In the meantime if anyone has the time and nerves to create a minimal setup that works, that would be awesome. I am still on vacation and will try to do so once I am back but I think it will help others finding this issue |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
How frequently does the bug occur?
Always
Description
I use the App, User and Realm Provider in an expo app (react native).
As soon as I turn on sync, whatever I click, am led to the home screen and cant navigate anywhere.
And its flashing like crazy whenever the realm loads (at least the loader of the realm is shown).
Its totally unusable. However, I need syncing. What goes on here?
Stacktrace & log output
No response
Can you reproduce the bug?
Always
Reproduction Steps
No response
Version
realm is version 12.3. @realm/react is 0.6.2
What services are you using?
Atlas Device Sync
Are you using encryption?
No
Platform OS and version(s)
Android Emulator Pixel 7
Build environment
I am using the expo dev client v49.0.15.
Cocoapods version
No response
The text was updated successfully, but these errors were encountered: