diff --git a/README.md b/README.md
index 8b2e2664..fa7217c2 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
[![npm version][npm-image]][npm-url]
[React Native][react-native-url] components and APIs for the Web.
-~19 KB minified and gzipped.
+~17.7 KB minified and gzipped.
* [Slack: reactiflux channel #react-native-web][slack-url]
* [Gitter: react-native-web][gitter-url]
@@ -23,7 +23,7 @@
## Install
```
-npm install --save react react-native-web
+npm install --save react react-dom react-native-web
```
## Example
diff --git a/config/webpack.config.publish.js b/config/webpack.config.publish.js
index 601da79a..df4c5a54 100644
--- a/config/webpack.config.publish.js
+++ b/config/webpack.config.publish.js
@@ -7,7 +7,8 @@ module.exports = assign({}, base, {
main: constants.SRC_DIRECTORY
},
externals: [{
- react: true
+ 'react': true,
+ 'react-dom': true
}],
output: {
filename: 'react-native-web.js',
diff --git a/package.json b/package.json
index 90d4ec45..2e9b68be 100644
--- a/package.json
+++ b/package.json
@@ -17,9 +17,8 @@
},
"dependencies": {
"inline-style-prefixer": "^0.3.3",
- "react": ">=0.13.3",
- "react-tappable": "^0.6.0",
- "react-textarea-autosize": "^2.5.3"
+ "react-tappable": "^0.7.1",
+ "react-textarea-autosize": "^3.0.0"
},
"devDependencies": {
"babel-core": "^5.8.23",
@@ -42,6 +41,9 @@
"mocha": "^2.3.0",
"node-libs-browser": "^0.5.2",
"object-assign": "^4.0.1",
+ "react": "^0.14.0",
+ "react-addons-test-utils": "^0.14.0",
+ "react-dom": "^0.14.0",
"webpack": "^1.12.1",
"webpack-dev-server": "^1.10.1"
},
diff --git a/src/components/Image/__tests__/index-test.js b/src/components/Image/__tests__/index-test.js
index 505e9b77..49440021 100644
--- a/src/components/Image/__tests__/index-test.js
+++ b/src/components/Image/__tests__/index-test.js
@@ -2,7 +2,7 @@
import { assertProps, render, renderToDOM } from '../../../modules/specHelpers'
import assert from 'assert'
-import React from 'react/addons'
+import React from 'react'
import Image from '../'
diff --git a/src/components/ListView/__tests__/index-test.js b/src/components/ListView/__tests__/index-test.js
index 0fe4a477..38743c8e 100644
--- a/src/components/ListView/__tests__/index-test.js
+++ b/src/components/ListView/__tests__/index-test.js
@@ -1,20 +1 @@
/* eslint-env mocha */
-
-/*
-import assert from 'assert'
-import React from 'react/addons'
-
-import ListView from '../'
-
-const ReactTestUtils = React.addons.TestUtils
-
-function shallowRender(component, context = {}) {
- const shallowRenderer = React.addons.TestUtils.createRenderer()
- shallowRenderer.render(component, context)
- return shallowRenderer.getRenderOutput()
-}
-
-suite.skip('ListView', () => {
- test('prop "children"', () => {})
-})
-*/
diff --git a/src/components/ScrollView/__tests__/index-test.js b/src/components/ScrollView/__tests__/index-test.js
index 6052bbea..38743c8e 100644
--- a/src/components/ScrollView/__tests__/index-test.js
+++ b/src/components/ScrollView/__tests__/index-test.js
@@ -1,15 +1 @@
/* eslint-env mocha */
-
-/*
-import { assertProps, renderToDOM, shallowRender } from '../../../modules/specHelpers'
-import assert from 'assert'
-import React from 'react/addons'
-
-import ScrollView from '.'
-
-const ReactTestUtils = React.addons.TestUtils
-
-suite.skip('ScrollView', () => {
- test('prop "children"', () => {})
-})
-*/
diff --git a/src/components/Text/__tests__/index-test.js b/src/components/Text/__tests__/index-test.js
index 8a83a8a8..d864a077 100644
--- a/src/components/Text/__tests__/index-test.js
+++ b/src/components/Text/__tests__/index-test.js
@@ -2,12 +2,11 @@
import { assertProps, renderToDOM, shallowRender } from '../../../modules/specHelpers'
import assert from 'assert'
-import React from 'react/addons'
+import React from 'react'
+import ReactTestUtils from 'react-addons-test-utils'
import Text from '../'
-const ReactTestUtils = React.addons.TestUtils
-
suite('components/Text', () => {
test('prop "accessibilityLabel"', () => {
assertProps.accessibilityLabel(Text)
diff --git a/src/components/TextInput/__tests__/index-test.js b/src/components/TextInput/__tests__/index-test.js
index 345646a6..b5e6baf9 100644
--- a/src/components/TextInput/__tests__/index-test.js
+++ b/src/components/TextInput/__tests__/index-test.js
@@ -2,12 +2,11 @@
import * as utils from '../../../modules/specHelpers'
import assert from 'assert'
-import React from 'react/addons'
+import React from 'react'
+import ReactTestUtils from 'react-addons-test-utils'
import TextInput from '../'
-const ReactTestUtils = React.addons.TestUtils
-
suite('components/TextInput', () => {
test('prop "accessibilityLabel"', () => {
utils.assertProps.accessibilityLabel(TextInput)
diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js
index 6c513959..23a31b06 100644
--- a/src/components/TextInput/index.js
+++ b/src/components/TextInput/index.js
@@ -1,6 +1,7 @@
import { pickProps } from '../../modules/filterObjectProps'
import CoreComponent from '../CoreComponent'
import React, { PropTypes } from 'react'
+import ReactDOM from 'react-dom'
import StyleSheet from '../../modules/StyleSheet'
import TextareaAutosize from 'react-textarea-autosize'
import TextInputStylePropTypes from './TextInputStylePropTypes'
@@ -71,7 +72,7 @@ class TextInput extends React.Component {
_onFocus(e) {
const { clearTextOnFocus, onFocus, selectTextOnFocus } = this.props
- const node = React.findDOMNode(this)
+ const node = ReactDOM.findDOMNode(this)
if (clearTextOnFocus) node.value = ''
if (selectTextOnFocus) node.select()
if (onFocus) onFocus(e)
@@ -168,9 +169,10 @@ class TextInput extends React.Component {
type
}
- return (multiline
- ?
- :
+ const props = multiline ? propsMultiline : propsSingleline
+
+ return (
+
)
}
}
diff --git a/src/components/Touchable/__tests__/index-test.js b/src/components/Touchable/__tests__/index-test.js
index 73172553..aa0660e8 100644
--- a/src/components/Touchable/__tests__/index-test.js
+++ b/src/components/Touchable/__tests__/index-test.js
@@ -2,7 +2,7 @@
import { assertProps, shallowRender } from '../../../modules/specHelpers'
import assert from 'assert'
-import React from 'react/addons'
+import React from 'react'
import Touchable from '../'
diff --git a/src/components/View/__tests__/index-test.js b/src/components/View/__tests__/index-test.js
index 2c752501..0df61f4f 100644
--- a/src/components/View/__tests__/index-test.js
+++ b/src/components/View/__tests__/index-test.js
@@ -2,7 +2,7 @@
import { assertProps, shallowRender } from '../../../modules/specHelpers'
import assert from 'assert'
-import React from 'react/addons'
+import React from 'react'
import View from '../'
diff --git a/src/example.js b/src/example.js
index 7710c3b8..3fd7bd7c 100644
--- a/src/example.js
+++ b/src/example.js
@@ -1,31 +1,13 @@
import React, { Image, StyleSheet, Text, TextInput, Touchable, View } from '.'
+import ReactDOM from 'react-dom'
-const { Component, PropTypes } = React
-
-class Heading extends React.Component {
- static propTypes = {
- children: PropTypes.any,
- level: PropTypes.string,
- size: PropTypes.string
- }
-
- static defaultProps = {
- level: '1',
- size: 'normal'
- }
-
- render() {
- const { children, level, size } = this.props
-
- return (
-
- )
- }
-}
+const Heading = ({ children, level = '1', size = 'normal' }) => (
+
+)
const headingStyles = StyleSheet.create({
size: {
@@ -46,7 +28,7 @@ const headingStyles = StyleSheet.create({
}
})
-class Example extends Component {
+class Example extends React.Component {
static propTypes = {
style: View.propTypes.style
}
@@ -124,7 +106,7 @@ class Example extends Component {
-
+
, document.getElementById('react-root'))
+ReactDOM.render(, document.getElementById('react-root'))
document.getElementById('react-stylesheet').textContent = StyleSheet.renderToString()
diff --git a/src/modules/specHelpers/index.js b/src/modules/specHelpers/index.js
index 80059ec8..128a9ded 100644
--- a/src/modules/specHelpers/index.js
+++ b/src/modules/specHelpers/index.js
@@ -1,9 +1,9 @@
/* eslint-env mocha */
import assert from 'assert'
-import React from 'react/addons'
-
-const ReactTestUtils = React.addons.TestUtils
+import React from 'react'
+import ReactDOM from 'react-dom'
+import ReactTestUtils from 'react-addons-test-utils'
export const assertProps = {
accessibilityLabel: function (Component, props) {
@@ -82,7 +82,7 @@ export const assertProps = {
export function render(element, container) {
return container
- ? React.render(element, container)
+ ? ReactDOM.render(element, container)
: ReactTestUtils.renderIntoDocument(element)
}
@@ -99,16 +99,16 @@ export function renderAndInject(element) {
}
const result = render(element, div)
- return React.findDOMNode(result)
+ return ReactDOM.findDOMNode(result)
}
export function renderToDOM(element, container) {
const result = render(element, container)
- return React.findDOMNode(result)
+ return ReactDOM.findDOMNode(result)
}
export function shallowRender(component, context = {}) {
- const shallowRenderer = React.addons.TestUtils.createRenderer()
+ const shallowRenderer = ReactTestUtils.createRenderer()
shallowRenderer.render(component, context)
return shallowRenderer.getRenderOutput()
}