space evenly based on icon rather than text-CodePudding

I am trying to space these two bodies together evenly across the device. While implementing it the way I currently am, the space-evenly renders but it spaces it by the words. I would like the space-evenly to base its spacing on the icon instead.

I have provided a demo here as well as the code below.

  render() {
    return (
      <View
        style={{
          flexDirection: 'row',
          top: 75,
          justifyContent: 'space-evenly',
        }}>
        <View style={{ justifyContent: 'center', alignItems: 'center' }}>
          <MaterialCommunityIcons
            name="map-marker-radius-outline"
            color="black"
            size={50}>
          </MaterialCommunityIcons>

          <Text style={{ fontSize: 15 }}>
            WORD
          </Text>
        </View>

        <View style={{ justifyContent: 'center', alignItems: 'center' }}>
          <MaterialCommunityIcons
            name="star-outline"
            color="black"
            size={50}>
          </MaterialCommunityIcons>

          <Text style={{ fontSize: 15 }}>
              WORD WORD
           </Text>
        </View>
      </View>
    );
  }
}

CodePudding user response：

if I understand your issue right, you need both elements to take the same space across the available width. For that, you have to add flex: 1 to both of your inner views

<View style={{ justifyContent: 'center', alignItems: 'center', flex: 1 }}>