How to position text into part of image background in react native?

teteyi3241 0
Viewed 21

I have image background with "3 level circle shape" (see image) enter image description here

I would like to set text "hello" into center of circles. Looks like its almost imposible for all devices.

How can I do it?

Mu current code is:

return (
<ImageBackground source={background} resizeMode="cover" style={{ width: '100%', height: '100%' }}>

</ImageBackground>

I tried to use absolute position, but it is bronek on second device. Is there any trick?

Original image size (in asset folder) is 1080x2400 Thank you.

absolute background react-native image
1 Answers

Why not create the circles manually? That way centering can be taken care of automatically. Example (you'll have to tweak values/add circles):

    <View style={{ flex: 1, backgroundColor: '#F9F3EE' }}>
      <View
        style={{
          backgroundColor: '#F6EFF2',
          top: -100,
          width: 700,
          height: 700,
          left: -(700 - Dimensions.get('window').width) / 2,
          justifyContent: 'center',
          alignItems: 'center',
          borderRadius: 350,
        }}
      >
        <View
          style={{
            backgroundColor: '#ECE4DD',
            width: 500,
            height: 500,
            justifyContent: 'center',
            alignItems: 'center',
            borderRadius: 250,
          }}
        >
          <View
            style={{
              backgroundColor: '#E2D7D0',
              width: 300,
              height: 300,
              justifyContent: 'center',
              alignItems: 'center',
              borderRadius: 150,
            }}
          >
            <Text>Hi</Text>
          </View>
        </View>
      </View>
    </View>

image

userVqYI0
Related