React-Native | ScrollView right to left

Question

I've got a simple ScrollView:

<ScrollView
    style={$style.category_container}
    horizontal={true}
    showsHorizontalScrollIndicator={false}
    automaticallyAdjustContentInsets={true}
>
    <Item title={'1'} />
    <Item title={'2'} />
</ScrollView>

Item is a component that loads several thumbnails. My application is planned for both LTR and RTL users, so there is a change in directions for RTL.

The problem is when I'm using the RTL interface - the ScrollView is still moving from left to right, and I can't see all my thumbnails.

How can I solve it?

Answer 1

If someone will run into this in the future: There isn't any 'built-in' property that will set ScrollView's direction to RTL at the moment.

However That's what worked for me:

• set flexDirection: 'row-reverse' to ScrollView's style, which will order your items from right to left.

• use onContentSizeChange to init list's scroll on the right side.

Here's an example:

scrollListToStart(contentWidth, contentHeight) {
    if (I18nManager.isRTL) {
        this.scrollView.scrollTo({x: contentWidth});
    }
}

render() {
    let containerStyle = I18nManager.isRTL ? styles.RTLContainer : styles.LTRContainer;

    return (
        <ScrollView
            ref={ref => this.scrollView = ref}
            onContentSizeChange={this.scrollListToStart.bind(this)}
            horizontal={true}
            style={[styles.buttonsContainer, containerStyle]}>
            {this.renderButtons()}
        </ScrollView>
    )
}


const styles = StyleSheet.create({

    RTLContainer: {
        flexDirection: 'row-reverse'
    },

    LTRContainer: {
        flexDirection: 'row'
    }
})

Answer 2

you can use this way i did this and worked for me This solution has 2 rounds

1-first make this style for your scrollView : style={{scaleX:-1}}

2-second make this style for each of your childs in scrollView : style={{scaleX:-1}}

For Example

 <ScrollView
                            horizontal={true}
                            contentContainerStyle={{height: 65}}
                            style={{scaleX:-1}}
                            showsHorizontalScrollIndicator={false}>
                            {
                                data.sports.map((data,index) => {
                                    return(
                                        <View key={index}
                                            style={{width:150,height:55,backgroundColor:'yellow', marginHorizontal:4,scaleX:-1}}/>
                                    )
                                })
                            }
                        </ScrollView>

As you can see my scrollview has scaleX = -1 style Also all of my childs in scrollView has scaleX = -1 style

as scaleX is deprecated in views you can use transform:[{rotateY:'180deg'}] instead