How to force render in react native

Hello Friends 👋,

Welcome To Infinitbility! ❤️

This tutorial will help you to force re-render in your react native application, here we will see how many ways to re-render components in react native and how to force re-render in react native for example.

As we know, React Native auto re-render content when any state change, any props change, or we have also an option to force update.

If your issue solves using the first ( state change ), and second ( props change) method then I will recommend don’t go with forceUpdate() method.

This is a method that is highly discouraged. Always use props & state changes to cause a new render.

But nonetheless, here is how you can do it!

import React from 'react';
import { View, Text, Button } from 'react-native';

class App extends React.Component {

  handleClick = () => {
    // force a re-render
    this.forceUpdate();
  };

  render() {
    console.log('App component: render()')
    return (
      <>
        <Button onClick={this.handleClick}>Say something</Button>
      </>
    );
  }
}

Thanks for reading…