It works as expected on iOS, but not at all on android. I've tested it on android 8.1 with a Pixel device and also version 9 with a Pixel 2 simulator - neither shimmers.

The shimmer with default props is work nicely on both platform. I try to change the duration and pauseDuration props then it's getting weird only on iOS.

"react-native": "0.61.5",
"react-native-shimmer": "^0.6.0",

Hi all,

The behaviour I am experiencing:
Android only works when the animating props value is constant. animating={true}
IOS only works when the animating value is dynamic. Like connected to redux

This is my Android code setup.

TouchableOpacity  style={styles.buttonFloat} onPress={()=> {}}>
                        <Shimmer>
                        <View  >
                            <Text >{'START MY FIRST PROGRAM'}</Text>
                        </View>
                        </Shimmer>
                    </TouchableOpacity>

This is my IOS setup

TouchableOpacity  style={styles.buttonFloat} onPress={()=> {}}>
                        <Shimmer
                        animating={( this.props.currentScreen=='currentScreen')?true:false}
                         >
                        <View  >
                            <Text >{'START MY FIRST PROGRAM'}</Text>
                        </View>
                        </Shimmer>
                    </TouchableOpacity>

I think its to do with the View

Shimmer is working fine when I'm rendering the page alone but with createStackNavigator, it's not working.
I'm attaching the screenshots for the two :

1. When it's working:

2. When it's not working:

I'm using Pixel 2 with API 27, environment : android.

Installed the package and linked it both for ios and android. Getting this error.

IOS compile error
Xcode v 10.1
error: Build input file cannot be found: '........./RN59/node_modules/react-native-shimmer/ios/Shimmer/FBShimmering/FBShimmeringView.m'
any solution?

Is that normal ? It seems to shimmer only texts.

I am currently working with
"react-native": "0.61.3" and "react-native-shimmer": "^0.6.0".

I have a Shimmer with a nested flatlist inside. For android it works like a charm but for iOS it is not working. Sometimes you can see only a flicker once when it renders, then just no animation, change or opacity, nothing.

<Shimmer >
          <FlatList .../> //Deleted it for simplicity purposes 
</Shimmer>

Hi. I am using this library to create a shimmering effect for 2 Texts indicating left and right arrows as shown in the screenshot below.

The problem is, when the user is clicking on either of the 2 circular buttons (red or green), the shimmer animation on the >>> and the <<< arrows stops. And this is only happening on Android Devices.

Here is the code that I am using for the left red circular icon -

 <SlideButton
                                    onSlideSuccess={this.props.dismissReminder}
                                    slideDirection={SlideDirection.RIGHT}
                                    width={100}
                                    height={50}>
                                    <View style={{flexDirection: 'row', alignItems: 'center'}}>
                                        <View>
                                            <TouchableOpacity onPress={this.props.dismissReminder} style={{
                                                height: 80,
                                                width: 80,
                                                borderRadius: 40,
                                                backgroundColor: 'red',
                                                justifyContent: 'center',
                                                alignItems: 'center'
                                            }}>
                                                <Text style={{fontSize: 50, fontWeight: '400', color: '#fff'}}>X</Text>
                                            </TouchableOpacity>
                                        </View>
                                        <View style={{alignSelf: 'flex-start', paddingTop: 5}}>
                                            <Shimmer direction="right">
                                                <Text
                                                    style={styles.dismissArrow}>
                                                    {'> > > >'}
                                                </Text>
                                            </Shimmer>
                                        </View>
                                    </View>
                                </SlideButton>

Kindly look into this issue and share your inputs. Thanks ! Love the library btw. 👍

I get the above error on iOs

I run:
yarn add react-native-shimmer
cd ios && pod install

and the following failure message comes up for pod install:

Analyzing dependencies
[!] Unable to find a specification for `Shimmer (~> 1)` depended upon by `react-native-shimmer`

You have either:
 * mistyped the name or version.
 * not added the source repo that hosts the Podspec to your Podfile.

Couldn't install Pods. Updating the Pods project and trying again...
Command `pod install` failed.
└─ Cause: Unable to find a specification for `Shimmer (~> 1)` depended upon by `react-native-shimmer`

I also tried:
npx react-native link react-native-shimmer
which gives me a success response, but still no luck.

I have react-native v0.63.4

Clone this repo & run example

I got same problem in my app, it can't shimmer Image.

Hey there!

I have created a Shimmer component and using it inside and Interactable.View element, and it does not work. Does it work within third party elements or just React Native components?

Shimmer component:

<Shimmer style={styles.shimmerContainer} pauseDuration={0} opacity={0}>
    <Text style={styles.shimmerLoader} />
</Shimmer>

View component:

<Interactable.View>
    <ShimmerCard />
    <View style={cardStyles}>
        {content}
    </View>
</Interactable.View>

React native version 0.59.10
react-native-shimmer version 0.4.1

Text shimmers, images don't, RN 0.68

software-mansion/react-native-reanimated#2554

Description

I am using react-native-shimmer. when I update [email protected] and [email protected] then I am receiving the below error

Exception thrown while executing UI block: Attempted to remove non-existent subview

at

https://github.com/software-mansion/react-native-reanimated/blob/ce76e66aaf47c26bb1ff818d72a50b55e092ca05/ios/LayoutReanimation/REAAnimationsManager.m#L101

because it has conflict with react-native-shimmer

RNShimmeringView.m#L28

Expected behavior

Should not throw the error.

Actual behavior & Steps To Reproduce

Repro: https://github.com/nomi9995/ReproNonExistentsubview
Throws an error but still works if I just close it.

just installed Package versions which I added below.
then below code will reproduce this error

import React, {useState} from 'react';
import {SafeAreaView, StyleSheet, Text, View, Button} from 'react-native';
import Shimmer from 'react-native-shimmer';

const App = () => {
  const [isVisible, setIsVisible] = useState<boolean>(true);

  return (
    <SafeAreaView style={styles.container}>
      {isVisible && (
        <Shimmer>
          <Text>Loading...</Text>
        </Shimmer>
      )}
      <Button
        onPress={() => setIsVisible(!isVisible)}
        title={isVisible ? 'Hide' : 'Visible'}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Package versions

• React Native: ^v0.66.1
• React Native Reanimated: ^2.3.0-alpha.3
• react-native-shimmer: ^0.6.0

Affected platforms

• Android
• iOS
• Web

hi, did this library support the loop feature? or the duration means the one time duration & it would restart automatically?

When the parent component is re-rendered due to prop change such that we set animating to false, then set it back to true, the Shimmer view won't animate again. It stops the animation fine, but won't restart the animation again.

RN 0.49.1 upgrades react to a 16-beta which removes support for React.PropTypes.

This package still uses React.PropTypes, which breaks the build.

Here's my layout:

<View style={styles.introTextContainer}>
          <Shimmer
            animating={isLoading}
            animationOpacity={0.2}
          >
            <Text style={[styles.text, styles.introText]}>
              Investing with AI.{'\n'}
              Automated. End to End.
            </Text>
          </Shimmer>
          <Shimmer
            animating={isLoading}
            animationOpacity={0.2}
          >
            <Text style={[styles.text, styles.introSubtext]}>
              Portfolios that invest using Artificial Intelligence, Data Science
              and Machine Learning
            </Text>
          </Shimmer>
</View>

& here's the styling:

text: {
    fontSize: 16,
    textAlign: 'center',
    fontWeight: '400',
    margin: 10,
  },
  introTextContainer: {
    flex: 1,
    backgroundColor: 'transparent',
    justifyContent: 'center',
  },
  introText: {
    color: '#FFFFFF',
    fontSize: 28,
    fontWeight: '400',
  },
  introSubtext: {
    color: Colors.lightSecondaryText,
  },

Seems <Shimmer> component somehow screws up the styling of the <Text>. If i encapsulate the text component in a <View> component, the styling works fine but the shimmering stops as mentioned in #1

text not centered here:

text centered since encapsulated in a view

<Shimmer style={{flex: 1,alignSelf: "center", height: 56, width: "90%", borderRadius: 10 ,marginBottom: 16, flexDirection: 'row', backgroundColor: 'red'}}>
<Text style={{ padding: 15, backgroundColor: '#D6D6D6', borderRadius: 10, height: 20}}>rahul pant

"react-native-shimmer": "^0.6.0",
"react-native" : "0.69.8"
"react" : "18.2.0"

how to remove this corner color

I come across the problem, like this "Shimmer has no propType for native prop ''RnShimmeringView.onLayout" of native type 'boolean', how to resolve it.

Thank you for your contributions to the open-source community! I noticed changes were made after the last release of v0.6.0. Could you please release the new changes to the NPM registry so versions/changes can be tracked? Thanks!

Is there a way to make the shimmered view opaque?

This works with

<Shimmer>
    <Text>Hello</Text>
</Shimmer>

But for any other kind of views, it does not work.
For example, if I have a bunch of texts inside a View, it won't work.

<Shimmer>
    <View>
         <Text>Hello</Text>
         <Text>Hello</Text>
         <Text>Hello</Text>
    </View
</Shimmer>

According to React-Native release v0.40.0 -
https://github.com/facebook/react-native/releases/tag/v0.40.0

There is a breaking change in iOS native headers import.

This change affects all native modules and application code on iOS that refer to react native .h files

Please support for below version too 👍

Android Native code is also available on GitHub
https://github.com/facebook/shimmer-android