How to display 4 images positioned proportionally on screen

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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

.item {
  width: 50%;
}

.item img {
  width: 100%;
}

<!-- language: lang-html -->

<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>

<!-- end snippet -->

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/

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

Solution Below

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.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%;
}
}

<!-- language: lang-html -->

<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>

<!-- end snippet -->

> 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

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.