How to make text centered in the middle of a circle with react native svg?

Question

This one is simple, but I'm kind of lost.

How can I make the Text in the middle (vertical and horizontal) of the circle? Or everything in the middle of the Svg (and then the text will be in the middle of the circle)

const size = width < height ? width - 32 : height - 16
const strokeWidth = 25
const radius = (size - strokeWidth) / 2
const circunference = radius * 2 * Math.PI

return (
    <Svg width={width} height={size}>
        <Text>
            Hey
        </Text>
        <Circle
            stroke="#2162cc"
            fill="none"
            cx={size / 2}
            cy={size / 2}
            r={radius}
            strokeDasharray={`${circunference} ${circunference}`}
            {...{ strokeWidth, strokeDashoffset }}
        />
    </Svg>
)

If you want the `Hey` text to be inside `Circle` component then you will have to put this as child in `Circle` and then to keep it in center you can use css `alignItems: 'center', justifyContent: 'center'`...... OR else you will have to make the text component `position: absolute` (Not Recommended) — Milind Agrawal, Sep 19 '19 at 14:31
@MilindAgrawal Could you please provide a full example? Not sure what you mean on your comment — Vencovsky, Sep 19 '19 at 14:34
If you can create a demo link then maybe I can make the changes and share with you. — Milind Agrawal, Sep 19 '19 at 14:36
@MilindAgrawal everything you need is in the question, and it's very simple, everything is from `react-native-svg` — Vencovsky, Sep 19 '19 at 14:37

Milind Agrawal · Answer 1 · 2019-09-19T15:03:16.447

You will have to use Text component from react-native-svg as shown below. Hope this helps

import React, { Component } from "react";
import Svg, { Circle, Text } from "react-native-svg";

class Demo extends Component {
  render() {
    const width = 100;
    const height = 100;
    const size = width < height ? width - 32 : height - 16;
    const strokeWidth = 25;
    const radius = (size - strokeWidth) / 2;
    const circunference = radius * 2 * Math.PI;

    return (
      <Svg width={width} height={size}>
        <Text
          stroke="purple"
          fontSize="15"
          x={size / 2}
          y={size / 2}
          textAnchor="middle"
        >
          Hey
        </Text>
        <Circle
          stroke="#2162cc"
          fill="none"
          cx={size / 2}
          cy={size / 2}
          r={radius}
          strokeDasharray={`${circunference} ${circunference}`}
        />
      </Svg>
    );
  }
}

export default Demo;

Using TS gives error the Svg Text has no `children` property.... I wonder why — testing_22, Jun 27 '22 at 22:59

Daniel B. · Answer 2 · 2019-09-19T15:12:21.270

Wrap the top SVG element in a View element, then, use position absolute to position the circle to act as a background (add 'padding' using top: 3, left: 3, if you need some padding for the circle not to be cut out).

Set alignItems:'center', justifyContent: 'center' on the most outer View element, to align the text to the center of the view.

Example

<View style={{alignItems: 'center', justifyContent: 'center'}}>
    <View style={{position: 'absolute'}}>
      <Svg width={width} height={size} >
          <Circle
              stroke="#2162cc"
              fill="none"
              cx={size / 2}
              cy={size / 2}
              r={radius}
              strokeDasharray={`${circunference} ${circunference}`}
              {...{ strokeWidth, strokeDashoffset }}
          />
      </Svg>
      <Text>
         Hey
      </Text>
   </View>
</View>

Note

This solution will work for any type of element you want to center, no matter how complex, not just for simple text.

Note that the code will only work if you move the second line of `View` to above the `Text` — testing_22, Jun 28 '22 at 00:14

How to make text centered in the middle of a circle with react native svg?

2 Answers2

Example

Note