Making react native TopNavigation bar absolute

Question

So what i want to achieve is a navigation bar that has a background color of blue and have a 60% opacity so that it can show the image behind it. I can only achieve this by making the header's position an absolute but it wont let me click the back button.

here is my code stacknavigator

const UnregisteredNavigator = () => {


return (
    <Stack.Navigator
      screenOptions={({ navigation,route  }) => ({
        headerStyle: {
          height: 60
        },
        header: ({}) => {
          return (
            <ThemedTopNavigation navigation={navigation} route={route} />
          );
        },
    })}
    >
      <Stack.Screen name="LandingScreen" component={LandingScreen} options={{headerShown:false}} />
      <Stack.Screen name="Login" component={SignInScreen}  />
    </Stack.Navigator>
  );
};

and here is my ThemedTopNavigation code

const TopNavigationBar = ({ navigation: { goBack },route,eva }) => {
  const themeContext = React.useContext(ThemeContext);
  console.log("styled", eva);

  const [menuVisible, setMenuVisible] = React.useState(false);
  const [checked, setChecked] = React.useState(false);


  const onCheckedChange = (isChecked) => {
    themeContext.toggleTheme()
    setChecked(isChecked);
  };
  const backFunction = () => {
    alert("back");
    // goBack()
  };

  const renderBackAction = () => (
    <TopNavigationAction style={{backgroundColor:"red",zIndex: 1, position:'relative'}} icon={BackIcon} onPress={backFunction}/>
  );
  return (
    <Layout  style={eva.style.navLayout}>
        <TopNavigation
                style={[eva.style.navContainer, styles]}
                alignment='center'
                title={()=>(<Button>CLICK</Button>)}
                accessoryLeft={renderBackAction}
              />
      </Layout>
  );
};

I am using UI kitten. anyone can help me?