<AppProvider id={REALM_APP_ID}>
      <UserProvider fallback={UserProviderFallbackComponent}>
        <RealmProviderComponent>
          {children}
        </RealmProviderComponent>
      </UserProvider>
    </AppProvider>

 
import { useApp, useUser } from "@realm/react";
import * as React from "react";
import { ClientResetMode } from "realm";
import LoadingScreen from "../screens/LoadingScreen";
import { RealmProvider } from "./RealmProviderContext";
import { config } from "./schema";

interface RealmProviderComponentProps {
  children?: React.ReactNode;
}

const RealmProviderComponent = ({ children }: RealmProviderComponentProps) => {
  const app = useApp();
  const user = useUser();

  const realmRef = React.useRef<Realm | null>(null);

  React.useEffect(() => {
    user.refreshCustomData().catch((error) => console.log(error));
  }, [user]);

  if (user.providerType === "anon-user") {
    return (
      <RealmProvider fallback={<LoadingScreen message="Anon user" />}>{children}</RealmProvider>
    );
  }

  return (
    <RealmProvider
      realmRef={realmRef}
      fallback={<LoadingScreen message={`User ${user.id}`} />}
      sync={{
         user,
         flexible: true,
         initialSubscriptions: {...},
         clientReset: {...}
         onError: () => {}
      }}
    >
      {children}
    </RealmProvider>
  );
};

export default RealmProviderComponent;