1.0.1 • Published 6 years ago
react-native-preload v1.0.1
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').heightSkeleton 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 |