How can I position two buttons on top of the background side by side and at the bottom of the screen in React Native?

I have a container with a position of relative and an inner </View> element with a position of absolute so the buttons sit on top of the video screen in the background.

When I give the latter its property of absolute, it no longer stays at the bottom of the screen, but I need to give it this so it stays 'on top' of the image behind it.

Here are screenshots of before and after the inner element position on absolute:

Here's my code including the absolute property:

if (props.stream) {
    return (
      <>
        <TouchableWithoutFeedback onPress={handleScreenPress}>
          <View style={styles.videoViewWrapper}>
            <RTCView style={styles.android} streamURL={props.stream.toURL()} />
            <CountDown time={time} />
            {/* {showButtons && */}
            <View style={{
              // position: 'absolute',
            }}>
              <Button
                icon="phone"
                mode="contained"
                style={{ width: 200, margin: 10 }}
                onPress={handleEndCall}
              >
                End Call
              </Button>
              <Button
                icon="phone"
                mode="contained"
                style={{ width: 200, margin: 10 }}
                onPress={handleSpeakerSwitch}
              >
                Speaker
                </Button>
            </View>
            {/* } */}
          </View>
        </TouchableWithoutFeedback>
      </>
    );
  }
  return (<> <Loader title="Connecting Your Call.." /> </>)
}

const styles = StyleSheet.create({
  videoViewWrapper: {
    flex: 1,
    overflow: 'hidden'
  },
  android: {
    flex: 1,
    position: 'relative',
    backgroundColor: 'black'
  }
})

export default VideoCall;

I am seeking some tips as to how I could align the two buttons side by side at the bottom and on top of the image behind it, as I'm struggling.

If you want to achieve something like this, then see the code :

Check code :

export default class App extends React.Component {
render() {
return (
<View style={{flex:1}}>
<View style={{flex:1, flexDirection:'row', alignItems:'flex-end',}}>     
<TouchableOpacity
style={{width:'40%' , backgroundColor:'blue' ,marginHorizontal:10}}
>
<Text style={{color:'white',alignSelf:'center', padding:5}}>End Call</Text>
</TouchableOpacity>
<TouchableOpacity
style={{width:'40%', backgroundColor:'blue',marginHorizontal:10}}
>
<Text style={{color:'white',alignSelf:'center', padding:5}}>Pick Call</Text>
</TouchableOpacity>
</View>
</View>
);
}
}

check the link : expo snack

Hope it helps .feel free for doubts

Either you can give them separate positioning, top and left for the first, and top and right for the second button, or put them in a view and set flexDirection of the view to row so they could stay side by side. I have a card object and two buttons on top of it, and it works that way.