React-native FlexDirection:'row' not working-CodePudding

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,
  }

});

CodePudding user response：

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.