Shimmer not working on Android
Closed this issue · 22 comments
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.
Actually, I think it might be related to this issue: #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>the same issue
@jdrorrer Have you found solution for android ? Even the following doesn't work(android 8.1):
<Shimmer>
<Text>bla bla.... </Text>
</Shimmer>
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?
@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.
Upgrade build.gradle. Otherwise, use their older version that is, 0.3.2
Invariant Violation: requireNativeComponent: "RNShimmeringView" was not found in the UIManager.
I have this issue, some help please. Thanks in advance
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.
Even having prop-types won't make it work. Android issue still prevails.
@aditi1126 have you tried revert back to version 0.4.1 ?
Any luck so far?
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
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 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.
@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>
);
}
}
@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?
@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.
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.
@chengsam Any hints on what changes to make to the native code to support. I'm not really familiar with Java
now it is not supported at all so there is any substitute for it