Positioning a image over text

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

score 2 · Accepted Answer · answered Jan 08 '21 at 12:34

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

Thank you for your response! That only kind of works it centers the image over the text not above it — mick1996, Jan 08 '21 at 12:52
Okay, so the image should be behind the text as a background? Judging by your drawing I thought thats what you wanted to achieve — redberry, Jan 08 '21 at 12:55
Sorry made a silly mistake there, had the text above the image. Thank you for your help! — mick1996, Jan 08 '21 at 12:57

b3hr4d · Answer 2 · 2021-01-08T12:53:43.913

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>

Unfortunately didn't work but thank you for your help! – mick1996 Jan 08 '21 at 12:58 — mick1996, Jan 08 '21 at 12:58

score 0 · Answer 3 · answered Jan 08 '21 at 12:34

0

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>

answered Jan 08 '21 at 12:34

RowanX

1,272
2
14
27

Positioning a image over text

3 Answers3