CODEWITHSUNDEEP
react-native
nanquim
nanquim

Reputation: 1924

React Native Can't set margin after image

Why can't I separate the last two components?

First, I tried to set justifyContent, but it did not work. Then, I tried to set margin. It works for title and image, but not for components after Image

I think is because I'm setting image height, but without it image will not appear

import React, {useState, useEffect} from 'react';
import {View, Text, Image, StyleSheet} from 'react-native';


const Card = ({ evento }) => {
  return (
    <View style={styles.card_container}>
      <Text style={styles.titulo}>
        {evento.titulo} - R$ {evento.valor}
      </Text>
      <Image
        style={styles.img}
        source={{uri: 'https://via.placeholder.com/150'}}
      />
      <Text styles={styles.descricao}>{evento.descricao}</Text>
      <Text styles={styles.guia}>Organizador: {evento.guia}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  card_container: {
    // flex: 1,
    // display: 'flex',
    // flexDirection: 'column',
    // justifyContent: 'space-between',
    fontFamily: 'Rubik-Light',
    margin: 3,
    marginBottom: 15,
    padding: 10,
    borderRadius: 10,
    backgroundColor: '#ffffff',
    elevation: 1,
  },
  titulo: {
    fontFamily: 'Rubik-Medium',
    margin: 10,
  },
  img: {
    //alignSelf: 'center',
    width: 350, //TODO tamanho dinâmico
    height: 200,
    marginBottom: 10, // word
  },
  descricao: {
      marginBottom: 10,
  },
  guia: {
      marginTop: 10
  }
});

export default Card;

enter image description here

Upvotes: 0

Views: 317

Answers (1)

jted95
jted95

Reputation: 1144

It's a typo on the Text component. It should be style for the prop in Text component not styles. Here are the correct codes for the last two components.

<Text style={styles.descricao}>{evento.descricao}</Text>
<Text style={styles.guia}>Organizador: {evento.guia}</Text>

Upvotes: 1

Related Questions