Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: prevent avatar icon from flicker on Web #9995

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion src/components/Avatar.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import themeColors from '../styles/themes/default';
import CONST from '../CONST';
import * as StyleUtils from '../styles/StyleUtils';
import * as Expensicons from './Icon/Expensicons';
import getAvatarDefaultSource from '../libs/getAvatarDefaultSource';

const propTypes = {
/** Source for the avatar. Can be a URL or an icon. */
Expand Down Expand Up @@ -70,7 +71,12 @@ class Avatar extends PureComponent {
/>
)
: (
<Image source={{uri: this.props.source}} style={imageStyle} onError={() => this.setState({imageError: true})} />
<Image
source={{uri: this.props.source}}
defaultSource={getAvatarDefaultSource(this.props.source)}
style={imageStyle}
onError={() => this.setState({imageError: true})}
/>
)}
</View>
);
Expand Down
7 changes: 7 additions & 0 deletions src/libs/getAvatarDefaultSource/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
/**
* Avatar icon flickers when message is sent for the first time, return and set the source as
* defaultSource prop of image to prevent avatar icon from flicker when running on Web/Desktop
* @param {String|Function} source The source of avatar image
* @return {Object} The image source
*/
export default source => ({uri: source});
5 changes: 5 additions & 0 deletions src/libs/getAvatarDefaultSource/index.native.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
/**
* Avatar icon does not flicker when running on Native, return and set undefined as defaultSource prop of image
* @return {Object} undefined
*/
export default () => undefined;