React-native-web: Cannot set font size for TextInput

[PaulBGD]

Case:

import React, {Component, StyleSheet, TextInput, View} from 'react-native';

const styles = StyleSheet.create({
    container: {
        paddingTop: 10
    },
    input: {
        height: 40,
        fontSize: '24px'
    }
});

export default class SearchBar extends Component {
    render() {
        return (<View style={styles.container}>
            <TextInput style={styles.input}/>
        </View>);
    }
}

Which produces:

Warning: Failed propType: Invalid props.style key `fontSize` supplied to `View`.
Bad object: {
  "borderColor": "black",
  "borderWidth": 1,
  "height": 40,
  "fontSize": "24px"
}
Valid keys: [
  "borderColor",
  "borderTopColor",
  "borderRightColor",
  "borderBottomColor",
  "borderLeftColor",
  "borderRadius",
  "borderTopLeftRadius",
  "borderTopRightRadius",
  "borderBottomLeftRadius",
  "borderBottomRightRadius",
  "borderStyle",
  "borderTopStyle",
  "borderRightStyle",
  "borderBottomStyle",
  "borderLeftStyle",
  "borderWidth",
  "borderBottomWidth",
  "borderLeftWidth",
  "borderRightWidth",
  "borderTopWidth",
  "boxSizing",
  "height",
  "margin",
  "marginBottom",
  "marginHorizontal",
  "marginLeft",
  "marginRight",
  "marginTop",
  "marginVertical",
  "maxHeight",
  "maxWidth",
  "minHeight",
  "minWidth",
  "padding",
  "paddingBottom",
  "paddingHorizontal",
  "paddingLeft",
  "paddingRight",
  "paddingTop",
  "paddingVertical",
  "width",
  "alignContent",
  "alignItems",
  "alignSelf",
  "flex",
  "flexBasis",
  "flexDirection",
  "flexGrow",
  "flexShrink",
  "flexWrap",
  "justifyContent",
  "order",
  "bottom",
  "left",
  "position",
  "right",
  "top",
  "transform",
  "transformMatrix",
  "backfaceVisibility",
  "backgroundColor",
  "opacity",
  "overflow",
  "backgroundAttachment",
  "backgroundClip",
  "backgroundImage",
  "backgroundPosition",
  "backgroundOrigin",
  "backgroundRepeat",
  "backgroundSize",
  "boxShadow",
  "cursor",
  "outline",
  "overflowX",
  "overflowY",
  "userSelect",
  "visibility",
  "zIndex"
] Check the render method of `TextInput`

I'm assuming this is because all styles are being passed to the View.

[PaulBGD]

Turns out a quick fix is wrapping the TextInput in a Text, which contains the font style properties.

[arronhunt]

I have this problem also. The wrapping trick doesn't work because the TextInput requires an explicit width/height

[IamDaleon]

Try
fontSize: 24

[swushi]

I'm having a similar issue and have not found any solution. The style attribute for fontSize is essentially useless in the TextInput component. I need some type of way to manipulate that though.