I can't get text where it should go in react native-CodePudding

Hi I'm building an app for IOS and Android with react Native, and I'm a newbie this is my first app, and I think I'm not too bad, but I have a UI that is only a supermarket list, but I have the head ready but I need place the below the image , I made a new View but it comes out in the middle of the screen. Can you explain to me why it is not shown where to go, thanks.

Can you explain to me why? Thanks I share codes

enter image description here

import { Button, Image, StyleSheet, Text, View } from 'react-native';
import { StatusBar } from 'expo-status-bar';

export default function App() {
  return (
    <View style={styles.container}expoex>
      <View style={styles.header}>
        <View style={styles.imageContainer}>
          <Image style= {styles.logo} source={require('./assets/logo.png')} />
        </View>
        <View style={styles.menu}>
          <Image source={require('./assets/menu3.png')} />
          <Image source={require('./assets/menu2.png')} />
          <Image source={require('./assets/menu5.png')} />
          <Image source={require('./assets/menu1.png')} />
          <Image source={require('./assets/menu4.png')} />
        </View>
      </View>   
      <View style={styles.textNomList}>
        <Text style={styles.textNom}>Lista de Supermercado</Text> 
      </View>        
     
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#6E04BF',
    color: '#fff', 
    alignItems: 'center',
  },
  header: {
    marginTop:62,
    flex:1,    
    flexDirection:'row',
    justifyContent:'center',
    alignItems:'flex-start',
    height: 145,
    marginVertical: 10,
  },
  imageContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    marginLeft:5,
    height: 145,
  },
  logo: {
    width: 100,
    height: 140,
  },
  menu: {
    flex:1,
    flexDirection:'row',
    justifyContent:'space-between',
    marginHorizontal: 20,
    marginTop:15,
    height:145,
  },
  textNomList: {
    flex:1,
    alignItems:'flex-start',
    justifyContent:'flex-start',    
  },
  textNom: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
    marginLeft: 20,
  },
});

the result of this code is

enter image description here

CodePudding user response：

I only can see some styling issues, check out below, edit it as required

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#6E04BF',
    color: '#fff',
    alignItems: 'center',
  },
  header: {
    marginTop: 62,
    // flex: 1,
    flexDirection: 'row',
    // justifyContent: 'center',
    // alignItems: 'flex-start',
    // height: 145,
    // marginVertical: 10,
  },
  imageContainer: {
    // alignItems: 'center',
    // justifyContent: 'center',
    marginLeft: 5,
    height: 145,
  },
  logo: {
    width: 100,
    height: 140,
    backgroundColor:'fff'
  },
  menu: {
    // flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginHorizontal: 20,
    marginTop: 15,
    height: 145,
  },
  textNomList: {
    flex: 1,
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
  },
  textNom: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
    marginLeft: 20,
  },
});

CodePudding user response：

You should put your text in the same View that is wrapping your image and then style it appropriately.

<View style={styles.imageContainer}>
    <Image style= {styles.logo} source={require('./assets/logo.png')} />
    <Text style={styles.textNom}>Lista de Supermercado</Text> 
</View>

I am not good at styling but it looks like your app should look decent with how the styles are at the current moment.