flexbox flex grow View Container that contain <Text>DeliverNow!</Text> <Text>Current location</Text> <ChevronDownIcon/> need to take whole space

Question

** here is my home page code ** problem is View Container that contain <Text>DeliverNow!</Text> <Text>Current location</Text> <ChevronDownIcon/> need to take whole space. but it doesn't taking the whole left space and UserIcon need to come at last what i used flex-grow not work justify content property not work

    *enter code here*
 <SafeAreaView className="bg-white pt-5">
      <Text className='text-red-500'>
        <View className="flex flex-row pb-3 items-center mx-4 space-x-2">
          <Image
            source={{
              uri: "https://links.papareact.com/wru",
            }}
            className="h-7 w-7 bg-gray-300 rounded-full p-4"
          />

> > > > flex-grow property is used here
**just Below view tag **
          <View className='flex-1'>
            <Text className="font-bold text-xs text-gray-300 ">
              Deliver Now!
            </Text>
            <Text className="font-bold text-xl">
              Current Location
              <ChevronDownIcon size={20} color="#00CCBB" />
            </Text>
          </View>
          <UserIcon size={35} color="#00CCBB"/>
        </View>
      </Text>
    </SafeAreaView>

Answer 1

For the flex-1 to work the relationship should be siblings not parent-child. And the parent display of the siblings should be flex

Parent   // display flex
 - child // display flex-none or flex-1 or flex-auto
 - child // display flex-none or flex-1 or flex-auto

Your code is in the hierarchy of

<View>
  - <Image>
  - <View>    // This view is inside the other view because of which it is not showing the desired property.
     - <Text>
     - <Text>

For things to work use the following heirarchy

<View>
  - <Image>
<View>    
  - <Text>
  - <Text>

And the parent of both View should be having the flex display property