React Native floating image - react-native

Question

I want to make a floating image that looks like this, float on a carousel
1
I've done this
const styles = StyleSheet.create({
manualHeader: {
backgroundColor: color.light_blue,
height:150,
width:150,
borderRadius: 150/2,
alignItems: 'center',
},
manualImage: {
height: normalize(60),
width: normalize(60),
resizeMode: 'contain',
marginVertical: normalize(15),
},
});
<View style={styles.manualContainer}>
<View style={styles.manualHeader}>
<Image style={styles.manualImage} source={item.image} />
</View>
<View style={styles.manualBody}>
</View>
</View>
and it looks like this
!2

Answer 1

This is a simple example using margin. Also, we can use absolute positioning.
Also, I've created the below example in the snack.
https://snack.expo.io/Sk882TV1r
In the example below, just add your image source.
import * as React from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';
// or any pure javascript modules available in npm
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
Change code in the editor and watch it change on your phone!.
</Text>
<View style={styles.mybody}>
<View style={styles.imageContainer}>
<Image style={styles.imageStyle} source={{}}/>
</View>
<View style={styles.bodyContainer}>
<Text style={styles.bodyParagraph}>
Local files and assets can be imported by dragging and dropping them into the editor
Local files and assets can be imported by dragging and dropping them into the editor
Local files and assets can be imported by dragging and dropping them into the editor
Local files and assets can be imported by dragging and dropping them into the editor
</Text>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#ecf0f1',
padding: 8,
},
imageContainer:{
marginTop: -70,
justifyContent: 'center',
alignItems: 'center'
},
imageStyle:{
height: 150,
width:150,
backgroundColor:'yellow',
borderRadius:150/2,
alignItems: 'center',
},
paragraph: {
margin: 24,
marginBottom:100,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
mybody:{
backgroundColor:'red'
},
bodyContainer: {
alignItems: 'center',
justifyContent: 'center',
padding: 24,
// backgroundColor:'red'
},
bodyParagraph:{
margin: 10,
marginBottom:100,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
}
});
The final output looks like this.
Thanks!