rn-loading-wireframe

It can help showing loading wireframe effect for its wrapped components.

Features

• Support in React Native for both Android and iOS
• Possible to wrap more than one child component
• Easy to use
• Some customizations
• Produces wireframe with the size style corresponding the style of the wrapped child elements

Demo

Installation

• Using Npm

npm install rn-loading-wireframe --save

• Using Yarn

yarn add rn-loading-wireframe --dev

Example

import LoadingWireframe from 'rn-loading-wireframe';

<LoadingWireframe loading={true} color='#bdc3c7' fadeDuration={1000}>
  <Text
    style={{
      fontSize: 20,
      fontWeight: 'bold',
      width: 200,
      height: 25
    }}>
    Loading Wireframe
  </Text>
  <Text
    style={{
      marginTop: 5,
      width: 400,
      height: 20
    }}>
    It can help showing loading wireframe effect
  </Text>
  <TouchableHighlight
    style={{
      marginTop: 10,
      width: 100,
      height: 40,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: 'orange',
      borderRadius: 6
    }}>
    <Text style={{ color: '#fff' }}>Download</Text>
  </TouchableHighlight>
</LoadingWireframe>;

Usage

Available props

| Name | Type | Default | Description | | ----------------- | ------ | --------- | ---------------------------------- | | loading | bool | false | Should show the loading wireframe? | | color | string | #bdc3c7 | Color of the loading wireframe | | fadeDuration | number | 1000 | Duration of fading blink | | lowestFadeOpacity | number | 0.2 | The lowest opacity when fading out |