I am trying to list these itemsNames into a row- put them horizontaly, but it is not working. I can't figure out the reason why. I would really appreciate some help
const Text = () => {
const Menu = [
{'id':1,
'menuName':'whatever',
},
{'id':2,
'menuName':'whatever',
},
{'id':3,
'menuName':'whatever...',
},
];
return (
<View style={styles.container}><Text
>Test
</Text>
{Menu.map((menuItems) => (
<View style={styles.menuName} key={menuItems.id} >
<Text>{menuItems.menuName}</Text>
</View>
))}
</View>
)
}
const styles = StyleSheet.create({
container :{
flex:1
},
menuName:{
flexDirection: 'row',
height: 48,
width: '100%',
borderWidth: 1,
padding: 10,
}
});
Reason for not to work.
In order to arrange the items in a view, you need to set flexDirection='row' in your case items inside your View(Container) needed to be arranged horizontally so the flex-direction will be applied to View(Container)
Please make the following changes in style it will work.
container :{
flex:1,
flexDirection: 'row',
},
menuName:{
height: 48,
width: '100%',
borderWidth: 1,
padding: 10,
}
To study more about flex please following this link.