diff --git a/examples/components/App.js b/examples/components/App.js
index 07a512ae..b5f5c153 100644
--- a/examples/components/App.js
+++ b/examples/components/App.js
@@ -83,6 +83,7 @@ export default class App extends React.Component {
TextInput
{ console.log('TextInput.onBlur', e) }}
onChange={(e) => { console.log('TextInput.onChange', e) }}
@@ -90,20 +91,21 @@ export default class App extends React.Component {
onFocus={(e) => { console.log('TextInput.onFocus', e) }}
onSelectionChange={(e) => { console.log('TextInput.onSelectionChange', e) }}
/>
-
-
+
+
-
-
-
+
+
+
Touchable
@@ -229,6 +231,9 @@ const styles = StyleSheet.create({
flexDirection: 'row',
flexWrap: 'wrap'
},
+ textInput: {
+ borderWidth: 1
+ },
box: {
alignItems: 'center',
flexGrow: 1,
diff --git a/src/components/TextInput/__tests__/index-test.js b/src/components/TextInput/__tests__/index-test.js
index 8035287b..4068b58c 100644
--- a/src/components/TextInput/__tests__/index-test.js
+++ b/src/components/TextInput/__tests__/index-test.js
@@ -223,6 +223,19 @@ suite('components/TextInput', () => {
// assert.equal(input.node.selectionStart, 0)
})
+ test('prop "style"', () => {
+ const styles = StyleSheet.create({
+ root: {
+ borderWidth: 1,
+ textAlign: 'center'
+ }
+ })
+ const textInput = shallow()
+ const input = findNativeInput(textInput)
+ assert.equal(StyleSheet.flatten(textInput.prop('style')).borderWidth, 1, 'expected View styles to be applied to the "View"')
+ assert.equal(input.prop('style').textAlign, 'center', 'expected Text styles to be applied to the "input"')
+ })
+
test('prop "value"', () => {
const value = 'value'
const input = findNativeInput(shallow())
diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js
index cae95bda..6fa200de 100644
--- a/src/components/TextInput/index.js
+++ b/src/components/TextInput/index.js
@@ -121,8 +121,9 @@ class TextInput extends Component {
// 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 flattenedStyle = StyleSheet.flatten(style)
+ const rootStyles = pick(flattenedStyle, viewStyleProps)
+ const textStyles = omit(flattenedStyle, viewStyleProps)
const propsCommon = {
autoComplete: autoComplete && 'on',
@@ -236,8 +237,7 @@ applyNativeMethods(TextInput)
const styles = StyleSheet.create({
initial: {
- borderColor: 'black',
- borderWidth: 1
+ borderColor: 'black'
},
wrapper: {
flex: 1