ReactNative: how to put element to the right in parent view
<p>I wonder how to get the red label to the right?</p>

<p><a href="https://i.stack.imgur.com/C21b3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C21b3.png" alt="enter image description here"></a></p>

<p>It seems, that flex doesn't support any known things like "align:right" or "float: right". </p>

<p>I played around with flex: 1 and flex: 2 and finally removed flex, it makes no difference.</p>

<p>How to put an element to the right while others remain on the left side?</p>

<pre><code>renderItem(item) {

    return (
        &lt;TouchableHighlight onPress={() =&gt; this.showItemDetail(item)}  underlayColor='#dddddd'&gt;
            &lt;View&gt;
                &lt;View style={styles.container}&gt;
                    &lt;View style={styles.itemRow}&gt;
                        &lt;Text style={styles.title}&gt;{item.name}&lt;/Text&gt;
                        &lt;View style={styles.detailBox}&gt;
                            &lt;View&gt;
                                &lt;Text style={styles.details}&gt;opened: {item.getOpenedFromNow()}&lt;/Text&gt;
                                &lt;Text style={styles.details}&gt;closed: {item.getClosedFromNow()}&lt;/Text&gt;
                            &lt;/View&gt;
                            &lt;View&gt;
                                {this.getClosingInfo(item)}
                            &lt;/View&gt;
                        &lt;/View&gt;
                    &lt;/View&gt;
                &lt;/View&gt;
                &lt;View style={styles.separator}/&gt;
            &lt;/View&gt;
        &lt;/TouchableHighlight&gt;
    );
}
</code></pre>

<p>Styles (excerpt):</p>

<pre><code>container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fffce1',
    padding: 15,
},

detailBox: {
    flex: 1,
},
itemRow: {
    flex: 1,
    marginTop: -10
},
title: {
    fontSize: 15,
    marginBottom: 8
},
closed: {
    fontSize: 15,
    color: 'red',
},
</code></pre>