From 82a2833b4e34f9280d758efa2cfbe35ec6ec8b71 Mon Sep 17 00:00:00 2001
From: James Ide <ide@users.noreply.github.com>
Date: Fri, 14 Sep 2018 09:10:16 -0700
Subject: [PATCH] [react-native] Fix declarations related to prop types e.g.
 requireNativeComponent (#28871)

Fixes `requireNativeComponent`, which was conflating the type of PropTypes maps with the type of prop maps. That is, these are not of the same type: `{ x: PropTypes.string }` and `{ x: "hello" }`.

Also fixes the type of the `ViewPropTypes` object. It is a map of PropTypes, not a single PropType. Additionally, made the types of the other PropType exports more precise instead of `PropType.any`.

Please fill in this template.

- [x] Use a meaningful title for the pull request. Include the name of the package modified.
- [x] Test the change in your own code. (Compile and run.)
- [x] Add or edit tests to reflect the change. (Run with `npm test`.)
- [x] Follow the advice from the [readme](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/README.md#make-a-pull-request).
- [x] Avoid [common mistakes](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/README.md#common-mistakes).
- [x] Run `npm run lint package-name` (or `tsc` if no `tslint.json` is present).

If changing an existing definition:
- [x] Provide a URL to documentation or source code which provides context for the suggested changes: **N/A** -- these are fixes
- [x] Increase the version number in the header if appropriate. **N/A**
- [x] If you are making substantial changes, consider adding a `tslint.json` containing `{ "extends": "dtslint/dt.json" }`. **N/A**
---
 types/react-native/index.d.ts     | 13 +++++++------
 types/react-native/test/index.tsx | 14 ++++++++++++--
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/types/react-native/index.d.ts b/types/react-native/index.d.ts
index ad8abe57fd..98f6c92c3f 100644
--- a/types/react-native/index.d.ts
+++ b/types/react-native/index.d.ts
@@ -31,6 +31,7 @@
 /// <reference path="legacy-properties.d.ts" />
 /// <reference path="BatchedBridge.d.ts" />
 
+import * as PropTypes from 'prop-types';
 import * as React from 'react';
 
 type Constructor<T> = new(...args: any[]) => T;
@@ -8936,7 +8937,7 @@ export const PixelRatio: PixelRatioStatic;
 export interface ComponentInterface<P> {
     name?: string;
     displayName?: string;
-    propTypes: P;
+    propTypes: PropTypes.ValidationMap<P>;
 }
 
 /**
@@ -8958,7 +8959,7 @@ export function requireNativeComponent<P>(
     viewName: string,
     componentInterface?: ComponentInterface<P>,
     extraConfig?: { nativeOnly?: any }
-): React.ComponentClass<P>;
+): React.ComponentClass<PropTypes.InferProps<PropTypes.ValidationMap<P>>>;
 
 export function findNodeHandle(
     componentOrHandle: null | number | React.Component<any, any> | React.ComponentClass<any>
@@ -9001,10 +9002,10 @@ export namespace addons {
 //
 // Prop Types
 //
-export const ColorPropType: React.Requireable<any>;
-export const EdgeInsetsPropType: React.Requireable<any>;
-export const PointPropType: React.Requireable<any>;
-export const ViewPropTypes: React.Requireable<any>;
+export const ColorPropType: React.Validator<string>;
+export const EdgeInsetsPropType: React.Validator<Insets>;
+export const PointPropType: React.Validator<PointPropType>;
+export const ViewPropTypes: React.ValidationMap<ViewProps>;
 
 declare global {
     function require(name: string): any;
diff --git a/types/react-native/test/index.tsx b/types/react-native/test/index.tsx
index 8bc6757c48..b2b66ee2da 100644
--- a/types/react-native/test/index.tsx
+++ b/types/react-native/test/index.tsx
@@ -20,6 +20,7 @@ import {
     BackAndroid,
     BackHandler,
     Button,
+    ColorPropType,
     DataSourceAssetCallback,
     DeviceEventEmitterStatic,
     Dimensions,
@@ -73,6 +74,7 @@ import {
     KeyboardAvoidingView,
     Modal,
     TimePickerAndroid,
+    ViewPropTypes,
 } from "react-native";
 
 declare module "react-native" {
@@ -186,13 +188,20 @@ const testNativeSyntheticEvent = <T extends {}>(e: NativeSyntheticEvent<T>): voi
     e.nativeEvent;
 }
 
+type ElementProps<C> = C extends React.Component<infer P, any> ? P : never;
+
 class CustomView extends React.Component {
     render() {
         return <Text style={[StyleSheet.absoluteFill, { ...StyleSheet.absoluteFillObject }]}>Custom View</Text>;
     }
 }
 
-class Welcome extends React.Component {
+class Welcome extends React.Component<ElementProps<View> & { color: string }> {
+    static propTypes = {
+        ...ViewPropTypes,
+        color: ColorPropType,
+    };
+
     refs: {
         [key: string]: any;
         rootView: View;
@@ -218,8 +227,9 @@ class Welcome extends React.Component {
     }
 
     render() {
+        const { color, ...props } = this.props;
         return (
-            <View ref="rootView" style={[[styles.container], undefined, null, false]}>
+            <View {...props} ref="rootView" style={[[styles.container], undefined, null, false]}>
                 <Text style={styles.welcome}>Welcome to React Native</Text>
                 <Text style={styles.instructions}>To get started, edit index.ios.js</Text>
                 <Text style={styles.instructions}>