Change Color of the Component

[joaobibiano]

Hi,

My app has a nice blue color (like a dark theme)

I want to change the color from white to another darker.

But, I'm trying to use the properties in style props, but it doesn't work.

Can you help me?

Code example

<View style={{ height: 500, justifyContent: 'space-between', alignItems: 'center' }}>
  {[...new Array(10)].map((item, key) => {
    return (
      <View key={key} style={{ margin: 10 }}>
        <ShimmerPlaceHolder style={{ margin: 5 }} autoRun width={40} height={10} />
        {/* just for example */}
        <ShimmerPlaceHolder style={{ backgroundColor: 'red', overflow: 'hidden', margin: 5, borderRadius: 17 }} autoRun width={380} height={40} />
        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
          <ShimmerPlaceHolder style={{ margin: 5 }} autoRun width={40} height={10} />
          <ShimmerPlaceHolder style={{ margin: 5 }} autoRun width={40} height={10} />
        </View>
      </View>
    );
  })}
</View>

[tomzaku]

Hi @joaovbibiano, thank for using my package

Have you tried to add colorShimmer props in your app
For example:

<ShimmerPlaceHolder autoRun colorShimmer=["red","white","red"]/>

[dkwl93]

@joaovbibiano I can confirm that @tomzaku solution works. backgroundColor is unfortunately not supported in the <ShimmerPlaceHolder />. The only way to change the colour of the view is to change the colorShimmer prop.

That being said, @tomzaku can you please update the documentation to reflect this? It currently says that colorShimmer is a string when in fact its an array of strings. passing in a string crashes the app

[tomzaku]

@dkwl93 Great. My mistake. Could you make me a PR for this suggest? I'm really appriciate

[tomzaku]

It's better to rename it, could be "shimerColors"

[joaobibiano]

Thank you guys. It worked!

My configuration: colorShimmer={['#242069', '#28236fd6', '#242069']}

[jforaker]

For future googlers landing here, it has been updated:

shimmerColors={['green', 'white', 'red']}