Horizontal Scroll View not working in react native - react-native

Question

horizontal scroll view is not working in my react native app. Here is my code below:
return (
<View style={styles.container}>
{loading ? (
<ActivityIndicator size="large" color={COLORS.blue} />
) : (
kioskData.map((item, index) => {
return (
<View key={index} style={styles.container1}>
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}>
<>
<Text>{item.product_price}</Text>
<Text>{item.product_name}</Text>
</>
</ScrollView>
</View>
);
})
)}
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
color: COLORS.black,
backgroundColor: COLORS.white,
},
container1: {
flex: 1,
},
});
Am not sure where I am going wrong. Thanks for your help in advance.

Answer 1

The issue is with the usage of ScrollView in the wrong area which is inside of the loop (map).
Instead of creating an independent ScrollView for each item in the list, We can wrap the List Text elements within one single ScrollView Component.
let's update the ScrollView component tree to fix up the issue,
<View style={styles.container}>
{loading ? (
<ActivityIndicator size="large" color={COLORS.blue} />
) : (
<View style={styles.container1}>
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
{kioskData.map((item, index) => {
return (
<Fragment key={index}>
<Text>{item.product_price}</Text>
<Text>{item.product_name}</Text>
</Fragment>
);
})}
</ScrollView>
</View>
)}
</View>
Additional Tip:
If the list is quite large and has some performance concerns you can go for FlatList component for the same UI implementation.
const renderItem = ({item}) => (
<>
<Text>{item.product_price}</Text>
<Text>{item.product_name}</Text>
</>
);
return (
<View style={styles.container}>
{loading ? (
<ActivityIndicator size="large" color={COLORS.blue} />
) : (
<View style={styles.container1}>
<FlatList
data={kioskData}
horizontal
showsHorizontalScrollIndicator={false}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</View>
)}
</View>
);

Answer 2

<View style={{flexDirection: 'row'}}>
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}>
<Text>asdasdasd</Text>
<Text>asdasdasd</Text>
<Text>asdasdasd</Text>
<Text>asdasdasd</Text>
<Text>asdasdasd</Text>
<Text>asdasdasd</Text>
<Text>asdasdasd</Text>
<Text>asdasdasd</Text>
<Text>asdasdasd</Text>
<Text>asdasdasd</Text>
</ScrollView>
</View>