diff --git a/react/features/base/participants/components/Avatar.native.js b/react/features/base/participants/components/Avatar.native.js index dd1a77f08..6ca750e51 100644 --- a/react/features/base/participants/components/Avatar.native.js +++ b/react/features/base/participants/components/Avatar.native.js @@ -19,6 +19,68 @@ export default class Avatar extends Component { uri: React.PropTypes.string } + /** + * Initializes a new Avatar instance. + * + * @param {Object} props - The read-only React Component props with which + * the new instance is to be initialized. + */ + constructor(props) { + super(props); + + // Fork (in Facebook/React speak) the prop uri because Image will + // receive it through a source object. Additionally, other props may be + // forked as well. + this.componentWillReceiveProps(props); + } + + /** + * Notifies this mounted React Component that it will receive new props. + * Forks (in Facebook/React speak) the prop {@code uri} because + * {@link Image} will receive it through a {@code source} object. + * Additionally, other props may be forked as well. + * + * @inheritdoc + * @param {Object} nextProps - The read-only React Component props that this + * instance will receive. + * @returns {void} + */ + componentWillReceiveProps(nextProps) { + // uri + const prevURI = this.props && this.props.uri; + const nextURI = nextProps && nextProps.uri; + let nextState; + + if (prevURI !== nextURI || !this.state) { + nextState = { + ...nextState, + + /** + * The source of the {@link Image} which is the actual + * representation of this {@link Avatar}. As {@code Avatar} + * accepts a single URI and {@code Image} deals with a set of + * possibly multiple URIs, the state {@code source} was + * explicitly introduced in order to reduce unnecessary renders. + * + * @type {{ + * uri: string + * }} + */ + source: { + uri: nextURI + } + }; + } + + if (nextState) { + if (this.state) { + this.setState(nextState); + } else { + this.state = nextState; + } + } + } + /** * Implements React's {@link Component#render()}. * @@ -30,7 +92,7 @@ export default class Avatar extends Component { // XXX Avatar is expected to display the whole image. resizeMode = 'contain' - source = {{ uri: this.props.uri }} + source = { this.state.source } style = { this.props.style } /> ); }