From 30bf00a3bc40dcc7c916789e577b7b861bc7639f Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Tue, 12 Jul 2016 17:46:56 -0700
Subject: [PATCH] [fix] TextInput styles

Ref #166
---
 examples/components/App.js                      | 17 +++++++++++------
 .../TextInput/__tests__/index-test.js           | 13 +++++++++++++
 src/components/TextInput/index.js               |  8 ++++----
 3 files changed, 28 insertions(+), 10 deletions(-)

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 {
 
         <Heading size='large'>TextInput</Heading>
         <TextInput
+          defaultValue='Default textInput'
           keyboardType='default'
           onBlur={(e) => { 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) }}
         />
-        <TextInput secureTextEntry />
-        <TextInput defaultValue='read only' editable={false} />
+        <TextInput secureTextEntry style={styles.textInput} />
+        <TextInput defaultValue='read only' editable={false} style={styles.textInput} />
         <TextInput
-          style={{ flex:1, height: 60, padding: 20, fontSize: 20, textAlign: 'center' }}
+          style={[ styles.textInput, { flex:1, height: 60, padding: 20, fontSize: 20, textAlign: 'center' } ]}
           keyboardType='email-address' placeholder='you@domain.com' placeholderTextColor='red'
         />
-        <TextInput keyboardType='numeric' />
-        <TextInput keyboardType='phone-pad' />
-        <TextInput defaultValue='https://delete-me' keyboardType='url' placeholder='https://www.some-website.com' selectTextOnFocus />
+        <TextInput keyboardType='numeric' style={styles.textInput} />
+        <TextInput keyboardType='phone-pad' style={styles.textInput} />
+        <TextInput defaultValue='https://delete-me' keyboardType='url' placeholder='https://www.some-website.com' selectTextOnFocus style={styles.textInput} />
         <TextInput
           defaultValue='default value'
           maxNumberOfLines={10}
           multiline
           numberOfLines={5}
+          style={styles.textInput}
         />
 
         <Heading size='large'>Touchable</Heading>
@@ -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(<TextInput style={styles.root} />)
+    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(<TextInput value={value} />))
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