Update the React Native version, and get types up to date

artsy · orta · Oct 30, 2018 · Oct 31, 2018 · Oct 31, 2018 · Nov 2, 2018
commit 7aa00ad2393ad811a113d5f5f495336c35dc86b7
diff --git a/package.json b/package.json
@@ -74,8 +74,8 @@
     "moment-timezone": "^0.5.17",
     "prop-types": "^15.5.10",
     "query-string": "^4.1.0",
-    "react": "^16.3.0-alpha.1",
-    "react-native": "0.54.4",
+    "react": "^16.6.0",
+    "react-native": "0.57.4",
     "react-native-hyperlink": "0.0.11",
     "react-native-parallax-scroll-view": "https://github.com/orta/react-native-parallax-scroll-view",
     "react-native-scrollable-tab-view": "^0.8.0",
@@ -96,7 +96,7 @@
     "@types/moment-timezone": "^0.5.4",
     "@types/query-string": "^5.0.0",
     "@types/react": "^16.3.0",
-    "@types/react-native": "^0.52.1",
+    "@types/react-native": "^0.57.7",
     "@types/react-relay": "^1.3.9",
     "@types/react-test-renderer": "^16.0.2",
     "@types/react-tracking": "^5.0.0",

diff --git a/src/ambient.d.ts b/src/ambient.d.ts
@@ -0,0 +1,19 @@
+// Exists in JS runtime, needed by relay
+interface File {
+  _?: boolean
+}
+
+// Exists in JS runtime *when running in a web inspector
+interface Console {
+  groupCollapsed(message?: any, ...optionalParams: any[]): void
+  groupEnd(): void
+}
+
+// Needed by styled components, normally comes from the DOM d.ts
+interface StyleSheet {
+  _?: boolean
+}
+
+interface Node {
+  _?: boolean
+}
diff --git a/src/lib/Components/Bidding/Components/Input.tsx b/src/lib/Components/Bidding/Components/Input.tsx
@@ -26,19 +26,19 @@ export class Input extends Component<InputProps, InputState> {
     }
   }
 
-  onBlur() {
+  onBlur(e) {
     if (this.props.onBlur) {
-      this.props.onBlur()
+      this.props.onBlur(e)
     }
 
     this.setState({
       borderColor: this.props.error ? "red100" : "black10",
     })
   }
 
-  onFocus() {
+  onFocus(e) {
     if (this.props.onFocus) {
-      this.props.onFocus()
+      this.props.onFocus(e)
     }
 
     this.setState({ borderColor: "purple100" })
@@ -55,8 +55,8 @@ export class Input extends Component<InputProps, InputState> {
         {...this.props}
         // These props should not be overridden so they are declared after `{...this.props}`
         ref={this.props.inputRef}
-        onBlur={() => this.onBlur()}
-        onFocus={() => this.onFocus()}
+        onBlur={e => this.onBlur(e)}
+        onFocus={e => this.onFocus(e)}
       />
     )
   }

diff --git a/src/lib/Components/Consignments/Components/TextInput.tsx b/src/lib/Components/Consignments/Components/TextInput.tsx
@@ -73,8 +73,8 @@ export default class TextInputField extends React.Component<TextInputProps, Stat
               placeholderTextColor={this.state.focused ? "white" : Colors.GraySemibold}
               selectionColor={Colors.GrayMedium}
               {...this.props.text}
-              onFocus={() => this.setState({ focused: true }, this.props.text.onFocus)}
-              onBlur={() => this.setState({ focused: false }, this.props.text.onBlur)}
+              onFocus={e => this.setState({ focused: true }, () => this.props.text.onFocus(e))}
+              onBlur={e => this.setState({ focused: false }, () => this.props.text.onBlur(e))}
             />
           )}
 

diff --git a/src/lib/Components/Home/SectionTitle.tsx b/src/lib/Components/Home/SectionTitle.tsx
@@ -3,10 +3,6 @@ import React from "react"
 import { StyleSheet, Text, TextStyle } from "react-native"
 
 export default class SectionTitle extends React.Component<any, any> {
-  static propTypes = {
-    ...Text.propTypes,
-  }
-
   render() {
     const { children, ...props } = this.props
     return (

diff --git a/src/lib/Components/Inbox/Conversations/Messages.tsx b/src/lib/Components/Inbox/Conversations/Messages.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { Dimensions, FlatList, RefreshControl, ScrollViewStyle } from "react-native"
+import { Dimensions, FlatList, RefreshControl, ViewStyle } from "react-native"
 import { ConnectionData, createPaginationContainer, graphql, RelayPaginationProp } from "react-relay"
 import styled from "styled-components/native"
 
@@ -131,7 +131,7 @@ export class Messages extends React.Component<Props, State> {
 
     const refreshControl = <RefreshControl refreshing={this.state.reloadingData} onRefresh={this.reload.bind(this)} />
 
-    const messagesStyles: Partial<ScrollViewStyle> = isPad
+    const messagesStyles: Partial<ViewStyle> = isPad
       ? {
           width: 708,
           alignSelf: "center",

diff --git a/src/lib/Components/Inbox/Conversations/index.tsx b/src/lib/Components/Inbox/Conversations/index.tsx
@@ -111,10 +111,13 @@ export class Conversations extends Component<Props, State> {
           keyExtractor={(_item, index) => String(index)}
           scrollEventThrottle={500}
           renderItem={({ item }) => {
+            // TODO: What is up with this `as any`?
+            //       there's a type mismatch here, as item above is a `ConversationSnippetProps`
+            //       but conversation is a `ConversationSnippet_conversation`
             return (
               <ConversationSnippet
-                conversation={item}
-                onSelected={() => SwitchBoard.presentNavigationViewController(this, `conversation/${item.id}`)}
+                conversation={item as any}
+                onSelected={() => SwitchBoard.presentNavigationViewController(this, `conversation/${(item as any).id}`)}
               />
             )
           }}

diff --git a/src/lib/Components/OpaqueImageView.tsx b/src/lib/Components/OpaqueImageView.tsx
@@ -130,4 +130,4 @@ export default class OpaqueImageView extends React.Component<Props, State> {
   }
 }
 
-const NativeOpaqueImageView = requireNativeComponent("AROpaqueImageView", OpaqueImageView)
+const NativeOpaqueImageView = requireNativeComponent<Props>("AROpaqueImageView", OpaqueImageView)
diff --git a/src/lib/Scenes/Home/Components/SectionTitle.tsx b/src/lib/Scenes/Home/Components/SectionTitle.tsx
@@ -2,10 +2,6 @@ import React from "react"
 import { StyleSheet, Text, TextStyle } from "react-native"
 
 export default class SectionTitle extends React.Component<any, any> {
-  static propTypes = {
-    ...Text.propTypes,
-  }
-
   render() {
     const { children, ...props } = this.props
     return (

diff --git a/tsconfig.json b/tsconfig.json
@@ -5,6 +5,8 @@
     "baseUrl": "src",
     "experimentalDecorators": true,
     "jsx": "react",
+    "lib": ["es2015"],
+    "jsx": "react",
     "keyofStringsOnly": true,
     "module": "es2015",
     "moduleResolution": "node",
-Original file line number
+Diff line change
@@ Expand Up @@
       }
     }
-    const NativeOpaqueImageView = requireNativeComponent("AROpaqueImageView", OpaqueImageView)
+    const NativeOpaqueImageView = requireNativeComponent<Props>("AROpaqueImageView", OpaqueImageView)