feat(web/RN): update React to v16 and React Native to 0.49

react/features/always-on-top/AlwaysOnTop.js

@@ -59,7 +59,7 @@ const toolbarButtons = {
  * @class AlwaysOnTop
  * @extends Component
  */
-export default class AlwaysOnTop extends Component {
+export default class AlwaysOnTop extends Component<*> {
     /**
      * Initializes new AlwaysOnTop instance.
      *

react/features/app/functions.web.js

@@ -39,7 +39,8 @@ const _INTERCEPT_COMPONENT_RULES = [
      * @returns {UnsupportedMobileBrowser|void} If the rule is satisfied then
      * we should intercept existing component by UnsupportedMobileBrowser.
      */
-    () => {
+    // eslint-disable-next-line no-unused-vars
+    state => {
         const OS = Platform.OS;
 
         if (OS === 'android' || OS === 'ios') {
@@ -103,7 +104,7 @@ export function _getRouteToRender(stateOrGetState: Object | Function) {
  */
 function _interceptComponent(
         stateOrGetState: Object | Function,
-        component: ReactElement<*>) {
+        component: React$Element<*>) {
     let result;
     const state = toState(stateOrGetState);
 

react/features/authentication/components/WaitForOwnerDialog.native.js

@@ -17,7 +17,7 @@ import styles from './styles';
  *
  * See {@link LoginDialog} description for more details.
  */
-class WaitForOwnerDialog extends Component {
+class WaitForOwnerDialog extends Component<*> {
     /**
      * WaitForOwnerDialog component's property types.
      *

react/features/base/dialog/components/AbstractDialog.js

@@ -9,7 +9,7 @@ import { DIALOG_PROP_TYPES } from '../constants';
 /**
  * An abstract implementation of a dialog on Web/React and mobile/react-native.
  */
-export default class AbstractDialog extends Component {
+export default class AbstractDialog extends Component<*, *> {
     /**
      * {@code AbstractDialog} React {@code Component}'s prop types.
      *

react/features/base/jwt/components/CallOverlay.js

@@ -21,7 +21,7 @@ declare var interfaceConfig: Object;
  *
  * @extends Component
  */
-class CallOverlay extends Component {
+class CallOverlay extends Component<*, *> {
     /**
      * The (reference to the) {@link Audio} which plays/renders the audio
      * depicting the ringing phase of the call establishment represented by this

react/features/base/media/components/native/Video.js

@@ -11,7 +11,7 @@ import styles from './styles';
  * {@code HTMLVideoElement} and wraps around react-native-webrtc's
  * {@link RTCView}.
  */
-export default class Video extends Component {
+export default class Video extends Component<*> {
     /**
      * {@code Video} component's property types.
      *

react/features/base/react/components/AbstractContainer.js

@@ -9,7 +9,7 @@ import React, { Component } from 'react';
  *
  * @extends Component
  */
-export default class AbstractContainer extends Component {
+export default class AbstractContainer extends Component<*> {
     /**
      * {@code AbstractContainer} component's property types.
      *

react/features/base/react/components/native/LoadingIndicator.js

@@ -10,7 +10,7 @@ import { ColorPalette } from '../../../styles';
  * a suitable visualization of long-running processes with indeterminate amounts
  * of work to be done.
  */
-export default class LoadingIndicator extends Component {
+export default class LoadingIndicator extends Component<*> {
     /**
      * Implements React's {@link Component#render()}.
      *

react/features/base/react/components/web/InlineDialogFailure.js

@@ -11,7 +11,7 @@ declare var interfaceConfig: Object;
 /**
  * Inline dialog that represents a failure and allows a retry.
  */
-class InlineDialogFailure extends Component {
+class InlineDialogFailure extends Component<*> {
     /**
      * {@code InlineDialogFailure}'s property types.
      *

react/features/base/react/components/web/Watermarks.js

@@ -21,7 +21,7 @@ const _RIGHT_WATERMARK_STYLE = {
  * A Web Component which renders watermarks such as Jits, brand, powered by,
  * etc.
  */
-class Watermarks extends Component {
+class Watermarks extends Component<*, *> {
     static propTypes = {
         _isGuest: PropTypes.bool,
         t: PropTypes.func

react/features/base/react/prop-types-polyfill.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/* eslint-disable react/no-deprecated */
+if (typeof React.PropTypes === 'undefined') {
+    React.PropTypes = PropTypes;
+}
+/* eslint-enable react/no-deprecated */

react/features/conference/components/Conference.web.js

@@ -21,7 +21,7 @@ declare var interfaceConfig: Object;
 /**
  * The conference page of the Web application.
  */
-class Conference extends Component {
+class Conference extends Component<*> {
     _onShowToolbar: Function;
     _originalOnShowToolbar: Function;
 

react/features/contact-list/components/ContactListPanel.web.js

@@ -16,7 +16,7 @@ declare var interfaceConfig: Object;
  *
  * @extends Component
  */
-class ContactListPanel extends Component {
+class ContactListPanel extends Component<*> {
     /**
      * Default values for {@code ContactListPanel} component's properties.
      *

react/features/desktop-picker/components/DesktopPicker.js

@@ -47,7 +47,7 @@ const VALID_TYPES = Object.keys(TAB_LABELS);
  *
  * @extends Component
  */
-class DesktopPicker extends Component {
+class DesktopPicker extends Component<*, *> {
     /**
      * DesktopPicker component's property types.
      *

react/features/feedback/components/FeedbackButton.web.js

@@ -12,7 +12,7 @@ import { openFeedbackDialog } from '../actions';
 /**
  * Implements a Web/React Component which renders a feedback button.
  */
-class FeedbackButton extends Component {
+class FeedbackButton extends Component<*> {
     _onClick: Function;
 
     static propTypes = {

react/features/filmstrip/components/Filmstrip.native.js

@@ -16,7 +16,7 @@ import { styles } from './_';
  *
  * @extends Component
  */
-class Filmstrip extends Component {
+class Filmstrip extends Component<*> {
     /**
      * Filmstrip component's property types.
      *

react/features/filmstrip/components/Filmstrip.web.js

@@ -17,7 +17,7 @@ import { shouldRemoteVideosBeVisible } from '../functions';
  *
  * @extends Component
  */
-class Filmstrip extends Component {
+class Filmstrip extends Component<*> {
     _isHovered: boolean;
 
     _notifyOfHoveredStateUpdate: Function;

react/features/invite/components/AddPeopleDialog.web.js

@@ -19,7 +19,7 @@ declare var interfaceConfig: Object;
 /**
  * The dialog that allows to invite people to the call.
  */
-class AddPeopleDialog extends Component {
+class AddPeopleDialog extends Component<*, *> {
     /**
      * {@code AddPeopleDialog}'s property types.
      *
@@ -311,7 +311,7 @@ class AddPeopleDialog extends Component {
         );
     }
 
-    _setMultiSelectElement: (Object) => void;
+    _setMultiSelectElement: (React$ElementRef<*> | null) => mixed;
 
     /**
      * Sets the instance variable for the multi select component

react/features/large-video/components/LargeVideo.native.js

@@ -14,7 +14,7 @@ import styles from './styles';
  *
  * @extends Component
  */
-class LargeVideo extends Component {
+class LargeVideo extends Component<*> {
     /**
      * LargeVideo component's property types.
      *

react/features/large-video/components/LargeVideo.web.js

@@ -14,7 +14,7 @@ declare var interfaceConfig: Object;
  *
  * @extends Component
  */
-export default class LargeVideo extends Component {
+export default class LargeVideo extends Component<*> {
     /**
      * Implements React's {@link Component#render()}.
      *

react/features/mobile/network-activity/components/NetworkActivityIndicator.js

@@ -10,7 +10,7 @@ import { LoadingIndicator } from '../../../base/react';
  * The React {@code Component} which renders a progress indicator when there
  * are ongoing network requests.
  */
-class NetworkActivityIndicator extends Component {
+class NetworkActivityIndicator extends Component<*> {
     /**
      * {@code NetworkActivityIndicator} React {@code Component}'s prop types.
      *

react/features/overlay/components/AbstractPageReloadOverlay.js

@@ -16,7 +16,7 @@ const logger = require('jitsi-meet-logger').getLogger(__filename);
 /**
  * Implements abstract React Component for the page reload overlays.
  */
-export default class AbstractPageReloadOverlay extends Component {
+export default class AbstractPageReloadOverlay extends Component<*, *> {
     /**
      * AbstractPageReloadOverlay component's property types.
      *

react/features/overlay/components/ReloadButton.js

@@ -12,7 +12,7 @@ import { _reloadNow } from '../actions';
  * Implements a React Component for button for the overlays that will reload
  * the page.
  */
-class ReloadButton extends Component {
+class ReloadButton extends Component<*> {
     /**
      * PageReloadOverlay component's property types.
      *

react/features/overlay/reducer.js

@@ -29,7 +29,7 @@ ReducerRegistry.register('features/overlay', (state = {}, action) => {
         return _conferenceFailed(state, action);
 
     case CONNECTION_ESTABLISHED:
-        return _connectionEstablished(state, action);
+        return _connectionEstablished(state);
 
     case CONNECTION_FAILED:
         return _connectionFailed(state, action);
@@ -41,7 +41,7 @@ ReducerRegistry.register('features/overlay', (state = {}, action) => {
         return _mediaPermissionPromptVisibilityChanged(state, action);
 
     case SUSPEND_DETECTED:
-        return _suspendDetected(state, action);
+        return _suspendDetected(state);
     }
 
     return state;

react/features/room-lock/components/PasswordRequiredPrompt.native.js

@@ -36,7 +36,7 @@ const _TEXT_INPUT_PROPS = {
  * Implements a React {@code Component} which prompts the user when a password
  * is required to join a conference.
  */
-class PasswordRequiredPrompt extends Component {
+class PasswordRequiredPrompt extends Component<Props> {
     /**
      * {@code PasswordRequiredPrompt}'s React {@code Component} prop types.
      *

react/features/room-lock/components/PasswordRequiredPrompt.web.js

@@ -12,7 +12,7 @@ import { translate } from '../../base/i18n';
  * Implements a React Component which prompts the user when a password is
  * required to join a conference.
  */
-class PasswordRequiredPrompt extends Component {
+class PasswordRequiredPrompt extends Component<*, *> {
     /**
      * PasswordRequiredPrompt component's property types.
      *

react/features/room-lock/components/RoomLockPrompt.native.js

@@ -22,7 +22,7 @@ const _TEXT_INPUT_PROPS = {
  * Implements a React Component which prompts the user for a password to lock  a
  * conference/room.
  */
-class RoomLockPrompt extends Component {
+class RoomLockPrompt extends Component<*> {
     /**
      * RoomLockPrompt component's property types.
      *

react/features/speaker-stats/components/SpeakerStats.js

@@ -17,7 +17,7 @@ declare var interfaceConfig: Object;
  *
  * @extends Component
  */
-class SpeakerStats extends Component {
+class SpeakerStats extends Component<*, *> {
     /**
      * SpeakerStats component's property types.
      *

react/features/toolbox/components/Notice.js

@@ -9,7 +9,7 @@ declare var config: Object;
  *
  * @class Notice
  */
-export default class Notice extends Component {
+export default class Notice extends Component<*, *> {
     state: Object;
 
     /**

react/features/toolbox/components/PrimaryToolbar.web.js

@@ -15,7 +15,7 @@ declare var interfaceConfig: Object;
  * @class PrimaryToolbar
  * @extends Component
  */
-class PrimaryToolbar extends Component {
+class PrimaryToolbar extends Component<*, *> {
     static propTypes = {
 
         /**
@@ -36,7 +36,7 @@ class PrimaryToolbar extends Component {
      *
      * @returns {ReactElement}
      */
-    render(): ReactElement<*> | null {
+    render(): React$Element<*> | null {
         const { _primaryToolbarButtons } = this.props;
 
         // The number of buttons to show in the toolbar isn't fixed, it depends

react/features/toolbox/components/ProfileButton.web.js

@@ -30,7 +30,7 @@ const DEFAULT_BUTTON_CONFIGURATION = {
  *
  * @extends Component
  */
-class ProfileButton extends Component {
+class ProfileButton extends Component<*> {
     _onClick: Function;
 
     /**

react/features/toolbox/components/SecondaryToolbar.web.js

@@ -22,7 +22,7 @@ declare var config: Object;
  * @class SecondaryToolbar
  * @extends Component
  */
-class SecondaryToolbar extends Component {
+class SecondaryToolbar extends Component<*, *> {
     state: Object;
 
     /**
@@ -86,7 +86,7 @@ class SecondaryToolbar extends Component {
      *
      * @returns {ReactElement}
      */
-    render(): ReactElement<*> | null {
+    render(): React$Element<*> | null {
         const { _callStatsID, _secondaryToolbarButtons } = this.props;
 
         // The number of buttons to show in the toolbar isn't fixed, it depends

react/features/toolbox/components/StatelessToolbar.web.js

@@ -10,7 +10,7 @@ import React, { Component } from 'react';
  * @class StatelessToolbar
  * @extends Component
  */
-export default class StatelessToolbar extends Component {
+export default class StatelessToolbar extends Component<*> {
     /**
      * Base toolbar component's property types.
      *
@@ -44,7 +44,7 @@ export default class StatelessToolbar extends Component {
      * @inheritdoc
      * @returns {ReactElement}
      */
-    render(): ReactElement<*> {
+    render(): React$Element<*> {
         const {
             className,
             onMouseOut,

react/features/toolbox/components/StatelessToolbarButton.js

@@ -91,7 +91,7 @@ export default class StatelessToolbarButton extends AbstractToolbarButton {
      * @inheritdoc
      * @returns {ReactElement}
      */
-    render(): ReactElement<*> {
+    render(): React$Element<*> {
         const { button } = this.props;
         const attributes = getButtonAttributesByProps(button);
 

react/features/toolbox/components/Toolbar.web.js

@@ -17,7 +17,7 @@ import ToolbarButton from './ToolbarButton';
  * @class Toolbar
  * @extends Component
  */
-class Toolbar extends Component {
+class Toolbar extends Component<*> {
     _onMouseOut: Function;
     _onMouseOver: Function;
     _renderToolbarButton: Function;
@@ -75,7 +75,7 @@ class Toolbar extends Component {
      * @inheritdoc
      * @returns {ReactElement}
      */
-    render(): ReactElement<*> {
+    render(): React$Element<*> {
         const props = {
             className: this.props.className,
             onMouseOut: this._onMouseOut,
@@ -123,7 +123,7 @@ class Toolbar extends Component {
      * @private
      * @returns {ReactElement} A toolbar button.
      */
-    _renderToolbarButton(keyValuePair: Array<*>): ReactElement<*> {
+    _renderToolbarButton(keyValuePair: Array<*>): React$Element<*> {
         const [ key, button ] = keyValuePair;
 
         if (button.component) {

react/features/toolbox/components/ToolbarButton.web.js

@@ -18,7 +18,7 @@ declare var APP: Object;
  * @class ToolbarButton
  * @extends AbstractToolbarButton
  */
-class ToolbarButton extends Component {
+class ToolbarButton extends Component<*> {
     button: Object;
 
     _onClick: Function;
@@ -103,7 +103,7 @@ class ToolbarButton extends Component {
      * @inheritdoc
      * @returns {ReactElement}
      */
-    render(): ReactElement<*> {
+    render(): React$Element<*> {
         const { button, t, tooltipPosition } = this.props;
         const props = {
             ...this.props,

react/features/toolbox/components/Toolbox.web.js

@@ -22,7 +22,7 @@ declare var interfaceConfig: Object;
 /**
  * Implements the conference toolbox on React/Web.
  */
-class Toolbox extends Component {
+class Toolbox extends Component<*> {
     /**
      * App component's property types.
      *
@@ -89,7 +89,7 @@ class Toolbox extends Component {
      * @inheritdoc
      * @returns {ReactElement}
      */
-    render(): ReactElement<*> {
+    render(): React$Element<*> {
         return (
             <div className = 'toolbox'>
                 {
@@ -109,7 +109,7 @@ class Toolbox extends Component {
      * @returns {ReactElement}
      * @private
      */
-    _renderSubject(): ReactElement<*> | null {
+    _renderSubject(): React$Element<*> | null {
         const { _subjectSlideIn, _subject } = this.props;
         const classNames = [ 'subject' ];
 
@@ -146,7 +146,7 @@ class Toolbox extends Component {
      * @returns {ReactElement}
      * @private
      */
-    _renderToolbars(): ReactElement<*> | null {
+    _renderToolbars(): React$Element<*> | null {
         // In case we're not in alwaysVisible mode the toolbox should not be
         // shown until timeoutID is initialized.
         if (!this.props._alwaysVisible && this.props._timeoutID === null) {

react/features/unsupported-browser/components/HideNotificationBarStyle.js

@@ -9,7 +9,7 @@ import React, { Component } from 'react';
  * @private
  * @returns {ReactElement}
  */
-export default class HideNotificationBarStyles extends Component {
+export default class HideNotificationBarStyles extends Component<*> {
 
     /**
      * Implements React's {@link Component#render()}.

react/features/unsupported-browser/components/NoMobileApp.js

@@ -11,7 +11,7 @@ declare var interfaceConfig: Object;
  *
  * @class NoMobileApp
  */
-export default class NoMobileApp extends Component {
+export default class NoMobileApp extends Component<*> {
     /**
      * Renders the component.
      *

react/features/unsupported-browser/components/PluginRequiredBrowser.js

@@ -9,7 +9,7 @@ import { CHROME, CHROMIUM, FIREFOX } from './browserLinks';
  *
  * @class PluginRequiredBrowser
  */
-export default class PluginRequiredBrowser extends Component {
+export default class PluginRequiredBrowser extends Component<*> {
 
     /**
      * Renders the component.

react/features/unsupported-browser/components/UnsupportedDesktopBrowser.js

@@ -22,7 +22,7 @@ const _SNS = 'unsupported-desktop-browser';
  *
  * @class UnsupportedDesktopBrowser
  */
-class UnsupportedDesktopBrowser extends Component {
+class UnsupportedDesktopBrowser extends Component<*> {
     /**
      * UnsupportedDesktopBrowser component's property types.
      *

react/features/unsupported-browser/components/UnsupportedMobileBrowser.js

@@ -42,7 +42,7 @@ const _URLS = {
  *
  * @class UnsupportedMobileBrowser
  */
-class UnsupportedMobileBrowser extends Component {
+class UnsupportedMobileBrowser extends Component<*, *> {
     state: Object;
 
     /**

react/features/welcome/components/AbstractWelcomePage.js

@@ -21,7 +21,7 @@ type Props = {
  *
  * @abstract
  */
-export class AbstractWelcomePage extends Component {
+export class AbstractWelcomePage extends Component<*, *> {
     /**
      * {@code AbstractWelcomePage}'s React {@code Component} prop types.
      *

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

@@ -16,7 +16,7 @@ import styles from './styles';
  * {@code Route} to render. Renders a progress indicator when there are ongoing
  * network requests.
  */
-class BlankPage extends Component {
+class BlankPage extends Component<*> {
     /**
      * {@code BlankPage} React {@code Component}'s prop types.
      *

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

@@ -14,7 +14,7 @@ import styles from './styles';
  * Implements a React {@code Component} which underlays the local video track,
  * if any, underneath its children.
  */
-class LocalVideoTrackUnderlay extends Component {
+class LocalVideoTrackUnderlay extends Component<*, *> {
     state: {
 
         /**

react/index.native.js

@@ -1,4 +1,7 @@
-import 'es6-symbol/implement';
+// FIXME: remove once react-native-webrtc and react-native-prompt imports
+// PropTypes from the 'prop-types' lib instead of 'react'.
+import './features/base/react/prop-types-polyfill.js';
+
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { AppRegistry, Linking } from 'react-native';