README

react-native-preloader-shimmer

💌 Message

Interested in maintain this library ?

Demo Images

MainLoader	PageLoader	PostLoader

Profile Loader

Install packages

npm install react-native-preloader-shimmer --save

yarn add react-native-preloader-shimmer

Other Dependency - Mostly auto install

yarn add react-native-shimmer

and

cd ios && pod install

If any error occur's without installing react-native-shimmer

if any error occur's without installing react-native-shimmer then

yarn add react-native-shimmer

Usage

Full page content background color will be also the statusBar color so please give a valid barStyle [light-content | dark-conent | default] for better UI desing
BarStyle not required for profile loader or any short view

Main Loader
Post Loader
Page Loader
Profile Loader
Full Example
Read Me

Main Loader

MainLoader	MainLoader Dark

import React from "react";
import { View, StyleSheet } from "react-native";
import { MainLoader } from "react-native-preloader-shimmer";

const App = () => {
  return (
    <View style={{ flex: 1, backgroundColor: "white" }}>
      <MainLoader
        barStyle={"dark-content"} //Status bar icon color -required filed light-content or dark-content
        animSpeed={100} // Animation Run speed - default 100ms
        visible={true} //Visibility of MainLoader default true
        backgroundColor={"white"} // backgroundColor of main container default = #ffffff
      />
    </View>
  );
};

export default App;

NAME PROPS	ANDROID	IOS	TYPE
barStyle	required	required	dark-content light-content
animSpeed	required	required	Number 1 - 1000
backgroundColor	not required	not required	Default - white #ffffff
visible	not requires	not requires	Boolean default is true

Post Loader

PostLoader	PostLoader Dark

Make a Loader for your post like facebook

import React from 'react'
import { View } from 'react-native';
import { PostLoader } from 'react-native-preloader-shimmer'

const App = () => {
  return (
    <View style={{ flex: 1, backgroundColor: 'white' }}>
      <PostLoader
        barStyle={'dark-content'} //---> StatusBar Icon color 
        animSpeed={100} //----> Animation Speed default 100
        visible={true} //----> Visibility  
        backgroundColor={'white'} />
    </View>
  )
}

export default App;

NAME PROPS	ANDROID	IOS	TYPE
barStyle	required	required	dark-content light-content
animSpeed	required	required	Number 1 - 1000
backgroundColor	not required	not required	Default - white #ffffff
visible	not requires	not requires	Boolean default is true

Page Loader

PageLoader	PageLoader Dark

PreBuild PageLoader for BlogPost / Terms and conditions fetching from internet

import React from 'react'
import { View } from 'react-native';
import { PageLoader } from 'react-native-preloader-shimmer'

const App = () => {
  return (
    <View style={{ flex: 1, backgroundColor: 'white' }}>
      <PageLoader
        barStyle={'dark-content'} //----> StatusBar icon Color
        animSpeed={100} //----> Animation Speed default 100
        visible={true} //----> Visibility  true/false
        includeProfile={true} //---> Hide 2 profile shimmer
        backgroundColor={'white'} />
    </View>
  )
}

export default App;

NAME PROPS	ANDROID	IOS	TYPE
includeProfile	not required	not required	true/ false
barStyle	required	required	dark-content light-content
animSpeed	required	required	Number 1 - 1000
backgroundColor	not required	not required	Default - white #ffffff
visible	not requires	not requires	Boolean default is true

Profile Loader

ProfileLoader

ProfileLoader Dark

PreBuild Loader for profile if it's empty or fetching

import React from 'react'
import { View } from 'react-native';
import { ProfileLoader } from 'react-native-preloader-shimmer'

const App = () => {
  return (
    <View style={{ padding: 10 }}>
      <ProfileLoader
        animSpeed={100} //----> Animation Speed default 100
        visible={true} //----> Visibility  true/false
        backgroundColor={'white'} />
    </View>
  )
}

export default App;

NAME PROPS	ANDROID	IOS	TYPE
animSpeed	required	required	Number 1 - 1000
backgroundColor	not required	not required	Default - white #ffffff
visible	not requires	not requires	Boolean default is true

Full Example

Fetching data from server
After fetching success profileLoader will invisible

import React, { useEffect, useState } from 'react'
import { View, Text, StyleSheet, Image } from 'react-native';
import { ProfileLoader } from 'react-native-preloader-shimmer'
const App = () => {

  const [showLoader, setShowLoader] = useState(true)
  const [data, setData] = useState([])

  useEffect(() => {
    setTimeout(() => {
      getProfile() //---> Fetch may work fast ... this is for demo purpose
    }, 2000);
  }, [])

  const getProfile = async () => {
    /*
    Usage of async function means here if will call only after first 2 function works
    */
    const ftch = await fetch('https://demo.chzapps.com/get-user-demo.json'); //----> May load fast
    const json = await ftch.json()
    if (json) {
      setShowLoader(false) //This is for invisible Loader and visible other text and images
      setData(json)
    }
  }

  return (
    <View style={{ backgroundColor: 'white', flex: 1 }}>
      <View style={{ padding: 10 }}>
        {/* Wrapped in View for padding 10 Default ProfileLoader not support style */}
        {
          showLoader ? <ProfileLoader
            animSpeed={100} //----> Animation Speed default 100
            visible={showLoader} //----> Visibility  true/false
            backgroundColor={'white'} /> :
            <View>
              <Image
                source={{ uri: data.profile }}
                style={{ height: 50, width: 50 }} />
              <Text style={styles.name}>Name : {data.name}</Text>
              <Text style={styles.name}>Work : {data.workingtype}</Text>
              <Text style={styles.name}>Age : {data.age}</Text>
            </View>
        }
      </View>
    </View>
  )
}

//StyleSheet
const styles = StyleSheet.create({
  name: {
    fontSize: 20,
  }
})

export default App;

/**
 * this is only a demo purpose
 * Fetched image was from internet
 */

Read Me

Anyone who can maintian this libarary please contact us on support@chzapps.com

Easy to maintian
Easy to use

File Repo

Usage no npm install needed!