Wie richten Sie eine Komponente nach Links und andere nach rechts (Ende der Seite) reagieren die einheimischen?

Mache ich eine app Reagieren Muttersprache, und ich will richten Sie einen Kreis mit dem Ende der Seite.

Ich das machen will:

Aber es ist derzeit so und nur so bleibt:

Vollständige Ansicht:

[

Ich habe bereits versucht alignSelf, justifyContent und andere, aber es funktioniert nicht.
Getestet habe ich diese: Wie richten Sie 2 reagieren, native Elemente, 1 in der Mitte und 1 am Anfang

Aber es wird nicht funktionieren.

Mein code:

const ListProductsHeader = () => (
<View>
    <View style={style.containerInfo}>
        <View style={style.circle} />
        <View>
            <Text style={style.unityName}>SUPERMERCADO MACCARTNEY</Text>
            <Text style={style.subInfo}>Categoria: Mercado</Text>
            <Text style={style.subInfo}>Pedido Nº: 1245</Text>
        </View>
    </View>
    <View style={style.containerProducts}>
        <Text style={style.productName}>1x 42 - Coca Cola 2L</Text>
        <View style={style.minus}></View>
    </View>


</View>
);

CSS:

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',
},