React Native place a text over SVG image

Question

I'm using libraries: "react-native-svg": "12.1.0" & "react-native-svg-transformer": "0.14.3"

import FooIcon from '../assets/images/icons/fooIcon.svg';

<View style={{ flex: 1, paddingTop: 8 }}>
   <FooIcon></FooIcon>
   <View style={{ position: 'absolute', top: 35, bottom: 0, left: 14, right: 0 }} >
      <Text>foo</Text>
   </View>
</View>

How can I have "foo" text centered over the FooIcon. The solution above does not center the text which is important because "foo" text length can change and it has to be in center in every case.

Answer 1

this chunk of code should do the work for you

    <View
    style={{
      justifyContent: 'center',
      alignItems: 'center'
    }}
    >
    <SVG /> //your svg image component goes here
    <Text
      style={{
        position: 'absolute'
      }}
    >
      Test
    </Text>
  </View>

Answer 2

I would recommend not to use an absolute position if the content size can change dynamically. I would build this with just using flex-box:

...
<View style={styles.itemContainer}>
  <Text>Foo</Text>
  <View style={styles.iconMock} />
</View>
...
const styles = StyleSheet.create({
  itemContainer: {
    alignItems: "center",
    //this has default flex: 0, which means the container will always have the size the children take.
    //we then tell it to centre all the children (items) which gives the needed effect.
  },
  iconMock: {
    backgroundColor: "blue",
    height: 50,
    width: 150,
  }
});

Building it this way the text will always be centred: