Rendering text on a circular circumference in react native

Question

I have a general question.

If I have a circle and I would like to render text along the top arch of the circle then how would I do it in react native?

I would have posted an example of how I would attempt this but in all honesty I haven't got a clue how I would even start.

Answer 1

Thanks to msand: (https://github.com/react-native-community/react-native-svg/issues/972)

Here is how to do it without expo:

import React, { Component } from 'react';
import { View, Image } from 'react-native';
import {  Circle, Text as SvgText, TextPath, TSpan, G, Svg }
  from 'react-native-svg';

export class ListScreen extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center' }}>

        <Svg position="absolute" height="200" width="200"
          viewBox="0 0 300 300">
          <G id="circle">
            <Circle
              r={75}
              x={150}
              y={176}
              fill="none"
              stroke="#fff"
              strokeWidth={14}
              transform="rotate(-145)"
            />
          </G>
          <SvgText fill="#000" fontSize="14">
            <TextPath href="#circle">
              <TSpan dx="0" dy={-20}>
                Text along a curved path2
              </TSpan>
            </TextPath>
          </SvgText>
        </Svg>
        <View>
          <Image
            style={{ height: 120, width: 120, borderRadius: 60,
              marginTop: 70 }}
            source={require('./dog.jpg')}
          />
        </View>
      </View>
    )
  }
}

And with expo:

import * as React from 'react';
import { View, Image } from 'react-native';
import { Constants, Svg } from 'expo';

const { Circle, Text, TextPath, TSpan, G, Path } = Svg;

const SvgComponent = props => (
  <View style={{ flex: 1, justifyContent: 'center',
    paddingTop: Constants.statusBarHeight, padding: 0 }}>
    <Svg height="100%" width="100%" viewBox="0 0 300 300" {...props}>
      <G id="circle">
        <Circle
          r={100}
          x={150}
          y={150}
          fill="none"
          stroke="none"
          strokeWidth={0}
          transform="rotate(-135)"
        />
      </G>
      <Image
        style={{ width: 220, height: 220, borderRadius: 110,
          marginLeft: 68, marginTop: 175 }}
        source={require('./doggy.jpg')}
      />
      <Text fill="#000" fontSize="14">
        <Text fill="#000" fontSize="14">
          <TextPath href="#circle">
            <TSpan dy={0}>
              Text along a curved path...
            </TSpan>
          </TextPath>
        </Text>
      </Text>
    </Svg>
  </View>
);