react-native-skeleton-views

react-native-skeleton-view

This is simple loading skeleton for React Native

Installation

Note: This package is required react-native-linear-gradient

Step 1

Install react-native-linear-gradient Using npm :

npm install react-native-linear-gradient

If you are running a react-native version below 0.60:

react-native link react-native-linear-gradient

Step 2

npm install react-native-skeleton-view

Usage

Simple Usage

import SkeletonView from 'react-native-skeleton-view';

// ...

<SkeletonView style={{height: 12, width: 150, marginStart: 16, marginBottom: 8, borderRadius: 120}} />

Full usage

import React from 'react';
import {StyleSheet, View} from 'react-native';
import SkeletonView from 'react-native-skeleton-view';

const App = () => {
  return (
    <View style={styles.Wrapper}>
      <View style={styles.Card}>
        <SkeletonView
          style={styles.SkeletonProfile}
          duration={1500}
        />
        <View style={{marginTop: 8}}>
          <SkeletonView
            style={{height: 12, width: 125, marginStart: 16, marginBottom: 8, borderRadius: 120}}
          />
          <SkeletonView
            style={{height: 12, width: 150, marginStart: 16, marginBottom: 8, borderRadius: 120}}
          />
          <SkeletonView
            style={{height: 12, width: 150, marginStart: 16, marginBottom: 8, borderRadius: 100}}
          />
        </View>
      </View>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  Wrapper: {padding: 16},
  SkeletonProfile: {
    width: 80,
    height: 80,
    borderRadius: 80
  },
  Card: {
    padding: 24,
    borderWidth: 1,
    borderColor: '#DEDEDE',
    borderRadius: 20,
    flexDirection: 'row',
    alignItems: 'center'
  }
})

Props

Name	Description	Default
backgroundColor	For change background color skeleton	#E2E9ED
highlightColor	For change highlight color skeleton	#D9E0E3
duration	For change duration animation skeleton	1000
style	For custom style skeleton	None

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT