Image overlapping in react native - react-native

Question

I am using absolute position to overlap a component over an image. There is another component after it which is a view with an orange colored background. It goes behind the absolute positioned component. How can keep it after the absolute positioned component (the height of this component might vary so I cannot use margin or height etc here)?
Have a look at the snack: https://snack.expo.io/#codebyte99/overlap-test
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Image
source={{
uri: 'https://facebook.github.io/react/logo-og.png',
cache: 'only-if-cached',
}}
style={{width: 400, height: 100}}
/>
<View style={styles.overlap}>
<Text>Event1</Text>
<Text>Event2</Text>
<Text>Event3</Text>
<Text>Event4</Text>
<Text>Event5</Text>
<Text>Event6</Text>
<Text>Event7</Text>
</View>
<View style={{ backgroundColor: 'orange', height: 200, width: 500 }}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
overlap: {
width: 300,
backgroundColor: 'red',
borderColor: 'red',
borderWidth: 1,
position: 'absolute',
top: 80,
zIndex: 9999,
overflow: 'visible'
},
});
How it looks now:
what I want:

Answer 1

Do the orange and red box in one container and set this to an absolute position:
<View style={{position: "absolute", flexDirection:"column"}}
<View style={styles.YourStyleWithoutPositionAbsolute}>
<Text>Event1</Text>
<Text>Event2</Text>
<Text>Event3</Text>
<Text>Event4</Text>
<Text>Event5</Text>
<Text>Event6</Text>
<Text>Event7</Text>
</View>
<View style={{ backgroundColor: 'orange', height: 200, width: 500 }}/>
</View>