ref|(TS) Convert some native components to TS (#13239)

package-lock.json

@@ -130,10 +130,12 @@
         "@types/audioworklet": "0.0.29",
         "@types/js-md5": "0.4.3",
         "@types/lodash": "4.14.182",
+        "@types/punycode": "2.1.0",
         "@types/react": "17.0.14",
         "@types/react-dom": "17.0.14",
         "@types/react-linkify": "1.0.1",
         "@types/react-native": "0.68.9",
+        "@types/react-native-video": "5.0.14",
         "@types/react-redux": "7.1.24",
         "@types/react-window": "1.8.5",
         "@types/resemblejs": "^4.1.0",
@@ -5761,6 +5763,12 @@
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
       "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
     },
+    "node_modules/@types/punycode": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/punycode/-/punycode-2.1.0.tgz",
+      "integrity": "sha512-PG5aLpW6PJOeV2fHRslP4IOMWn+G+Uq8CfnyJ+PDS8ndCbU+soO+fB3NKCKo0p/Jh2Y4aPaiQZsrOXFdzpcA6g==",
+      "dev": true
+    },
     "node_modules/@types/qs": {
       "version": "6.9.7",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
@@ -5818,6 +5826,16 @@
         "@types/react": "^17"
       }
     },
+    "node_modules/@types/react-native-video": {
+      "version": "5.0.14",
+      "resolved": "https://registry.npmjs.org/@types/react-native-video/-/react-native-video-5.0.14.tgz",
+      "integrity": "sha512-KdcyY4HY/Q1l6f5qQA337BNVN+GsdZy836j9CXbWHZ008VVNzSlnJypJQPsnUgI0EPBw/uG/lyJk6cg9Jj1syg==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*",
+        "@types/react-native": "*"
+      }
+    },
     "node_modules/@types/react-redux": {
       "version": "7.1.24",
       "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.24.tgz",
@@ -23792,6 +23810,12 @@
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
       "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
     },
+    "@types/punycode": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/punycode/-/punycode-2.1.0.tgz",
+      "integrity": "sha512-PG5aLpW6PJOeV2fHRslP4IOMWn+G+Uq8CfnyJ+PDS8ndCbU+soO+fB3NKCKo0p/Jh2Y4aPaiQZsrOXFdzpcA6g==",
+      "dev": true
+    },
     "@types/qs": {
       "version": "6.9.7",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
@@ -23849,6 +23873,16 @@
         "@types/react": "^17"
       }
     },
+    "@types/react-native-video": {
+      "version": "5.0.14",
+      "resolved": "https://registry.npmjs.org/@types/react-native-video/-/react-native-video-5.0.14.tgz",
+      "integrity": "sha512-KdcyY4HY/Q1l6f5qQA337BNVN+GsdZy836j9CXbWHZ008VVNzSlnJypJQPsnUgI0EPBw/uG/lyJk6cg9Jj1syg==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*",
+        "@types/react-native": "*"
+      }
+    },
     "@types/react-redux": {
       "version": "7.1.24",
       "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.24.tgz",

package.json

@@ -135,10 +135,12 @@
     "@types/audioworklet": "0.0.29",
     "@types/js-md5": "0.4.3",
     "@types/lodash": "4.14.182",
+    "@types/punycode": "2.1.0",
     "@types/react": "17.0.14",
     "@types/react-dom": "17.0.14",
     "@types/react-linkify": "1.0.1",
     "@types/react-native": "0.68.9",
+    "@types/react-native-video": "5.0.14",
     "@types/react-redux": "7.1.24",
     "@types/react-window": "1.8.5",
     "@types/resemblejs": "^4.1.0",

react/features/base/dialog/components/native/ConfirmDialog.tsx

@@ -19,7 +19,7 @@ interface IProps extends AbstractProps, WithTranslation {
     /**
      * The i18n key of the text label for the cancel button.
      */
-    cancelLabel: string;
+    cancelLabel?: string;
 
     /**
      * The React {@code Component} children.
@@ -29,7 +29,7 @@ interface IProps extends AbstractProps, WithTranslation {
     /**
      * The i18n key of the text label for the confirm button.
      */
-    confirmLabel: string;
+    confirmLabel?: string;
 
     /**
      * Dialog description key for translations.

react/features/base/dialog/constants.ts

@@ -30,7 +30,7 @@ export type DialogProps = {
     /**
      * The handler for onCancel event.
      */
-    onCancel: Function;
+    onCancel?: Function;
 
     /**
      * The handler for the event when submitting the dialog.

react/features/base/icons/components/Icon.tsx

@@ -90,7 +90,7 @@ interface IProps extends IIconProps {
     /**
      * Style object to be applied.
      */
-    style?: StyleType;
+    style?: StyleType | StyleType[];
 
     /**
      * TabIndex  for the Icon.

react/features/base/modal/components/JitsiKeyboardAvoidingView.js → react/features/base/modal/components/JitsiKeyboardAvoidingView.tsx

@@ -1,5 +1,5 @@
 import { useHeaderHeight } from '@react-navigation/elements';
-import React, { ReactElement, useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import {
     Keyboard,
     KeyboardAvoidingView,
@@ -8,44 +8,44 @@ import {
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { StyleType } from '../../styles';
+import { StyleType } from '../../styles/functions.any';
 
-type Props = {
+interface IProps {
 
     /**
      * Adds bottom padding.
      */
-    addBottomPadding?: boolean,
+    addBottomPadding?: boolean;
 
     /**
      * The children component(s) of the Modal, to be rendered.
      */
-    children: ReactElement,
+    children: React.ReactNode;
 
     /**
      * Additional style to be appended to the KeyboardAvoidingView content container.
      */
-    contentContainerStyle?: StyleType,
+    contentContainerStyle?: StyleType;
 
     /**
      * Disable forced keyboard dismiss?
      */
-    disableForcedKeyboardDismiss?: boolean,
+    disableForcedKeyboardDismiss?: boolean;
 
     /**
      * Is a text input rendered at the bottom of the screen?
      */
-    hasBottomTextInput: boolean,
+    hasBottomTextInput: boolean;
 
     /**
      * Is the screen rendering a tab navigator?
      */
-    hasTabNavigator: boolean,
+    hasTabNavigator: boolean;
 
     /**
      * Additional style to be appended to the KeyboardAvoidingView.
      */
-    style?: StyleType
+    style?: StyleType;
 }
 
 const JitsiKeyboardAvoidingView = (
@@ -57,7 +57,7 @@ const JitsiKeyboardAvoidingView = (
             hasTabNavigator,
             hasBottomTextInput,
             style
-        }: Props) => {
+        }: IProps) => {
     const headerHeight = useHeaderHeight();
     const insets = useSafeAreaInsets();
     const [ bottomPadding, setBottomPadding ] = useState(insets.bottom);
@@ -77,11 +77,11 @@ const JitsiKeyboardAvoidingView = (
     const iosVerticalOffset
         = headerHeight + noNotchDevicePadding + tabNavigatorPadding;
     const androidVerticalOffset = hasBottomTextInput
-        ? headerHeight + StatusBar.currentHeight : headerHeight;
+        ? headerHeight + Number(StatusBar.currentHeight) : headerHeight;
 
     // Tells the view what to do with taps
-    const shouldSetResponse = useCallback(() => !disableForcedKeyboardDismiss);
-    const onRelease = useCallback(() => Keyboard.dismiss());
+    const shouldSetResponse = useCallback(() => !disableForcedKeyboardDismiss, []);
+    const onRelease = useCallback(() => Keyboard.dismiss(), []);
 
     return (
         <KeyboardAvoidingView

react/features/base/modal/components/JitsiScreen.js → react/features/base/modal/components/JitsiScreen.tsx

@@ -1,59 +1,58 @@
 import React from 'react';
 import { View } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import { Edge, SafeAreaView } from 'react-native-safe-area-context';
 
-import { StyleType } from '../../styles';
+import { StyleType } from '../../styles/functions.any';
 
 import JitsiKeyboardAvoidingView from './JitsiKeyboardAvoidingView';
 import styles from './styles';
 
-
-type Props = {
+interface IProps {
 
     /**
      * Adds bottom padding.
      */
-    addBottomPadding?: boolean,
+    addBottomPadding?: boolean;
 
     /**
-     * Additional style to be appended to the KeyboardAvoidingView content container.
+     * The children component(s) of the Modal, to be rendered.
      */
-    contentContainerStyle?: StyleType,
+    children: React.ReactNode;
 
     /**
-     * The children component(s) of the Modal, to be rendered.
+     * Additional style to be appended to the KeyboardAvoidingView content container.
      */
-    children: React.ReactNode,
+    contentContainerStyle?: StyleType;
 
     /**
      * Disabled forced keyboard dismiss?
      */
-    disableForcedKeyboardDismiss?: boolean,
+    disableForcedKeyboardDismiss?: boolean;
 
     /**
      * Optional function that renders a footer component, if needed.
      */
-    footerComponent?: Function,
+    footerComponent?: Function;
 
     /**
      * Is a text input rendered at the bottom of the screen?
      */
-    hasBottomTextInput?: boolean,
+    hasBottomTextInput?: boolean;
 
     /**
      * Is the screen rendering a tab navigator?
      */
-    hasTabNavigator?: boolean,
+    hasTabNavigator?: boolean;
 
     /**
      * Insets for the SafeAreaView.
      */
-    safeAreaInsets?: Array,
+    safeAreaInsets?: Edge[];
 
     /**
      * Additional style to be appended to the KeyboardAvoidingView containing the content of the modal.
      */
-    style?: StyleType
+    style?: StyleType;
 }
 
 const JitsiScreen = ({
@@ -66,7 +65,7 @@ const JitsiScreen = ({
     hasBottomTextInput = false,
     safeAreaInsets = [ 'left', 'right' ],
     style
-}: Props) => {
+}: IProps) => {
     const renderContent = () => (
         <JitsiKeyboardAvoidingView
             addBottomPadding = { addBottomPadding }
@@ -80,7 +79,7 @@ const JitsiScreen = ({
                 style = { styles.safeArea }>
                 { children }
             </SafeAreaView>
-            { footerComponent && footerComponent() }
+            { footerComponent?.() }
         </JitsiKeyboardAvoidingView>
     );
 

react/features/base/modal/components/functions.native.js → react/features/base/modal/components/functions.native.ts

@@ -1,5 +1,4 @@
-// @flow
-
+import { IStateful } from '../../app/types';
 import { toState } from '../../redux/functions';
 
 /**
@@ -11,7 +10,7 @@ import { toState } from '../../redux/functions';
  * features/base/config.
  * @returns {number}.
  */
-export function getClientWidth(stateful: Object) {
+export function getClientWidth(stateful: IStateful) {
     const state = toState(stateful)['features/base/responsive-ui'];
 
     return state.clientWidth;
@@ -26,7 +25,7 @@ export function getClientWidth(stateful: Object) {
  * features/base/config.
  * @returns {number}.
  */
-export function getClientHeight(stateful: Object) {
+export function getClientHeight(stateful: IStateful) {
     const state = toState(stateful)['features/base/responsive-ui'];
 
     return state.clientHeight;

react/features/base/participants/components/ParticipantView.native.js → react/features/base/participants/components/ParticipantView.native.tsx

@@ -1,20 +1,24 @@
 import React, { Component } from 'react';
-import { Text, View } from 'react-native';
+import { GestureResponderEvent, Text, TextStyle, View, ViewStyle } from 'react-native';
 import { connect } from 'react-redux';
 
+import { IReduxState } from '../../../app/types';
 import {
     isTrackStreamingStatusActive,
     isTrackStreamingStatusInactive
 } from '../../../connection-indicator/functions';
 import SharedVideo from '../../../shared-video/components/native/SharedVideo';
+import { IStateful } from '../../app/types';
 import Avatar from '../../avatar/components/Avatar';
 import { translate } from '../../i18n/functions';
 import VideoTrack from '../../media/components/native/VideoTrack';
 import { shouldRenderVideoTrack } from '../../media/functions';
 import Container from '../../react/components/native/Container';
 import { toState } from '../../redux/functions';
+import { StyleType } from '../../styles/functions.any';
 import TestHint from '../../testing/components/TestHint';
 import { getVideoTrackByParticipant } from '../../tracks/functions';
+import { ITrack } from '../../tracks/types';
 import { getParticipantById, getParticipantDisplayName, isSharedVideoParticipant } from '../functions';
 
 import styles from './styles';
@@ -22,69 +26,69 @@ import styles from './styles';
 /**
  * The type of the React {@link Component} props of {@link ParticipantView}.
  */
-type Props = {
+interface IProps {
 
     /**
      * Whether the connection is inactive or not.
      *
      * @private
      */
-    _isConnectionInactive: boolean,
+    _isConnectionInactive: boolean;
 
     /**
      * Whether the participant is a shared video participant.
      */
-    _isSharedVideoParticipant: boolean,
+    _isSharedVideoParticipant: boolean;
 
     /**
      * The name of the participant which this component represents.
      *
      * @private
      */
-    _participantName: string,
+    _participantName: string;
 
     /**
      * True if the video should be rendered, false otherwise.
      */
-    _renderVideo: boolean,
+    _renderVideo: boolean;
 
     /**
      * The video Track of the participant with {@link #participantId}.
      */
-    _videoTrack: Object,
+    _videoTrack?: ITrack;
 
     /**
      * The avatar size.
      */
-    avatarSize: number,
+    avatarSize: number;
 
     /**
      * Whether video should be disabled for his view.
      */
-    disableVideo: ?boolean,
+    disableVideo?: boolean;
 
     /**
      * Callback to invoke when the {@code ParticipantView} is clicked/pressed.
      */
-    onPress: Function,
+    onPress: (e?: GestureResponderEvent) => void;
 
     /**
      * The ID of the participant (to be) depicted by {@link ParticipantView}.
      *
      * @public
      */
-    participantId: string,
+    participantId: string;
 
     /**
      * The style, if any, to apply to {@link ParticipantView} in addition to its
      * default style.
      */
-    style: Object,
+    style: StyleType;
 
     /**
      * The function to translate human-readable text.
      */
-    t: Function,
+    t: Function;
 
     /**
      * The test hint id which can be used to locate the {@code ParticipantView}
@@ -92,26 +96,26 @@ type Props = {
      * {@code participantId} with the following format will be used:
      * {@code `org.jitsi.meet.Participant#${participantId}`}.
      */
-    testHintId: ?string,
+    testHintId?: string;
 
     /**
      * Indicates if the connectivity info label should be shown, if appropriate.
      * It will be shown in case the connection is interrupted.
      */
-    useConnectivityInfoLabel: boolean,
+    useConnectivityInfoLabel: boolean;
 
     /**
      * The z-order of the {@link Video} of {@link ParticipantView} in the
      * stacking space of all {@code Video}s. For more details, refer to the
      * {@code zOrder} property of the {@code Video} class for React Native.
      */
-    zOrder: number,
+    zOrder: number;
 
     /**
      * Indicates whether zooming (pinch to zoom and/or drag) is enabled.
      */
-    zoomEnabled: boolean
-};
+    zoomEnabled: boolean;
+}
 
 /**
  * Implements a React Component which depicts a specific participant's avatar
@@ -119,7 +123,7 @@ type Props = {
  *
  * @augments Component
  */
-class ParticipantView extends Component<Props> {
+class ParticipantView extends Component<IProps> {
 
     /**
      * Renders the inactive connection status label.
@@ -144,8 +148,8 @@ class ParticipantView extends Component<Props> {
         return (
             <View
                 pointerEvents = 'box-none'
-                style = { containerStyle }>
-                <Text style = { styles.connectionInfoText }>
+                style = { containerStyle as ViewStyle }>
+                <Text style = { styles.connectionInfoText as TextStyle }>
                     { t('connection.LOW_BANDWIDTH', { displayName }) }
                 </Text>
             </View>
@@ -200,7 +204,7 @@ class ParticipantView extends Component<Props> {
                         zoomEnabled = { this.props.zoomEnabled } /> }
 
                 { !renderSharedVideo && !renderVideo
-                    && <View style = { styles.avatarContainer }>
+                    && <View style = { styles.avatarContainer as ViewStyle }>
                         <Avatar
                             participantId = { this.props.participantId }
                             size = { this.props.avatarSize } />
@@ -221,9 +225,9 @@ class ParticipantView extends Component<Props> {
  * @param {Object} ownProps - The React {@code Component} props passed to the
  * associated (instance of) {@code ParticipantView}.
  * @private
- * @returns {Props}
+ * @returns {IProps}
  */
-function _mapStateToProps(state, ownProps) {
+function _mapStateToProps(state: IReduxState, ownProps: any) {
     const { disableVideo, participantId } = ownProps;
     const participant = getParticipantById(state, participantId);
     const videoTrack = getVideoTrackByParticipant(state, participant);
@@ -245,7 +249,7 @@ function _mapStateToProps(state, ownProps) {
  * @param {string} id - The ID of the participant.
  * @returns {boolean}
  */
-function shouldRenderParticipantVideo(stateful, id) {
+function shouldRenderParticipantVideo(stateful: IStateful, id: string) {
     const state = toState(stateful);
     const participant = getParticipantById(state, id);
 

react/features/base/participants/components/styles.js → react/features/base/participants/components/styles.ts

@@ -1,5 +1,3 @@
-// @flow
-
 import { BoxModel } from '../../styles/components/styles/BoxModel';
 import { ColorPalette } from '../../styles/components/styles/ColorPalette';
 

react/features/base/react/components/AbstractContainer.ts

@@ -58,7 +58,7 @@ export interface IProps {
      * undefined and {@link onClick} is defined, {@code touchFeedback} is
      * considered defined as {@code true}.
      */
-    touchFeedback?: Function;
+    touchFeedback?: boolean;
 
     /**
      * Color to display when clicked.

react/features/base/react/components/native/BaseIndicator.js → react/features/base/react/components/native/BaseIndicator.tsx

@@ -1,15 +1,13 @@
-// @flow
-
 import React, { Component } from 'react';
-import { View } from 'react-native';
+import { View, ViewStyle } from 'react-native';
 
 import Icon from '../../../icons/components/Icon';
-import { type StyleType } from '../../../styles';
+import { StyleType } from '../../../styles/functions.any';
 
-import styles from './indicatorstyles';
+import styles from './indicatorStyles';
 import { BASE_INDICATOR } from './styles';
 
-type Props = {
+interface IProps {
 
     /**
      * Overwritten background color when indicator is highlighted.
@@ -19,24 +17,24 @@ type Props = {
     /**
      * True if a highlighted background has to be applied.
      */
-    highlight: boolean,
+    highlight?: boolean;
 
     /**
      * The name of the icon to be used as the indicator.
      */
-    icon: string,
+    icon: Function;
 
     /**
      * Additional style to be applied to the icon element.
      */
-    iconStyle: StyleType
-};
+    iconStyle?: StyleType;
+}
 
 /**
  * Implements a base indicator to be reused across all native indicators on
  * the filmstrip.
  */
-export default class BaseIndicator extends Component<Props> {
+export default class BaseIndicator extends Component<IProps> {
     /**
      * Implements React's {@link Component#render()}.
      *
@@ -47,12 +45,12 @@ export default class BaseIndicator extends Component<Props> {
 
         return (
             <View
-                style = { BASE_INDICATOR }>
+                style = { BASE_INDICATOR as ViewStyle }>
                 <Icon
                     src = { icon }
                     style = { [
                         styles.indicator,
-                        iconStyle
+                        iconStyle ?? {}
                     ] } />
             </View>
         );

react/features/base/react/components/native/Image.js → react/features/base/react/components/native/Image.tsx

@@ -1,30 +1,28 @@
-// @flow
-
 import React, { Component } from 'react';
 import { Image } from 'react-native';
 
 /**
  * The type of the React {@code Component} props of {@link Image}.
  */
-type Props = {
+interface IProps {
 
     /**
      * The ImageSource to be rendered as image.
      */
-    src: Object,
+    src: Object;
 
     /**
      * The component's external style.
      */
-    style: Object
-};
+    style: Object;
+}
 
 /**
  * A component rendering aN IMAGE.
  *
  * @augments Component
  */
-export default class ImageImpl extends Component<Props> {
+export default class ImageImpl extends Component<IProps> {
     /**
      * Implements React's {@link Component#render()}.
      *

react/features/base/react/components/native/Link.js → react/features/base/react/components/native/Link.tsx

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React, { Component } from 'react';
 import { Linking } from 'react-native';
 
@@ -8,40 +6,40 @@ import Text from './Text';
 /**
  * The type of the React {@code Component} props of {@link Link}.
  */
-type Props = {
+interface IProps {
 
     /**
      * The children to be displayed within this Link.
      */
-    children: React$Node,
+    children: React.ReactNode;
 
     /**
      * Notifies that this Link failed to open the URL associated with it.
      */
-    onLinkingOpenURLRejected?: Function,
+    onLinkingOpenURLRejected?: Function;
 
     /**
      * The CSS style to be applied to this Link for the purposes of display.
      */
-    style?: Object,
+    style?: Object;
 
     /**
      * The URL to be opened when this Link is clicked/pressed.
      */
-    url: string
-};
+    url: string;
+}
 
 /**
  * Implements a (hyper)link to a URL in the fashion of the HTML anchor element
  * and its href attribute.
  */
-export default class Link extends Component<Props> {
+export default class Link extends Component<IProps> {
     /**
      * Initializes a new Link instance.
      *
      * @param {Object} props - Component properties.
      */
-    constructor(props: Props) {
+    constructor(props: IProps) {
         super(props);
 
         // Bind event handlers so they are only bound once for every instance.
@@ -71,14 +69,12 @@ export default class Link extends Component<Props> {
      * @private
      * @returns {void}
      */
-    _onLinkingOpenURLRejected(reason) {
+    _onLinkingOpenURLRejected(reason: Error) {
         const onRejected = this.props.onLinkingOpenURLRejected;
 
-        onRejected && onRejected(reason);
+        onRejected?.(reason);
     }
 
-    _onPress: () => void;
-
     /**
      * Handles press on this Link. Opens the URL associated with this Link.
      *

react/features/base/react/components/native/Linkify.js → react/features/base/react/components/native/Linkify.tsx

@@ -1,42 +1,40 @@
-// @flow
-
 import punycode from 'punycode';
 import React, { Component } from 'react';
 import ReactLinkify from 'react-linkify';
 import { Text } from 'react-native';
 
-import { type StyleType } from '../../../styles';
+import { StyleType } from '../../../styles/functions.any';
 
 import Link from './Link';
 
-type Props = {
+interface IProps {
 
     /**
      * The children of the component.
      */
-    children: React$Node,
+    children: React.ReactNode;
 
     /**
      * The extra styles to be applied to links.
      */
-    linkStyle: StyleType,
+    linkStyle: StyleType;
 
     /**
      * The extra styles to be applied to text.
      */
-    style?: StyleType
-};
+    style?: StyleType;
+}
 
 /**
  * Implements a react native wrapper for the react-linkify component.
  */
-export default class Linkify extends Component<Props> {
+export default class Linkify extends Component<IProps> {
     /**
      * Initiates a new {@code Component}.
      *
      * @inheritdoc
      */
-    constructor(props: Props) {
+    constructor(props: IProps) {
         super(props);
 
         this._componentDecorator = this._componentDecorator.bind(this);
@@ -60,8 +58,6 @@ export default class Linkify extends Component<Props> {
         );
     }
 
-    _componentDecorator: (string, string, number) => React$Node;
-
     /**
      * Implements a component decorator for react-linkify.
      *

react/features/base/react/components/native/TintedView.js → react/features/base/react/components/native/TintedView.tsx

@@ -1,7 +1,5 @@
-// @flow
-
 import React, { Component } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewStyle } from 'react-native';
 
 import { TINTED_VIEW_DEFAULT } from './styles';
 
@@ -17,24 +15,24 @@ const BASE_STYLE = {
 /**
  * {@code TintedView}'s React {@code Component} prop types.
  */
-type Props = {
+interface IProps {
 
     /**
      * The children components of this component.
      */
-    children?: React$Node,
+    children?: React.ReactNode;
 
     /**
      * Style to override the base style.
      */
-    style: Object
-};
+    style?: Object;
+}
 
 /**
  * Implements a component aimed at covering another view and tinting it with
  * the given color and opacity.
  */
-export default class TintedView extends Component<Props> {
+export default class TintedView extends Component<IProps> {
     /**
      * Implements React's {@link Component#render()}.
      *
@@ -48,7 +46,7 @@ export default class TintedView extends Component<Props> {
         return (
             <View
                 pointerEvents = 'box-none'
-                style = { BASE_STYLE }>
+                style = { BASE_STYLE as ViewStyle }>
                 <View
                     pointerEvents = 'none'
                     style = { [
@@ -58,7 +56,7 @@ export default class TintedView extends Component<Props> {
                     ] } />
                 <View
                     pointerEvents = 'box-none'
-                    style = { BASE_STYLE }>
+                    style = { BASE_STYLE as ViewStyle }>
                     { children }
                 </View>
             </View>

react/features/base/react/components/native/headerstyles.js → react/features/base/react/components/native/headerstyles.ts

@@ -1,9 +1,8 @@
-// @flex
-
 import { StyleSheet } from 'react-native';
 
-import { ColorSchemeRegistry, schemeColor } from '../../../color-scheme';
-import { BoxModel } from '../../../styles';
+import ColorSchemeRegistry from '../../../color-scheme/ColorSchemeRegistry';
+import { schemeColor } from '../../../color-scheme/functions';
+import { BoxModel } from '../../../styles/components/styles/BoxModel';
 
 const HEADER_FONT_SIZE = 18;
 const HEADER_HEIGHT = 48;

react/features/base/react/components/native/indicatorstyles.js → react/features/base/react/components/native/indicatorStyles.ts

@@ -1,5 +1,3 @@
-// @flow
-
 import { ColorPalette } from '../../../styles/components/styles/ColorPalette';
 
 export default {

react/features/base/styles/functions.any.ts

@@ -46,7 +46,7 @@ const _WELL_KNOWN_NUMBER_PROPERTIES = [ 'height', 'width' ];
  * @param {Styletype} st - The complex style type.
  * @returns {Object}
  */
-export function styleTypeToObject(st: StyleType) {
+export function styleTypeToObject(st: StyleType | StyleType[]) {
     if (!st) {
         return {};
     }

react/features/base/testing/components/AbstractTestHint.ts

@@ -1,3 +1,5 @@
+import { GestureResponderEvent } from 'react-native';
+
 import { IReduxState } from '../../../app/types';
 import { isTestModeEnabled } from '../functions';
 
@@ -28,7 +30,7 @@ export type TestHintProps = {
      * The optional "on press" handler which can be used to bind a click handler
      * to a {@link TestHint}.
      */
-    onPress?: Function;
+    onPress?: (e?: GestureResponderEvent) => void;
 
     /**
      * The test hint's (text) value which is to be consumed by the tests.

react/features/base/testing/components/TestConnectionInfo.js

@@ -1,5 +1,3 @@
-// @flow
-
 import React, { Component, Fragment } from 'react';
 import { connect } from 'react-redux';
 

react/features/base/testing/components/TestHint.android.js → react/features/base/testing/components/TestHint.android.tsx

@@ -1,11 +1,8 @@
-/* @flow */
-
 import React, { Component } from 'react';
 import { Text } from 'react-native';
 import { connect } from 'react-redux';
 
-import type { TestHintProps } from './AbstractTestHint';
-import { _mapStateToProps } from './AbstractTestHint';
+import { TestHintProps, _mapStateToProps } from './AbstractTestHint';
 
 /**
  * The Android version of <code>TestHint</code>. It will put the identifier,

react/features/base/testing/components/TestHint.ios.js → react/features/base/testing/components/TestHint.ios.tsx

@@ -1,11 +1,8 @@
-/* @flow */
-
 import React, { Component } from 'react';
 import { Text } from 'react-native';
 import { connect } from 'react-redux';
 
-import type { TestHintProps } from './AbstractTestHint';
-import { _mapStateToProps } from './AbstractTestHint';
+import { TestHintProps, _mapStateToProps } from './AbstractTestHint';
 
 /**
  * This is the iOS version of the TestHint.

react/features/base/ui/components/JitsiThemeProvider.native.js → react/features/base/ui/components/JitsiThemeProvider.native.tsx

@@ -1,16 +1,14 @@
-// @flow
-
 import * as React from 'react';
 import { Provider as PaperProvider } from 'react-native-paper';
 
 import BaseTheme from './BaseTheme.native';
 
-type Props = {
+interface IProps {
 
-   /**
+    /**
     * The children of the component.
     */
-    children: React.ChildrenArray<any>
+    children: React.ReactNode;
 }
 
 /**
@@ -19,6 +17,6 @@ type Props = {
  * @param {Object} props - The props of the component.
  * @returns {React.ReactNode}
  */
-export default function JitsiThemePaperProvider(props: Props) {
+export default function JitsiThemePaperProvider(props: IProps) {
     return <PaperProvider theme = { BaseTheme }>{ props.children }</PaperProvider>;
 }

react/features/calendar-sync/components/AddMeetingUrlButton.native.js → react/features/calendar-sync/components/AddMeetingUrlButton.native.ts

@@ -1,5 +1,3 @@
-// @flow
-
 import { Component } from 'react';
 
 /**
@@ -7,7 +5,7 @@ import { Component } from 'react';
  *
  * @augments Component
  */
-class AddMeetingUrlButton extends Component<*> {
+class AddMeetingUrlButton extends Component<void> {
     /**
      * Implements React's {@link Component#render}.
      *

react/features/calendar-sync/components/JoinButton.native.js → react/features/calendar-sync/components/JoinButton.native.ts

@@ -1,5 +1,3 @@
-// @flow
-
 import { Component } from 'react';
 
 /**
@@ -7,7 +5,7 @@ import { Component } from 'react';
  *
  * @augments Component
  */
-class JoinButton extends Component<*> {
+class JoinButton extends Component<void> {
     /**
      * Implements React's {@link Component#render}.
      *

react/features/calendar-sync/components/UpdateCalendarEventDialog.native.js → react/features/calendar-sync/components/UpdateCalendarEventDialog.native.tsx

@@ -1,35 +1,35 @@
-// @flow
-
 import React, { Component } from 'react';
+import { WithTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 
+import { IStore } from '../../app/types';
 import ConfirmDialog from '../../base/dialog/components/native/ConfirmDialog';
 import { translate } from '../../base/i18n/functions';
 import { updateCalendarEvent } from '../actions';
 
-type Props = {
+interface IProps extends WithTranslation {
 
     /**
      * The Redux dispatch function.
      */
-    dispatch: Function,
+    dispatch: IStore['dispatch'];
 
     /**
      * The ID of the event to be updated.
      */
-    eventId: string
-};
+    eventId: string;
+}
 
 /**
  * Component for the add Jitsi link confirm dialog.
  */
-class UpdateCalendarEventDialog extends Component<Props> {
+class UpdateCalendarEventDialog extends Component<IProps> {
     /**
      * Initializes a new {@code UpdateCalendarEventDialog} instance.
      *
      * @inheritdoc
      */
-    constructor(props: Props) {
+    constructor(props: IProps) {
         super(props);
 
         this._onSubmit = this._onSubmit.bind(this);
@@ -49,8 +49,6 @@ class UpdateCalendarEventDialog extends Component<Props> {
         );
     }
 
-    _onSubmit: () => boolean;
-
     /**
      * Callback for the confirm button.
      *
@@ -58,7 +56,7 @@ class UpdateCalendarEventDialog extends Component<Props> {
      * @returns {boolean} - True (to note that the modal should be closed).
      */
     _onSubmit() {
-        this.props.dispatch(updateCalendarEvent(this.props.eventId, ''));
+        this.props.dispatch(updateCalendarEvent(this.props.eventId));
 
         return true;
     }

react/features/display-name/components/native/DisplayNameLabel.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Text, View } from 'react-native';
+import { Text, TextStyle, View, ViewStyle } from 'react-native';
 import { connect } from 'react-redux';
 
 import { IReduxState } from '../../../app/types';
@@ -9,7 +9,6 @@ import {
     isScreenShareParticipant
 } from '../../../base/participants/functions';
 
-// @ts-ignore
 import styles from './styles';
 
 interface IProps {
@@ -50,10 +49,12 @@ class DisplayNameLabel extends React.Component<IProps> {
         }
 
         return (
-            <View style = { this.props.contained ? styles.displayNamePadding : styles.displayNameBackdrop }>
+            <View
+                style = { (this.props.contained ? styles.displayNamePadding : styles.displayNameBackdrop
+                    ) as ViewStyle }>
                 <Text
                     numberOfLines = { 1 }
-                    style = { styles.displayNameText }>
+                    style = { styles.displayNameText as TextStyle }>
                     { this.props._participantName }
                 </Text>
             </View>

react/features/display-name/components/native/DisplayNamePrompt.js → react/features/display-name/components/native/DisplayNamePrompt.tsx

@@ -1,5 +1,3 @@
-// @flow
-
 import React from 'react';
 import { connect } from 'react-redux';
 
@@ -9,7 +7,7 @@ import AbstractDisplayNamePrompt from '../AbstractDisplayNamePrompt';
 /**
  * Implements a component to render a display name prompt.
  */
-class DisplayNamePrompt extends AbstractDisplayNamePrompt<*> {
+class DisplayNamePrompt extends AbstractDisplayNamePrompt<any> {
     /**
      * Implements React's {@link Component#render()}.
      *
@@ -23,8 +21,6 @@ class DisplayNamePrompt extends AbstractDisplayNamePrompt<*> {
                 titleKey = 'dialog.displayNameRequired' />
         );
     }
-
-    _onSetDisplayName: string => boolean;
 }
 
 export default connect()(DisplayNamePrompt);

react/features/display-name/components/native/styles.js → react/features/display-name/components/native/styles.ts

@@ -1,5 +1,3 @@
-// @flow
-
 import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 
 export default {

react/features/etherpad/components/SharedDocumentButton.native.js → react/features/etherpad/components/SharedDocumentButton.native.ts

@@ -1,22 +1,18 @@
-// @flow
-
 import { connect } from 'react-redux';
 
 import { createToolbarEvent } from '../../analytics/AnalyticsEvents';
 import { sendAnalytics } from '../../analytics/functions';
+import { IReduxState } from '../../app/types';
 import { translate } from '../../base/i18n/functions';
 import { IconShareDoc } from '../../base/icons/svg';
 import AbstractButton, { IProps as AbstractButtonProps } from '../../base/toolbox/components/AbstractButton';
 import { navigate } from '../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
 import { screen } from '../../mobile/navigation/routes';
 
-
-type Props = AbstractButtonProps;
-
 /**
  * Implements an {@link AbstractButton} to open the chat screen on mobile.
  */
-class SharedDocumentButton extends AbstractButton<Props, *> {
+class SharedDocumentButton extends AbstractButton<AbstractButtonProps> {
     accessibilityLabel = 'toolbar.accessibilityLabel.document';
     icon = IconShareDoc;
     label = 'toolbar.documentOpen';
@@ -55,7 +51,7 @@ class SharedDocumentButton extends AbstractButton<Props, *> {
  * instance.
  * @returns {Object}
  */
-function _mapStateToProps(state: Object, ownProps: Object) {
+function _mapStateToProps(state: IReduxState, ownProps: any) {
     const { documentUrl } = state['features/etherpad'];
     const { visible = Boolean(documentUrl) } = ownProps;
 

react/features/etherpad/components/native/SharedDocument.js → react/features/etherpad/components/native/SharedDocument.tsx

@@ -1,8 +1,10 @@
 import React, { PureComponent } from 'react';
-import { View } from 'react-native';
+import { WithTranslation } from 'react-i18next';
+import { View, ViewStyle } from 'react-native';
 import { WebView } from 'react-native-webview';
 import { connect } from 'react-redux';
 
+import { IReduxState } from '../../../app/types';
 import { translate } from '../../../base/i18n/functions';
 import JitsiScreen from '../../../base/modal/components/JitsiScreen';
 import LoadingIndicator from '../../../base/react/components/native/LoadingIndicator';
@@ -13,34 +15,29 @@ import styles, { INDICATOR_COLOR } from './styles';
 /**
  * The type of the React {@code Component} props of {@code ShareDocument}.
  */
-type Props = {
+interface IProps extends WithTranslation {
 
     /**
      * URL for the shared document.
      */
-    _documentUrl: string,
+    _documentUrl?: string;
 
     /**
      * Default prop for navigation between screen components(React Navigation).
      */
-    navigation: Object,
-
-    /**
-     * Function to be used to translate i18n labels.
-     */
-    t: Function
-};
+    navigation: Object;
+}
 
 /**
  * Implements a React native component that renders the shared document window.
  */
-class SharedDocument extends PureComponent<Props> {
+class SharedDocument extends PureComponent<IProps> {
     /**
      * Instantiates a new instance.
      *
      * @inheritdoc
      */
-    constructor(props: Props) {
+    constructor(props: IProps) {
         super(props);
 
         this._renderLoading = this._renderLoading.bind(this);
@@ -56,12 +53,11 @@ class SharedDocument extends PureComponent<Props> {
 
         return (
             <JitsiScreen
-                addHeaderHeightValue = { true }
                 style = { styles.sharedDocContainer }>
                 <WebView
                     hideKeyboardAccessoryView = { true }
                     renderLoading = { this._renderLoading }
-                    source = {{ uri: _documentUrl }}
+                    source = {{ uri: _documentUrl ?? '' }}
                     startInLoadingState = { true }
                     style = { styles.sharedDoc } />
             </JitsiScreen>
@@ -75,7 +71,7 @@ class SharedDocument extends PureComponent<Props> {
      */
     _renderLoading() {
         return (
-            <View style = { styles.indicatorWrapper }>
+            <View style = { styles.indicatorWrapper as ViewStyle }>
                 <LoadingIndicator
                     color = { INDICATOR_COLOR }
                     size = 'large' />
@@ -88,10 +84,11 @@ class SharedDocument extends PureComponent<Props> {
  * Maps (parts of) the redux state to {@link SharedDocument} React {@code Component} props.
  *
  * @param {Object} state - The redux store/state.
+ * @param {any} _ownProps - Component's props.
  * @private
  * @returns {Object}
  */
-export function _mapStateToProps(state: Object) {
+export function _mapStateToProps(state: IReduxState, _ownProps: any) {
     const documentUrl = getSharedDocumentUrl(state);
 
     return {

react/features/etherpad/components/native/styles.js → react/features/etherpad/components/native/styles.ts

@@ -1,8 +1,5 @@
-// @flow
-
 import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 
-
 export const INDICATOR_COLOR = BaseTheme.palette.ui07;
 
 export default {

react/features/feedback/actions.ts → react/features/feedback/actions.web.ts

@@ -11,8 +11,8 @@ import {
     SUBMIT_FEEDBACK_ERROR,
     SUBMIT_FEEDBACK_SUCCESS
 } from './actionTypes';
-import FeedbackDialog from './components/FeedbackDialog';
-import { sendFeedbackToJaaSRequest } from './functions';
+import FeedbackDialog from './components/FeedbackDialog.web';
+import { sendFeedbackToJaaSRequest } from './functions.web';
 
 /**
  * Caches the passed in feedback in the redux store.

react/features/feedback/components/FeedbackDialog.web.tsx

@@ -15,7 +15,7 @@ import { IconFavorite, IconFavoriteSolid } from '../../base/icons/svg';
 import { withPixelLineHeight } from '../../base/styles/functions.web';
 import Dialog from '../../base/ui/components/web/Dialog';
 import Input from '../../base/ui/components/web/Input';
-import { cancelFeedback, submitFeedback } from '../actions';
+import { cancelFeedback, submitFeedback } from '../actions.web';
 
 const styles = (theme: Theme) => {
     return {

react/features/old-client-notification/components/OldElectronAPPNotificationDescription.js → react/features/old-client-notification/components/OldElectronAPPNotificationDescription.tsx

@@ -1,26 +1,14 @@
-// @flow
-
 import React, { Component } from 'react';
+import { WithTranslation } from 'react-i18next';
 
 import { translate } from '../../base/i18n/functions';
 
-/**
- * The type of the React {@code Component} props of {@link OldElectronAPPNotificationDescription}.
- */
-type Props = {
-
-    /**
-     * Invoked to obtain translated strings.
-     */
-    t: Function
-};
-
 /**
  * A component that renders the description of the notification for old Jitsi Meet Electron clients.
  *
  * @augments AbstractApp
  */
-export class OldElectronAPPNotificationDescription extends Component<Props> {
+export class OldElectronAPPNotificationDescription extends Component<WithTranslation> {
     /**
      * Implements React's {@link Component#render()}.
      *

react/features/settings/components/native/SettingsView.tsx

@@ -286,6 +286,7 @@ class SettingsView extends Component<IProps, IState> {
         return (
             <JitsiScreen
                 disableForcedKeyboardDismiss = { true }
+                // @ts-ignore
                 safeAreaInsets = { [ addBottomInset && 'bottom', 'left', 'right' ].filter(Boolean) }
                 style = { styles.settingsViewContainer }>
                 <ScrollView bounces = { scrollBounces }>

react/features/shared-video/components/native/AbstractVideoManager.ts

@@ -1,7 +1,7 @@
 import throttle from 'lodash/throttle';
 import { PureComponent } from 'react';
 
-import { IReduxState } from '../../../app/types';
+import { IReduxState, IStore } from '../../../app/types';
 import { getCurrentConference } from '../../../base/conference/functions';
 import { IJitsiConference } from '../../../base/conference/reducer';
 import { getLocalParticipant } from '../../../base/participants/functions';
@@ -28,7 +28,7 @@ export interface IProps {
     /**
      * The current conference.
      */
-    _conference: IJitsiConference;
+    _conference?: IJitsiConference;
 
     /**
      * Is the video shared by the local user.
@@ -40,12 +40,12 @@ export interface IProps {
     /**
      * The shared video owner id.
      */
-    _ownerId: string;
+    _ownerId?: string;
 
     /**
      * The shared video status.
      */
-    _status: string;
+    _status?: string;
 
     /**
      * Seek time in seconds.
@@ -56,12 +56,12 @@ export interface IProps {
     /**
      * The video url.
      */
-    _videoUrl: string;
+    _videoUrl?: string;
 
     /**
      * The Redux dispatch function.
      */
-    dispatch: Function;
+    dispatch: IStore['dispatch'];
 
     /**
       * The player's height.
@@ -82,7 +82,7 @@ export interface IProps {
 /**
  * Manager of shared video.
  */
-class AbstractVideoManager extends PureComponent<IProps> {
+abstract class AbstractVideoManager<S=void> extends PureComponent<IProps, S> {
     throttledFireUpdateSharedVideoEvent: Function;
 
     /**
@@ -198,7 +198,7 @@ class AbstractVideoManager extends PureComponent<IProps> {
         } = this.props;
 
         dispatch(setSharedVideoStatus({
-            videoUrl: _videoUrl,
+            videoUrl: _videoUrl ?? '',
             status,
             time,
             ownerId: _ownerId
@@ -207,35 +207,39 @@ class AbstractVideoManager extends PureComponent<IProps> {
 
     /**
      * Seeks video to provided time.
-     *
-     * @param {number} time
      */
-    seek: (time: number) => void;
+    abstract seek(time: number): void;
 
     /**
      * Indicates the playback state of the video.
      */
-    getPlaybackStatus: () => string;
+    abstract getPlaybackStatus(): string;
 
     /**
      * Plays video.
      */
-    play: () => void;
+    abstract play(): void;
 
     /**
      * Pauses video.
+     *
+     * @returns {void}
      */
-    pause: () => void;
+    abstract pause(): void;
 
     /**
      * Retrieves current time.
      */
-    getTime: () => number;
+    abstract getTime(): number;
 
     /**
      * Disposes current video player.
+     *
+     * @returns {void}
      */
-    dispose: () => void;
+    dispose() {
+        // optional abstract method to be implemented by sub-class
+    }
 }
 
 
@@ -256,7 +260,7 @@ export function _mapStateToProps(state: IReduxState) {
         _isOwner: ownerId === localParticipant?.id,
         _ownerId: ownerId,
         _status: status,
-        _time: time,
+        _time: Number(time),
         _videoUrl: videoUrl
     };
 }

react/features/shared-video/components/native/SharedVideo.js → react/features/shared-video/components/native/SharedVideo.tsx

@@ -1,9 +1,8 @@
-// @flow
-
 import React, { Component } from 'react';
-import { View } from 'react-native';
+import { View, ViewStyle } from 'react-native';
 import { connect } from 'react-redux';
 
+import { IReduxState, IStore } from '../../../app/types';
 import { getLocalParticipant } from '../../../base/participants/functions';
 import { ASPECT_RATIO_WIDE } from '../../../base/responsive-ui/constants';
 import { setToolboxVisible } from '../../../toolbox/actions';
@@ -12,41 +11,41 @@ import VideoManager from './VideoManager';
 import YoutubeVideoManager from './YoutubeVideoManager';
 import styles from './styles';
 
-type Props = {
+interface IProps {
 
     /**
      * The Redux dispatch function.
      */
-     dispatch: Function,
+    dispatch: IStore['dispatch'];
 
     /**
      * Is the video shared by the local user.
      *
      * @private
      */
-    isOwner: boolean,
+    isOwner: boolean;
 
     /**
      * True if in landscape mode.
      *
      * @private
      */
-     isWideScreen: boolean,
+    isWideScreen: boolean;
 
     /**
      * The available player width.
      */
-    playerHeight: number,
+    playerHeight: number;
 
     /**
      * The available player width.
      */
-    playerWidth: number,
+    playerWidth: number;
 
     /**
      * The shared video url.
      */
-     videoUrl: string,
+    videoUrl?: string;
 }
 
 /** .
@@ -55,13 +54,13 @@ type Props = {
  *
  * @augments Component
  */
-class SharedVideo extends Component<Props> {
+class SharedVideo extends Component<IProps> {
     /**
      * Initializes a new {@code SharedVideo} instance.
      *
      * @param {Object} props - The properties.
      */
-    constructor(props: Props) {
+    constructor(props: IProps) {
         super(props);
 
         this.setWideScreenMode(props.isWideScreen);
@@ -73,7 +72,7 @@ class SharedVideo extends Component<Props> {
      * @inheritdoc
      * @returns {void}
      */
-    componentDidUpdate(prevProps: Props) {
+    componentDidUpdate(prevProps: IProps) {
         const { isWideScreen } = this.props;
 
         if (isWideScreen !== prevProps.isWideScreen) {
@@ -88,7 +87,7 @@ class SharedVideo extends Component<Props> {
      * @private
      * @returns {void}
     */
-    setWideScreenMode(isWideScreen) {
+    setWideScreenMode(isWideScreen: boolean) {
         this.props.dispatch(setToolboxVisible(!isWideScreen));
     }
 
@@ -113,7 +112,7 @@ class SharedVideo extends Component<Props> {
         return (
             <View
                 pointerEvents = { isOwner ? 'auto' : 'none' }
-                style = { styles.videoContainer } >
+                style = { styles.videoContainer as ViewStyle } >
                 {videoUrl.match(/http/)
                     ? (
                         <VideoManager
@@ -137,9 +136,9 @@ class SharedVideo extends Component<Props> {
  *
  * @param {Object} state - The Redux state.
  * @private
- * @returns {Props}
+ * @returns {IProps}
  */
-function _mapStateToProps(state) {
+function _mapStateToProps(state: IReduxState) {
     const { ownerId, videoUrl } = state['features/shared-video'];
     const { aspectRatio, clientHeight, clientWidth } = state['features/base/responsive-ui'];
 
@@ -157,7 +156,7 @@ function _mapStateToProps(state) {
     }
 
     return {
-        isOwner: ownerId === localParticipant.id,
+        isOwner: ownerId === localParticipant?.id,
         isWideScreen,
         playerHeight,
         playerWidth,

react/features/shared-video/components/native/VideoManager.js → react/features/shared-video/components/native/VideoManager.tsx

@@ -1,21 +1,30 @@
+// @ts-expect-error
 import Logger from '@jitsi/logger';
-import React from 'react';
+import React, { RefObject } from 'react';
 import Video from 'react-native-video';
 import { connect } from 'react-redux';
 
 import { PLAYBACK_STATUSES } from '../../constants';
 
 import AbstractVideoManager, {
-    Props,
+    IProps,
     _mapStateToProps
 } from './AbstractVideoManager';
 
+// @ts-ignore
 const logger = Logger.getLogger(__filename);
 
+interface IState {
+    currentTime: number;
+    paused: boolean;
+}
+
 /**
  * Manager of shared video.
  */
-class VideoManager extends AbstractVideoManager<Props> {
+class VideoManager extends AbstractVideoManager<IState> {
+    playerRef: RefObject<Video>;
+
     /**
      * Initializes a new VideoManager instance.
      *
@@ -23,7 +32,7 @@ class VideoManager extends AbstractVideoManager<Props> {
      *
      * @returns {void}
      */
-    constructor(props) {
+    constructor(props: IProps) {
         super(props);
 
         this.state = {
@@ -76,7 +85,7 @@ class VideoManager extends AbstractVideoManager<Props> {
      *
      * @returns {void}
      */
-    seek(time) {
+    seek(time: number) {
         if (this.player) {
             this.player.seek(time);
         }
@@ -110,7 +119,7 @@ class VideoManager extends AbstractVideoManager<Props> {
      * @param {Object} options.playbackRate - Playback rate: 1 - playing, 0 - paused, other - slowed down / sped up.
      * @returns {void}
      */
-    onPlaybackRateChange({ playbackRate }) {
+    onPlaybackRateChange({ playbackRate }: { playbackRate: number; }) {
         if (playbackRate === 0) {
             this.setState({
                 paused: true
@@ -129,12 +138,12 @@ class VideoManager extends AbstractVideoManager<Props> {
     }
 
     /**
-     * Handles progress updarte event.
+     * Handles progress update event.
      *
      * @param {Object} options - Progress event options.
      * @returns {void}
      */
-    onProgress(options) {
+    onProgress(options: { currentTime: number; }) {
         this.setState({ currentTime: options.currentTime });
         this.throttledFireUpdateSharedVideoEvent();
     }
@@ -148,10 +157,10 @@ class VideoManager extends AbstractVideoManager<Props> {
         const { _isOwner, videoId, width, height } = this.props;
         const { paused } = this.state;
 
-        const options = {
+        const options: any = {
             paused,
             progressUpdateInterval: 5000,
-            resizeMode: 'cover',
+            resizeMode: 'cover' as const,
             style: {
                 height,
                 width
@@ -160,7 +169,7 @@ class VideoManager extends AbstractVideoManager<Props> {
             controls: _isOwner,
             pictureInPicture: false,
             onProgress: this.onProgress,
-            onError: event => {
+            onError: (event: Error) => {
                 logger.error('Error in the player:', event);
             }
         };

react/features/shared-video/components/native/YoutubeVideoManager.js → react/features/shared-video/components/native/YoutubeVideoManager.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { RefObject } from 'react';
 import Video from 'react-native-youtube-iframe';
 import { connect } from 'react-redux';
 
 import { PLAYBACK_STATUSES } from '../../constants';
 
 import AbstractVideoManager, {
-    Props,
+    IProps,
     _mapStateToProps
 } from './AbstractVideoManager';
 
@@ -16,10 +16,16 @@ import AbstractVideoManager, {
  */
 const webviewUserAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.97 Safari/537.36'; // eslint-disable-line max-len
 
+interface IState {
+    paused: boolean;
+}
+
 /**
  * Manager of youtube shared video.
  */
-class YoutubeVideoManager extends AbstractVideoManager<Props> {
+class YoutubeVideoManager extends AbstractVideoManager<IState> {
+    playerRef: RefObject<typeof Video>;
+
     /**
      * Initializes a new VideoManager instance.
      *
@@ -27,7 +33,7 @@ class YoutubeVideoManager extends AbstractVideoManager<Props> {
      *
      * @returns {void}
      */
-    constructor(props) {
+    constructor(props: IProps) {
         super(props);
 
         this.state = {
@@ -69,6 +75,7 @@ class YoutubeVideoManager extends AbstractVideoManager<Props> {
      * @returns {number}
      */
     getTime() {
+        // @ts-ignore
         return this.player?.getCurrentTime();
     }
 
@@ -79,8 +86,9 @@ class YoutubeVideoManager extends AbstractVideoManager<Props> {
      *
      * @returns {void}
      */
-    seek(time) {
+    seek(time: number) {
         if (this.player) {
+            // @ts-ignore
             this.player.seekTo(time);
         }
     }
@@ -113,7 +121,7 @@ class YoutubeVideoManager extends AbstractVideoManager<Props> {
      * @param {string} event - State event.
      * @returns {void}
      */
-    _onChangeState(event) {
+    _onChangeState(event: string) {
         if (event === 'paused') {
             this.setState({
                 paused: true
@@ -150,7 +158,7 @@ class YoutubeVideoManager extends AbstractVideoManager<Props> {
     getPlayerOptions() {
         const { _isOwner, videoId, width, height } = this.props;
 
-        const options = {
+        const options: any = {
             height,
             initialPlayerParams: {
                 controls: _isOwner,

react/features/unsupported-browser/components/browserLinks.js → react/features/unsupported-browser/components/browserLinks.ts

@@ -1,5 +1,3 @@
-/* @flow */
-
 /**
  * The URL at which Google Chrome is available for download.
  *

tsconfig.native.json

@@ -24,7 +24,6 @@
         "react/features/e2ee",
         "react/features/embed-meeting",
         "react/features/face-landmarks",
-        "react/features/feedback",
         "react/features/no-audio-signal",
         "react/features/noise-suppression",
         "react/features/old-client-notification",