React-native-loader-place NPM

Loader Place for React Native Projects

Installation

$ npm install react-native-loader-place --save

Demo

Can use when you need to show something on screen before data loaded.

Usage

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
} from 'react-native';

import { Circle, Rectangle } from 'react-native-loader-place'

export default class LoaderPlace extends Component {
  render() {
    return (
      <View style={styles.container}>

        <Rectangle
            height={10}
            width={50}
            loaded={false}
            duration={900}
            backgroundColor = 'blue',
            animationColor = 'blue',
            style = {{ padding: 10}}>

            <Text>Onur Orhan</Text>

        </Rectangle>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop:50
  },
});

Props for Rectangle

All properties are optional

Prop	Type	Default	Description
`height`	Number	15	used to specify the height of the rectangle
`width`	Number	70	used to specify the width of the rectangle
`duration`	Number	900	transition speed of animation
`backgroundColor`	String	blue	for a faint color on the background
`animationColor`	String	blue	the color of the animation that will pass above the background
`style`	Object	justifyContent:'center', alignItems:'center'	style of the Rectangle Loader
`loaded`	Boolean	true	if loaded is false that will be enable loading animation

Props for Circle

All properties are optional

Prop	Type	Default	Description
`radius`	Number	30	used to specify the size of the circle, if radius is 20, size of circle 40x40 as width and height
`duration`	Number	900	transition speed of animation
`backgroundColor`	String	blue	for a faint color on the background
`animationColor`	String	blue	the color of the animation that will pass above the background
`style`	Object	justifyContent:'center', alignItems:'center'	style of the Circle Loader
`loaded`	Boolean	true	if loaded is false that will be enable loading animation

Support

Email onurorhan04@gmail.com for support

Place Loader Loading React Native React

@infinitebrahmanuniverse/nolb-react-native-l @everything-registry/sub-chunk-2583

1.0.0

7 years ago