Shimmer not working on Android

[jdrorrer]

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.

[jdrorrer]

Actually, I think it might be related to this issue: https://github.com/oblador/react-native-shimmer/issues/1

I've tried getting it to work with Text, Image, Button, and several others but cannot get it to work properly on android - like I said earlier it works fine on iOS, though.

Here's the current setup:

<View style={styles.global.flex}>
  <View style={style.textContainer}>
    <View style={style.titleTextContainer} width={width}>
      <Shimmer>
        <Text style={style.text} />
      </Shimmer>
    </View>

    <View width={subTitleWidth}>
      <Shimmer>
        {subTitle ? <Text style={style.subText} /> : null}
      </Shimmer>
    </View>
  </View>
</View>

[vladbars]

the same issue

[angelos3lex]

@jdrorrer Have you found solution for android ? Even the following doesn't work(android 8.1):

 <Shimmer>
   <Text>bla bla.... </Text>
</Shimmer>

[lgngnr]

Guys, i got the following error:

Invariant Violation: requireNativeComponent: "RNShimmeringView" was not found in the UIManager.

I try to run react-native link and react-native-shimmer show it's correctly linked. How can I fix it?

[jdrorrer]

@angelos3lex unfortunately, no I didn't find a solution. We ended up just settling for the fact that it shimmers on iOS and not Android.

[aditi1126]

Upgrade build.gradle. Otherwise, use their older version that is, 0.3.2

[jsastriques]

Invariant Violation: requireNativeComponent: "RNShimmeringView" was not found in the UIManager. I have this issue, some help please. Thanks in advance

[rommyarb]

I found the solution:

Add prop-types to dependency npm i --save prop-types

and revert back to version 0.4.1 npm i --save react-native-shimmer@0.4.1

Now it works.

[aditi1126]

Even having prop-types won't make it work. Android issue still prevails.

[rommyarb]

@aditi1126 have you tried revert back to version 0.4.1 ?

[sagargulati]

Any luck so far?

[lgngnr]

i make it working in this way:

• Create a new project with expo init
• Run expo eject and choose expoKit so can i have both react-native and expo api
• Run it with expo start
• Install npm i --save react-native-shimmer
• Link dependencies react-native link react-native-shimmer
• Meanwhile expo start still running open the android project with android studio and run it or just from command line cd android and ./gradlew installDevKernelDebug, it'll build the apk, install and run it on the device/emulator connected through adb. If doesn't run automatically just open app drawer and open the installed apk

[sagargulati]

Avoiding playing with Expo, Any direct package issue you found? Since if things are fine, it should also run fine on Expo Client @oblador : Any help with it?

Info:

  React Native Environment Info:
    System:
      OS: Linux 4.15 Ubuntu 16.04.6 LTS (Xenial Xerus)
      CPU: (8) x64 Intel(R) Xeon(R) CPU E3-1246 v3 @ 3.50GHz
      Memory: 7.50 GB / 31.28 GB
      Shell: 4.3.48 - /bin/bash
    Binaries:
      Node: 10.15.1 - /usr/bin/node
      Yarn: 1.13.0 - /usr/bin/yarn
      npm: 6.4.1 - /usr/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      Android SDK:
        API Levels: 25, 26, 27, 28
        Build Tools: 23.0.2, 27.0.3, 28.0.3
    npmPackages:
      react: 16.5.0 => 16.5.0
      react-native: https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz => 0.57.1
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

[jdrorrer]

@rommyarb strange, it does work when switching to version 0.4.1! 🤷‍♂️

[sagargulati]

@jdrorrer @rommyarb : It only making the text SHIMMER. I'm looking for more of a placeholder where it shows loading shimmer for images and text (like facebook) Any example for that?

[alittletf]

@jdrorrer So it works for you in the above implementation on 0.4.1? I installed that version and can't seem to get it to work on Android...works fine on iOS. Do you use the prop-types package in conjunction with react-native-shimmer? If so, how are you using that?

@oblador - any thoughts on how to proceed with this? I am on Pixel 3 running Android 9

I've switched between 0.5.0 and 0.4.1 and i get the same thing happening. It appears that when the text color is white, i can see a shimmer very quick for 1 time. Doesnt matter how long i set any of the durations for. If the text has a color to it, I can't even see the shimmer once. Maybe something with the animationOpacity not working? Not sure.

[jdrorrer]

@alittletf It works for me with 0.4.1 - I also have a Pixel 3 running Android 9. I am using prop-types as well - not sure how/why that would affect this library, though. Here's an example skeleton loading item I'm using for reference so you can see how I'm using Shimmer and prop-types:

import React, { PureComponent } from 'react';
import { Image, StyleSheet, View } from 'react-native';
import { Icon } from 'react-native-elements';
import Shimmer from 'react-native-shimmer';
import Card from 'components/theme/card';
import PropTypes from 'prop-types';
import styles from '../styles';

const { gray } = styles.vars;

const style = StyleSheet.create({
  avatar: {
    backgroundColor: gray,
    borderRadius: 44 / 2,
    height: 44,
    opacity: 0.45,
    width: 44
  },
  badge: {
    backgroundColor: gray,
    borderRadius: 20 / 2,
    height: 20,
    opacity: 0.45,
    position: 'absolute',
    right: -5,
    top: 0,
    width: 20
  },
  cardContainer: {
    ...styles.spacing.padVert12,
    ...styles.spacing.padHoriz16,
    height: 72
  },
  height11: {
    borderRadius: 11 / 2,
    height: 11
  },
  height14: {
    borderRadius: 14 / 2,
    height: 14
  },
  height16: {
    borderRadius: 16 / 2,
    height: 16
  },
  rightIcon: {
    alignSelf: 'center',
    opacity: 0.45
  },
  text: {
    backgroundColor: gray,
    opacity: 0.45
  }
});

export default class SkeletonConversationListItem extends PureComponent {
  static defaultProps = {
    copyWidth: '100%',
    width: '75%',
    subtitleWidth: '55%',
    hasBadge: false,
    rightIcon: '',
    size: 'small'
  };

  static propTypes = {
    copyWidth: PropTypes.string,
    width: PropTypes.string,
    subtitleWidth: PropTypes.string,
    hasBadge: PropTypes.bool,
    rightIcon: PropTypes.string,
    size: PropTypes.oneOf(['small', 'large'])
  };

  render() {
    const {
      copyWidth,
      hasBadge,
      rightIcon,
      width,
      subtitleWidth,
      size
    } = this.props;

    return (
      <Card containerStyle={size === 'small' ? style.cardContainer : ''}>
        <View style={styles.global.rowStartContainerWrap}>
          <View style={[styles.global.flex1]}>
            <View style={style.avatar}>
              <Shimmer>
                <Image style={style.avatar} />
              </Shimmer>
            </View>
          </View>
          <View style={[styles.global.flex4, styles.global.flexColumn]}>
            <View style={[styles.spacing.marginBottom4, styles.global.flexRow]}>
              <View width={width}>
                <Shimmer>
                  <Image style={[style.text, style.height16]} />
                </Shimmer>
              </View>
              <View>
                {hasBadge && (
                  <Shimmer>
                    <Image style={style.badge} />
                  </Shimmer>
                )}
              </View>
            </View>
            <View style={styles.spacing.marginVert4} width={subtitleWidth}>
              <Shimmer>
                <Image style={[style.height11, style.text]} />
              </Shimmer>
            </View>
            {size === 'large' ? (
              <View
                style={[
                  styles.spacing.marginBottom4,
                  styles.spacing.marginRight24
                ]}
              >
                <View width={copyWidth} style={styles.spacing.marginBottom4}>
                  <Shimmer>
                    <Image style={[style.height14, style.text]} />
                  </Shimmer>
                </View>
                <View width={copyWidth}>
                  <Shimmer>
                    <Image style={[style.height14, style.text]} />
                  </Shimmer>
                </View>
              </View>
            ) : null}
          </View>
          {rightIcon ? (
            <View style={style.rightIcon}>
              <Shimmer>
                <Icon name={rightIcon} color={styles.vars.gray} size={24} />
              </Shimmer>
            </View>
          ) : null}
        </View>
      </Card>
    );
  }
}

[alittletf]

@jdrorrer thank you so much for the code sample. Yeah I saw another person post something about PropTypes which is why I asked but there doesnt seem to be any interaction between it and Shimmer. Very weird. I still can't get mine to work and Ive reduced everything to a plain Text element, wrapped in Shimmer, which is wrapped in a plain View tag and still nothing. I am on RN 0.58.6. What version are you on?

[jdrorrer]

@alittletf I am on RN v0.58.6 as well. If you're giving a Text field some padding and a background color to make it look like a box, I don't think that will work - at least I couldn't get it to work. That's why I'm using Image everywhere in my code sample above to create different shapes that shimmer. I was able to get Text to shimmer when it just has text in it, though, for some reason.

[chengsam]

Update android dependency from 'com.facebook.shimmer:shimmer:0.1.0@aar' to 'com.facebook.shimmer:shimmer:0.5.0', but the native code is refactored so you may have to tweak the code yourself.

[0hio-creator]

@chengsam Any hints on what changes to make to the native code to support. I'm not really familiar with Java

[quran123]

now it is not supported at all so there is any substitute for it