Search code examples
react-nativereact-native-sectionlist

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


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.


Solution

  • 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.