Warning: Received false for a non-boolean attribute collapsable.

[rohitcoder]

What did you do?

ListLoader.js

import React from 'react'
import ContentLoader, { Rect, Circle } from 'react-content-loader/native'

const ListLoader = (props) => { 
  return (
    <ContentLoader viewBox="0 0 480 70">
      <Circle cx="30" cy="30" r="30" />
      <Rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
      <Rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
    </ContentLoader>
  )
}
export default ListLoader

page.js

import React from 'react'
import ListLoader from 'components/SkeletonLoaders/ListLoader'

const page = () => {
  return (
    <>
      <ListLoader />
    </>
  )
}

export default page

What did you expect to happen?

1. Loader (Shimmer effect) should be there, and it's working properly.
2. There shouldn't be any warning or error in console, but every time i am getting same error (Tried removing and then there was no error in console logs)

What happened actually?

Which versions of react-content-loader, and which browser are affected by this issue?

React Content Loader: 6.0.3
Browser: Chrome 94.0.4606.54 (Official Build) (x86_64) for MAC
React : 16.3.1
React Native: 0.63.4

[rohitcoder]

Just figured out after lot of hit and trial, this issue is only in case you are running your 'react-content-loader/native' on web instead of on 'Android/iOS' Device.

I ran this code on my Phone and there was no error.

[pierregee]

Can we reopen this issue?
I looked and dug into it a little bit more and it seems like it's because ofthis line: https://github.com/danilowoz/react-content-loader/blob/master/src/native/Svg.tsx#L14

The reason why it's only throwing the error in react-content-loader/native' as pointed by @rohitcoder is because that code only exists in /native

Here's the error pointing to that line:

Here's a thread discussion related to the issue with possible fixes: software-mansion/react-native-svg#1484

[NastuzziSamy]

I managed to avoid this warning by doing that:

Instead of doing for both native and web:

import ContentLoader, { Rect } from 'react-content-loader/native';

I import the right package (btw for svg components, just use the string names as rect):

let ContentLoader: any, Rect: any;

if (IS_WEB) {
    ContentLoader = require('react-content-loader').default;
    Rect = 'rect';
} else {
    ContentLoader = require('react-content-loader/native').default;
    Rect = require('react-content-loader/native').Rect;
}