React Native: TypeError with SvgText component on Android but not on iOS

Question

Problem

I'm working on a React Native project using TypeScript and react-native-svg to create an AttendanceCard component that includes a circular progress chart and percentage text. The component works perfectly on iOS, but I'm encountering a type error when running the app on Android

Error Message

Type '{ children: (string | number)[]; x: string; y: string; fontSize: string; textAnchor: "middle"; fill: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<TextProps, any, any>> & Readonly<TextProps>'.
Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<TextProps, any, any>> & Readonly<TextProps>'.

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import Svg, { Circle, Text as SvgText } from 'react-native-svg';
import { styles } from './styles';

const AttendanceCard = () => {
  const percentage = 75;

  return (
    <View style={styles.cardContainer}>
      <View style={styles.row}>
        <Svg height="100" width="100" viewBox="0 0 100 100">
          <Circle
            cx="50"
            cy="50"
            r="40"
            stroke="#9756AA"
            strokeWidth="10"
            fill="none"
            strokeDasharray={`${percentage * 2.5} ${100 * 2.5}`}
            rotation="-90"
            origin="50, 50"
          />
          <Circle
            cx="50"
            cy="50"
            r="40"
            stroke="gold"
            strokeWidth="10"
            fill="none"
            strokeDasharray={`${(100 - percentage) * 2.5} ${100 * 2.5}`}
            rotation={`${percentage * 7.2}`}
            origin="50, 50"
          />
          <SvgText x="45" y="55" fontSize="20" textAnchor="middle" fill="purple">
            {percentage}%
          </SvgText>
        </Svg>
        <View style={styles.column}>
          <Text style={styles.date}>May 23, 2024</Text>
          <View style={styles.row1}>
            <View style={styles.textContainer}>
              <Text style={styles.title}>Attendance</Text>
              <TouchableOpacity style={styles.button}>
                <Text style={styles.buttonText}>View full</Text>
              </TouchableOpacity>
            </View>
          </View>
          <View style={styles.row2}>
            <View style={styles.legend}>
              <View style={[styles.legendColor, { backgroundColor: 'purple' }]} />
              <Text>Day Present</Text>
            </View>
            <View style={styles.legend}>
              <View style={[styles.legendColor, { backgroundColor: 'gold' }]} />
              <Text>Day Absent</Text>
            </View>
          </View>
        </View>
      </View>
    </View>
  );
};

export default AttendanceCard;

What I've Tried:

• Updating react-native-svg: I ensured that react-native-svg is up to date by running yarn add react-native-svg. I expected this to fix any potential compatibility issues, but the error persisted.

• Replacing the children prop: I tried replacing the children prop in the SvgText component with a text prop, hoping to align it with what Android expects. However, this didn't resolve the issue, and the error remained the same.

• Using tspan as a workaround: I wrapped the text inside the SvgText component in a tspan tag to see if it would bypass the error on Android. Unfortunately, this also didn't work, and the issue persists only on Android.

• "react-native-svg": "12.1.1",
  

       "react-native": "0.73.4",
  

      "react": "^18.2.0",
  

**Expected Outcome: **

I expected the SvgText component to render the percentage text inside the circular progress chart correctly on both iOS and Android. While it works perfectly on iOS, it fails on Android with the mentioned type error.

Actual Outcome:

The component works fine on iOS, rendering the text as expected. However, on Android, it throws a type error stating that the children prop cannot be assigned to the TextProps type.