1.0.1 • Published 6 years ago

react-native-preload v1.0.1

Weekly downloads
3
License
MIT
Repository
github
Last release
6 years ago

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:

PropertyTypeDescription
WidthNumberDefines the width of the skeleton to be shown
HeightNumberDefines the height of the skeleton to be shown
BorderRadiusNumberDefines 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:

PropertyTypeDescription
WidthNumberDefines the width of the skeleton to be shown
HeightNumberDefines the height of the skeleton to be shown
BorderRadiusNumberDefines the borderRadius of the skeleton to be shown