React-Native | ScrollView right to left

Question

I've got Simple ScrollView:

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

Item is a component which loads several thumbnails. My application planned for both LTR and RTL users, so there is change in directions when it comes to RTL.

The problem is when I'm using RTL interface - the ScrollView 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'
    }
})