0.0.38

Fix #166

README.md

@@ -2,7 +2,7 @@
 
 [![Build Status][travis-image]][travis-url]
 [![npm version][npm-image]][npm-url]
-![gzipped size](https://img.shields.io/badge/gzipped-~41.0k-blue.svg)
+![gzipped size](https://img.shields.io/badge/gzipped-~48.6k-blue.svg)
 
 [React Native][react-native-url] components and APIs for the Web.
 

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,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-web",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "description": "React Native for Web",
   "main": "dist/index.js",
   "files": [

src/components/ListView/index.js

@@ -3,6 +3,8 @@ import React, { Component } from 'react'
 import ScrollView from '../ScrollView'
 import ListViewDataSource from './ListViewDataSource'
 import ListViewPropTypes from './ListViewPropTypes'
+import View from '../View'
+import pick from 'lodash/pick'
 
 const SCROLLVIEW_REF = 'listviewscroll'
 
@@ -64,7 +66,7 @@ class ListView extends Component {
       if (renderSectionHeader) {
         const section = dataSource.getSectionHeaderData(sectionIdx)
         const key = 's_' + sectionId
-        const child = <div key={key}>{renderSectionHeader(section, sectionId)}</div>
+        const child = <View key={key}>{renderSectionHeader(section, sectionId)}</View>
         children.push(child)
       }
 
@@ -73,7 +75,7 @@ class ListView extends Component {
         const rowId = rows[rowIdx]
         const row = dataSource.getRowData(sectionIdx, rowIdx)
         const key = 'r_' + sectionId + '_' + rowId
-        const child = <div key={key}>{renderRow(row, sectionId, rowId, this.onRowHighlighted)}</div>
+        const child = <View key={key}>{renderRow(row, sectionId, rowId, this.onRowHighlighted)}</View>
         children.push(child)
 
         // render optional separator
@@ -88,12 +90,9 @@ class ListView extends Component {
       }
     }
 
-    const {
-      renderScrollComponent,
-      ...props
-    } = this.props
+    const props = pick(ScrollView.propTypes, this.props)
 
-    return React.cloneElement(renderScrollComponent(props), {
+    return React.cloneElement(this.props.renderScrollComponent(props), {
       ref: SCROLLVIEW_REF
     }, header, children, footer)
   }

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

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