title: React Native Can't set margin after image
body: <p>Why can't I separate the last two components?</p>
  <p>First, I tried to set <code>justifyContent</code>, but it did not work.
  Then, I tried to set <code>margin</code>. It works for title and image, but not for components after <code>Image</code></p>
  <p>I think is because I'm setting image height, but without it image will not appear</p>
  <pre><code>import React, {useState, useEffect} from 'react';
  import {View, Text, Image, StyleSheet} from 'react-native';
  
  
  const Card = ({ evento }) =&gt; {
    return (
      &lt;View style={styles.card_container}&gt;
        &lt;Text style={styles.titulo}&gt;
          {evento.titulo} - R$ {evento.valor}
        &lt;/Text&gt;
        &lt;Image
          style={styles.img}
          source={{uri: 'https://via.placeholder.com/150'}}
        /&gt;
        &lt;Text styles={styles.descricao}&gt;{evento.descricao}&lt;/Text&gt;
        &lt;Text styles={styles.guia}&gt;Organizador: {evento.guia}&lt;/Text&gt;
      &lt;/View&gt;
    );
  };
  
  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;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/FzODk.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FzODk.jpg" alt="enter image description here" /></a></p>