Add text over AreaChart

What is the problem?

I want to add Text/label over the areachart region. But when I add Text from react-native-svg to the decorators method, the app crashes without error. If I remove it, the app works fine. I am looking to generate something like this:

• iOS
• Android

Versions: “react-native”: “0.52.0”, “react-native-svg”: “^6.3.1”, “react-native-svg-charts”: “^4.2.0”,

Code to reproduce

// put code here
import React from 'react';
import { Path, Circle, Line, G, Text } from 'react-native-svg'
import { AreaChart } from 'react-native-svg-charts'
import * as shape from 'd3-shape'

const Chart = props => (
    <AreaChart
        style={{height: 100}}
        showGrid={false}
        data={props.item}
        contentInset={{top: 30, bottom: 30}}
        curve={shape.curveNatural}
        svg={{fill: '#BFE5EC'}}
        renderDecorator={({ x, y, index, value }) => (
            <G key={index}>
              <Circle
                  style={{ zIndex: 10}}
                  cx={x(index)}
                  cy={y(value)}
                  r={4}
                  strokeWidth={2}
                  stroke={'#20AAC3'}
                  fill="white"
              />
              <Line
                  x1={x(index)}
                  y1={"250"}
                  x2={x(index)}
                  stroke="#BFE5EC"
                  strokeWidth="0.3"
              />
              <Text
                  stroke="#383834"
                  fontSize="12"
                  x={50}
                  y={50}
                  textAnchor="middle"
              >Test</Text>
            </G>
        )}
        extras={[
          ({line}) => (
              <Path
                  key={'line'}
                  d={line}
                  strokeWidth={2}
                  stroke={'#20AAC3'}
                  fill={'none'}
              />
          ),
        ]}
    />
);

export default Chart;

[JesperLekland]

Ugh, I hate Expo… I’ll try to run your example when I get the chance and see if I can find what’s going on

[Neha3011]

@JesperLekland That doesn’t work either. 😦 I will find a work around. Thanks.