Forem: Ashwin Mothilal

How to add Shimmering effect to your React Native App using reanimated?

Ashwin Mothilal — Sat, 29 Aug 2020 14:09:58 +0000

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?

This is my first library published on npm and I would like to do something cool, so I built this
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.

Ashwin-Mothilal / react-native-js-shimmer-placeholder

Shimmering effect using react-native-reanimated, react-native-linear-gradient and react-native-masked-view

react-native-js-shimmer-placeholder

Shimmering effect using react-native-reanimated, react-native-linear-gradient and react-native-masked-view

Demo

Installation

Make sure you have already installed react-native-reanimated, react-native-linear-gradient and react-native-masked-view or install it from their links

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

or using yarn

yarn add react-native-js-shimmer-placeholder

Usage

To use shimmering effect for View

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 }}>🚀<

…

View on GitHub

Difference between Pure Component and Functional Component 🥳

Ashwin Mothilal — Sun, 12 Jan 2020 14:54:25 +0000

Hey devs 🌍

In today's post, I want to share my knowledge and understanding of Pure Component and Functional Component. How they both differ and when to use those and how it reduces the number of re-renders for a Component.

If you end up in this post, then you already know-how React works.

Now we will see what are those mentioned above.

What the heck is Pure Component!🤯

The Pure Component is similar to a Component where PureComponent has it's own implementation of shouldComponentUpdate and it only compares shallow props and state and you cannot implement your own shouldComponentUpdate in it.

If you have complex data structures in your state and props then your Pure Component will not re-render when the state or props change which you don't want to happen and you will get the wrong output.

When to use them? 🤔

When your Pure Component gives the same render for the same values of Props and State of a Pure Component.

Example:

If you have a list component and you're building a list item component then you can use Pure Component which means your item component won't re-render if you change anything unrelated to the Pure Component which will increase the performance of the list.

Basic Code:



class PC extends PureComponent {
    render(){
        return <div>This is Pure Component</div>
    }
}

What is Functional Component?

Functional Component is a normal function where you return a View/div. They don't have any React life cycle methods. It's just a JavaScript function. It will re-render whenever your parent component re-renders, which means unwanted re-renders which you won't see visually.

Basic Code:



function FC(){
    return (
        <div>This is a Functional Component</div>
    );
}

Demo React App

I have created a repository to understand the differences between those.

I have an initial state



this.state = {
   dummyState: new Date().valueOf()
};

I have a parent component which has rendered three different child components named:

Pure Component
Functional Component
Component



 <PureChild />
 <FunctionalChild />
 <ComponentChild />

Now I'm setting an Interval in componentDidMount in Parent Component



this.interval = setInterval(() => {
    this.setState({
      dummyState: new Date().valueOf()
    });
}, 1000);

Note I haven't passed the state to the child components.

I have printed the latest Date().valueOf() in all the child component, you can see those visually.
If you run the React App you will see the values updating in the Child Components except for the Pure Component.

Now the Pure Component doesn't re-render because of the props and state in it (actually we don't have any) don't change but the Component and the Functional Component re-renders whenever the parent component re-renders.

Conclusion

It's good to use Pure Component to increase the performance but when to use the Functional Component, I didn't say that yet, you can just use it inside the Pure Component.

Tip:

You can use React.memo for functional components it's similar to Pure Component
Implement shouldComponentUpdate with Component to avoid unnecessary re-renders