react-native-light-placeholder

Lightweight and customizable placeholder component for React Native.

Examples	Full Example

Installation

npm i react-native-light-placeholder

Usage

Simple

import { Placeholder, Rectangle } from 'react-native-light-placeholder';

const MyPlaceholder = props => {
    return (
        <Placeholder {...props}>
            <Rectangle />
        </Placeholder>
    )
}

//Use this component anywhere like this
<MyPlaceholder number={5} />

The codes of the above examples are here

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  Text,
} from 'react-native';

import { Placeholder, Row, Circle, Col, Rectangle } from 'react-native-light-placeholder';

const ImagePlaceholder = props => {
    return (
        <Placeholder {...props}>
            <Circle diameter={200} />
        </Placeholder>
    )
}

const TextPlaceholder = props => {
    return (
        <Placeholder {...props}>
            <Rectangle width={300} height={40} />
        </Placeholder>
    )
}

const UserPlaceholder = props => {
    return (
        <Placeholder {...props} style={{alignSelf:'center'}}>
            <Row style={{marginVertical:20}}>
                <Circle />
                <Col>
                    <Rectangle width={100} />
                    <Rectangle />
                    <Rectangle />
                </Col>
            </Row>
        </Placeholder>
    )
}

const Example1Placeholder = props => {
    return (
        <Placeholder {...props} style={{alignSelf:'center'}}>
            <Row style={{marginVertical:20,alignItems:'center'}}>
                <Rectangle square height={60} />
                <Col>
                    <Rectangle width={100} />
                    <Rectangle />
                </Col>
            </Row>
        </Placeholder>
    )
}


const Example2Placeholder = props => {
    return (
        <Placeholder {...props} style={{alignSelf:'center'}}>
            <Row>
                <Col>
                    <Rectangle />
                    <Rectangle />
                </Col>
                <Circle diameter={60}/>
            </Row>
        </Placeholder>
    )
}

//Usage

const App = () => {
  const  [visible,setVisible] = React.useState(true);

  return (
    <SafeAreaView >
      <ScrollView>
        <Text style={styles.title}>Examples</Text>

        <Text style={styles.subtitle}>User Placeholders</Text>
        
        <UserPlaceholder number={1} visible={visible} />
        <Text style={{textAlign:'center'}}>With animation</Text>

        <UserPlaceholder animated={false} number={1} visible={visible} />
        <Text style={{textAlign:'center'}}>Without animation</Text>

        <Text style={styles.subtitle}>Image Placeholder</Text>
        <ImagePlaceholder visible={visible} />

        <Text style={styles.subtitle}>Text Placeholders</Text>
        <TextPlaceholder visible={visible} number={10} />

        <Text style={styles.subtitle}>Another Examples</Text>
        
        <Example1Placeholder visible={visible} number={2}  />
        <Example2Placeholder visible={visible} number={2}  />

      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  title:{
    fontSize:28,
    fontWeight:'bold',
    textAlign:'center',
    padding:10
  },
  subtitle:{
    fontSize:20,
    textAlign:'left',
    padding:10,
    marginLeft:5,
    fontStyle:'italic'
  }
});

export default App;

Full example see this

Props

Prop	Description	Type	Default
visible	visible of placeholder component	boolean	false
animated	animation of placeholder	boolean	true
duration	Duration of animaton lap	number	800
number	number of placeholders	number	1

License

MIT