Comments (22)
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>
from react-native-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?
from react-native-shimmer.
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 [email protected]
Now it works.
from react-native-shimmer.
the same issue
from react-native-shimmer.
@jdrorrer Have you found solution for android ? Even the following doesn't work(android 8.1):
<Shimmer>
<Text>bla bla.... </Text>
</Shimmer>
from react-native-shimmer.
@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.
from react-native-shimmer.
Upgrade build.gradle. Otherwise, use their older version that is, 0.3.2
from react-native-shimmer.
Invariant Violation: requireNativeComponent: "RNShimmeringView" was not found in the UIManager.
I have this issue, some help please. Thanks in advance
from react-native-shimmer.
Even having prop-types won't make it work. Android issue still prevails.
from react-native-shimmer.
@aditi1126 have you tried revert back to version 0.4.1 ?
from react-native-shimmer.
Any luck so far?
from react-native-shimmer.
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
from react-native-shimmer.
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
from react-native-shimmer.
@rommyarb strange, it does work when switching to version 0.4.1! 🤷♂️
from react-native-shimmer.
@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?
from react-native-shimmer.
@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.
from react-native-shimmer.
@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>
);
}
}
from react-native-shimmer.
@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?
from react-native-shimmer.
@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.
from react-native-shimmer.
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.
from react-native-shimmer.
@chengsam Any hints on what changes to make to the native code to support. I'm not really familiar with Java
from react-native-shimmer.
now it is not supported at all so there is any substitute for it
from react-native-shimmer.
Related Issues (20)
- Not compatible with RN 0.49.1
- Shimmer animation stops when button clicked (Android). HOT 2
- Doesn't re-animate when view is re-rendered HOT 2
- Question: how to make the view opaque?
- Invariant Violation: Native Component for "RNShimmeringView" does not exist HOT 3
- Not working inside Stack Navigator HOT 6
- Shimmer not working on IOS RN 0.59.1 HOT 4
- Not show React Logo in Example
- Shimmer not showing on Interactable.View
- Shimmer not working on iOS HOT 8
- Shimmer on View IOS vs Android.
- are the props really work on iOS?
- Invariant Violation: requireNativeComponent: "RNShimmeringView" was not found in the UIManager. HOT 9
- Exception thrown while executing UI block: Attempted to remove non-existent subview
- Couldn't install pods
- Add support for new fabric renderer
- Image doesn't seem to shimmer HOT 1
- Publish to NPM please HOT 1
- Shimmer color coming in rounded-radius corner while shimmer HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-shimmer.