React Native: issue with flex layout

Question

I'm trying to make a simple view with 2 subviews - v1, v2 aligned horizontally and each taking 50% of the screen width.

To achieve this, I'm using the following code:

<View style={{flexDirection: 'row'}}>
   <View style={{flex:1}}>
   <View style={{flex:1}}>
</View>

I've also tried playing with other attributes- flexWrap, justifyContent.

However, everytime the views get stacked one after the other and doesn't take 50% of the screen. What am I doing wrong?

EDIT: The actual piece of code I'm using:

  <View>
    <Text style={styles.place}>New Delhi</Text>
    <View style={{flexDirection: 'row'}}>
      <DayTimeComponent style={{flex:1}}/>
      <DayTimeComponent style={{flex:1}}/>
    </View>
    </View>

BK7 · Accepted Answer · 2017-03-04 12:46:24Z

3

You can achieve this easily using react-native-easy-grid

Code:

import { Col, Row, Grid } from "react-native-easy-grid";

export default class StackOverflow extends Component {

  render() {
    return (
      <View style={{flex:1}}>
       <Grid>
        <Col style={{backgroundColor:'yellow',alignItems:'center',justifyContent:'center'}}><Text>v1</Text></Col>
        <Col style={{backgroundColor:'green',alignItems:'center',justifyContent:'center'}}><Text>v2</Text></Col>
       </Grid>
      </View>
    );
  }
}

Result:

You can also create custom layouts, for eg: if you need a 75%-25% split then all you need to do is

<Col size={75}></Col>
<Col size={25}></Col>

answered Mar 4, 2017 at 12:46

BK7

1,1819 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniel Basedow · Accepted Answer · 2016-01-14 13:57:31Z

0

Set "flex:1" on both the container views. Like so:

<View style={{flex:1}}>
    <Text style={styles.place}>New Delhi</Text>
    <View style={{flexDirection: 'row', flex:1}}>
        <DayTimeComponent style={{flex:1}}/>
        <DayTimeComponent style={{flex:1}}/>
    </View>
</View>

edited Jan 14, 2016 at 13:57

answered Jan 14, 2016 at 11:59

Daniel Basedow

13.4k2 gold badges35 silver badges31 bronze badges

1 Comment

Daniel Basedow Over a year ago

I updated the answer. You need to set the flex property on all the parent components for it to work.

Collectives™ on Stack Overflow

React Native: issue with flex layout

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related