tomzaku / react-native-shimmer-placeholder Goto Github PK
View Code? Open in Web Editor NEWPlaceholder/ Skeleton of React Native
License: MIT License
Placeholder/ Skeleton of React Native
License: MIT License
when giving Flatlist data large array and using multiple ShimmerPlaceHolder then this error occur.
If array length is small( Flatlist data) or less number of ShimmerPlaceHolder used then I doesn't get this warning
<FlatList showsVerticalScrollIndicator={false} // keyExtractor={item => item.id} contentContainerStyle={{paddingBottom: 30}} style={{paddingHorizontal: 16}} data={[...Array(10).keys()]} // Generate an array of 10 items ItemSeparatorComponent={() => <View style={{height: 14}} />} renderItem={({index}) => ( <Button key={index} style={s.list_container}> <ShimmerPlaceHolder style={{ width: 60, height: 60, marginRight: 16, borderRadius: width * 0.25, }} LinearGradient={LinearGradient} /> <View style={{flex: 1, rowGap: 16}}> <ShimmerPlaceHolder style={{width: '90%'}} LinearGradient={LinearGradient} /> <ShimmerPlaceHolder style={{width: '90%'}} LinearGradient={LinearGradient} /> </View> <View style={s.btn_container}> <ShimmerPlaceHolder LinearGradient={LinearGradient} style={s.btn_shimmer} /> <ShimmerPlaceHolder LinearGradient={LinearGradient} style={s.btn_shimmer} /> <ShimmerPlaceHolder LinearGradient={LinearGradient} style={s.btn_shimmer} /> </View> </Button> )} />
Hi!
In a project I'm working on there's some screens which are always mounted. Before the user has focused these screens, there's a shimmer being rendered. An other screen has a flatlist, and it only renders the initial number of items and then whitespace for the next items. I searched around and it was related to this issue: facebook/react-native#15734
As stated there, an Animation
registers as an interaction on the InteractionManager
, and the VirtualizedList
uses InteractionManager.runAfterInteractions()
to render the next items in the list when scrolling. This means, if there's a placeholder running in a loop somewhere, your list doesn't render other items when scrolling.
I have a proposed PR which adds a prop to the shimmer placeholder, isInteraction
. Default value is true so nothing of the existing behaviour changes
Backgroundcolor is not working
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>
this could cause this problem below
react-native-linear-gradient/react-native-linear-gradient#230
Hi there, The package is working great so thanks for all your hard work. However, I noticed that the "shimmer" was quite rough. Is there anyway to make this look smoother?
Thanks
Dan
Hi,
I noticed that when I run my app with this library the memory consumption increase over time until app crashes. This happens only when autoRun = true
Any idea ?
When you wrap an image with ShimmerPlaceholder, image does not load so you cannot use image's onLoad prop. I don't know what is wrong.
Hi I need reset animation with action, this it's possible? I try to change state visible but don't have success.
Thanks
Steps to reproduce:
Change App.js
to this.
The bug: as seen in the attached video, the images are shown while the placeholder is shown.
Expected: the images will be shown only when visible={true}
Hello, I am not sure if I am doing something wrong, but basically I noticed images are loading twice before being presented. So in my case I see a flash of white in between showing the placeholder and the actual image.
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import ShimmerPlaceHolder from 'react-native-shimmer-placeholder';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { isLoaded: false };
}
handleLoad(event) {
console.log(event.nativeEvent.loaded === event.nativeEvent.total)
}
render() {
const { isLoaded } = this.state;
return (
<View style={styles.container}>
<ShimmerPlaceHolder
width={200}
height={200}
style={{ width: 200, height: 200, borderRadius: 100 }}
visible={isLoaded}
backgroundColorBehindBorder={'white'}
>
<Image
style={{ width: 200, height: 200, borderRadius: 100 }}
source={{ uri: 'https://images.pexels.com/photos/2082087/pexels-photo-2082087.jpeg?cs=srgb&dl=apartment-bed-bedroom-2082087.jpg&fm=jpg' }}
onLoad={() => { this.setState({ isLoaded: true }); }}
onProgress={ this.handleLoad.bind(this) }
/>
</ShimmerPlaceHolder>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
As you can see I added an onProgress
on the image that only logs if the image is done loading. If you run the above code you can see false
266 times, then a true
, then you see false
again another 266 times and then another last true
Your project is accessing the following APIs from a deprecated global rather than a module import: LinearGradient (expo-linear-gradient).
The global "__expo" and "Expo" objects will be removed in SDK 41. Learn more about how to fix this warning: https://expo.fyi/deprecated-globals
When i refresh flatlist the shimmer's animating is not playing properly. but its working first time . please let me know where i was wrong.
Hi, I think the documentation should be updated.
LinearGradient should be imported as named import instead of Default import.
so this one should be changed:
import LinearGradient from 'expo-linear-gradient';
to:
import { LinearGradient } from 'expo-linear-gradient';
Just importing and starting the component with breaks the app. It won't even render!
Using Expo SDK 41 with expo-linear-gradient.
@tomzaku this is amazing, please clarify licensee for this code, hopefully MIT.
When i updated the package to its latest version starts encountering below error
JSON value '{x = 2; y = โ0.5"; }' of type NSMutableDicitionary cannot be converetd to a YG Value
But looks like changing the start and end with startPoint and endPoint respectively in below code(in ShimmerPlaceholder.js) fixed the issue.
<LinearGradient
colors={shimmerColors}
style={{ flex: 1, width: width * shimmerWidthPercent }}
start={{
x: -1,
y: 0.5,
}}
end={{
x: 2,
y: 0.5,
}}
locations={location}
/>
Update : After renaming the props it stopped animating.
I wanted this package to delay between animations - I ended up changing the getAnimated function if anybody else wants to use this for their projects!
I now can use this on buttons where i want a little more pop.
getAnimated = () => {
const { delay, duration, isInteraction } = this.props;
// Create sequence using delay within to pause between animations
return Animated.loop(
Animated.sequence([
Animated.delay(delay),
Animated.timing(this.state.beginShimmerPosition, {
toValue: 1,
delay,
duration,
useNativeDriver: Platform.OS !== "web",
isInteraction,
})
])
);
};
How do you go about having a placeholder with rounded edges, but do not wish to have rounded edges on the inner content once visible
becomes true?
The borderRadius style when applied doesn't set the correct border radius
Example,
import React from 'react'
import { View } from 'react-native'
import ShimmerPlaceHolder from 'react-native-shimmer-placeholder'
const SomeComponent = () => (
<View style={{ flex: 1 }}>
<ShimmerPlaceHolder style={{ height: 60, alignSelf: 'stretch' }} />
<View />
)
Expected outcome
Actual outcome
It would be useful to be able to provide the gradient component similar to how redux-persist asks you to pass in the storage API: https://github.com/rt2zz/redux-persist#v6-upgrade
node_modules/react-native-shimmer-placeholder/index.d.ts:19:5 - error TS1038: A 'declare' modifier cannot be used in an already ambient context.
19 declare class MyComponent extends React.Component<Props, any> {}
~~~~~~~
###############
react-native-shimmer-placeholder: 1.0.34
tsc version: 3.4.5
Remove declare seems fixed the issue.
We have a track bar for playing audio much like this: https://help.apple.com/assets/61B370B8020DEA0A024710E6/61B370BA020DEA0A02471109/en_US/1b6dbda86aadb5ccfce6a15001317c1b.png
While the track was loading the waveform we wanted the whole track to shimmer. However because the track length is very long ( 5000px), loading the component seems to take very long. Why does the width of the shimmer container affect how long the component takes to be mounted? And is there a way to get around it? Thank you!
This code is throwing an error on require( 'expo' ).LinearGradient
even if module_exist
returns false (I don't have expo) .. I tried to fix this and do a PR but with no success ..
// https://gist.github.com/FGRibreau/3135914
function module_exist(name){
try{require(name);} catch(err){if(err.code === 'MODULE_NOT_FOUND'){return false;}}
return true;
};
const LinearGradient = module_exist( 'expo' ) ? require( 'expo' ).LinearGradient : require( 'react-native-linear-gradient' )
I will do a temporary fix for the moment !
I'm experiencing a situation where the shimmer is container View is rendered even when the children is null / false.
I expected the shimmer container view not to be rendered when children is null / false.
This causes the shimmer to reserve space according to its height and width even when there is nothing to render.
Example JSX:
<ShimmerPlaceholder visible={!loading}>
{Boolean(data) && <Text>{data}</Text>}
</ShimmerPlaceholder>
In case where loading
is false
but data is falsy, this JSX render an empty View. I think it would be better to not render anything in this case. I think this could be changed by adding the following code to the BaseShimmerPlaceholder
if (visible && (children === null || children === false)) {
return null
}
Is this an issue or a design decision that has been made? Is my proposed fix feasible or are there some issues with it?
console.error
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `PanelListShimmer`.
at PanelListShimmer
at renderEmptyComponent
at View
at Component (/home/ics-016/Documents/ICS/revolt-summit/node_modules/react-native/jest/mockComponent.js:28:18)
at RCTScrollView
at Component (/home/ics-016/Documents/ICS/revolt-summit/node_modules/react-native/jest/mockNativeComponent.js:17:18)
at ScrollViewMock (/home/ics-016/Documents/ICS/revolt-summit/node_modules/react-native/jest/mockScrollView.js:21:52)
at VirtualizedListContextProvider (/home/ics-016/Documents/ICS/revolt-summit/node_modules/react-native/Libraries/Lists/VirtualizedListContext.js:92:3)
at VirtualizedList (/home/ics-016/Documents/ICS/revolt-summit/node_modules/react-native/Libraries/Lists/VirtualizedList.js:680:29)
at FlatList (/home/ics-016/Documents/ICS/revolt-summit/node_modules/react-native/Libraries/Lists/FlatList.js:407:36)
at PanelList (/home/ics-016/Documents/ICS/revolt-summit/src/modules/home/views/PanelList.tsx:29:53)
at View
at Component (/home/ics-016/Documents/ICS/revolt-summit/node_modules/react-native/jest/mockComponent.js:28:18)
at RCTScrollView
at Component (/home/ics-016/Documents/ICS/revolt-summit/node_modules/react-native/jest/mockNativeComponent.js:17:18)
at ScrollViewMock (/home/ics-016/Documents/ICS/revolt-summit/node_modules/react-native/jest/mockScrollView.js:21:52)
at LinearGradient
at Home (/home/ics-016/Documents/ICS/revolt-summit/src/modules/home/views/Home.tsx:33:11)
at Provider (/home/ics-016/Documents/ICS/revolt-summit/node_modules/react-redux/lib/components/Provider.js:19:3)
16 | return (
17 | <View key={index}>
> 18 | <ShimmerPlaceHolder
| ^
19 | key={index}
20 | style={[
21 | styles.container,
Gathering the error below on trying the getting start example
system:
os: macOS Big Sur
package.json
{
"name": "app",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
},
"dependencies": {
"@aws-sdk/client-eventbridge": "^3.17.0",
"@react-native-community/async-storage": "^1.12.1",
"@react-native-community/masked-view": "^0.1.10",
"@react-native-community/netinfo": "^6.0.0",
"@react-navigation/bottom-tabs": "^6.0.0-next.3",
"@react-navigation/native": "^5.9.3",
"@react-navigation/stack": "^5.14.3",
"@reduxjs/toolkit": "^1.5.1",
"aws-amplify": "^3.4.0",
"moment": "^2.29.1",
"react": "17.0.1",
"react-native": "0.64.0",
"react-native-fast-image": "^8.3.4",
"react-native-gesture-handler": "^1.10.3",
"react-native-linear-gradient": "^2.5.6",
"react-native-reanimated": "^2.0.1",
"react-native-safe-area-context": "^3.2.0",
"react-native-screens": "^3.0.0",
"react-native-shimmer-placeholder": "^2.0.7",
"react-native-toast-message": "^1.4.9",
"react-native-vector-icons": "^8.1.0",
"react-redux": "^7.2.3",
"redux": "^4.0.5",
"redux-persist": "^6.0.0"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/runtime": "^7.12.5",
"@react-native-community/eslint-config": "^2.0.0",
"@types/jest": "^26.0.20",
"@types/react-native": "^0.64.0",
"@types/react-native-vector-icons": "^6.4.6",
"@types/react-test-renderer": "^16.9.2",
"babel-jest": "^26.6.3",
"eslint": "^7.14.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.64.0",
"react-test-renderer": "17.0.1",
"typescript": "^3.8.3"
},
"resolutions": {
"@types/react": "^17"
},
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
}
}
app.tsx
const CategoryProductsHorizontalList: React.FC<DepartmentProductsHorizontalListProps> = ({department}: DepartmentProductsHorizontalListProps) => {
// Handle animation
const avatarRef = React.createRef()
const firstLineRef = React.createRef()
const secondLineRef = React.createRef()
const thirdLineRef = React.createRef()
React.useEffect(() => {
const facebookAnimated = Animated.stagger(
400,
[
avatarRef.current.getAnimated(),
Animated.parallel([
firstLineRef.current.getAnimated(),
secondLineRef.current.getAnimated(),
thirdLineRef.current.getAnimated()
])
]
);
Animated.loop(facebookAnimated).start();
}, [])
return (
<View>
<View style={{ flexDirection: "row" }}>
<ShimmerPlaceholder
ref={avatarRef}
stopAutoRun
/>
<View style={{ justifyContent: "space-between" }}>
<ShimmerPlaceholder
ref={firstLineRef}
stopAutoRun
/>
<ShimmerPlaceholder
ref={secondLineRef}
stopAutoRun
/>
<ShimmerPlaceholder
ref={thirdLineRef}
stopAutoRun
/>
</View>
</View>
</View>
)
}
I have installed the plugin in my project having react version 0.63.
I was trying to working with this and writ following code. But app crashes each time.
import ShimmerPlaceHolder from 'react-native-shimmer-placeholder'
Anything wrong i am doing? Please update.
We are using
React Version: 0.63
Wix React Navigation
But app always gets crashed when we use the plugin.
Below is the crash log generated
java.lang.IllegalStateException: com.facebook.react.uimanager.IllegalViewOperationException: Trying to add unknown view tag: 407
detail: View tag:409
children(0): [
],
viewsToAdd(1): [
[0,407],
],
Code Wrote
import` ShimmerPlaceHolder from 'react-native-shimmer-placeholder'
<ShimmerPlaceHolder>
<Text>Hiii</Text>
</ShimmerPlaceHolder>
Complete Crash Log
--------- beginning of crash
2020-10-16 18:24:41.048 16474-16474/com.truedriver E/AndroidRuntime: FATAL EXCEPTION: main
Process: com.truedriver, PID: 16474
java.lang.IllegalStateException: com.facebook.react.uimanager.IllegalViewOperationException: Trying to add unknown view tag: 407
detail: View tag:409
children(0): [
],
viewsToAdd(1): [
[0,407],
],
at com.facebook.react.bridge.ReactContext.handleException(ReactContext.java:390)
at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:31)
at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:175)
at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:85)
at android.view.Choreographer$CallbackRecord.run(Choreographer.java:909)
at android.view.Choreographer.doCallbacks(Choreographer.java:723)
at android.view.Choreographer.doFrame(Choreographer.java:655)
at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:897)
at android.os.Handler.handleCallback(Handler.java:790)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loop(Looper.java:164)
at android.app.ActivityThread.main(ActivityThread.java:6626)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:438)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:811)
Caused by: com.facebook.react.uimanager.IllegalViewOperationException: Trying to add unknown view tag: 407
detail: View tag:409
children(0): [
],
viewsToAdd(1): [
[0,407],
],
So I am using this library on a page. And a button on this page triggers a LayoutAnimation
when tapped. The button's animation is fine, but when LayoutAnimation
is triggered, all the components wrapped by this library flickers. Is there a reason why?
Hey, Does this work with expo, as expo also gives linear gradient component without native linking
I'm seeing this odd issue where an autorun shimmer is not resetting to the start position after the first round.
The setup is pretty basic with the exception of linear-gradient being linked manually in Xcode:
<View>
<ShimmerPlaceHolder
style={{ width: 100 }}
duration={1000}
autoRun={true}/>
<ShimmerPlaceHolder
style={{ width: 100 }}
duration={2000}
autoRun={true}/>
</View>
and these are running against RN (0.48.1) and React Fiber (16.0.0-alpha.12) with react-native-linear-gradient
version 2.3.0 and version 1.0.13 of this module running on iOS simulator (iPhone 7, iOS 10.3)
I would appreciate it if you can look into this to see if it is reproducible.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.