Why my horizontal ScrollView is not working? - reactjs

Question

I´m trying without success to use the ScrollView component in React Native, below the code:
const width_proportion = '97%';
const height_proportion = '75%';
const styles = StyleSheet.create({
container: {
height: '100%'
},
image: {
flex: 1,
resizeMode: "cover",
justifyContent: "center"
},
text: {
color: "grey",
fontSize: 30,
fontWeight: "bold"
},
popup: {
color: '#CA0',
},
box: {
width: width_proportion,
height: height_proportion,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'steelblue',
// position: "absolute",
marginTop: '5%',
marginBottom: '3%',
marginLeft: '2%'
},
bottomBox: {
width: '97%',
height: 125,
backgroundColor: 'steelblue',
marginLeft: '2%',
marginBottom: 10,
marginTop: 5,
padding: 5
}
});
const MyTheme = {
colors: {
...DefaultTheme.colors,
background: '#EFA',
primary: '#000',
text: '#000',
},
};
function HomeScreen({ navigation }) {
return (
<View style={styles.container}>
<View style={{ width: '100%', height: 50, backgroundColor: 'steelblue' }}>
<TouchableOpacity onPress={() => navigation.toggleDrawer()}>
<Image source={hamburgerMenu} style={{ height: 45, width: 45, alignItems: 'center' }}>
</Image>
</TouchableOpacity>
</View>
<ImageBackground source={imgBackground} style={styles.image}>
<View style={styles.box}>
</View>
<ScrollView horizontal={true} >
<View style={styles.bottomBox}>
</View>
<View style={styles.bottomBox}>
</View>
<View style={styles.bottomBox}>
</View>
</ScrollView>
</ImageBackground>
</View >
);
}
When I set the horizontal property to "true" from ScrollView, the component disappears. Only I set horizontal to "false" and the ScrollView workks fine in Vertical.

Answer 1

wrap your scrollview like this
<ScrollView horizontal={true}>
<View style={styles.bottomBox} />
<View style={styles.bottomBox} />
<View style={styles.bottomBox} />
</ScrollView>
bottomBox : {
width: 40,
height: 125,
backgroundColor: 'steelblue',
padding: 5,
marginRight: 10,
}