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} )