Can't make the grid with 100% height, seems a bug

[SupriyaKalghatgi]

GeekyAnts/NativeBase#2142

[akhil-ga]

@SupriyaKalghatgi just need to wrap the content of SectionContainer with <Row/>

[akhil-ga]

@SupriyaKalghatgi GeekyAnts/NativeBase#2142 (comment)

[akhil-ga]

Sample code

import React, { Component } from 'react';
import { Image, Dimensions, TouchableHighlight, ImageBackground, ScrollView } from "react-native";
import { Content, View, Icon, Text } from "native-base";
import { Col, Row, Grid } from 'react-native-easy-grid';

let categoriesCol1 = [{ title: "Lorem ipsum" }, { title: "Lorem ipsum" }, { title: "Lorem ipsum" }]
let categoriesCol2 = [{ title: "Lorem ipsum" }, { title: "Lorem ipsum" }, { title: "Lorem ipsum" }]
let win = Dimensions.get('window');

export default class App extends Component {
  render() {
    return (

      <ImageBackground style={styles.img} source={require("./cover.jpg")}>
        <Content style={{ height: win.height }}>
          <Grid style={{ height: win.height }}>
            <Row >
              <Col style={styles.col}>
                {categoriesCol1.map((item, idx) => {
                  return <SectionContainer key={idx} item={item} />;
                })}
              </Col>
              <Col style={styles.col}>
                {categoriesCol2.map((item, idx) => {
                  return <SectionContainer key={idx} item={item} />;
                })}
              </Col>
            </Row>
          </Grid>
        </Content>
      </ImageBackground>
    );
  }
}

const SectionContainer = ({ item, navigation }) => {
  return (
    <Row>
      <TouchableHighlight>
        <View style={{ justifyContent: 'center', alignItems: 'center', borderWidth: 1, borderColor: "#ffffff" }}>
          <Icon active name={"home"} style={styles.icon} />
          <Text style={styles.text}> {item.title} </Text>
        </View>
      </TouchableHighlight>
    </Row>

  );
};


const styles = {
  col: {
    flex: 0.5,
    backgroundColor: 'transparent'
  },
  img: {
    flex: 1,
    alignSelf: "stretch",
    width: win.width,
    height: win.height,
  },
  icon: {
    marginTop: 50,
    color: "#ffffff",
    fontWeight: '900',
    fontSize: 50
  },
  text: {
    fontSize: 28,
    color: '#ffffff',
    marginBottom: 50

  }
}

Gif

[ArtyomBaykov]

@akhil-geekyants in your screenshot I still see free space in the bottom. Is there a way to make those rows together full height without that free space?

[ArtyomBaykov]

@akhil-geekyants I checked it even tried to add marginBottom:0 to that row which you said to include while now all rows have margins on the bottoms even the last one which makes free space on the bottom again with scrolling. So how all those margins can be removed? marginBottom is not working.

[akhil-ga]

@ArtyomBaykov can you check the code in this issue comment GeekyAnts/NativeBase#2142 (comment)

[ArtyomBaykov]

@akhil-geekyants I checked it. contentContainerStyle shows only image without rows and cols. I placed style instead of contentContainerStyle margins are removed, the scroll is removed but there is still free space (marginBottom) on the bottom of the screen under the last row.

[akhil-ga]

@ArtyomBaykov can you create a test repo for us to check.

[SupriyaKalghatgi]

GeekyAnts/NativeBase#2142 (comment)
this looks appropriate to what is needed

[SupriyaKalghatgi]

Closing issue due to no response