How to display 4 images positioned proportionally on screen

Question

I want 4 images to be proportionally displayed on screen and I am really bad with CSS generally, so I can't figure out here how to do it. I was trying with flex, to set it on 1 and then on sub-views to set it on 0.25, but it doesn't work, even tried flexWrap, still nothing, it's always in one row, as I set flexDirection to be row

<View style={getStyle(styles, ["container"], this.props.theme)}>
    <View style={styles.itemContainer}>
      <TouchableHighlight
        onPress={() => this.onHandlePress("DevicesNavigator")}
      >
        <Icon name="pencil" color="yellow" size={100} />
      </TouchableHighlight>
      <Text style={styles.imageText}>
        {strings("initialTab.devicesTab")}
      </Text>
    </View>
    <View style={styles.itemContainer}>
      <TouchableHighlight
        onPress={() => this.onHandlePress("ReportsNavigatior")}
      >
        <Icon name="tablet" color="yellow" size={100} />
      </TouchableHighlight>
      <Text style={styles.imageText}>{strings("initialTab.reports")}</Text>
    </View>
    <View style={styles.itemContainer}>
      <TouchableHighlight
        onPress={() => this.onHandlePress("SyncNavigatior")}
      >
        <Icon name="refresh" color="yellow" size={100} />
      </TouchableHighlight>
      <Text style={styles.imageText}>{strings("initialTab.sync")}</Text>
    </View>
    <View style={styles.itemContainer}>
      <TouchableHighlight
        onPress={() => this.onHandlePress("SettingsNavigatior")}
      >
        <Icon name="gear" color="yellow" size={100} />
      </TouchableHighlight>
      <Text style={styles.imageText}>{strings("initialTab.settings")}</Text>
    </View>
  </View>

And style:

  container: {
    flex: 1,
    justifyContent: "center",
    alignContent: "center",
    flexDirection: "row"
  },
  containerLIGHT_THEME: {
    backgroundColor: colors.initialFourScreenBackgroundColorLight
  },
  containerDARK_THEME: {
    backgroundColor: colors.initialFourScreenBackgroundColorDark
  },
  itemContainer: {
    flex: 0.25
  },
  imageText: {
    color: "green"
  }
});

Display

Please show some demo image, how you want to display images? — Karan Mehta, Jan 06 '20 at 09:32
@KaranMehta I post it in edit, u can check screen shot, that the idea — Serlok, Jan 06 '20 at 09:37
@Awais what does it say? It's light shot uploaded, u should be able to see it — Serlok, Jan 06 '20 at 10:24
this error message `The requested URL /qjx9v0 was not found on this server.`, and also is it possible to post a minimal working example — Awais, Jan 06 '20 at 10:27

score 0 · Answer 1 · edited Jan 06 '20 at 11:07

0

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 1000px;
}

.item {
  width: 50%;
}

.item img {
  width: 100%;
}

<div class="container">
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  <div class="item">item 4</div>
</div>

You can set the width of the container & item, thereby creating a break point and wrap the items, here is a JSFiddle with dummy images https://jsfiddle.net/ah1ws6oj/

edited Jan 06 '20 at 11:07

double-beep

5,031
17
33
41

answered Jan 06 '20 at 10:36

Aswin

23
4

I get what u did here, but still can't reproduce on react- native "CSS", because it is different, I have everything in single row – Serlok Jan 06 '20 at 10:44

score 0 · Answer 2 · answered Jan 06 '20 at 10:42

0

Its simple i use Simple flex with some media queries for mobile

Solution Below

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex: 1 0 21%; 
  margin: 5px;
  height: 100px;
  background-color: blue;
}

@media only screen and (max-width: 600px) {
 .child {
  flex: 1 0 35%;
}
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

With flex-grow: 1 defined in the flex shorthand [Ref]

(https://www.w3schools.com/css/css3_flexbox.asp)

In your case .child = .itemContainer and .parent = .container

I updated this example https://stackoverflow.com/questions/29546550/flexbox-4-items-per-row/45384426

answered Jan 06 '20 at 10:42

Awais

4,752
4
17
40

I have problem because this is not CSS, it's react-native CSS and some properties are different, I can't make it to go in row, it's always in one column – Serlok Jan 06 '20 at 10:46
But you wrote some style in your question just update that no need of html change – Awais Jan 06 '20 at 11:22
Yes, that is react-native CSS, it's similar to regular, but attributes are different – Serlok Jan 06 '20 at 12:27
I am also using same attribute just changed the value, like you wrote `flex: 0.25` and i wrote `flex: 1 0 21%;` – Awais Jan 06 '20 at 12:31
There is no percentage in react-native CSS, I tried equivalents of that, still no progress. And this `flex: 1 0 35%;` doesn't exist in react-native CSS – Serlok Jan 06 '20 at 12:32
U can only set `flex: 1 (or some number)` – Serlok Jan 06 '20 at 12:33
Oh sorry now i got it, well i am not a pro of react but anyhow i will try it later on, and will get back to you – Awais Jan 06 '20 at 12:36

score 0 · Accepted Answer · answered Jan 08 '20 at 08:10

I managed to make it work.

STYLE

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexWrap: "wrap",
    flexDirection: "row"
  },
  containerLIGHT_THEME: {
    backgroundColor: colors.initialFourScreenBackgroundColorLight
  },
  containerDARK_THEME: {
    backgroundColor: colors.initialFourScreenBackgroundColorDark
  },
  itemContainer: {
    marginTop: "15%",
    marginLeft: "20%"
  },
  imageText: {
    color: "green"
  }
});

Make it flex-wrap, as others suggested, make it go in row, and just set margins.

How to display 4 images positioned proportionally on screen

3 Answers3