Positioning a image over text - reactjs

Question

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
},

Answer 1

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

Answer 2

I think you forget to add display: flex, take look at this.
const App = () => (
<div style={styles.trackerBox}>
<img style={styles.logo} src="https://cdn1.byjus.com/wp-content/uploads/2019/11/essay-on-christmas.png" />
<h5 style={styles.trackerName}>Title</h5>
</div>
);
const width = 400;
const styles = {
trackerBox: {
width: width * 0.3,
borderRadius: 20,
backgroundColor: '#19405D',
height: width * 0.3,
display:"flex",
flexDirection:"column",
justifyContent: 'center',
margin:"auto"
},
trackerName: {
textAlign: 'center',
color: 'white',
fontSize: 20,
margin: 5
},
logo: {
height: 25,
width: 25,
margin: "0 auto"
},
}
ReactDOM.render(<App />, document.getElementById("react"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 3

You can use ImageBackground instead of Image from react-native
<ImageBackground style={styles.theImage} source={{uri : item.imageUrl}}>
<Text>Text as a child to ImageBackground</Text>
</ImageBackground>