React Native layout - text/icons appear "under" the image instead of below - css

Question

I have the following layout:
<SafeAreaView style={styles.container}>
<Swipe
onSwipeRight={this.handleLikedJob}
onSwipeLeft={this.handlePassedJob}
keyProp="id"
data={jobs}
renderCard={this.renderCards}
renderNoMoreCards={this.renderNoMoreCards}
onCardClick={this.showCardInfo}
/>
<View styles={styles.buttonArea}>
<ActionButton
buttonColor="rgba(231,76,60,1)"
/>
<ActionButton
buttonColor="rgba(231,76,60,1)"
/>
<ActionButton
buttonColor="rgba(231,76,60,1)"
/>
</View>
</SafeAreaView>
Unfortunately I'm not seeing any action buttons.
my styles:
container: {
flex: 1,
backgroundColor: '#fff',
},
imageView: {
flex: 1,
alignSelf: 'stretch',
width: win.width * 0.97,
height: win.height * 0.55,
margin: 5,
elevation: 5,
shadowColor: '#202020',
shadowOffset: { width: 0, height: 0 },
shadowRadius: 5,
},
buttonArea: {
flex: 1,
},
Swipe component view is from the prop sent to it (renderCards):
<View style={styles.imageView}>
<ImageBackground
source={{ uri: image }}
style={{ width: '100%', height: '100%' }}
imageStyle={{ borderRadius: 15 }}
>
<Text style={styles.itemTitle}>
{job.title}
</Text>
<View style={styles.locationContainer}>
<Icon type="material" name="location-on" color="white" />
<Text style={styles.locationText}>
{job.location}
away
</Text>
</View>
</ImageBackground>
</View>
As far as I read, the buttonArea should appear below the Swipe component, not under it (which is not visible).
Any idea what I'm missing here?
My goal is just to show the buttonArea right below the Swipe component.
Swipe component has position absolute.