Question 34793 in React native Question posted in
The official React Native documentation can be found here.

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

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

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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,
  },
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search