Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Android RTL: Large horizontal list issue #1408

Open
Ozaoujal opened this issue Nov 1, 2024 · 0 comments
Open

Android RTL: Large horizontal list issue #1408

Ozaoujal opened this issue Nov 1, 2024 · 0 comments
Labels
bug Something isn't working

Comments

@Ozaoujal
Copy link

Ozaoujal commented Nov 1, 2024

Hey folks

I’m currently working with a large list in my React Native project, so I decided to use this excellent library to provide a smooth experience for our users. Everything works well on iOS in both LTR and RTL directions, and on Android in LTR mode, the list functions perfectly without any issues or bugs.

However, on Android in RTL mode, an issue arises: initially, when entering the list for the first time, the first item briefly appears and then quickly disappears, leaving only a blank space. You can see exactly what happens in the video below ↓↓↓:

Android RTL: (unexpected)

Screenrecorder-2024-11-01-10-00-48-775.mp4

Android LTR: (expected)

aaaaaaaaa.mp4

Here is how I used the component:

<View style={{ direction: 'ltr', flex: 1 }}>
    <FlashList
      data={quran}
      extraData={focusedVerse}
      horizontal={true}
      pagingEnabled
      disableHorizontalListHeightMeasurement={true}
      estimatedListSize={
        Platform.OS === 'android' && I18nManager.isRTL
          ? { width: windowWidth, height: RH(100) }
          : { width: RW(100), height: RH(100) }
      }
      renderItem={renderItem}
      estimatedItemSize={windowWidth}
      keyExtractor={keyExtractor}
      // inverted={true}
      disableIntervalMomentum
      decelerationRate="fast"
      snapToInterval={RW(100)}
      showsHorizontalScrollIndicator={true}
      removeClippedSubviews={true}
      disableAutoLayout={true}
      onBlankArea={(b) => {
        console.log('-----', b);
      }}
    />
  </View>

The result of onBlankArea logs:

  • iOS (RTL and LTR) + Android LTR: {"blankArea": 392.3636363636364, "offsetEnd": 392.3636363636364, "offsetStart": 0}
  • Android RTL: {"blankArea": 2356, "offsetEnd": 2356, "offsetStart": -1963.6363636363637}

Additional Note:
When I set horizontal to false, the list items reappear as expected. :)

Versions:

  • "@shopify/flash-list": "^1.7.1"
  • "expo": "^50.0.21",
  • "react-native": "0.73.6",

Please let me know if I need to provide more information.
I’ve been stuck on this issue for over 3 days without any resolution.

Thank you for your time!

@Ozaoujal Ozaoujal added the bug Something isn't working label Nov 1, 2024
@Ozaoujal Ozaoujal changed the title Android RTL: Large list issue Android RTL: Large horizontal list issue Nov 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant