CODEWITHSUNDEEP
react-native
Raflesia
Raflesia

Reputation: 65

React native base - space between grids?

I have a grid with a row and a col in that row. I copied the row with its col and pasted it under the first row so I could test having 2 cols under each other. That part works but sadly, they are sticking on eachother. There's no space/padding between them. I tried adding a top: 20 to the row and col but neither of that is working, in fact it makes the height of the second col even shorter.

Any ideas on how I can fix this? This is React Native with Native Base.

Screenshot of the issue

      <Content>
        <Grid style={Style.contentContainer}>
          <Row style={Style.content}>
            <Col>
              <Text>Test</Text>
              <View style={Style.completelyCenteredComponent}>
                <Text>Text here</Text>
              </View>
            </Col>
          </Row>
          
          <Row style={Style.content}>
            <Col>
              <Text>Test</Text>
              <View style={Style.completelyCenteredComponent}>
                <Text>Text here</Text>
              </View>
            </Col>
          </Row>    
        </Grid>
      </Content>

Style:

module.exports = StyleSheet.create({

  mainApp: {
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%'
  },

  backgroundImage: {
      flex: 1,
      resizeMode: 'cover'
  },

  contentContainer: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center'
  },

  content: {
      backgroundColor: 'rgba(255, 255, 255, 0.84)',
      minWidth: '88%',
      maxWidth: '88%',
      height: 200,
      top: 0,
      padding: 26,
      borderWidth: 0.6,
      borderColor: '#000000'
  },

  completelyCenteredComponent: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center'
  },

});

Upvotes: 0

Views: 4552

Answers (2)

Th&#224;nh Trang
Th&#224;nh Trang

Reputation: 631

You need add marginBottom for your content and create other style for last row with marginBottom: 0.

Your style:

content: {
    ... your style
    marginBottom: 20,
},
lastRow: {
    marginBottom: 0,
}

And your component:

<Grid>
    <Row style={style.content}>...</Row>
    <Row style={[style.content, style.lastRow]}>...</Row>
</Grid>

Upvotes: 1

Harikrishnan S
Harikrishnan S

Reputation: 124

in my point of view try adding margin at content object of styling it would work i think. and where did you add the top:20 there is no such code in there in styling

Upvotes: 0

Related Questions