Merge pull request #12808 from hungvu193/fix-12712

Fix: Offline default avatar doesn't update after connecting to the internet

src/components/Avatar.js

@@ -9,6 +9,8 @@ import CONST from '../CONST';
 import * as StyleUtils from '../styles/StyleUtils';
 import * as Expensicons from './Icon/Expensicons';
 import getAvatarDefaultSource from '../libs/getAvatarDefaultSource';
+import {withNetwork} from './OnyxProvider';
+import networkPropTypes from './networkPropTypes';
 import styles from '../styles/styles';
 
 const propTypes = {
@@ -30,6 +32,9 @@ const propTypes = {
 
     /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
     fallbackIcon: PropTypes.func,
+
+    /** Props to detect online status */
+    network: networkPropTypes.isRequired,
 };
 
 const defaultProps = {
@@ -49,6 +54,14 @@ class Avatar extends PureComponent {
         };
     }
 
+    componentDidUpdate(prevProps) {
+        const isReconnecting = prevProps.network.isOffline && !this.props.network.isOffline;
+        if (!this.state.imageError || !isReconnecting) {
+            return;
+        }
+        this.setState({imageError: false});
+    }
+
     render() {
         if (!this.props.source) {
             return null;
@@ -94,4 +107,4 @@ class Avatar extends PureComponent {
 
 Avatar.defaultProps = defaultProps;
 Avatar.propTypes = propTypes;
-export default Avatar;
+export default withNetwork()(Avatar);