[Native] Received `false` for a non-boolean attribute `collapsable`.

[ThomasCedrini]

What did you do?

Try to create a Placeholder component in React Native like that :

import ContentLoader from "react-content-loader/native";

export function Placeholder() {
  return <ContentLoader />;
}

What did you expect to happen?

The component did render properly but I got this error in the console :

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

If you want to write it to the DOM, pass a string instead: collapsable="false" or collapsable={value.toString()}.

If you used to conditionally omit it with collapsable={condition && value}, pass collapsable={condition ? value : undefined} instead.
    at linearGradient
    at LinearGradient (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=app&resolver.environment=client&transform.environment=client:196264:3)
    at http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=app&resolver.environment=client&transform.environment=client:44651:62
    at defs
    at Defs (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=app&resolver.environment=client&transform.environment=client:196125:3)
    at svg
    at Svg (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=app&resolver.environment=client&transform.environment=client:196304:3)
    at NativeSvg (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=app&resolver.environment=client&transform.environment=client:195004:45)
    at ContentLoader (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=app&resolver.environment=client&transform.environment=client:195112:18)
    at ReactContentLoaderFacebook

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

• react: 18.2.0
• react-native: 0.74.5
• react-content-loader: 7.0.2
• react-native-svg: 15.7.1

[TMaszko]

As you can see in the attached log the platform is web and the issue is that Animated components from react-native set collapsable prop to false to prevent view merging on the native side. Components provided by react-native-svg (for the web platform) such as linearGradient (mind the casing) are being affected by the createAnimatedComponent from react-native and therefore they're receving collapsable props hence the warning appears ;)