Skip to content

SkeletonView: LinearGradient warning due to mismatched colors and locations arrays #3484

Open
@wasimkham

Description

@wasimkham

Description

When using the SkeletonView component, there's a persistent warning from the underlying react-native-shimmer-placeholder package about mismatched array lengths between colors and locations in the LinearGradient. This warning appears in the native bridge layer and cannot be suppressed using standard React Native LogBox methods.

Related to

  • Components
  • Demo
  • Docs
  • Typings

Steps to reproduce

  1. Use SkeletonView component in any screen
NOBRIDGE) WARN LinearGradient colors and locations props should be arrays of the same length

Expected behavior

The SkeletonView should either:

  • Allow controlling the locations prop to match custom color arrays
  • Ensure internal implementation maintains matching array lengths
  • Not produce warnings about mismatched array lengths

Actual behavior

Persistent warnings appear in the console because the internal implementation of react-native-shimmer-placeholder uses a fixed locations array [0.3, 0.5, 0.7] (length: 3) but doesn't enforce or expose control over matching the colors array length.

More Info

Code snippet

tsx
import { SkeletonView } from 'react-native-ui-lib';
// Basic usage that still triggers the warning
function LoadingState() {
return (
<SkeletonView
template={SkeletonView.templates.LIST_ITEM}
showContent={false}
// Even with custom colors, no way to control locations
colors={['#ebebeb', '#c5c5c5', '#ebebeb']}
/>
);
}

Screenshots/Video

Image Image

Environment

  • React Native version: "react-native": "0.76.5"
  • Expo version: "expo": "~52.0.19"
  • React Native UI Lib version: "react-native-ui-lib": "^7.34.6"

Affected platforms

  • Android
  • iOS
  • Web

Metadata

Metadata

Assignees

No one assigned

    Labels

    buga bug in one of the components

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions