Bump react-native-web to 0.15.7 react to 17.0.2

ios/Podfile.lock

@@ -465,8 +465,8 @@ PODS:
     - DoubleConversion
     - FBLazyVector
     - FBReactNativeSpec
-    - Folly
     - glog
+    - RCT-Folly
     - RCTRequired
     - RCTTypeSafety
     - React
@@ -731,9 +731,9 @@ SPEC CHECKSUMS:
   Airship: 02ad73780f9eed21870e36b0aaab327acda6a102
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
-  DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
+  DoubleConversion: cde416483dac037923206447da6e1454df403714
   FBLazyVector: 7b423f9e248eae65987838148c36eec1dbfe0b53
-  FBReactNativeSpec: 1afb9713f8c77698352ab2effd491031b00c44f0
+  FBReactNativeSpec: 884d4cc2b011759361797a4035c47e10099393b5
   Firebase: c23a36d9e4cdf7877dfcba8dd0c58add66358999
   FirebaseAnalytics: 3bb096873ee0d7fa4b6c70f5e9166b6da413cc7f
   FirebaseCore: d3a978a3cfa3240bf7e4ba7d137fdf5b22b628ec
@@ -747,7 +747,7 @@ SPEC CHECKSUMS:
   Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9
   Flipper-RSocket: 127954abe8b162fcaf68d2134d34dc2bd7076154
   FlipperKit: 8a20b5c5fcf9436cac58551dc049867247f64b00
-  glog: 73c2498ac6884b13ede40eda8228cb1eee9d9d62
+  glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3
   GoogleAppMeasurement: a6a3a066369828db64eda428cb2856dc1cdc7c4e
   GoogleDataTransport: f56af7caa4ed338dc8e138a5d7c5973e66440833
   GoogleUtilities: 7f2f5a07f888cdb145101d6042bc4422f57e70b3
@@ -805,7 +805,7 @@ SPEC CHECKSUMS:
   RNFBCrashlytics: 4870c14cf8833053b6b5648911abefe1923854d2
   RNGestureHandler: 9b7e605a741412e20e13c512738a31bd1611759b
   RNPermissions: eb94f9fdc0a8ecd02fcce0676d56ffb1395d41e1
-  RNReanimated: 70f662b5232dd5d19ccff581e919a54ea73df51c
+  RNReanimated: b8c8004b43446e3c2709fe64b2b41072f87428ad
   RNScreens: e8e8dd0588b5da0ab57dcca76ab9b2d8987757e0
   RNSVG: ce9d996113475209013317e48b05c21ee988d42e
   urbanairship-react-native: dfb6dc22b2f41ccaadd636b73d51b448cd1b2bbc

package.json

@@ -32,8 +32,6 @@
     "analyze-packages": "ANALYZE_BUNDLE=true webpack --config config/webpack/webpack.prod.js"
   },
   "dependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/preset-flow": "^7.12.13",
     "@formatjs/intl-getcanonicallocales": "^1.5.8",
     "@formatjs/intl-locale": "^2.4.21",
     "@formatjs/intl-numberformat": "^6.2.5",
@@ -70,8 +68,8 @@
     "onfido-sdk-ui": "^6.7.2",
     "prop-types": "^15.7.2",
     "pusher-js": "^7.0.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-native": "0.64.1",
     "react-native-bootsplash": "^3.2.0",
     "react-native-config": "^1.4.0",
@@ -92,7 +90,7 @@
     "react-native-safe-area-context": "^3.1.4",
     "react-native-screens": "^3.0.0",
     "react-native-svg": "^12.1.0",
-    "react-native-web": "^0.14.1",
+    "react-native-web": "0.15.7",
     "react-pdf": "^5.2.0",
     "react-plaid-link": "^3.1.0",
     "react-web-config": "^1.0.0",
@@ -105,6 +103,7 @@
     "@actions/core": "^1.2.6",
     "@actions/github": "^4.0.0",
     "@babel/core": "^7.11.1",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
     "@babel/preset-env": "^7.11.0",
     "@babel/preset-flow": "^7.12.13",
     "@babel/preset-react": "^7.10.4",
@@ -127,6 +126,7 @@
     "babel-plugin-module-resolver": "^4.0.0",
     "babel-plugin-react-native-web": "^0.13.5",
     "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-remove-console": "^6.9.4",
     "clean-webpack-plugin": "^3.0.0",
     "concurrently": "^5.3.0",
     "copy-webpack-plugin": "^6.0.3",

src/components/InvertedFlatList/index.js

@@ -1,7 +1,4 @@
 import React, {
-    useEffect,
-    useRef,
-    useCallback,
     forwardRef,
 } from 'react';
 import PropTypes from 'prop-types';
@@ -16,57 +13,58 @@ const propTypes = {
     }).isRequired,
 };
 
-// This is copied from https://codesandbox.io/s/react-native-dsyse
+// This is adapted from https://codesandbox.io/s/react-native-dsyse
 // It's a HACK alert since FlatList has inverted scrolling on web
-const InvertedFlatList = (props) => {
-    const ref = useRef(null);
+class InvertedFlatList extends React.Component {
+    constructor(props) {
+        super(props);
 
-    const invertedWheelEvent = useCallback((e) => {
-        ref.current.getScrollableNode().scrollTop -= e.deltaY;
-        e.preventDefault();
-    }, []);
+        this.invertedWheelEvent = this.invertedWheelEvent.bind(this);
+        this.list = undefined;
+    }
 
-    useEffect(() => {
-        if (!_.isFunction(props.innerRef)) {
+    componentDidMount() {
+        if (!_.isFunction(this.props.innerRef)) {
             // eslint-disable-next-line no-param-reassign
-            props.innerRef.current = ref.current;
+            this.props.innerRef.current = this.list;
         } else {
-            props.innerRef(ref.current);
+            this.props.innerRef(this.list);
         }
-    }, []);
 
-    useEffect(() => {
-        const currentRef = ref.current;
-        if (currentRef != null) {
-            currentRef
+        if (this.list) {
+            this.list
                 .getScrollableNode()
-                .addEventListener('wheel', invertedWheelEvent);
+                .addEventListener('wheel', this.invertedWheelEvent);
 
-            currentRef.setNativeProps({
+            this.list.setNativeProps({
                 style: {
                     transform: 'translate3d(0,0,0) scaleY(-1)',
                 },
             });
         }
+    }
 
-        return () => {
-            if (currentRef != null) {
-                currentRef
-                    .getScrollableNode()
-                    .removeEventListener('wheel', invertedWheelEvent);
-            }
-        };
-    }, [ref, invertedWheelEvent]);
+    componentWillUnmount() {
+        this.list.getScrollableNode()
+            .removeEventListener('wheel', this.invertedWheelEvent);
+    }
 
-    return (
-        <BaseInvertedFlatList
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            ref={ref}
-            shouldMeasureItems
-        />
-    );
-};
+    invertedWheelEvent(e) {
+        this.list.getScrollableNode().scrollTop -= e.deltaY;
+        e.preventDefault();
+    }
+
+    render() {
+        return (
+            <BaseInvertedFlatList
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...this.props}
+                ref={el => this.list = el}
+                shouldMeasureItems
+            />
+        );
+    }
+}
 
 InvertedFlatList.propTypes = propTypes;
 

src/components/TextLink.js

@@ -1,8 +1,7 @@
 import _ from 'underscore';
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Text, Pressable} from 'react-native';
-import openURLInNewTab from '../libs/openURLInNewTab';
+import {Text, Pressable, Linking} from 'react-native';
 import styles from '../styles/styles';
 
 const propTypes = {
@@ -26,7 +25,7 @@ const TextLink = (props) => {
         <Pressable
             onPress={(e) => {
                 e.preventDefault();
-                openURLInNewTab(props.href);
+                Linking.openURL(props.href);
             }}
             accessibilityRole="link"
             href={props.href}

src/components/Tooltip/index.js

@@ -135,6 +135,7 @@ class Tooltip extends PureComponent {
                         toValue: 1,
                         duration: 140,
                         delay: 500,
+                        useNativeDriver: false,
                     }).start();
                 }
             });
@@ -149,6 +150,7 @@ class Tooltip extends PureComponent {
         Animated.timing(this.animation, {
             toValue: 0,
             duration: 140,
+            useNativeDriver: false,
         }).start();
     }
 

src/components/VideoChatButtonAndMenu.js

@@ -1,10 +1,11 @@
 import React, {Component} from 'react';
-import {View, Pressable, Dimensions} from 'react-native';
+import {
+    View, Pressable, Dimensions, Linking,
+} from 'react-native';
 import Icon from './Icon';
 import {Phone} from './Icon/Expensicons';
 import Popover from './Popover';
 import MenuItem from './MenuItem';
-import openURLInNewTab from '../libs/openURLInNewTab';
 import ZoomIcon from '../../assets/images/zoom-icon.svg';
 import GoogleMeetIcon from '../../assets/images/google-meet.svg';
 import CONST from '../CONST';
@@ -30,12 +31,12 @@ class VideoChatButtonAndMenu extends Component {
             {
                 icon: ZoomIcon,
                 text: props.translate('videoChatButtonAndMenu.zoom'),
-                onPress: () => openURLInNewTab(CONST.NEW_ZOOM_MEETING_URL),
+                onPress: () => Linking.openURL(CONST.NEW_ZOOM_MEETING_URL),
             },
             {
                 icon: GoogleMeetIcon,
                 text: props.translate('videoChatButtonAndMenu.googleMeet'),
-                onPress: () => openURLInNewTab(CONST.NEW_GOOGLE_MEET_MEETING_URL),
+                onPress: () => Linking.openURL(CONST.NEW_GOOGLE_MEET_MEETING_URL),
             },
         ].map(item => ({
             ...item,