react-native-masked-loader
Creating butter smooth content and skeleton loader in react native.
react-native-skeleton-loader is using react-native-masked-view and react-native-svg. you can simply create your SVG elements with an arbitry color and pass it to the library;
Platforms Supported
✅ iOS
✅ Android
Getting Started
$ yarn add react-native-masked-loader react-native-masked-view react-native-svg
or
$ npm install --save react-native-masked-loader react-native-masked-view react-native-svg
for IOS
$ cd ios
pod install
Example 1 | Example 2 |
---|---|
Props
Type | Required | Description |
---|---|---|
MaskedElement | Yes | |
duration | No | animation duration in millisecond the default is 1200 |
delay | No | delay in millisecond for every round of animation default is zero |
forColor | No | the animated gradient color default is #CBCBCB |
forColorOpacity | No | its recommended to use this when you have backgroundImage, the default is 1 |
backColor | No | the backgound of maked view the default is #E0E0E0 |
backgroundImage | No | the backgoundImage => backgoundImage={uri:'imageUrl'} |
dir | No | animation direction the default is "ltr", ltr/rtl/top/bottom |
Usage
import React from 'react';import View StyleSheet from 'react-native';import Svg Rect from 'react-native-svg';import ContentLoader from 'react-native-masked-loader'; const styles = StyleSheet; { return <Svg = ="100%" => <Rect ="0" ="0" ="8" ="8" ="50%" ="16" /> <Rect ="0" ="30" ="9" ="9" ="100%" ="128" /> <Rect ="0" ="172" ="4" ="4" ="100%" ="8" /> <Rect ="0" ="188" ="4" ="4" ="100%" ="8" /> <Rect ="0" ="204" ="4" ="4" ="100%" ="8" /> </Svg> ;} { const MaskedElement = ; return <View => <ContentLoader = /> </View> ;}
Advance Usage
import React from 'react';import View StyleSheet ScrollView from 'react-native';import Svg Rect Circle from 'react-native-svg';import ContentLoader from 'react-native-masked-loader'; const styles = StyleSheet; { return <Svg = ="100%" => <Rect ="0" ="0" ="8" ="8" ="50%" ="16" /> <Rect ="0" ="30" ="9" ="9" ="100%" ="128" /> <Rect ="0" ="172" ="4" ="4" ="100%" ="8" /> <Rect ="0" ="188" ="4" ="4" ="100%" ="8" /> <Rect ="0" ="204" ="4" ="4" ="100%" ="8" /> </Svg> ;} { return <> <View => <View => <Svg = ="100%" => <Circle ="52" ="52" ="52" /> </Svg> </View> <View => <Svg = ="100%" => <Rect ="0" ="0" ="7" ="7" ="100%" ="12" /> <Rect ="0" ="29" ="7" ="7" ="100%" ="12" /> <Rect ="0" ="53" ="7" ="7" ="100%" ="12" /> <Rect ="0" ="77" ="7" ="7" ="50%" ="12" /> </Svg> </View> </View> </> ;} { const MaskedElement_1 = ; const MaskedElement_2 = ; return <ScrollView> /* Basic Example with direction */ <View => <ContentLoader = = = ="#cfcfcf" ="gray"/> </View> /* diffrent svg mask item */ <View => <ContentLoader = /> </View> /* background image with forcolor opacity */ <View => <ContentLoader = = = /> </View> </ScrollView> ;}