CODEWITHSUNDEEP
reactjsreact-nativenative-base
Wes
Wes

Reputation: 1945

How to set the remaining space of a container/view to a color in react native?

Edit: For whoever suggesting to remove the reactjs tag, my project extends React and removing the tag removes all of the code highlighting making it (plain white) less readable.

I want to set the bottom white color to this '#f4f4f4' which would be the same color as the background color for the save button but I can't seem to do it. I've tried creating another view and add a flex of one to fill it but it wasn't filling the rest of the screen. It just added an extra row instead of filling the remaining space.

  render() {
    if (!this.state.isReady) {
      return (
        <View
          style={{
            alignItems: "center",
            justifyContent: "center",
            flex: 1
          }}
        >
          <Progress.Bar indeterminate color={Themes.primaryTheme} />
        </View>
      );
    }
    return (
      <Container>
        <Content>
          <ListItem itemDivider>
            <Text
              style={{
                fontWeight: "500",
                fontSize: 18,
                color: Themes.primaryTheme
              }}
            >
              Show
            </Text>
          </ListItem>
          <ListItem style={{ borderBottomWidth: 0, height: 35 }}>
            <Body>
              <Text>Men</Text>
            </Body>
            <Right>
              <Switch
                thumbColor={Themes.primaryTheme}
                value={this.state.showMen}
                onValueChange={value => this.setState({ showMen: value })}
              />
            </Right>
          </ListItem>
          <ListItem style={{ borderBottomWidth: 0, height: 35 }}>
            <Body>
              <Text>Women</Text>
            </Body>
            <Right>
              <Switch
                thumbColor={Themes.primaryTheme}
                value={this.state.showWomen}
                onValueChange={value => this.setState({ showWomen: value })}
              />
            </Right>
          </ListItem>
          <ListItem style={{ borderBottomWidth: 0, height: 35 }}>
            <Body>
              <Text>Other</Text>
            </Body>
            <Right>
              <Switch
                thumbColor={Themes.primaryTheme}
                value={this.state.showOther}
                onValueChange={value => this.setState({ showOther: value })}
              />
            </Right>
          </ListItem>
          <ListItem itemDivider>
            <Text
              style={{
                fontWeight: "500",
                fontSize: 18,
                color: Themes.primaryTheme
              }}
            >
              Age Range
            </Text>
            <Text style={{ marginTop: 2, marginLeft: 15 }}>
              {`${this.state.minAge} - ${this.state.maxAge}`}
            </Text>
          </ListItem>
          <ListItem style={{ borderBottomWidth: 0 }}>
            <Body>
              <MultiSlider
                selectedStyle={{ backgroundColor: Themes.primaryTheme }}
                containerStyle={{ marginLeft: 20 }}
                markerStyle={{
                  borderWidth: 12,
                  borderColor: Themes.primaryTheme
                }}
                min={18}
                max={100}
                values={[this.state.minAge, this.state.maxAge]}
                onValuesChange={values =>
                  this.setState({ minAge: values[0], maxAge: values[1] })}
              />
            </Body>
          </ListItem>
          <ListItem itemDivider>
            <Text
              style={{
                fontWeight: "500",
                fontSize: 18,
                color: Themes.primaryTheme
              }}
            >
              Other Settings
            </Text>
          </ListItem>
          <ListItem style={{ height: 50 }}>
            <Body>
              <Text>Allow Notifications</Text>
            </Body>
            <Right>
              <Switch
                thumbColor={Themes.primaryTheme}
                value={this.state.showOther}
                onValueChange={value => this.setState({ showOther: value })}
              />
            </Right>
          </ListItem>
          <ListItem itemDivider>
            <Button rounded>
              <Text>Save</Text>
            </Button>
          </ListItem>
          {/* <View style={{ flex: 1, backgroundColor: "#f4f4f4" }} /> */}
        </Content>
      </Container>
    );
  }

enter image description here

Upvotes: 0

Views: 777

Answers (1)

user7554295
user7554295

Reputation: 430

Try to put style in your to color the rest of the screen:

<Container style={{ backgroundColor:"#f4f4f4" }}>

Upvotes: 1

Related Questions