Question 267433 in React native Question posted in
The official React Native documentation can be found here.

React native – react-currency-format error render error text string must be rendered within a <Text> component in android

I have just react-native project and I used react-currency-format to format total price in my code in right currency.
Code run ok in web, but in android and ios it has error "Text string must be rendered within a component". So how can i fix it?

This is my code

import { View, Text, TouchableOpacity } from 'react-native'
import React from 'react'
import { useSelector } from 'react-redux'
import { selectBasketItems, selectBasketTotal } from '../features/basketSlice'
import { useNavigation } from '@react-navigation/native'
import NumberFormat from 'react-currency-format';

const BasketIcon = () => {
    const items = useSelector(selectBasketItems);
    const navigation = useNavigation();
    const basketTotal = useSelector(selectBasketTotal);          

const total = parseFloat(basketTotal);

  return (
    <View className="absolute bottom-10 w-full z-50">
      <TouchableOpacity className="bg-[#00CCBB] mx-5 p-4 round-lg flex-row items-center space-x-1">
        <Text className=" text-white font-extrabold text-lg bg-[#01A296] py-1 px-2 ">{items.length}</Text>
        <Text className="flex-1 text-white font-extrabold text-lg text-center">View Basket</Text>
        <Text className="text-lg text-white font-extrabold">
          {basketTotal && (
            <NumberFormat
              value={basketTotal}
              displayType={'text'}
              thousandSeparator={true}
              prefix={'₫'} 
            />
          )}
        </Text>

      </TouchableOpacity>
    </View>
  )
}

export default BasketIcon
Tags:

2

Answers


  1. 0

    This library is not meant for RN use I assume, by setting "displayType" to text the library returns the value in a element which is causes this error. here’s the source code in the library

     if (displayType === 'text') {
      return renderText ? (renderText(value) || null) : <span {...otherProps}>{value}</span>;
    }

    You can try this library react-native-format-currency

    Login or Signup to reply.
  2. 0

    If you want to use this package in react native you should set renderText like below:

    <NumberFormat
          value={basketTotal}
          displayType={'text'}
          thousandSeparator={true}
          prefix={'₫'} 
          renderText={formattedValue => <Text>{formattedValue}</Text>}
        />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search