Today we will look at how to implement the Shimmering effect on a React Native App using the library react-native-js-shimmer-placeholder

Why this library?

1. This is my first library published on npm and I would like to do something cool, so I built this
2. There was no shimmering effect library using reanimated, yes this library uses react-native-reanimated v1

Example App

Adding Shimmering effect to the View

Let us get the stone rolling right away:

import {
  ViewPlaceholder,
  Direction,
} from "react-native-js-shimmer-placeholder";

<ViewPlaceholder
  width={100}
  height={100}
  style={{
    borderWidth: 1,
    borderColor: "lightgrey",
    borderRadius: 50,
  }}
  direction={Direction.UP}
  gradientContainerStyle={{ borderRadius: 50 }}
>
  <View
    style={{
      height: 100,
      backgroundColor: "#318fb5",
      borderRadius: 50,
      alignItems: "center",
      justifyContent: "center",
    }}
  >
    <Text style={{ fontSize: 30 }}>🚀</Text>
  </View>
</ViewPlaceholder>

Step 1

Import the ViewPlaceholder from the react-native-js-shimmer-placeholder, then decide the direction you want the Shimmering effect to flow.

By default, it will move towards the RIGHT direction.

Step 2

Now pass the width or height to the ViewPlaceholder which depends upon the direction.

For vertical effect pass the height and for horizontal effect pass the width.

Step 3

Render the contents inside the ViewPlaceholder. You can also add styles to the ViewPlaceholder and the Gradient container style to customise the View as you wish.

Adding Shimmering effect to the Text

import { TextPlaceholder } from "react-native-js-shimmer-placeholder";

<TextPlaceholder
  show={true}
  textStyle={{ fontSize: 24, fontWeight: "bold" }}
  style={{
    flex: 1,
    width: "100%",
    justifyContent: "center",
    alignItems: "center",
  }}
  textColor={"#318fb5"}
>
  Hey React Native devs!
</TextPlaceholder>

Step 1

Import the TextPlaceholder from the react-native-js-shimmer-placeholder, then decide the direction you want the Shimmering effect to flow.

By default, it will move towards the RIGHT direction.

Step 2

Just pass the direction. The TextPlaceholder doesn't necessarily need a width/height as a fixed value, It can also be percentages or flex as long as the parent has the dimensions

Step 3

Render the TextPlaceholder inside any View as you wish. You can also pass textStyle and other text attributes as you would do for a Text component from RN Library. You can also pass the style for the mask component and the first child view of the mask container.

These are the initial effects for this library. Please feel free to try out the example app included in the Repo.

If you would like to know about all the props and customisations please check the documentation link below. Any comments are welcome.

npm install react-native-js-shimmer-placeholder --save

yarn add react-native-js-shimmer-placeholder

import {
  ViewPlaceholder,
  Direction,
} from "react-native-js-shimmer-placeholder";
<ViewPlaceholder
  show={true}
  width={100}
  height={100}
  style={{
    borderWidth: 1,
    borderColor: "lightgrey",
    borderRadius: 50,
  }}
  direction={Direction.UP}
  gradientContainerStyle={{ borderRadius: 50 }}
>
  <View
    style={{
      height: 100,
      backgroundColor: "#318fb5",
      borderRadius: 50,
      alignItems: "center",
      justifyContent: "center",
    }}
  >
    <Text style={{ fontSize: 30 }}>🚀<