Quantcast
Channel: Active questions tagged react-native+android - Stack Overflow
Viewing all articles
Browse latest Browse all 30349

How to display 4 images positioned proportionally on screen

$
0
0

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

enter image description here


Viewing all articles
Browse latest Browse all 30349

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>