flash-list: RTL Bug Android

Current behavior

On RTL Mode, the list is completely weird.

RTL:

https://user-images.githubusercontent.com/27680142/182146469-d083b166-3dc4-4c9b-8931-51764c1967a6.mp4

LTR:

https://user-images.githubusercontent.com/27680142/182146494-a4266294-62c2-4554-a528-d8dd060f70ba.mp4

Expected behavior

Well it should simply behave like LTR but only the direction changes.

To Reproduce

I’m sorry I don’t use anything but expo managed workflow so I couldn’t get your sample app to work, but here’s a simple repro.

import {FlashList} from "@shopify/flash-list";
import React, {Component} from "react";
import {FlatList, ScrollView, Text, View, I18nManager} from "react-native";

export default function App() {
    const data1 = [1, 2];
    const data2 = [
        1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
    ];

    React.useEffect(() => {
        I18nManager.forceRTL(true);
        I18nManager.allowRTL(true);
    }, []);

    return (
        <View>
            <View style={{marginTop: 100}} />
            <FlashList
                horizontal
                data={data2}
                estimatedItemSize={100}
                renderItem={(info) => {
                    return (
                        <View
                            style={{
                                marginHorizontal: 8,
                                width: 100,
                                height: 100,
                                backgroundColor: "gray",
                            }}
                        >
                            <Text>{info.item}</Text>
                        </View>
                    );
                }}
            />
        </View>
    );
}

Remember you need to restart your app to get the I18nManager’s effect.

Platform:

• iOS
• [ X ] Android

Environment

@shopify/flash-list@1.2.0

npx expo-env-info

  expo-env-info 1.0.5 environment info:
    System:
      OS: macOS 10.15.7
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
      Yarn: 1.22.19 - ~/.nvm/versions/node/v16.16.0/bin/yarn
      npm: 8.15.1 - ~/.nvm/versions/node/v16.16.0/bin/npm
      Watchman: 2022.02.14.00 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
      Android SDK:
        API Levels: 28, 29, 30, 32
        Build Tools: 28.0.3, 29.0.2, 29.0.3
    IDEs:
      Android Studio: 4.0 AI-193.6911.18.40.6626763
      Xcode: 12.4/12D4e - /usr/bin/xcodebuild
    npmPackages:
      expo: ~45.0.0 => 45.0.6 
      react: 17.0.2 => 17.0.2 
      react-dom: 17.0.2 => 17.0.2 
      react-native: 0.68.2 => 0.68.2 
      react-native-web: 0.17.7 => 0.17.7 
      react-navigation: 4 => 4.4.4 
    npmGlobalPackages:
      eas-cli: 0.56.0
      expo-cli: 6.0.1
    Expo Workflow: managed

I though giving your library try because FlatList’s RTL is corrupted on the latest version: https://github.com/facebook/react-native/issues/34314

Had no idea yours doesn’t work too 😦

It’s a horrible time for having an RTL app right now!