Aligning image over 2 background views - reactjs

Question

I have two background views with different colors. Both their own size.
Over these backgrounds, I need an image aligned on the left, over both other views.
how can i accomplish this?
export default class MainScreen extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.rectangle1}>
<Image
source={require('../assets/dame.png')}
style = {styles.image}/>
</View>
<View style={styles.rectangle2}>
</View>
</View>
)
}
}
Added sample image what to accomplish:

Answer 1

besides the use of absolute positioning, here is another tip to achieve a similar layout on most devices is the use of Dimensions and constants for the width and height of the devices that.
based on the information provided, here is how my design will look like:
////import { Dimensions } from react-native;
const { width: deviceWidth, height: deviceHeight } = Dimensions.get('window');
export default class MainScreen extends Component {
render() {
return (
<View style={{ backgroundColor: 'magenta', height: deviceHeight }}>
<View
style={{
width: deviceWidth * 0.44,
alignSelf: 'flex-start',
}}
>
<Image
source={{ uri: 'https://ui-avatars.com/api/?name=Alice' }}
style={{ width: '100%', height: '100%' }}
/>
</View>
<View
style={{
backgroundColor: 'black',
position: 'absolute',
width: deviceWidth * 0.56,
height: deviceWidth * 0.56,
alignSelf: 'flex-end',
opacity: 0.7
}}
/>
<View
style={{
backgroundColor: 'yellow',
width: deviceWidth * 0.7,
height: deviceWidth * 0.1,
position: 'absolute',
top: deviceHeight * 0.8,
alignSelf: 'center',
opacity: 0.8,
}}
/>
<View
style={{
backgroundColor: 'blue',
width: deviceWidth,
height: deviceWidth * 0.14,
position: 'absolute',
bottom: 0,
alignSelf: 'flex-end',
opacity: 0.8,
}}
/>
</View>
)
}
}
i suggest you keep experimenting to find out which method works best for your application.