ScrollView RTL in react native - reactjs

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 :
I reversed the data array I am using.
Used : onContentSizeChange event handler to trigger the
scrollToEnd({ animated: false }) function on ScrollView

Answer 3

you can try invertible-scroll-view that supports horizontal and vertical scroll view

Answer 4

As #SlashArash has mentioned you can use the react-native-invertible-scroll-view.
Here's an example:
import React, { Component } from 'react';
import { View, Text, ScrollView} from 'react-native';
import InvertibleScrollView from 'react-native-invertible-scroll-view';
export default class Demo extends Component {
constructor(props) {
super(props);
this.scrollView = null;
}
render() {
let categories = ['one', 'two'];
categories = categories.map((category, index) => {
return (
<Text>{category}</Text>
)
});
return (
<View style={{
flex: 1,
}}>
<InvertibleScrollView inverted
ref={ref => { this.scrollView = ref }}
onContentSizeChange={() => {
this.scrollView.scrollTo({y: 0, animated: true});
}}
horizontal={true}
showsHorizontalScrollIndicator={false}
>
{categories}
</InvertibleScrollView>
</View>
)
}
}

Answer 5

I had to build an autocomplete with an RTL scrolling. This proved to be tricky because the scroll to end solution caused a lot of flickering. I found the best way to make anything RTL is using the transform style. If you use transform, it is important that you apply the transform to each item in the list as well. Otherwise, you will have mirrored text. This solution also works if you want to invert top/bottom, just change transform scaleY instead of x.
Here is my ScrollView:
const renderList = () => {
return itemList.map(item => (
<Item
key={item.id}
address={item}
style={{ transform: [{ scaleX: -1 }] }}
/>
));
};
....
<ScrollView
contentContainerStyle={styles.scrollViewContentContainer}
horizontal
keyboardShouldPersistTaps="always"
ref={scrollView}
style={styles.scrollView}
>
{renderList()}
</ScrollView
Here is the corresponding ScrollView style:
const styles = StyleSheet.create({
scrollView: {
marginRight: 10,
transform: [{ scaleX: -1 }]
},
scrollViewContentContainer: {
flexGrow: 1,
justifyContent: 'flex-end',
}
});