From 803cb61346bcdf85d68df5cdfc1a392f78e6cac3 Mon Sep 17 00:00:00 2001
From: Satyajit Sahoo <satyajit.happy@gmail.com>
Date: Tue, 14 Jun 2016 06:16:29 -0700
Subject: [PATCH] Show better error message when accessing React APIs on React
 Native

Summary:
**Motivation:**

Lots of examples on the web still have the old way to import React APIs from React Native. Also when someone upgrades to latest version of React Native without reading the release notes can get confused. This PR adds getters for  `createClass` and `Component` and throws an error with a better error message when they are accessed.

![screenshot_20160614-125622](https://cloud.githubusercontent.com/assets/1174278/16034600/47c70222-3230-11e6-9fe4-1a3493708829.png)

**Test plan:**

Trying to use `ReactNative.createClass` or `ReactNative.Component` will throw an error with this error message.

There's currently a bug in `symbolicateStackTrace` which actually crashes the app after showing the error due to the `stack` being null when updating the stack trace. But that's a separate issue which should be fixed separately. For now, to prevent the crash, we need to add the following before the return statement here - https://github.com/facebook/react-native/blob/master/Libraries/JavaScriptAppEn
Closes https://github.com/facebook/react-native/pull/8099

Differential Revision: D3430468

Pulled By: javache

fbshipit-source-id: c098e51e1f2c276d87eca6da3bd91a457d7840c5
---
 Libraries/Utilities/throwOnWrongReactAPI.js | 32 +++++++++++++++++++++
 Libraries/react-native/react-native.js      | 14 +++++++++
 2 files changed, 46 insertions(+)
 create mode 100644 Libraries/Utilities/throwOnWrongReactAPI.js

diff --git a/Libraries/Utilities/throwOnWrongReactAPI.js b/Libraries/Utilities/throwOnWrongReactAPI.js
new file mode 100644
index 000000000..4685a4071
--- /dev/null
+++ b/Libraries/Utilities/throwOnWrongReactAPI.js
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule throwOnWrongReactAPI
+ * @flow
+ */
+
+'use strict';
+
+function throwOnWrongReactAPI(key: string) {
+  throw new Error(
+`Seems you're trying to access 'ReactNative.${key}' from the 'react-native' package. Perhaps you meant to access 'React.${key}' from the 'react' package instead?
+
+For example, instead of:
+
+  import React, { Component, View } from 'react-native';
+
+You should now do:
+
+  import React, { Component } from 'react';
+  import { View } from 'react-native';
+
+Check the release notes on how to upgrade your code - https://github.com/facebook/react-native/releases/tag/v0.25.1
+`);
+}
+
+module.exports = throwOnWrongReactAPI;
diff --git a/Libraries/react-native/react-native.js b/Libraries/react-native/react-native.js
index c9129314c..c3096adfd 100644
--- a/Libraries/react-native/react-native.js
+++ b/Libraries/react-native/react-native.js
@@ -174,6 +174,20 @@ const ReactNative = {
   },
 };
 
+// Better error messages when accessing React APIs on ReactNative
+if (__DEV__) {
+  const throwOnWrongReactAPI = require('throwOnWrongReactAPI');
+  const reactAPIs = [ 'createClass', 'Component' ];
+
+  for (const key of reactAPIs) {
+    Object.defineProperty(ReactNative, key, {
+      get() { throwOnWrongReactAPI(key); },
+      enumerable: false,
+      configurable: false
+    });
+  }
+}
+
 // Preserve getters with warnings on the internal ReactNative copy without
 // invoking them.
 const ReactNativeInternal = require('ReactNative');