:wrench: Installation

Install skeleton

yarn add skeleton-rn

or if you prefer

npm install skeleton-rn

:sparkles: Functionalities

:heavy_check_mark: Create a skeleton of your component with a loading effect.

:star: Example

Example 01

import React from 'react';
import { View } from 'react-native';
import Skeleton from 'skeleton-rn';

const App: React.FC = () => {
  return (
    <View style={{flex: 1}}>
      <Skeleton
        background={['#e9e6ed', '#dddddd', '#eeeeee', '#e9e6ed', '#e9e6ed']}
        duration={3000}
      />
      <Skeleton />
    </View>
  );
};

export default App;

Example 02 styled-components or rn-css

//styles.ts
import Skeleton from 'skeleton-rn';
import styled from 'styled-components/native';
//import styled from 'rn-css';

export const Name = styled(Skeleton)`
  widht: 100px;
  height: 40px;
  border-radius: 20px;
`;

import React from 'react';
import { View } from 'react-native';
import { Name } from './styles';

const App: React.FC = () => {
  return (
    <View style={{flex: 1}}>
      <Name />
    </View>
  );
};

export default App;

:rocket: Technology

The following tools were used in the construction of the project:

• Node.js
• React Native
• TypeScript

:memo: Licença

This project is under MIT license. See the archive LICENSE for more details.

Done with :heart: per Mateus Conceição

Back to the top