CODEWITHSUNDEEP
javascriptcssreactjsreact-nativenative-base
sahil solanki
sahil solanki

Reputation: 507

Column inside Grid takes half width in react-native-base

I am using React Native Base for my iPad app and I am putting two Col components inside a Grid component like this:

<Container style={styles.container}>
  <Header style={styles.header}>
    <Body>
      <Title>Header</Title>
    </Body>
  </Header>
  <Content style={styles.mainContent}>
    <Grid>
      <Col style={styles.leftContent}>
      </Col>
      <Col style={styles.rightContent}>
      </Col>
    </Grid>
  </Content>
</Container>

My Stylesheet is like this: 

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#ccc'
  },
  mainContent: {
    marginTop: 10,
  },
  header: {
    backgroundColor: '#fff'
  },
  leftContent: {
    width: 340,
    height: 686,
    backgroundColor: "green",
    marginLeft: 5,
  },
  rightContent: {
    width: 614,
    height: 686,
    backgroundColor: "yellow",
    marginLeft: 10,
    marginRight: 5,
  },

Both Col are taking almost equal width not the given width. How should I make these components to take given width?

Upvotes: 1

Views: 2018

Answers (2)

Antoine Auffray
Antoine Auffray

Reputation: 1293

Use flex so you can give your components specific size in this case. Adding the flex: 0.5 CSS property to both your components will give them half their parents size if it has flex: 1set.

This way you can give them specific size ratios between 0 and 1. For example :

parent: {
    flex: 1,
},
childone: {
    flex: 0.35,
},
childtwo: {
    flex: 0.65,
}

Just chang flex child values to whatever you want and identify which component is your parent and which are the children.

Upvotes: 1

Rizal Sidik
Rizal Sidik

Reputation: 989

i have an idea for that, you can using flex in your col style, first is setting flex parent component to 1 and then you can add flex into child component using 0.4 or 0.6 etc. this is the example code of your style

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#ccc'
  },
  mainContent: {
    marginTop: 10,
    flex: 1 //this is for parent style
  },
  header: {
    backgroundColor: '#fff'
  },
  leftContent: {
    flex : 0.4, //this is for width col
    height: 686,
    backgroundColor: "green",
    marginLeft: 5,
  },
  rightContent: {
    flex: 0.6, //this is for width col
    height: 686,
    backgroundColor: "yellow",
    marginLeft: 10,
    marginRight: 5,
  }
});

Hope it can help you, thanks:)

Upvotes: 1

Related Questions