How to make Horizontal SectionList RIGHT to LEFT Scroll react-native

Question

I want to make an online shop, I need a Horizontal section List in react native, contains my products. here is my code. please help me to make it right to left scrolling.clothes is an array of objects contains my product's details.

    export default class MySectionList extends Component{
        render(){
            return(
               <SectionList
                   sections={Clothes} 
                   horizontal={true}
                   showsHorizontalScrollIndicator={false}
                   renderItem={({item})=>(
                       <View>
                           <Image source={{uri:"item.image",width:'65%',height:200}}/>
                           <Text>{item.name}</Text>
                           <Text>{item.price}</Text>
                       </View>
                  )}
                  renderSectionHeader={({section})=>(
                       <Text>{section.title}</Text>)}
              />
       )
    }
}

this sectionList scrolls from left to right and I need another one scrolling from left to right.

Answer 1

I solve this by adding some styles. Unfortunately, I18NManager could not solve my problem so I used transform style and for all section list I applied transform: [{ scaleX: -1 }] and because of items inside sectionlist will be reversed, I applied this style again for item wrapper. something like this:

    render(){
            return(
               <SectionList
                   sections={Clothes} 
                   horizontal={true}
                   style={{ transform: [{ scaleX: -1 }] }}
                   showsHorizontalScrollIndicator={false}
                   renderItem={({item})=>(
                       <View style={{ transform: [{ scaleX: -1 }] }}>
                           <Image source={{uri:"item.image",width:'65%',height:200}}/>
                           <Text>{item.name}</Text>
                           <Text>{item.price}</Text>
                       </View>
                  )}
                  renderSectionHeader={({section})=>(
                       <Text>{section.title}</Text>)}
              />
           )
       }
    }

This is a hacky way but I did not find another solution for my problem.

I hope this can help you

Answer 2

If your app language is right to left please set app support to use rtl with

I18NManager.allowRTL(true) 
I18NManager.forceRTL(true)  

to make section list or flat list scroll from right to left, Otherwise this cannot happen. There are another ways to solve this issue but it's not systematic! Like use inverted prop or direction style.