react-native-skeleton-views
TypeScript icon, indicating that this package has built-in type declarations

0.0.3 • Public • Published

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

Dependents (0)

Package Sidebar

Install

npm i react-native-skeleton-views

Weekly Downloads

2

Version

0.0.3

License

MIT

Unpacked Size

25.8 kB

Total Files

21

Last publish

Collaborators

  • deriifirgiawan