How to put an position:"absolute" component on top of another

Question

I have this return script for file that puts 2 components SearchBar and SwipeLR together

  return(   <SafeAreaView style={{flex:1}}>
        <SearchBar/>
        <SwipeLR
        data={data.userArray}
        renderItem={({item}) => 
        <Profile profilePic={item.image} bgImg={item.bgImg}  bio={item.bio} name={item.name}/>

      }
        onSwipeLeft={onSwipeLeft}
        onSwipeRight={onSwipeRight}
         />  </SafeAreaView> )}

It currently looks like this,its basicaly a swipe left an right screen(like tinder).The green bordered box is supposed to be on top of everything(but i cant seem to achive that)

here is the stylesheet script for the green box

searchResultContainer:{
    ...StyleSheet.absoluteFill,
    width:"100%",
    height:80,
    position:"absolute",
    top: 50,
    left: 0,
    backgroundColor:"white",
    zIndex:1,elevation:2,
    borderWidth:5,
    borderColor:"green",
    
}

here is the stylesheet for the SwipeLR component

import { StyleSheet } from 'react-native';


const styles = StyleSheet.create({
  root: {
    flex: 1,
    width: '100%',
  },
  animatedCard: {
    width: '100%',
    height: '100%',
  },
  nextCardContainer: {
    ...StyleSheet.absoluteFillObject,

    justifyContent: 'center',
    alignItems: 'center',
  },
  like: {
    width: 150,
    height: 150,
    position: 'absolute',
    top: 10,
    zIndex: 1,
    elevation: 1,
  },
});

export default styles;