Upgrade react-native to 0.64.0-rc.1

@types/react-native-is-catalyst/index.d.ts

@@ -0,0 +1,4 @@
+declare module 'react-native-is-catalyst' {
+  const isCatalyst: boolean
+  export default isCatalyst
+}

landing/src/context/AuthContext.tsx

@@ -474,7 +474,6 @@ export function AuthProvider(props: AuthProviderProps) {
 }
 
 export const AuthConsumer = AuthContext.Consumer
-;(AuthConsumer as any).displayName = 'AuthConsumer'
 
 export function useAuth() {
   return useContext(AuthContext)

landing/src/context/PaddleLoaderContext.tsx

@@ -185,7 +185,6 @@ export function PaddleLoaderProvider(props: PaddleLoaderProps) {
 }
 
 export const PaddleLoaderConsumer = PaddleLoaderContext.Consumer
-;(PaddleLoaderConsumer as any).displayName = 'PaddleLoaderConsumer'
 
 export function usePaddleLoader() {
   return useContext(PaddleLoaderContext)

landing/src/context/PlansContext.tsx

@@ -124,7 +124,6 @@ export function PlansProvider(props: PlansProps) {
 }
 
 export const PlansConsumer = PlansContext.Consumer
-;(PlansConsumer as any).displayName = 'PlansConsumer'
 
 export function usePlans() {
   return useContext(PlansContext)

landing/src/context/StripeLoaderContext.tsx

@@ -49,7 +49,6 @@ export function StripeLoaderProvider(props: StripeLoaderProps) {
 }
 
 export const StripeLoaderConsumer = StripeLoaderContext.Consumer
-;(StripeLoaderConsumer as any).displayName = 'StripeLoaderConsumer'
 
 export function useStripeLoader() {
   return useContext(StripeLoaderContext)

landing/src/context/ThemeContext.tsx

@@ -54,7 +54,6 @@ export function ThemeProvider(props: ThemeProviderProps) {
 }
 
 export const ThemeConsumer = ThemeContext.Consumer
-;(ThemeConsumer as any).displayName = 'ThemeConsumer'
 
 export function useTheme() {
   return useContext(ThemeContext)

package.json

@@ -34,9 +34,6 @@
     "studio": "yarn workspace @devhub/mobile studio",
     "xcode": "yarn workspace @devhub/mobile xcode"
   },
-  "dependencies": {
-    "react-native": "0.63.0-rc.1"
-  },
   "devDependencies": {
     "@primer/octicons-v2": "canary",
     "@typescript-eslint/eslint-plugin": "4.9.0",

packages/components/src/components/context/ColumnFiltersContext.tsx

@@ -27,9 +27,9 @@ const defaultValue: ColumnFiltersProviderState = {
   inlineMode: false,
   isSharedFiltersOpened: false,
 }
-export const ColumnFiltersContext = React.createContext<
-  ColumnFiltersProviderState
->(defaultValue)
+export const ColumnFiltersContext = React.createContext<ColumnFiltersProviderState>(
+  defaultValue,
+)
 ColumnFiltersContext.displayName = 'ColumnFiltersContext'
 
 export function ColumnFiltersProvider(props: ColumnFiltersProviderProps) {
@@ -86,7 +86,6 @@ export function ColumnFiltersProvider(props: ColumnFiltersProviderProps) {
 }
 
 export const ColumnFiltersConsumer = ColumnFiltersContext.Consumer
-;(ColumnFiltersConsumer as any).displayName = 'ColumnFiltersConsumer'
 
 export function useColumnFilters() {
   return useContext(ColumnFiltersContext)

packages/components/src/components/context/ColumnFocusContext.tsx

@@ -206,7 +206,6 @@ export function ColumnFocusProvider(props: ColumnFocusProviderProps) {
 }
 
 export const ColumnFocusConsumer = ColumnFocusContext.Consumer
-;(ColumnFocusConsumer as any).displayName = 'ColumnFocusConsumer'
 
 export function useFocusedColumn() {
   return useContext(ColumnFocusContext)

packages/components/src/components/context/ColumnWidthContext.tsx

@@ -30,7 +30,6 @@ export function ColumnWidthProvider(props: ColumnWidthProviderProps) {
 }
 
 export const ColumnWidthConsumer = ColumnWidthContext.Consumer
-;(ColumnWidthConsumer as any).displayName = 'ColumnWidthConsumer'
 
 export function calculateColumnWidth({
   windowWidth,

packages/components/src/components/context/DeepLinkContext.tsx

@@ -121,7 +121,6 @@ export function DeepLinkProvider(props: DeepLinkProviderProps) {
 }
 
 export const DeepLinkConsumer = DeepLinkContext.Consumer
-;(DeepLinkConsumer as any).displayName = 'DeepLinkConsumer'
 
 function getQueryParams(url: string) {
   if (!(url && typeof url === 'string')) return {}

packages/components/src/components/context/DialogContext.tsx

@@ -71,7 +71,6 @@ export function DialogProvider(props: DialogProviderProps) {
 }
 
 export const DialogConsumer = DialogContext.Consumer
-;(DialogConsumer as any).displayName = 'DialogConsumer'
 
 export function useDialog() {
   return useContext(DialogContext)

packages/components/src/components/context/LayoutContext.tsx

@@ -3,7 +3,7 @@ import { Dimensions } from 'react-native'
 import { useDimensions } from '../../hooks/use-dimensions'
 
 export const APP_LAYOUT_BREAKPOINTS = {
-  SMALL: 420,
+  SMALL: 430,
   MEDIUM: 580,
   LARGE: 700,
   XLARGE: 1000,
@@ -49,14 +49,12 @@ export function AppLayoutProvider(props: AppLayoutProviderProps) {
 }
 
 export const AppLayoutConsumer = AppLayoutContext.Consumer
-;(AppLayoutConsumer as any).displayName = 'AppLayoutConsumer'
 
 export function getAppLayout(dimensions?: {
   width: number
   height: number
 }): AppLayoutProviderState {
   const { width, height } = dimensions || Dimensions.get('window')
-
   const sizename: AppLayoutProviderState['sizename'] =
     width <= APP_LAYOUT_BREAKPOINTS.SMALL
       ? '1-small'

packages/components/src/components/context/PlansContext.tsx

@@ -90,7 +90,6 @@ export function PlansProvider(props: PlansProps) {
 }
 
 export const PlansConsumer = PlansContext.Consumer
-;(PlansConsumer as any).displayName = 'PlansConsumer'
 
 export function usePlans() {
   return useContext(PlansContext)

packages/components/src/components/context/ThemeContext.tsx

@@ -57,7 +57,6 @@ export function ThemeProvider(props: ThemeProviderProps) {
 }
 
 export const ThemeConsumer = ThemeContext.Consumer
-;(ThemeConsumer as any).displayName = 'ThemeConsumer'
 
 export function useTheme({
   themeTransformer,

packages/components/src/components/context/UnreadCountContext.tsx

@@ -213,7 +213,6 @@ export function UnreadCountProvider(props: UnreadCountProviderProps) {
 }
 
 export const UnreadCountConsumer = UnreadCountContext.Consumer
-;(UnreadCountConsumer as any).displayName = 'UnreadCountConsumer'
 
 export function useUnreadCount() {
   return useContext(UnreadCountContext)

packages/components/src/libs/analytics/native.ts

@@ -32,7 +32,7 @@ export const analytics: Analytics = {
   },
 
   trackScreenView(screenName) {
-    void firebase.analytics().setCurrentScreen(screenName)
+    void firebase.analytics().logScreenView({ screen_name: screenName })
   },
 }
 

packages/components/src/libs/browser/index.native.ts

@@ -37,7 +37,6 @@ export const Browser: BrowserCrossPlatform = {
         preferredControlTintColor: foregroundColor,
         secondaryToolbarColor: foregroundColor,
         toolbarColor: backgroundColor,
-        waitForRedirectDelay: 500,
         ...(options && options.native),
       })
 

packages/components/src/libs/is-catalyst/index.ios.ts

@@ -0,0 +1,3 @@
+import { NativeModules } from 'react-native'
+
+export default !!NativeModules?.IsCatalyst?.isCatalyst

packages/components/src/libs/is-catalyst/index.ts

@@ -0,0 +1 @@
+export default false

packages/components/src/libs/platform/index.ts

@@ -1,5 +1,7 @@
 import { Platform as _Platform, PlatformIOSStatic } from 'react-native'
 
+import isCatalyst from '../is-catalyst'
+
 import {
   PlataformSelectSpecificsEnhanced,
   PlatformName,
@@ -8,8 +10,8 @@ import {
 } from './index.shared'
 
 const isMacOS = !!(
-  (_Platform as any).constants &&
-  (_Platform as any).constants.systemName === 'Mac OS X'
+  isCatalyst ||
+  (_Platform as any).constants?.systemName?.toLowerCase().startsWith('mac')
 )
 
 export const Platform = {

packages/components/src/libs/safe-area-view/index.tsx

@@ -1,15 +1,16 @@
 import React from 'react'
 import { View, ViewProps } from 'react-native'
 import {
-  SafeAreaConsumer,
-  SafeAreaContext,
+  SafeAreaInsetsContext,
   SafeAreaProvider,
-  useSafeArea as useSafeAreaOriginal,
+  useSafeAreaInsets as useSafeAreaOriginal,
 } from 'react-native-safe-area-context'
 import { getElectronTitleBarHeight } from '../../components/ElectronTitleBar'
 import { useDesktopOptions } from '../../hooks/use-desktop-options'
 
-export { SafeAreaConsumer, SafeAreaContext, SafeAreaProvider }
+export const SafeAreaContext = SafeAreaInsetsContext
+export const SafeAreaConsumer = SafeAreaInsetsContext.Consumer
+export { SafeAreaProvider }
 
 export const useSafeArea: typeof useSafeAreaOriginal = () => {
   const safeAreaInsets = useSafeAreaOriginal()

packages/components/src/redux/types/base.ts

@@ -1,5 +1,7 @@
 import { InferableComponentEnhancerWithProps } from 'react-redux'
-import { Action as ReduxAction, Reducer as ReduxReducer } from 'redux'
+import { Action as ReduxAction } from 'redux'
+
+import { Reducer } from '.'
 
 export interface Action<T extends string, P> extends ReduxAction<T> {
   payload: P
@@ -40,6 +42,4 @@ export type ExtractPropsFromConnector<
   ? T
   : never
 
-export type ExtractStateFromReducer<R> = R extends ReduxReducer<infer S>
-  ? S
-  : never
+export type ExtractStateFromReducer<R> = R extends Reducer<infer S> ? S : never

packages/components/src/screens/LoginScreen.tsx

@@ -1,11 +1,13 @@
-import { constants, tryParseOAuthParams } from '@devhub/core'
 import axios from 'axios'
 import _ from 'lodash'
 import qs from 'qs'
 import React, { useEffect, useRef, useState } from 'react'
 import { Image, ScrollView, StyleSheet, View } from 'react-native'
 import url from 'url'
 
+import { constants, tryParseOAuthParams } from '@devhub/core'
+import logo from '@devhub/components/assets/logo_circle.png'
+
 import { getAppVersionLabel } from '../components/common/AppVersion'
 import { FullHeightScrollView } from '../components/common/FullHeightScrollView'
 import { GitHubLoginButton } from '../components/common/GitHubLoginButton'
@@ -39,8 +41,6 @@ import {
   clearQueryStringFromURL,
 } from '../utils/helpers/auth'
 
-const logo = require('@devhub/components/assets/logo_circle.png').default // eslint-disable-line
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,

packages/components/src/types.d.ts

@@ -0,0 +1 @@
+declare module '*.png' {}

packages/mobile/.flowconfig

@@ -8,10 +8,6 @@
 ; Ignore polyfills
 node_modules/react-native/Libraries/polyfills/.*
 
-; These should not be required directly
-; require from fbjs/lib instead: require('fbjs/lib/warning')
-node_modules/warning/.*
-
 ; Flow doesn't support platforms
 .*/Libraries/Utilities/LoadingView.js
 
@@ -30,6 +26,8 @@ emoji=true
 esproposal.optional_chaining=enable
 esproposal.nullish_coalescing=enable
 
+exact_by_default=true
+
 module.file_ext=.js
 module.file_ext=.json
 module.file_ext=.ios.js
@@ -44,10 +42,6 @@ suppress_type=$FlowFixMe
 suppress_type=$FlowFixMeProps
 suppress_type=$FlowFixMeState
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)?:? #[0-9]+
-suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
-
 [lints]
 sketchy-null-number=warn
 sketchy-null-mixed=warn
@@ -58,7 +52,6 @@ deprecated-type=warn
 unsafe-getters-setters=warn
 unnecessary-invariant=warn
 signature-verification-failure=warn
-deprecated-utility=error
 
 [strict]
 deprecated-type
@@ -70,4 +63,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.122.0
+^0.137.0

packages/mobile/android/app/build.gradle

@@ -1,4 +1,5 @@
 apply plugin: "com.android.application"
+apply plugin: "com.google.gms.google-services"
 
 import com.android.build.OutputFile
 
@@ -78,9 +79,6 @@ import com.android.build.OutputFile
  */
 
 project.ext.react = [
-    bundleAssetName: "index.android.bundle",
-    cliPath: "../../node_modules/react-native/local-cli/cli.js",
-    entryFile: "packages/mobile/index.js",
     enableHermes: false,  // clean and rebuild if changing
 ]
 
@@ -135,6 +133,8 @@ def jscFlavor = 'org.webkit:android-jsc:+'
 def enableHermes = project.ext.react.get("enableHermes", false);
 
 android {
+    ndkVersion rootProject.ext.ndkVersion
+
     compileSdkVersion rootProject.ext.compileSdkVersion
 
     compileOptions {
@@ -183,11 +183,12 @@ android {
         variant.outputs.each { output ->
             // For each separate APK per architecture, set a unique version code as described here:
             // https://developer.android.com/studio/build/configure-apk-splits.html
+            // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc.
             def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
             def abi = output.getFilter(OutputFile.ABI)
             if (abi != null) {  // null for the universal-debug, universal-release variants
                 output.versionCodeOverride =
-                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
+                        defaultConfig.versionCode * 1000 + versionCodes.get(abi)
             }
 
         }
@@ -211,24 +212,13 @@ dependencies {
 
     debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
         exclude group:'com.facebook.flipper'
+        exclude group:'com.squareup.okhttp3', module:'okhttp'
     }
 
     debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
         exclude group:'com.facebook.flipper'
     }
 
-    implementation project(':@react-native-firebase_app')
-    implementation project(':@react-native-firebase_analytics')
-    // implementation 'me.leolin:ShortcutBadger:1.1.21@aar'
-    implementation project(':react-native-vector-icons')
-    implementation project(':react-native-splash-screen')
-    implementation project(':react-native-linear-gradient')
-    implementation project(':react-native-gesture-handler')
-    implementation project(':bugsnag-react-native')
-    implementation project(':react-native-inappbrowser-reborn')
-    implementation project(':react-native-safe-area-context')
-    implementation project(':react-native-haptic-feedback')
-
     if (enableHermes) {
         def hermesPath = "../../../../node_modules/hermes-engine/android/";
         debugImplementation files(hermesPath + "hermes-debug.aar")
@@ -246,4 +236,4 @@ task copyDownloadableDepsToLibs(type: Copy) {
 }
 
 apply from: file("../../../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
-apply plugin: 'com.google.gms.google-services'
+

packages/mobile/android/app/src/debug/AndroidManifest.xml

@@ -4,5 +4,10 @@
 
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
 
-    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
+    <application
+        android:usesCleartextTraffic="true"
+        tools:targetApi="28"
+        tools:ignore="GoogleAppIndexingWarning">
+        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
+    </application>
 </manifest>