How to move some View next line in React-Native? - react-native

Question

<View style={styles.item} onPress={this._onPress}>
<View style={styles.itemLeft}>
some
</View>
<View style={styles.itemRight}>
some
</View>
<ReviewInNewsItem/> <<<<<< I want to move this to next line.
</View>
item View's style is below.
item: {
flexDirection:row,
borderBottomWidth:1, borderBottomColor: 'grey'
}
So, Views in item is deployed horizontal.
But I want to move ReviewInNewsItem to next line.
Surely, I can move ReviewInNewsItem out of the item but the item have border. I want ReviewInNewsItem is in border of item.
If I'm using web, I'll use this.
clear: both;
Is there similar property like this in React-Native?

Answer 1

I can't find property like clear:both in React-Native.
So I've changed like below.
<View style={styles.item} onPress={this._onPress}>
<View style={{flexDirection: 'row'}}> // Add
<View style={styles.itemLeft}>
some
</View>
<View style={styles.itemRight}>
some
</View>
</View>
<ReviewInNewsItem/>
</View>
And I've remove flexDirection:row in style of item.
item: {
borderBottomWidth:1, borderBottomColor: 'grey'
}

Answer 2

you can use another row for another line
<View style={styles.item} onPress={this._onPress}>
<View style={style.row}>
<View style={styles.itemLeft}>
some
</View>
<View style={styles.itemRight}>
some
</View>
</View>
<View style={style.row}>
<ReviewInNewsItem/> <<<<<< your next line
</View>
</View>
now row has a style of flexDirection:'row' . so everything is on one line similar next row will display in next line