reactjsreact-nativereact-native-iosreact-android

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

Solution

  • 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