Render Error

[Edward-Teach]

Expo ~43.0.2

Render Error [xxxx, "RTCView", {"width":"<<NaN>>"}] is not usable as a native method argument.

When this happens?

{stateThatChanges && <Rating startingValue={valueFromState} fractions={0} jumpValue={1} onFinishRating={ratingCompleted} />}

when the variable "stateThatChanges " force a re-render.... after that touching the component (I mean clicking on a "star") triggers the "change" method but the width is NaN.

[FengWei-Plasmatic]

I couldn't reproduce this with your code, but I could reproduce this error on an android dev build (that connects to metro) by having Rating in a FlatList with many items on android. This is because Rating has a bad interaction with removedClippedSubviews prop of FlatList, and it's true by default on android, so setting it to false solved it for me.

This bug appears differently on expo and any builds that doesn't connect to metro. See snack https://snack.expo.dev/@fengwei/react-native-elements-rating-bug. The second and third items always have their ratings in the middle and can't be changed. If this were in a dev build connected to metro, the second and third ratings would give me your error message and force a restart.

[Jamal-ReachFirst]

Facing the same issue

[Youssef-Durgham]

you need to do that

const MemoizedRating = React.memo(Rating);

and in the return do this

<MemoizedRating minValue={1} imageSize={40} />

and it will works can we close this issues (:

[Jamal-ReachFirst]

I am facing exactly the same issue

Usage:

const App = () => {
    // other code
   return(
       // other code
        <RatingComponent halfStarEnable={false} isDisable={false} onRatingSelection={onSomeFunction} selectedStars={0} starSize={20} readOnly={false} />
       <RatingComponent halfStarEnable={false} isDisable={false} onRatingSelection={onSomeOtherFunction} selectedStars={0} starSize={20} readOnly={false} />
       <RatingComponent halfStarEnable={false} isDisable={false} onRatingSelection={onFunction} selectedStars={0} starSize={20} readOnly={false} />
   )
}

RatingComponent:

// Other imports
import { Rating } from 'react-native-ratings';

const RatingComponent = ({totalStars, isDisable, selectedStars, halfStarEnable, onRatingSelection, starSize, readOnly}) => {
    return (
        <Rating
            type="custom"
            isDisabled={isDisable}
            ratingCount={totalStars}
            startingValue={selectedStars}
            fractions={0}
            onFinishRating={rating => onRatingSelection(rating)}
            imageSize={starSize}
            halfStarEnabled={halfStarEnable}
            tintColor={Layout.colors.white}
            ratingColor={"#f1c40f"}
            ratingBackgroundColor={Layout.colors.lightGray}
            showRating={false}
            readonly={readOnly}
            minValue={0}
        />
    )
}

export default RatingComponent;

Whenever i touch the stars, I am getting this error

Error:

Invariant Violation: [3087,"RCTView",{"width":"<<NaN>>"}] is not usable as a native method argument

This error is located at:
    in RCTView (at View.js:32)
    in View (at createAnimatedComponent.js:211)
    in AnimatedComponent (at createAnimatedComponent.js:264)
    in AnimatedComponentWrapper (at SwipeRating.js:268)
    in RCTView (at View.js:32)
    in View (at SwipeRating.js:263)
    in RCTView (at View.js:32)
    in View (at SwipeRating.js:262)
    in RCTView (at View.js:32)
    in View (at SwipeRating.js:260)
    in SwipeRating (at rating.js:9)

Also mentioned here