How to space items in React or React Native

Question

I am trying to space my components however I am having issues. I would like my grid to take up 90% of the screen and the gear icon to take 10%

 <View
      style={{
        paddingLeft: insets.left,
        paddingRight: insets.right,
        flex: 1,
        flexDirection: 'row',
      }}
      onLayout={event => {
        _handleWorkSpace(event);
      }}>
      <StatusBar hidden={true} />
      <View style={{flex: 1}}>
        <FlatGrid
          itemDimension={96}
          // maxDimension={128}
          data={items}
          style={styles.gridView}
          // staticDimension={{width: 128, height: 128}}
          fixed
          spacing={10}
          renderItem={({item}) => (
            <View
              onLayout={event => {
                var {x, y, width, height} = event.nativeEvent.layout;
                console.log(width, height);
              }}
              style={[styles.itemContainer, {backgroundColor: item.code}]}>
              <Text style={styles.itemName}>{item.name}</Text>
              <Text style={styles.itemCode}>{item.code}</Text>
            </View>
          )}
        />
      </View>
      <View style={{flex: 1}}>
        <Icon name="settings" size={30} />
      </View>
     </View>

What I have

What I am hoping for

I was able to get the look but I had to change the grid flex value to 12. I know it's not the correct way so I am trying to figure how to do this

Answer 1

const {width} = Dimensions.get('window');
<View
  style={{
    paddingLeft: insets.left,
    paddingRight: insets.right,
    flex: 1,
    flexDirection: 'row',
  }}
  onLayout={event => {
    _handleWorkSpace(event);
  }}>
  <StatusBar hidden={true} />
  <View style={{width : 0.9*width}}>
    <FlatGrid
      itemDimension={96}
      // maxDimension={128}
      data={items}
      style={styles.gridView}
      // staticDimension={{width: 128, height: 128}}
      fixed
      spacing={10}
      renderItem={({item}) => (
        <View
          onLayout={event => {
            var {x, y, width, height} = event.nativeEvent.layout;
            console.log(width, height);
          }}
          style={[styles.itemContainer, {backgroundColor: item.code}]}>
          <Text style={styles.itemName}>{item.name}</Text>
          <Text style={styles.itemCode}>{item.code}</Text>
        </View>
      )}
    />
  </View>
  <View style={{width : 0.1*width}}>
    <Icon name="settings" size={30} />
  </View>
 </View>

try this, don't forget to import Dimensions from react-native use cosnt {width} = Dimensions.... out of return statement.

Answer 2

You put flex: 1 in both View s, this means that both will try to take up 50% of the space (1+1). If you want one to take 90% and the other one 10%, one will need flex: 9 and the other one flex: 1 .

Just change the flex values:

<View style={{flex: 9}}>
  <FlatGrid
    ...
  />
</View>
<View style={{flex: 1}}>
  <Icon name="settings" size={30} />
</View>

To try to make it clearer: just imagine the sum of the flex values on the same level are 100%. Since you had 2 flex: 1 , 1+1=2=100%, so 1=50%.
By making the change I suggested ( flex: 9 and flex: 1 ) you can think of it like 9+1=10=100%, so 9=90% and 1=10%.

Answer 3

You can set your gear icon as an absolute element:

<View style={styles.grid}>
    <Octicons name="gear" size={iconSize} color="black" style={styles.icon} />
    <FlatGrid
        itemDimension={130}
        data={items}
        style={styles.gridView}
        spacing={10}
        renderItem={({ item }) => (
            <View style={[styles.itemContainer, { backgroundColor: item.code }]}>
                <Text style={styles.itemName}>{item.name}</Text>
                <Text style={styles.itemCode}>{item.code}</Text>
            </View>
       )}
   />
</View>

with the following styles:

grid: {
    alignSelf: 'center',
    width: width * 0.9,
},
icon: {
    position: 'absolute',
    right: -iconSize,
    top: 0,
}

Here is a working snack: https://snack.expo.dev/@hristoeftimov/absolute-icon