expo - React Native Web - Material Top Tab Navigator layout shifts on zoom (scale) change - Stack Overflow

admin管理员组

文章数量:1399971

I’m using createMaterialTopTabNavigator from React Navigation with React Native Web. The tab layout behaves weirdly on scale/zoom change in browser — it recalculates the width of the <Tab.Navigator> and causes layout jumps or “jank” (it looks like a re-render with visible snapping). Here’s what I’ve tried: • Disabling animations: animationEnabled: false • Turning off lazy loading: lazy: false • Putting the entire <Tab.Navigator> in a wrapper View with fixed width • Setting tabBarOptions and screenOptions directly

But nothing helps — the tab bar still shifts when zooming in/out in the browser.

Any way to stabilize the layout on zoom/scale and prevent this “jumpiness”? I want the tab widths to remain consistent without recalculating or jittering on zoom.

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Tab = createMaterialTopTabNavigator();

<Tab.Navigator
  tabBarOptions={{
    activeTintColor: '#008000',
    indicatorStyle: { backgroundColor: '#008000' },
  }}
  screenOptions={{
    lazy: false,
    animationEnabled: Platform.OS !== 'web',
    swipeEnabled: Platform.OS !== 'web',
  }}
>
  <Tab.Screen
    name="General"
    options={{
      tabBarLabel: 'General',
      tabBarTestID: 'GeneralTabButton',
    }}
  >
    {() => (
      <View testID="GeneralTab">
        <General inspection={inspection} id={id} navigation={navigation} />
      </View>
    )}
  </Tab.Screen>

  <Tab.Screen
    name="Photos"
    options={{
      tabBarLabel: 'Photos',
      tabBarTestID: 'PhotosTabButton',
    }}
  >
    {() => (
      <View testID="PhotosTab">
        <Photos
          inspection={inspection}
          navigation={navigation}
          id={id}
          simple={false}
          projectLookups={{
            floors: project?.floors,
            buildings: project?.buildings,
          }}
          visibility={visibility}
        />
      </View>
    )}
  </Tab.Screen>
</Tab.Navigator>

I’m using createMaterialTopTabNavigator from React Navigation with React Native Web. The tab layout behaves weirdly on scale/zoom change in browser — it recalculates the width of the <Tab.Navigator> and causes layout jumps or “jank” (it looks like a re-render with visible snapping). Here’s what I’ve tried: • Disabling animations: animationEnabled: false • Turning off lazy loading: lazy: false • Putting the entire <Tab.Navigator> in a wrapper View with fixed width • Setting tabBarOptions and screenOptions directly

But nothing helps — the tab bar still shifts when zooming in/out in the browser.

Any way to stabilize the layout on zoom/scale and prevent this “jumpiness”? I want the tab widths to remain consistent without recalculating or jittering on zoom.

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Tab = createMaterialTopTabNavigator();

<Tab.Navigator
  tabBarOptions={{
    activeTintColor: '#008000',
    indicatorStyle: { backgroundColor: '#008000' },
  }}
  screenOptions={{
    lazy: false,
    animationEnabled: Platform.OS !== 'web',
    swipeEnabled: Platform.OS !== 'web',
  }}
>
  <Tab.Screen
    name="General"
    options={{
      tabBarLabel: 'General',
      tabBarTestID: 'GeneralTabButton',
    }}
  >
    {() => (
      <View testID="GeneralTab">
        <General inspection={inspection} id={id} navigation={navigation} />
      </View>
    )}
  </Tab.Screen>

  <Tab.Screen
    name="Photos"
    options={{
      tabBarLabel: 'Photos',
      tabBarTestID: 'PhotosTabButton',
    }}
  >
    {() => (
      <View testID="PhotosTab">
        <Photos
          inspection={inspection}
          navigation={navigation}
          id={id}
          simple={false}
          projectLookups={{
            floors: project?.floors,
            buildings: project?.buildings,
          }}
          visibility={visibility}
        />
      </View>
    )}
  </Tab.Screen>
</Tab.Navigator>

• react-native
• expo
• tabs

Share Improve this question Follow asked Mar 25 at 8:53 Roman UkRoman Uk 4188 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

The reason for your problem is probably that React Navigation dynamically adjusts the tab width on the web, particularly when the viewport changes (for example, when you zoom in or out).

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Tab = createMaterialTopTabNavigator();

<Tab.Navigator
  tabBarOptions={{
    activeTintColor: '#008000',
    indicatorStyle: { backgroundColor: '#008000' },
  }}
  screenOptions={{
    lazy: false, // Ensures all screens load at once
animationEnabled: Platform.OS !== 'web', // Disables animations on web
swipeEnabled: Platform.OS !== 'web', // Disables swipe gestures on web 
     tabBarScrollEnabled: true, // Ensures proper width handling 
   tabBarItemStyle: { width: 150 }, // Set a fixed width for each tab
          }}
>

  <Tab.Screen
    name="General"
    options={{
      tabBarLabel: 'General',
      tabBarTestID: 'GeneralTabButton',
    }}
  >


    {() => (
      <View testID="GeneralTab">
        <General inspection={inspection} id={id} navigation={navigation} />
      </View>
    )}

  </Tab.Screen>

  <Tab.Screen
    name="Photos"
    options={{
      tabBarLabel: 'Photos',
      tabBarTestID: 'PhotosTabButton',
    }}
  >
    {() => (
      <View testID="PhotosTab">
        <Photos
          inspection={inspection}
          navigation={navigation}
          id={id}
          simple={false}
          projectLookups={{
            floors: project?.floors,
            buildings: project?.buildings,
          }}
          visibility={visibility}
        />
      </View>
    )}
  </Tab.Screen>
</Tab.Navigator>

本文标签： expoReact Native WebMaterial Top Tab Navigator layout shifts on zoom (scale) changeStack Overflow