ScrollView RTL in react native

Question

The following code is my ScrollView in a react native project:

  <ScrollView
    ref={(scrollView) => { this._scrollView = scrollView; }}
    horizontal={true}
    showsHorizontalScrollIndicator={false}
    showsVerticalScrollIndicator={false}
    directionalLockEnabled={true}
    bounces={false}
    scrollsToTop={false}
  >

Now it moves from left to right, How it could move from right to left in first loading?

Answer 1

For RTL setting you should write your code like the below sample:

import React, { useRef } from 'react';
import { ScrollView, StyleSheet } from 'react-native';

const RTLScrollView = () => {
  const scrollRef = useRef();
  const scrollToEnd = () => scrollRef.current.scrollToEnd({ animated: false });

  return (
    <ScrollView
      horizontal
      ref={scrollRef}
      showsHorizontalScrollIndicator={false}
      onContentSizeChange={scrollToEnd}
      contentContainerStyle={styles.contentContainerStyle}
    >
      ~~~
      ~~~
      ~~~
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  contentContainerStyle: {
    flexDirection: 'row-reverse'
  }
});

export default RTLScrollView;

Hint: I don't use your other ScrollView settings like bounces={false}, If you want, put it in your code, my answer is just a sample.

Answer 2

This is truly an annoying Bug in React Native , ScrollView+RTL=Silly Bug.

Though , there are multiple hacks you can adapt , I did this to overcome the bug :

1. I reversed the data array I am using.
2. Used : onContentSizeChange event handler to trigger the scrollToEnd({ animated: false }) function on ScrollView