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

[Jamal-ReachFirst]

I am getting this 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)

Error: Exception in HostFunction: Malformed calls from JS: field sizes are different.

[[3,3,3,14],[18,21,21,5],[[4557,true],[1266,309]],11146]

This error is located at:
   in AnimatedComponent (at createAnimatedComponent.js:264)
   in AnimatedComponentWrapper (at src/index.native.tsx:257)
   in MaybeFreeze (at src/index.native.tsx:256)
   in Screen (at Screens.tsx:37)
   in MaybeScreen (at CardStack.tsx:654)
   in RNSScreenContainer (at src/index.native.tsx:332)
   in ScreenContainer (at Screens.tsx:20)
   in MaybeScreenContainer (at CardStack.tsx:566)
   in RCTView (at View.js:32)
   in View (at Background.tsx:13)
   in Background (at CardStack.tsx:564)
   in CardStack (at StackView.tsx:437)
   in RNCSafeAreaProvider (at SafeAreaContext.tsx:87)
   in SafeAreaProvider (at SafeAreaProviderCompat.tsx:46)
   in SafeAreaProviderCompat (at StackView.tsx:430)
   in RNGestureHandlerRootView (at GestureHandlerRootView.android.tsx:23)
   in GestureHandlerRootView (at StackView.tsx:429)

[Jamal-ReachFirst]

Here is my code

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} />
   )
}

My reusable component:

// 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.

[karan-travelbee]

I'm also getting the same error, any solutions?

[govindCodiant]

I used this npm and this is working fine in both Android and iOS https://www.npmjs.com/package/react-native-custom-star-rating