Loading another Flashlist causes a horizontal scroll bar to appear - problem on IOS

[kalwinskidawid]

Hey,

Does anyone else have a problem with horizontal scrolling appearing when changing FlashList?

For example:

1. I load data from the API into FlashList associated with view = devices - no horizontal scrolling, everything fits**(!)**.
2. I change view to notifications - a horizontal scroll bar appears (even when renderItem={() => {return <></>})
3. I go back to view = devices and suddenly there is horizontal scrolling there too.

I observed this problem on Expo Go iPhone 16 Pro. I also tried it on iPhone 8 - and there is no such problem there.

  const [view, setView] = useState<'devices' | 'notifications'>('devices');
  return(
      <View style={{ flex: 1 }}>
        {/* Content */}
        {view === 'devices' ? (
          <FlashList
            ListEmptyComponent={loadingOrEmptyFlatListComponent({ isLoading: loading })}
            key={view}
            data={filteredDevices}
            renderItem={renderDeviceItem}
            keyExtractor={(item) => item.id.toString()}
            numColumns={2}
            onLayout={(event) => {
              const { width } = event.nativeEvent.layout;
              console.log('towers-list FlashList width:', width);
            }}
            contentContainerStyle={{
              paddingBottom: insets.bottom,
              paddingHorizontal: 20,
              paddingTop: headerHeight + insets.top,
            }}
            showsVerticalScrollIndicator={false}
          />
        ) : (
          <FlashList
            key={view}
            data={groupedPreferences}
            renderItem={renderItem}
            getItemType={(item) => (typeof item === 'string' ? `sectionHeader` : `item`)}
            keyExtractor={(item) =>
              typeof item === 'string' ? `sectionHeader-${item}` : `item-${item.notificationType}`
            }
            contentContainerStyle={{
              paddingBottom: insets.bottom,
              paddingHorizontal: 20,
              paddingTop: headerHeight + insets.top,
            }}
            showsVerticalScrollIndicator={false}
            }
          />
        )}
      </View>)