@hadnet/react-native-skeleton

A nice RN Skeleton using Reanimated for better performance

Installation

yarn add @hadnet/react-native-skeleton@alpha

npm install @hadnet/react-native-skeleton@alpha

Dependencies

  yarn add react-native-linear-gradient @react-native-masked-view/masked-view @react-native-reanimated

  npm install react-native-linear-gradient @react-native-masked-view/masked-view @react-native-reanimated

Add 'react-native-reanimated/plugin' to your babel.config.js file

plugins: [
   // ...
   'react-native-reanimated/plugin', // it's placed at the end
]

  cd ios && pod install && cd ..

Usage

import * as React from 'react';

import { StyleSheet, View } from 'react-native';
import {
  Skeleton,
  Circle,
  Card,
  Lines,
  Box,
  Line,
  Row,
  Col,
} from '@hadnet/react-native-skeleton';

export default function MySkeletonComp() {
  return (
    <View style={styles.container}>
      <View style={styles.wrapper}>
        <Skeleton animation="wave" /* dark={true} */>
          <Col space={12}>
            <Row space={12}>
              <Box />
              <Col space={8}>
                <Line as="lines" n={2} />
              </Col>
            </Row>
            <Col space={8}>
              <Line />
              <Line />
            </Col>
            <Row space={12}>
              <Col space={8}>
                <Line as="lines" n={2} />
              </Col>
              <Circle />
            </Row>
            <Card height={150} />
            <Lines n={3} random />
          </Col>
        </Skeleton>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'white',
  },
  wrapper: {
    width: '80%',
  },
});

Contributing

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

License

MIT

---

Made with create-react-native-library