android - React-Native Horizontal Scrollview not working but works well with vertical

Question

I am new to react-native. I want to achieve a horizontal scrolling of list. When added horizontal the scrolls won't work. But it works well went removed horizontal={true}.
Below is the code.

       <View style={styles.headerMargin} >
           <ScrollView
            
            horizontal={true}
           style={{ marginLeft: 15, marginRight: 15 }}
            
            contentContainerStyle={{
              justifyContent:
                this.state.typeofCountry.length > 2
                  ? 'flex-start'
                  : 'center',
              width: '100%',}}
             >
                
            {this.state.typeofCountry.map((item, i) => {
              return (
              
                <View
                  style={{
                    flexDirection: 'row',
                    alignContent: 'center',
                    alignSelf: 'center',
                    alignItems: 'center',
                    
                  }}>
                  <Text
                    style={[
                      styles.textBlacRegular,
                      { marginLeft: i == 0 ? 0 : 10 },
                    ]}>
                    {item.label}
                  </Text>
                  <View style={{ justifyContent: 'center' }}>
                    <Image
                      style={{
                        width: 30,
                        height: 18,
                        marginLeft: 10,
                        marginRight:20,
                        justifyContent: 'center',
                        alignContent: 'center',
                        alignItems: 'center',
                      }}
                      source={item.icon}></Image>
                     
                  </View>
                  
                </View>
                
                
              );
            })}
            
          </ScrollView> 
         
          </View>
Styles:
headerMargin:{
   flexDirection:"row",
  width:'100%',
   marginTop:6,
   marginBottom:5,
   height:30,
     borderColor:"#2795FF",
   borderBottomWidth:1.5,
   alignSelf:"center",
   justifyContent:"center",
   alignItems:"center",
   alignContent:"center",
   paddingBottom:5
}

Can anyone let me know what wrong with the code. The above code works well in iOS but not in android.

Answer 1

Straight from React Native docs, for the scroll view's children to be arranged horizontally in a row instead of vertically in a column the only prop you need to use it's horizontal.

<ScrollView horizontal>
  <Child/>
</ScrollView>