layout table react native

hi i am new in react native mi question is, how i can get this layout design in react native with styles

i am trying to use

contain:{
   flexDirection: 'row',
   flexDirection: 'column', //or 
}

<View style={contain}>
   <View>el1</View>
   <View>el2</View>
   <View>el3</View>
   <View>el4</View>
   <View>el5</View>
</View>

But doesn't work Thanks

http://appweplan.com:8080/public/images/layout.png

You'll need to nest your views and apply the styling of flex-direction: 'row' or 'column' to the appropriate view.

const styles = {
  rowView: {
    flexDirection: 'row'
  },
  columnView: {
    flexDirection: 'column'  
  }
}

<View style={styles.rowView}>
 <View style={styles.columnView}>
     <Text>Column 1</Text>
     <Text>Column 1</Text>
 </View>
 <View style={styles.columnView}>
     <Text>Column 2</Text>
     <Text>Column 2</Text>         
 </View>
 <View style={styles.columnView}>
     <Text>Column 3</Text>
     <Text>Column 3</Text>
 </View>
</View>

Comments

Popular posts from this blog

Meaning of `{}` for return expression

Get current scroll position of ScrollView in React Native

flutter websocket connection issue