Repository: expo/router

Issue #675: Screen flicker
Created: 2023-06-21T04:04:39Z
Which package manager are you using? (Yarn is recommended)
npm
Summary
I used the authentication/redirect flow proposed in the documentation (https://expo.github.io/router/docs/guides/auth), but it uses a useEffect to make the redirection. All children of the Auth Provider can still be rendered before the redirection is done. That cause page flicker.
Some examples:

Go to Login Page -> Click on Login -> Redirect To Home Page -> (Login Page Flicker) -> Home Page
Trying to access the Login page while already logged in -> Redirect to Home Page -> (Login Page Flicker) -> Home Page

Is there a clean way to prevent page flicker when making these kind of redirection?
Thanks
Minimal reproducible example
Auth Provider
import { useRouter, useSegments } from "expo-router";
import React from "react";

const AuthContext = React.createContext(null);

// This hook can be used to access the user info.
export function useAuth() {
  return React.useContext(AuthContext);
}

// This hook will protect the route access based on user authentication.
function useProtectedRoute(user) {
  const segments = useSegments();
  const router = useRouter();

  React.useEffect(() => {
    const inAuthGroup = segments[0] === "(auth)";

    if (
      // If the user is not signed in and the initial segment is not anything in the auth group.
      !user &&
      !inAuthGroup
    ) {
      // Redirect to the sign-in page.
      router.replace("/sign-in");
    } else if (user && inAuthGroup) {
      // Redirect away from the sign-in page.
      router.replace("/");
    }
  }, [user, segments]);
}

export function Provider(props) {
  const [user, setAuth] = React.useState(null);

  useProtectedRoute(user);

  return (
    <AuthContext.Provider
      value={{
        signIn: () => setAuth({}),
        signOut: () => setAuth(null),
        user,
      }}
    >
      {props.children}
    </AuthContext.Provider>
  );
}

Root Layout
import { Slot } from "expo-router";
import { Provider } from "../context/auth";

export default function Root() {
  return (
    // Setup the auth context and render our layout inside of it.
    <Provider>
      <Slot />
    </Provider>
  );
}

Duplicate issue #726: White flash / flickering when using expo-font
Created: 2023-07-04T07:48:42Z
Which package manager are you using? (Yarn is recommended)
npm
Summary
I’m developing an application with a dark and a light theme, and custom fonts.
I’m trying to migrate everything to expo, but I have a problem: I get a white flash when I launch my application.
I did a lot of research to find out what was causing this, and concluded that using expo’s useFont hook could cause the problem.
One solution would be to give a value to the “backgroundColor” property, in the app.json file, but this isn’t a good solution for two reasons:

only one color can be set, and therefore cannot be adapted to the dark theme (unless you use expo-system-ui with the setBackgroundColor method)
setting a backgroundColor has a very ugly effect on iOS modals, so it’s best to leave this property undefined.

I’m a bit up against the wall with this problem :(.
Minimal reproducible example
https://github.com/Thanaen/expo-router-font-white-flash
PS: I've also created a forum post for this issue

Closing comment (2023-07-13T23:18:21Z): Duplicate #675