Search code examples
iosreactjsreact-nativenpmpie-chart

Invariant violation text strings must be rendered within a <Text> component

I am new to react-native development. Whenever I try to use any framework I am getting error

Invariant violation text strings must be rendered within a Text component

I tried two libs react-number-format and for pichart react-minimal-pie-chart

I know there are many questions already asked and I tried all but all are about syntax issue so I had to ask as I think it's not related to syntax as there is no any white space in code.

code as per below:

import React, { Component } from 'react';
import { View } from 'react-native';
import NumberFormat from "react-number-format"
import PieChart from react-minimal-pie-chart

export default class Calculation extends Component {
   constructor(props) {
    super(props);
    this.state = {

    };

  render() {
     return (
          <View>
            <View style={{ backgroundColor: "lightgray", height: 1, marginHorizontal: 5 }} />
            <NumberFormat displayType="text" thousandSeparator={true} thousandsGroupStyle="lakh" prefix={'₹'} value={123456789} />

            <PieChart
              data={[
                { title: 'One', value: 10, color: '#E38627' },
                { title: 'Two', value: 15, color: '#C13C37' },
                { title: 'Three', value: 20, color: '#6A2135' },
              ]}
            />
          </View>

        );
    }
}

react-native version is "0.60.5".

For reference I've attached screenshot.

enter image description here

Thanks in advance!!!

Solution

  • Okay ... So upon seeing your code i didn't see anything wrong with it. So I went and checked the source code of the two of the libraries that you have used.

    Both the libraries that you have used are not compatible with react-native as they are made for react js that is for browser as they use dom elements like <div> and <input />

    Like take react-number-format for example the main number_format.js from src returns 

    return (
  <input
    {...inputProps}
    ref = {getInputRef}
  />
)

    So, unfortunately you can't use these libraries for react-native.