React Native force component refresh when the app goes to foreground

Question

My app displays some Texts. I need to re-render a Component when the font size changes via Settings --> Accessibility --> Font size:

So basically this is se sequence:

• The app is opened (foreground).
• The user opens the Phone Settings so the app goes to foreground (not completely closed).
• The user changes the Font size via via Settings --> Accessibility --> Font size.
• The user closes the Settings and opens the app goes to foreground again.

At this point I need to reload the app because some Components need to be adapted.

I'm using react-native-device-info to get the font size using const fontScale = DeviceInfo.getFontScale(); but its value doesn't get updated until the app is completely closed and opened.

Any ideas?

Answer 1

You can set the appstate to nextAppState. It should cause the component to rerender.

import React, {Component} from 'react';
import {AppState, Text} from 'react-native';

class AppStateExample extends Component {
  state = {
    appState: AppState.currentState,
  };

  componentDidMount() {
    AppState.addEventListener('change', this._handleAppStateChange);
  }

  componentWillUnmount() {
    AppState.removeEventListener('change', this._handleAppStateChange);
  }

  _handleAppStateChange = (nextAppState) => {
    if (
      this.state.appState.match(/inactive|background/) &&
      nextAppState === 'active'
    ) {
      console.log('App has come to the foreground!');
    }
    this.setState({appState: nextAppState});
  };

  render() {
    return <Text>Current state is: {this.state.appState}</Text>;
  }
}