ref(local-video): merge styles at render

Remove caching of calculated styles, thereby removing
componentWillReceiveProps, by passing in base styles
and passed in styles when rendering.

react/features/welcome/components/LocalVideoTrackUnderlay.native.js

@@ -33,69 +33,11 @@ type Props = {
     style: Object
 };
 
-/**
- * The type of the React {@code Component} state of
- * {@link LocalVideoTrackUnderlay}.
- */
-type State = {
-
-    /**
-     * The style of {@code LocalVideoTrackUnderlay} which is a combination
-     * of its default style and the consumer-specified style.
-     */
-    style: Object
-};
-
 /**
  * Implements a React {@code Component} which underlays the local video track,
  * if any, underneath its children.
  */
-class LocalVideoTrackUnderlay extends Component<Props, State> {
-    /**
-     * Initializes a new {@code LocalVideoTrackUnderlay} instance.
-     *
-     * @param {Object} props - The read-only React {@code Component} props with
-     * which the new instance is to be initialized.
-     */
-    constructor(props) {
-        super(props);
-
-        this.componentWillReceiveProps(props);
-    }
-
-    /**
-     * Notifies this mounted React {@code Component} that it will receive new
-     * props. Forks (in Facebook/React speak) the prop {@code style} because its
-     * value is to be combined with the default style.
-     *
-     * @inheritdoc
-     * @param {Object} nextProps - The read-only React {@code Component} props
-     * that this instance will receive.
-     * @returns {void}
-     */
-    componentWillReceiveProps(nextProps) {
-        // style
-        const prevStyle = this.props && this.props.style;
-        const nextStyle = nextProps && nextProps.style;
-        const assignState = !this.state;
-
-        if (prevStyle !== nextStyle || assignState) {
-            const nextState = {
-                style: {
-                    ...styles.localVideoTrackUnderlay,
-                    ...nextStyle
-                }
-            };
-
-            if (assignState) {
-                // eslint-disable-next-line react/no-direct-mutation-state
-                this.state = nextState;
-            } else {
-                this.setState(nextState);
-            }
-        }
-    }
-
+class LocalVideoTrackUnderlay extends Component<Props> {
     /**
      * Implements React's {@link Component#render()}.
      *
@@ -105,7 +47,11 @@ class LocalVideoTrackUnderlay extends Component<Props, State> {
      */
     render() {
         return (
-            <View style = { this.state.style }>
+            <View
+                style = { [
+                    styles.localVideoTrackUnderlay,
+                    this.props.style
+                ] }>
                 <VideoTrack videoTrack = { this.props._localVideoTrack } />
                 <TintedView>
                     { this.props.children }