Search Section Behind Homepage Image in React Native and tailwindcss

Question

I'm working on a React Native project and trying to implement a search section behind the homepage image. I want the search bar to be partially obscured by the homepage image, creating a visually appealing effect.

Here's a simplified version of my search bar code structure:

`

// Main Container
    <View style={tw`flex-1 relative`}>
    <StatusBar style='light'/>
    <Image blurRadius={100} style={tw`absolute h-full w-full`} source={require('../weather-app/assets/Mirage.jpg')}/>
    <SafeAreaView style={tw`flex flex-1`}>
      {/* Search Section */}
        <View style={tw`mx-4 relative top-10`}>
            <View style={tw`flex-row justify-end items-center rounded-full ${showSearch?'bg-gray-500':'bg-transparent'}` }>
              {
                showSearch?(
                  <TextInput placeholder='Search any city' placeholderTextColor={'lightgray'} style={tw`pb-1 text-base text-white pl-6 h-10 flex-1`} />
                ):null
              }
                
                <TouchableOpacity onPress={()=> toggleSearch(!showSearch)} style={tw`rounded-full p-3 m-1 bg-gray-600`}>
                    <MagnifyingGlassIcon size="25" color="white" />
                </TouchableOpacity>
            </View>
            {
              location.length>0 && showSearch? (
                <View style={tw`absolute w-full bg-gray-300 top-16 rounded-3xl`}>
                  {
                    location.map((loc, index)=>{
                      const showBorder = index+1 != location.length;
                      let borderLine = showBorder? 'border-b-2 border-b-gray-500' : '';
                      return (
                        <TouchableOpacity onPress={()=>handleLocation(loc)} key={index} style={tw`flex-row items-center border-0 p-3 px-4 mb-[1] ${borderLine}`}>
                          <MapPinIcon size='20' color='gray' />
                          <Text style={tw`text-lg font-bold pl-2`}>Cairo, Egypt</Text>
                        </TouchableOpacity>
                      )
                    })
                  }
                </View>
              ):null
            }
        </View>`

And this is the Homepage image code:

`{/* HomePage Images */}
              <View style={tw`flex-row justify-center`}>
              <Image source={require('../weather-app/assets/partlycloudy.png')} style={tw`w-70 h-70`} />
              </View>`

I tried to use absolute positioning