react-native-preload

React Native Preload Documentation

Installation

npm i react-native-preload

Import

import {
  Skeleton
} from 'react-native-preload'
 

Quick Example

    <Skeleton Width={70} Height={30} BorderRadius={4} />

Skeleton Properties Detail

Define a Skeleton screen with following properties as such:

Property	Type	Description
Width	Number	Defines the width of the skeleton to be shown
Height	Number	Defines the height of the skeleton to be shown
BorderRadius	Number	Defines the borderRadius of the skeleton to be shown

Responsive Skeleton Screen

To render a responsive screen, use Dimensions react-native library to get the width of the screen of your device like such

import { Dimensions } from 'react-native'
const SCREEN_WIDTH = Dimensions.get('window').width
const SCREEN_HEIGHT = Dimensions.get('window').height

Skeleton Screen

<View style={{ width: SCREEN_WIDTH / 5, 
               height: SCREEN_HEIGHT / 5.8,
               backgroundColor: '#d8d8d8',
               borderRadius:8, }} >
    <Skeleton Width={70} Height={SCREEN_HEIGHT / 5.8} BorderRadius={8} />
</View>

Skeleton Properties Detail

Define a Skeleton screen with following properties as such:

Property	Type	Description
Width	Number	Defines the width of the skeleton to be shown
Height	Number	Defines the height of the skeleton to be shown
BorderRadius	Number	Defines the borderRadius of the skeleton to be shown