I'm trying to position an image over text in a view. Im trying to position it like this:
Im just having a bit of trouble centering the image in the view. Here is the code:
<View style={styles.trackerBox}>
<Text style={styles.trackerName}>Test</Text>
<Image
source={{
uri: "https://imageLink.png"
}}
style={styles.logo}
/>
{this.props.user.test_trackers
.map(x => x.type)
.includes("test") ? (
<Icon
name="check-circle"
color={"#00FF00"}
size={25}
style={styles.linked}
/>
) : null}
</View>
and the style:
trackerBox: {
width: width * 0.3,
borderRadius: 20,
backgroundColor: "#19405D",
height: width * 0.3,
justifyContent: "center"
},
trackerName: {
textAlign: 'center',
color: "white",
fontSize: 20,
},
logo: {
height: 25,
width: 25,
position: "absolute",
top: 10,
right: 0,
left: 0
},
Here's how to achieve what you want
import React from 'react';
import { Text, View, StyleSheet, Dimensions, Image } from 'react-native';
export default function App() {
return (
<View style={styles.trackerBox}>
<Image
source={{
uri:
'https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg',
}}
style={styles.logo}
/>
<Text style={styles.trackerName}>Test</Text>
</View>
);
}
const { width } = Dimensions.get('window');
const styles = StyleSheet.create({
trackerBox: {
width: width * 0.3,
borderRadius: 20,
backgroundColor: '#19405D',
height: width * 0.3,
justifyContent: 'center',
},
trackerName: {
textAlign: 'center',
color: 'white',
fontSize: 20,
},
logo: {
height: 25,
width: 25,
alignContent: 'center',
alignSelf: 'center',
},
});
You can also try it here https://snack.expo.io/-PrSEkZ24