diff --git a/examples/components/App.js b/examples/components/App.js
index eadced0e..5b070778 100644
--- a/examples/components/App.js
+++ b/examples/components/App.js
@@ -90,7 +90,10 @@ export default class App extends React.Component {
/>
-
+
diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js
index f05ab768..4d88832c 100644
--- a/src/components/TextInput/index.js
+++ b/src/components/TextInput/index.js
@@ -1,5 +1,7 @@
import createNativeComponent from '../../modules/createNativeComponent'
import NativeMethodsDecorator from '../../modules/NativeMethodsDecorator'
+import omit from 'lodash/omit'
+import pick from 'lodash/pick'
import React, { Component, PropTypes } from 'react'
import ReactDOM from 'react-dom'
import StyleSheet from '../../apis/StyleSheet'
@@ -7,6 +9,9 @@ import Text from '../Text'
import TextareaAutosize from 'react-textarea-autosize'
import TextInputState from './TextInputState'
import View from '../View'
+import ViewStylePropTypes from '../View/ViewStylePropTypes'
+
+const viewStyleProps = Object.keys(ViewStylePropTypes)
@NativeMethodsDecorator
class TextInput extends Component {
@@ -114,6 +119,12 @@ class TextInput extends Component {
type = 'password'
}
+ // In order to support 'Text' styles on 'TextInput', we split the 'Text'
+ // and 'View' styles and apply them to the 'Text' and 'View' components
+ // used in the implementation
+ const rootStyles = pick(style, viewStyleProps)
+ const textStyles = omit(style, viewStyleProps)
+
const propsCommon = {
autoComplete: autoComplete && 'on',
autoFocus,
@@ -124,7 +135,7 @@ class TextInput extends Component {
onFocus: this._handleFocus,
onSelect: onSelectionChange && this._handleSelectionChange,
readOnly: !editable,
- style: { ...styles.input, outline: style.outline },
+ style: { ...styles.input, ...textStyles, outline: style.outline },
value
}
@@ -143,26 +154,29 @@ class TextInput extends Component {
const props = multiline ? propsMultiline : propsSingleline
+ const optionalPlaceholder = placeholder && this.state.showPlaceholder && (
+
+
+
+ )
+
return (
{createNativeComponent({ ...props, ref: 'input' })}
- {placeholder && this.state.showPlaceholder && (
-
-
-
- )}
+ {optionalPlaceholder}
)