Horizontal Scrollview does not scroll correctly in RTL

Question

I have a simple scrollview with a function moveSliderForward as follow:

import React, { useState, useRef, useEffect } from "react";

const [selectedIndex, setSelectedIndex] = useState(1);
const scrollRef = useRef<ScrollView>(null);
const moveSliderForward = () => {
    let newSelectedIndex;
    if (selectedIndex < 4) {
      newSelectedIndex = selectedIndex + 1;
      scrollRef.current?.scrollTo({
        animated: true,
        x: ScreenWidth * selectedIndex,
        y: 0,
      });
      setSelectedIndex(newSelectedIndex);
    } else handleNavigation();
  };

<ScrollView
scrollEnabled={false}
ref={scrollRef}
horizontal
showsHorizontalScrollIndicator={false}
pagingEnabled
onContentSizeChange={scrollToEnd}>
          {[1,2,3,4]!.map((item, index) => (
            <Pressable
              onPress={moveSliderForward}
              style={{ width: ScreenWidth }}
            >
              <Text
                style={{
                  backgroundColor: "red",
                  color: "black",
                  textAlign: "center",
                }}
              >
                {index + 1}
              </Text>
            </Pressable>
            
          ))}
</ScrollView>

It works perfectly LTR and RTL (ios only). When i switch to RTL in android it shows me 1, after I press slide it shows 3, then 2 then 1 again. It should show 1,2,3,4

I have tried all the solutions from the internet but nothing is working for me.

Answer 1

Using FlatList instead of ScrollView solved my problem.