react-native-preloader-shimmer

• Demo Screens

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
 */