CODEWITHSUNDEEP
reactjsreact-nativereact-native-iosreact-android
mick1996
mick1996

Reputation: 606

Positioning a image over text

I'm trying to position an image over text in a view. Im trying to position it like this:

enter image description here

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

Upvotes: 1

Views: 153

Answers (3)

b3hr4d
b3hr4d

Reputation: 4588

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>

Upvotes: 1

RowanX
RowanX

Reputation: 1317

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>

Upvotes: 0

redberry
redberry

Reputation: 766

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

Upvotes: 2

Related Questions