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:
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?
React Native provides an individual RefreshControl component specifically to implement pull-to-refresh easily in a React Native app. If you're rendering a list of data using the ScrollView or FlatList component, you can use RefreshControl to add the pull-to-refresh capability.
Forcing an update on a React class component In any user or system event, you can call the method this. forceUpdate() , which will cause render() to be called on the component, skipping shouldComponentUpdate() , and thus, forcing React to re-evaluate the Virtual DOM and DOM state.
If set to true, the browser will do a complete page refresh from the server and not from the cached version of the page. import React from 'react'; function App() { function refreshPage() { window. location. reload(false); } return ( <div> <button onClick={refreshPage}>Click to reload!
Fast Refresh. Fast Refresh is a React Native feature that allows you to get near-instant feedback for changes in your React components. Fast Refresh is enabled by default, and you can toggle "Enable Fast Refresh" in the React Native developer menu. With Fast Refresh enabled, most edits should be visible within a second or two.
So visit my React Navigation Installation tutorial and follow step 1, 2 and 3. 2. Now open your react native project’s main App.js file and import useState, useEffect, StyleSheet, Text, View, Button, NavigationContainer, useIsFocused and createStackNavigator component. 3. Creating our first home screen functional component named as HomeScreen ().
To achieve this functionality we have to use useIsFocused () method of React Navigation. We would use the useIsFocused () in any functional or class component. When user came back to previous screen it will check the useIsFocused () value and according to that it will re-render the component itself. This would update the screen.
This example will only ever appear to say "Current state is: active" because the app is only visible to the user when in the active state, and the null state will happen only momentarily. If you want to experiment with the code we recommend to use your own device instead of embedded preview. This event is received when the app state has changed.
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>;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With