CODEWITHSUNDEEP
react-nativelayout
mss
mss

Reputation: 177

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

  <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?

Upvotes: 1

Views: 2101

Answers (2)

Jigar
Jigar

Reputation: 1374

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

Upvotes: 0

mss
mss

Reputation: 177

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

Upvotes: 1

Related Questions