How to expand view width to available free space in react native

Question

Hi I am trying to design a screen in react native. If you see below screenshot here three views are there. a) image b) center view where text is appeared c) circle view

I want to expand center view width such it covers complete available space. I tried to do using flex property but couldn't make it. Does anyone know how to do it ?

<View style={{ flexDirection: "column" }}>
  <View style={{ flexDirection: "row" }}>
    <Icon name="user" size={30} />
    <Text
      style={{
        textAlignVertical: "center",
        marginLeft: 20
      }}
    >
      Ajay Saini
    </Text>
  </View>
  <Text style={{ marginLeft: 50 }}>Hello</Text>
</View>


<View style={{ flexDirection: "row", width: "100%" }}>
  <Icon name="user" size={30} />
  <View
    style={{
      flex: 1,
      flexDirection: "column",
      marginLeft: 20
    }}
  >
    <Text>Williams</Text>
    <Text>
      {item.text}jhfjks ahfdkjsdh fjkshfjksaddhfjksdahfjkds
      ahajkdhfjksahdf
    </Text>
  </View>
  <View
    style={{
      flex: 1,
      flexDirection: "row",
      justifyContent: "flex-end"
    }}
  >
    <TouchableOpacity
      style={{
        borderWidth: 1,
        borderColor: "rgba(0,0,0,0.2)",
        alignItems: "center",
        justifyContent: "center",
        width: 30,
        height: 30,
        backgroundColor: "#fff",
        borderRadius: 100
      }}
    />
  </View>
</View>

Answer 1

Since your circular view has flex: 1, it tries to occupy all the free space. Also, center view tries to do the same. Which results in splitting the free space evenly, therefore removing flex: 1 style from circular view will be enough.

Additionally, you can try adding a justifyContent: 'space-between' to most outer view. This is a great option to simplify more complicated designs.

<View style={{ flexDirection: 'row' }}>
  <Icon name="user" size={30} />
  <View
    style={{
      flex: 1,
      flexDirection: "column",
      marginLeft: 20
    }}
  >
    <Text>Williams</Text>
    <Text>
      {item.text}jhfjks ahfdkjsdh fjkshfjksaddhfjksdahfjkds
      ahajkdhfjksahdf
    </Text>
  </View>
  <View
    style={{
      flexDirection: "row",
      justifyContent: "flex-end"
    }}
  >
    <TouchableOpacity
      style={{
        borderWidth: 1,
        borderColor: "rgba(0,0,0,0.2)",
        alignItems: "center",
        justifyContent: "center",
        width: 30,
        height: 30,
        backgroundColor: "#fff",
        borderRadius: 100
      }}
    />
  </View>
</View>

Answer 2

Try to change this part to flex: 2.

<View
  style={{
    // flex: 1,
    flex: 2
    flexDirection: "column",
    marginLeft: 20
  }}
>
  <Text>Williams</Text>
  <Text>
    {item.text}jhfjks ahfdkjsdh fjkshfjksaddhfjksdahfjkds 
    ahajkdhfjksahdf
  </Text>
</View>