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

.flowconfig

@@ -14,12 +14,20 @@
 .*/Libraries/react-native/React.js
 .*/Libraries/react-native/ReactNative.js
 
+; Ignore polyfills
+.*/Libraries/polyfills/.*
+
 ; Ignore packages in node_modules which we (i.e. the jitsi-meet project) have
 ; seen to cause errors and we have chosen not to fix.
-.*/node_modules/babel-.*
-.*/node_modules/bower/.*
-.*/node_modules/jsonlint/.*
-.*/node_modules/promise/index.js.flow
+.*/node_modules/@atlassian
+.*/node_modules/bower/lib/node_modules/bower-json/test/.*
+.*/node_modules/jsonlint/test/.*
+
+; FIXME Remove once we update past this commit:
+; https://github.com/facebook/react-native/commit/df8d0d1db9203cc87ad3682e6138b2a9ed714365
+.*/node_modules/react-native/local-cli/link/link.js
+
+.*/node_modules/react-native-keep-awake/.*
 .*/node_modules/styled-components/.*
 
 .*/\.git/.*
@@ -29,15 +37,12 @@
 [libs]
 node_modules/react-native/Libraries/react-native/react-native-interface.js
 node_modules/react-native/flow
-flow/
 
 [options]
 emoji=true
 
 module.system=haste
 
-experimental.strict_type_args=true
-
 ; FIXME: munge_underscores should be false but right now there are some errors
 ; if we change the value to false
 ; Treats class properties with underscore as private. Disabled because currently
@@ -45,15 +50,22 @@ experimental.strict_type_args=true
 ; munge_underscores=false
 munge_underscores=true
 
+; FIXME Remove once we update past this commit:
+; https://github.com/facebook/react-native/commit/df8d0d1db9203cc87ad3682e6138b2a9ed714365
+module.name_mapper='^./link/link$' -> 'emptyObject'
+
 module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
 
 suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
+suppress_type=$FlowFixMeProps
+suppress_type=$FlowFixMeState
 suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-8]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-8]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(5[0-3]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(5[0-3]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
 suppress_comment=\\(.\\|\n\\)*\\$FlowDisableNextLine
 
 unsafe.enable_getters_and_setters=true
@@ -71,4 +83,4 @@ module.file_ext=.jsx
 module.file_ext=.json
 
 [version]
-^0.38.0
+^0.53.0

android/sdk/src/main/java/org/jitsi/meet/sdk/JitsiMeetView.java

@@ -94,7 +94,7 @@ public class JitsiMeetView extends FrameLayout {
             = ReactInstanceManager.builder()
                 .setApplication(application)
                 .setBundleAssetName("index.android.bundle")
-                .setJSMainModuleName("index.android")
+                .setJSMainModulePath("index.android")
                 .addPackage(new com.corbt.keepawake.KCKeepAwakePackage())
                 .addPackage(new com.facebook.react.shell.MainReactPackage())
                 .addPackage(new com.oblador.vectoricons.VectorIconsPackage())

android/sdk/src/main/java/org/jitsi/meet/sdk/ReactPackageAdapter.java

@@ -26,11 +26,6 @@ import java.util.Collections;
 import java.util.List;
 
 public class ReactPackageAdapter implements ReactPackage {
-    @Override
-    public List<Class<? extends JavaScriptModule>> createJSModules() {
-        return Collections.emptyList();
-    }
-
     @Override
     public List<NativeModule> createNativeModules(
             ReactApplicationContext reactContext) {

app.js

@@ -1,5 +1,11 @@
 /* application specific logic */
 
+// FIXME: remove once atlaskit work with React 16
+// It seems that @atlaskit/icon is importing PropTypes from React, but it
+// happens through some glyph coffee script template. It could be that more
+// things are broken there (not only the icon).
+import './react/features/base/react/prop-types-polyfill.js';
+
 import 'jquery';
 import 'jquery-contextmenu';
 import 'jquery-ui';

flow-typed/npm/prop-types_v15.x.x.js

@@ -0,0 +1,34 @@
+// flow-typed signature: 3eaa1f24c7397b78a7481992d2cddcb2
+// flow-typed version: a1a20d4928/prop-types_v15.x.x/flow_>=v0.41.x
+
+type $npm$propTypes$ReactPropsCheckType = (
+  props: any,
+  propName: string,
+  componentName: string,
+  href?: string) => ?Error;
+
+declare module 'prop-types' {
+  declare var array: React$PropType$Primitive<Array<any>>;
+  declare var bool: React$PropType$Primitive<boolean>;
+  declare var func: React$PropType$Primitive<Function>;
+  declare var number: React$PropType$Primitive<number>;
+  declare var object: React$PropType$Primitive<Object>;
+  declare var string: React$PropType$Primitive<string>;
+  declare var any: React$PropType$Primitive<any>;
+  declare var arrayOf: React$PropType$ArrayOf;
+  declare var element: React$PropType$Primitive<any>; /* TODO */
+  declare var instanceOf: React$PropType$InstanceOf;
+  declare var node: React$PropType$Primitive<any>; /* TODO */
+  declare var objectOf: React$PropType$ObjectOf;
+  declare var oneOf: React$PropType$OneOf;
+  declare var oneOfType: React$PropType$OneOfType;
+  declare var shape: React$PropType$Shape;
+
+  declare function checkPropTypes<V>(
+    propTypes: $Subtype<{[_: $Keys<V>]: $npm$propTypes$ReactPropsCheckType}>,
+    values: V,
+    location: string,
+    componentName: string,
+    getStack: ?(() => ?string)
+  ) : void;
+}

flow-typed/npm/react-redux_v5.x.x.js

@@ -1,5 +1,8 @@
-// flow-typed signature: c0e8d9867aff7576bb7cf63fe60a6af3
-// flow-typed version: 83053e4020/react-redux_v5.x.x/flow_>=v0.30.x <=v0.52.x
+// flow-typed signature: 4e93c65cedbfbf7f1ab3fe4e800943d3
+// flow-typed version: 9092387fd2/react-redux_v5.x.x/flow_>=v0.53.x <=v0.53.x
+
+// flow-typed signature: 8db7b853f57c51094bf0ab8b2650fd9c
+// flow-typed version: ab8db5f14d/react-redux_v5.x.x/flow_>=v0.30.x
 
 import type { Dispatch, Store } from "redux";
 
@@ -31,41 +34,30 @@ declare module "react-redux" {
 
   declare type Context = { store: Store<*, *> };
 
-  declare type StatelessComponent<P> = (
-    props: P,
-    context: Context
-  ) => ?React$Element<any>;
-
-  declare class ConnectedComponent<OP, P, Def, St> extends React$Component<
-    void,
-    OP,
-    void
-  > {
-    static WrappedComponent: Class<React$Component<Def, P, St>>,
-    getWrappedInstance(): React$Component<Def, P, St>,
-    static defaultProps: void,
+  declare class ConnectedComponent<OP, P> extends React$Component<OP> {
+    static WrappedComponent: Class<React$Component<P>>,
+    getWrappedInstance(): React$Component<P>,
     props: OP,
     state: void
   }
 
-  declare type ConnectedComponentClass<OP, P, Def, St> = Class<
-    ConnectedComponent<OP, P, Def, St>
+  declare type ConnectedComponentClass<OP, P> = Class<
+    ConnectedComponent<OP, P>
   >;
 
-  declare type Connector<OP, P> = {
-    (
-      component: StatelessComponent<P>
-    ): ConnectedComponentClass<OP, P, void, void>,
-    <Def, St>(
-      component: Class<React$Component<Def, P, St>>
-    ): ConnectedComponentClass<OP, P, Def, St>
-  };
+  declare type Connector<OP, P> = (
+    component: React$ComponentType<P>
+  ) => ConnectedComponentClass<OP, P>;
+
+  declare class Provider<S, A> extends React$Component<{
+    store: Store<S, A>,
+    children?: any
+  }> {}
 
-  declare class Provider<S, A> extends React$Component<
-    void,
-    { store: Store<S, A>, children?: any },
-    void
-  > {}
+  declare function createProvider(
+    storeKey?: string,
+    subKey?: string
+  ): Provider<*, *>;
 
   declare type ConnectOptions = {
     pure?: boolean,

flow-typed/npm/redux_v3.x.x.js

@@ -1,5 +1,5 @@
-// flow-typed signature: 86993bd000012d3e1ef10d757d16952d
-// flow-typed version: a165222d28/redux_v3.x.x/flow_>=v0.33.x
+// flow-typed signature: 33b83b6284653250e74578cf4dbe6124
+// flow-typed version: e282e4128f/redux_v3.x.x/flow_>=v0.33.x
 
 declare module 'redux' {
 
@@ -11,15 +11,15 @@ declare module 'redux' {
 
   */
 
-  declare type DispatchAPI<A> = (action: A) => A;
-  declare type Dispatch<A: { type: $Subtype<string> }> = DispatchAPI<A>;
+  declare export type DispatchAPI<A> = (action: A) => A;
+  declare export type Dispatch<A: { type: $Subtype<string> }> = DispatchAPI<A>;
 
-  declare type MiddlewareAPI<S, A, D = Dispatch<A>> = {
+  declare export type MiddlewareAPI<S, A, D = Dispatch<A>> = {
     dispatch: D;
     getState(): S;
   };
 
-  declare type Store<S, A, D = Dispatch<A>> = {
+  declare export type Store<S, A, D = Dispatch<A>> = {
     // rewrite MiddlewareAPI members in order to get nicer error messages (intersections produce long messages)
     dispatch: D;
     getState(): S;
@@ -27,58 +27,58 @@ declare module 'redux' {
     replaceReducer(nextReducer: Reducer<S, A>): void
   };
 
-  declare type Reducer<S, A> = (state: S, action: A) => S;
+  declare export type Reducer<S, A> = (state: S, action: A) => S;
 
-  declare type CombinedReducer<S, A> = (state: $Shape<S> & {} | void, action: A) => S;
+  declare export type CombinedReducer<S, A> = (state: $Shape<S> & {} | void, action: A) => S;
 
-  declare type Middleware<S, A, D = Dispatch<A>> =
+  declare export type Middleware<S, A, D = Dispatch<A>> =
     (api: MiddlewareAPI<S, A, D>) =>
       (next: D) => D;
 
-  declare type StoreCreator<S, A, D = Dispatch<A>> = {
+  declare export type StoreCreator<S, A, D = Dispatch<A>> = {
     (reducer: Reducer<S, A>, enhancer?: StoreEnhancer<S, A, D>): Store<S, A, D>;
     (reducer: Reducer<S, A>, preloadedState: S, enhancer?: StoreEnhancer<S, A, D>): Store<S, A, D>;
   };
 
-  declare type StoreEnhancer<S, A, D = Dispatch<A>> = (next: StoreCreator<S, A, D>) => StoreCreator<S, A, D>;
+  declare export type StoreEnhancer<S, A, D = Dispatch<A>> = (next: StoreCreator<S, A, D>) => StoreCreator<S, A, D>;
 
-  declare function createStore<S, A, D>(reducer: Reducer<S, A>, enhancer?: StoreEnhancer<S, A, D>): Store<S, A, D>;
-  declare function createStore<S, A, D>(reducer: Reducer<S, A>, preloadedState: S, enhancer?: StoreEnhancer<S, A, D>): Store<S, A, D>;
+  declare export function createStore<S, A, D>(reducer: Reducer<S, A>, enhancer?: StoreEnhancer<S, A, D>): Store<S, A, D>;
+  declare export function createStore<S, A, D>(reducer: Reducer<S, A>, preloadedState: S, enhancer?: StoreEnhancer<S, A, D>): Store<S, A, D>;
 
-  declare function applyMiddleware<S, A, D>(...middlewares: Array<Middleware<S, A, D>>): StoreEnhancer<S, A, D>;
+  declare export function applyMiddleware<S, A, D>(...middlewares: Array<Middleware<S, A, D>>): StoreEnhancer<S, A, D>;
 
-  declare type ActionCreator<A, B> = (...args: Array<B>) => A;
-  declare type ActionCreators<K, A> = { [key: K]: ActionCreator<A, any> };
+  declare export type ActionCreator<A, B> = (...args: Array<B>) => A;
+  declare export type ActionCreators<K, A> = { [key: K]: ActionCreator<A, any> };
 
-  declare function bindActionCreators<A, C: ActionCreator<A, any>, D: DispatchAPI<A>>(actionCreator: C, dispatch: D): C;
-  declare function bindActionCreators<A, K, C: ActionCreators<K, A>, D: DispatchAPI<A>>(actionCreators: C, dispatch: D): C;
+  declare export function bindActionCreators<A, C: ActionCreator<A, any>, D: DispatchAPI<A>>(actionCreator: C, dispatch: D): C;
+  declare export function bindActionCreators<A, K, C: ActionCreators<K, A>, D: DispatchAPI<A>>(actionCreators: C, dispatch: D): C;
 
-  declare function combineReducers<O: Object, A>(reducers: O): CombinedReducer<$ObjMap<O, <S>(r: Reducer<S, any>) => S>, A>;
+  declare export function combineReducers<O: Object, A>(reducers: O): CombinedReducer<$ObjMap<O, <S>(r: Reducer<S, any>) => S>, A>;
 
-  declare function compose<A, B>(ab: (a: A) => B): (a: A) => B
-  declare function compose<A, B, C>(
+  declare export function compose<A, B>(ab: (a: A) => B): (a: A) => B
+  declare export function compose<A, B, C>(
     bc: (b: B) => C,
     ab: (a: A) => B
   ): (a: A) => C
-  declare function compose<A, B, C, D>(
+  declare export function compose<A, B, C, D>(
     cd: (c: C) => D,
     bc: (b: B) => C,
     ab: (a: A) => B
   ): (a: A) => D
-  declare function compose<A, B, C, D, E>(
+  declare export function compose<A, B, C, D, E>(
     de: (d: D) => E,
     cd: (c: C) => D,
     bc: (b: B) => C,
     ab: (a: A) => B
   ): (a: A) => E
-  declare function compose<A, B, C, D, E, F>(
+  declare export function compose<A, B, C, D, E, F>(
     ef: (e: E) => F,
     de: (d: D) => E,
     cd: (c: C) => D,
     bc: (b: B) => C,
     ab: (a: A) => B
   ): (a: A) => F
-  declare function compose<A, B, C, D, E, F, G>(
+  declare export function compose<A, B, C, D, E, F, G>(
     fg: (f: F) => G,
     ef: (e: E) => F,
     de: (d: D) => E,
@@ -86,7 +86,7 @@ declare module 'redux' {
     bc: (b: B) => C,
     ab: (a: A) => B
   ): (a: A) => G
-  declare function compose<A, B, C, D, E, F, G, H>(
+  declare export function compose<A, B, C, D, E, F, G, H>(
     gh: (g: G) => H,
     fg: (f: F) => G,
     ef: (e: E) => F,
@@ -95,7 +95,7 @@ declare module 'redux' {
     bc: (b: B) => C,
     ab: (a: A) => B
   ): (a: A) => H
-  declare function compose<A, B, C, D, E, F, G, H, I>(
+  declare export function compose<A, B, C, D, E, F, G, H, I>(
     hi: (h: H) => I,
     gh: (g: G) => H,
     fg: (f: F) => G,

index.android.js

@@ -1 +1,26 @@
-export * from './react/index.native';
+// The type field of react-native application loader's React Element is created
+// as number and not Symbol, because it's not been defined by the polyfill yet.
+// We import the application renderer, before Symbol is defined, in order to use
+// number types as well. Otherwise this will result in the invariant exception,
+// because fiber thingy will not recognise root react-native component as React
+// Element, but as an Object.
+//
+// See node_modules/react-native/Libraries/polyfills/babelHelpers.js
+// :babelHelpers.createRawReactElement - that's where first react-native element
+// is created (super early - it's the app loader).
+//
+// See node_modules/react-native/Libraries/Renderer/ReactNativeFiber-dev.js
+// and look for REACT_ELEMENT_TYPE definition - it's defined later when Symbol
+// has been defined and type will not match.
+//
+// As an alternative solution we could stop using/polyfilling Symbols and
+// replace with classpath string constants or some kind of a wrapper around
+// that.
+
+import 'react-native/Libraries/ReactNative/renderApplication';
+
+// Android doesn't provide Symbol
+import 'es6-symbol/implement';
+
+import './react/index.native';
+

index.ios.js

@@ -1 +1,2 @@
-export * from './react/index.native';
+import './react/index.native';
+

ios/Podfile

@@ -7,6 +7,8 @@ target 'JitsiMeet' do
 
   pod 'React', :path => '../node_modules/react-native', :subspecs => [
     'Core',
+    'BatchedBridge',
+    'DevSupport',
     'RCTActionSheet',
     'RCTAnimation',
     'RCTImage',
@@ -15,7 +17,7 @@ target 'JitsiMeet' do
     'RCTText',
     'RCTWebSocket',
   ]
-  pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
+  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
 
   pod 'react-native-background-timer',
     :path => '../node_modules/react-native-background-timer'

ios/scripts/run-packager.sh

@@ -11,6 +11,6 @@ if [[ "$CONFIGURATION" = "Debug" ]]; then
       exit 2
     fi
   else
-    open -g "$SRCROOT/../../node_modules/react-native/packager/launchPackager.command" || echo "Can't start packager automatically"
+    open -g "$SRCROOT/../../node_modules/react-native/scripts/launchPackager.command" || echo "Can't start packager automatically"
   fi
 fi

ios/sdk/sdk.xcodeproj/project.pbxproj

@@ -232,7 +232,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "export NODE_BINARY=node\n../../node_modules/react-native/packager/react-native-xcode.sh";
+			shellScript = "export NODE_BINARY=node\n../../node_modules/react-native/scripts/react-native-xcode.sh";
 		};
 		26796D8589142D80C8AFDA51 /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;

package.json

@@ -53,10 +53,10 @@
     "nuclear-js": "1.4.0",
     "postis": "2.2.0",
     "prop-types": "15.6.0",
-    "react": "15.6.1",
-    "react-dom": "15.6.1",
+    "react": "16.0.0",
+    "react-dom": "16.0.0",
     "react-i18next": "4.8.0",
-    "react-native": "0.42.3",
+    "react-native": "0.49.5",
     "react-native-background-timer": "1.3.0",
     "react-native-callstats": "3.24.6",
     "react-native-fetch-blob": "0.10.8",
@@ -94,7 +94,7 @@
     "eslint-plugin-react-native": "3.1.0",
     "expose-loader": "0.7.3",
     "file-loader": "1.1.4",
-    "flow-bin": "0.38.0",
+    "flow-bin": "0.53.0",
     "imports-loader": "0.7.1",
     "node-sass": "3.13.1",
     "precommit-hook": "3.0.0",

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';