title: How to align one component to left and other to right (end of page) react native?
body: <p>I'm making an app in React Native and I want align a circle with the end of page.</p>
  
  <p>I want to make this:</p>
  
  <p><a href="https://i.stack.imgur.com/TM0lJ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/TM0lJ.png" alt="I want make this"></a></p>
  
  <p>But it's currently like this and only stays this way:</p>
  
  <p><a href="https://i.stack.imgur.com/fF0ty.png" rel="noreferrer"><img src="https://i.stack.imgur.com/fF0ty.png" alt="But only stay this way"></a></p>
  
  <p>The complete view:</p>
  
  <p>[<img src="https://i.stack.imgur.com/nTEsr.png" alt="The complete view]"></p>
  
  <p>I already tried alignSelf, justifyContent and others but it doesn't work.
  I tested this: <a href="https://stackoverflow.com/questions/36204061/how-to-align-2-react-native-elements-1-being-in-the-center-and-1-on-the-beginni">How to align 2 react native elements, 1 being in the center and 1 on the beginning</a> </p>
  
  <p>But it won't work.</p>
  
  <p>My code:</p>
  
  <pre><code>const ListProductsHeader = () =&gt; (
  &lt;View&gt;
      &lt;View style={style.containerInfo}&gt;
          &lt;View style={style.circle} /&gt;
          &lt;View&gt;
              &lt;Text style={style.unityName}&gt;SUPERMERCADO MACCARTNEY&lt;/Text&gt;
              &lt;Text style={style.subInfo}&gt;Categoria: Mercado&lt;/Text&gt;
              &lt;Text style={style.subInfo}&gt;Pedido Nº: 1245&lt;/Text&gt;
          &lt;/View&gt;
      &lt;/View&gt;
      &lt;View style={style.containerProducts}&gt;
          &lt;Text style={style.productName}&gt;1x 42 - Coca Cola 2L&lt;/Text&gt;
          &lt;View style={style.minus}&gt;&lt;/View&gt;
      &lt;/View&gt;
  
  
  &lt;/View&gt;
  );
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>containerProducts:{
  paddingTop: 40,
  paddingLeft: 15,
  flexDirection: 'row',
   },
  productName: {
    alignSelf: 'flex-start',
  },
  minus:{
    width: 20,
    height: 20,
    borderRadius: 20/2,
    backgroundColor: 'red',
  },
  containerInfo:{
    paddingTop:15,
    flexDirection:'row',
    paddingLeft: 15,
  },
  unityName:{
    fontWeight: 'bold',
    paddingLeft: 15,
  },
  subInfo:{
    color: 'gray',
    paddingLeft: 15,
  },
  circle: {
    width: 50,
    height: 50,
    borderRadius: 50/2,
    backgroundColor: 'red',
    justifyContent: 'flex-end',
  },
  </code></pre>