javascript - Maping in scrollview makes horizontal list vertical in React Native

Question

I have two queries actually. I am using ScrollView in my app. The list shows horizontal when i give static images in scrollview like this:

<View>
  <View style={{width:width,paddingHorizontal:20,paddingVertical:20}}>
  <ScrollView 
    horizontal={true}
    showsHorizontalScrollIndicator={false}
    scrollEventThrottle={200}
    decelerationRate="fast"
    pagingEnabled>
  <Image source={{uri:'https://reactjs.org/logo-og.png'}} 
        style={{width: 80, height: 80}} />
  <Image source={{uri:'https://reactjs.org/logo-og.png'}} 
        style={{width: 80, height: 80}} />
  <Image source={{uri:'https://reactjs.org/logo-og.png'}} 
        style={{width: 80, height: 80}} />
  <Image source={{uri:'https://reactjs.org/logo-og.png'}} 
        style={{width: 80, height: 80}} />
  </ScrollView>
 </View>
</View>

Answer 1

Try this way

return (
  <ScrollView
    horizontal={true}
    showsHorizontalScrollIndicator={false}
    scrollEventThrottle={200}
    decelerationRate="fast"
    pagingEnabled
  >
    <View>
      list.map(function(item, i)
      {
        <TouchableOpacity
          onPress={() => alert(item)}
          key={i}
          style={{ width: width, paddingHorizontal: 20, paddingVertical: 20 }}
        >
          <Image source={{ uri: item }} style={{ width: 80, height: 80 }} />
        </TouchableOpacity>
      }
      )
    </View>
  </ScrollView>
);