CODEWITHSUNDEEP
reactjsreact-native
A. L
A. L

Reputation: 12649

React-native - Conditionally set a height

So for <TextInput> for ios you need to set a height. However, for android you don't need to. So I was wondering how I would set a height only when the OS matches ios. I know about platform but I get errors when I try to apply some logic. This is what I tried:

    <TextInput
      onChangeText={(input) => this.setState({user: input})}
      maxLength={10}
      placeholder="Enter a name"
      {(Platform.OS === 'ios') ? "height={20}" : ""}
      style={{ width: 150, textAlign: "center"}}
    />

Upvotes: 0

Views: 697

Answers (1)

atlanteh
atlanteh

Reputation: 5835

Actually I think the better thing to do would be:

const style = {
    width: 150,
    textAlign: "center",
    ...Platform.select({ios: {height: 20}})
}
<TextInput
   onChangeText={(input) => this.setState({user: input})}
   maxLength={10}
   placeholder="Enter a name"
   style={style} />

This way you don't duplicate the rest of the styles, and you avoid any ugly conditions in your code, so it's more readable.

You can read about Plaform.select in react-native docs

Upvotes: 4

Related Questions