expo / router

[ARCHIVE]: Expo Router has moved to expo/expo -- The File-based router for universal React Native apps
https://docs.expo.dev/routing/introduction/
1.37k stars 114 forks source link

Android Tabbar flicker when change screen #783

Closed Scr3nt closed 1 year ago

Scr3nt commented 1 year ago

Which package manager are you using? (Yarn is recommended)

yarn

Summary

On Android I have a strange behavior when I change screen from the tabbar I only get it if I have the black bar (gestures or 3 buttons) at the bottom. On my OnePlus, the gesture bar is not a black bar but just the gesture bar superimposed on the app, in which case I don't have the problem.

expo 49, expo router v2 after updating expo 48

Minimal reproducible example

  <Tabs
      screenOptions={{
        headerShown: false,
        tabBarStyle: {
          height: TAB_SIZE,
          paddingTop: theme.spacing.xs,
          backgroundColor: theme.colors.background,
          flexDirection: "row",
          justifyContent: "space-around",
          borderTopWidth: 1,
          borderTopColor: theme.colors.gray07,
        },
        tabBarItemStyle: {
          height: "100%",
          alignItems: "center",
          justifyContent:
            isTablet || Platform.OS === "web" || !isPhone
              ? "center"
              : "flex-start",
        },
        tabBarIconStyle: {
          flex: 0,
          height: ICON_SIZE,
          width: ICON_SIZE,
          marginBottom: theme.spacing.s,
          justifyContent: "center",
          alignItems: "center",
        },
        tabBarLabelStyle: {
          lineHeight: FONT_SIZE,
          fontSize: FONT_SIZE,
          marginBottom: theme.spacing.s,
          fontFamily: "Inter-Medium",
        },
        tabBarInactiveTintColor: INACTIVE_COLOR,
        tabBarActiveTintColor: ACTIVE_COLOR,
      }}
    >
      <Tabs.Screen
        name="(componentshome)/index"
        options={{
          title: "ComponentsHome",

          tabBarIcon: ({ focused }) => {
            return (
              <Ionicons
                name="home"
                size={ICON_SIZE}
                color={focused ? ACTIVE_COLOR : INACTIVE_COLOR}
              />
            );
          },
        }}
      />
      <Tabs.Screen
        name="(settings)/settings"
        options={{
          title: "Settings",
          tabBarIcon: ({ focused }) => {
            return (
              <Ionicons
                name="settings"
                size={ICON_SIZE}
                color={focused ? ACTIVE_COLOR : INACTIVE_COLOR}
              />
            );
          },
        }}
      />
    </Tabs>

https://github.com/expo/router/assets/56580186/24783e1a-0466-4504-97b8-e6eb011b06c6

Artem99-debug commented 1 year ago

same here, I even get errors in firebase.

Captura de ecrã 2023-07-18, às 07 52 21