0

I have the following React Native code:

        <View style={itemStyle.content}>
             <Text
                style={textIndexStyle.content}>
                {this.props.element["indexNumber"] + 1}
            </Text>

            <Image
              source={{uri: someUri}}
              style={imageStyle.content}
            />

        </View>

With this styling:

const imageStyle = StyleSheet.create({
    content:{
        alignSelf: 'flex-end',
        justifyContent:'flex-end',
        backgroundColor: '#7CFC00',//light green
        width: '100%',
        height: '75%',
        resizeMode: 'contain',
        flexBasis: '50%'
    }
});


const textIndexStyle = StyleSheet.create({
    content:{
        // position: 'absolute',
        // transform: ('50%', '50%'),
        alignSelf: 'flex-start',
        backgroundColor: '#ffa500',
        textAlign: 'center',
        fontSize: 20,
        fontWeight: 'bold',
        width: getPercentageOfSmallest(0.07),
        height: getPercentageOfSmallest(0.07)
    }
});

const itemStyle = StyleSheet.create({
    content:{
        flexDirection:'column',
        alignItems:'flex-start',
        justifyContent:'flex-start',
        backgroundColor: '#9400D3',//purple
        paddingRight: '10%',
        // marginTop: -50,
        width: getPercentageOfWidth(0.7),
    }
});

The result is this:

enter image description here

I would like the orange box with the number to be placed inside the image container(on the green background), rather than on top of it(on the purple background).

As it can be seen in the commented code, I tried:

  • setting a negative margin for the outer container
  • making the position absolute and then translating the orange box

However, that didn't work.

Any idea how I can make the orange box with the text to be put on top of the image?

bsky
  • 19,326
  • 49
  • 155
  • 270
  • when you use absolute, make sure the parent is position relative. Also remove flex-start as you don't want to use flex when you are using absolute. – Aslam Oct 05 '17 at 11:02
  • [Center text over an image in flexbox](https://stackoverflow.com/q/35871294/3597276) – Michael Benjamin Oct 05 '17 at 11:04

1 Answers1

0

Try wrapping your text in a view(with a transparent background) and place it inside the image.

<View style={itemStyle.content}>
    <Image
      source={{uri: someUri}}
      style={imageStyle.content}>
      <View>
        <Text
            style={textIndexStyle.content}>
            {this.props.element["indexNumber"] + 1}
        </Text>
      </View>
    </Image>
</View>
Apurva jain
  • 1,460
  • 13
  • 14
  • This puts the text at the bottom of the image, and I can find no way of moving it to the top. I added `flexDirection: 'column'`, `alignItems: 'flex-start'`, `justifyContent: 'flex-start'` to the `Image` and `View` container and `alignSelf: 'flex-start'` to the `Text` container but still the text can't be moved. – bsky Oct 05 '17 at 11:52
  • ``` var styles = StyleSheet.create({ mainContainer: { flex: 1, justifyContent: 'flex-start', alignItems: 'center', backgroundColor: '#000000', width: 320 }, image: { paddingTop: 60, width: 320, height: 120 }, textContainer: { height: 120, width: 320, backgroundColor: 'rgba(0,0,0,0)', }, text: { fontSize: 20, textAlign: 'left', backgroundColor: 'rgba(0,0,0,0)', color: 'white' } }); – Apurva jain Oct 06 '17 at 03:52