[iOS] TextInput placeholder style does not match with value style

[tuononh]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

Environment:
  OS: macOS High Sierra 10.13.6
  Node: 10.9.0
  Yarn: 1.9.4
  npm: 6.2.0
  Watchman: 4.9.0
  Xcode: Xcode 9.4.1 Build version 9F2000
  Android Studio: 3.1 AI-173.4907809

Packages: (wanted => installed)
  react: 16.3.1 => 16.3.1
  react-native: 0.56.0 => 0.56.0

Description

TextInput placeholder style does not match with value style on iOS. Android works fine.
https://media.giphy.com/media/ORjsNZP2uZUZuYuLg8/giphy.gif (Notice the first letter moved down)

Reproducible Demo

                        <TextInput
                          style={[styles.inputComponent, styles.inputBelow]}
                          autoCapitalize={'none'}
                          placeholder="Website / Link"
                          placeholderTextColor={'#354056'}
                          value={this.state.website}
                          onChangeText={(val) => this._inputChange('website', val)}
                          blurOnSubmit={false}
                          onSubmitEditing={() => this.focusNextField('phone')}
                          ref={input => this.inputs['website'] = input}
                          returnKeyType={'next'}
                          editable={!this.state.is_reference}
                          underlineColorAndroid='transparent'
                        />

  inputComponent: {
    fontSize: 16,
    color: '#8893A6',
    lineHeight: 22,
    height: 22,
    padding: 0,
    margin: 0,
    borderWidth: 0,
  },
  inputBelow: {
    marginTop: 0,
    color: '#354056',
  },

[furedal]

I just had the same issue. It seems like there is some errors occurring when customizing line-height.

[tsmilgius]

0.57.7 version still affected by this issue.

[ferrannp]

Hello there 👋

Can you try with 0.59.x? I tried reproducing it and I do not see such behavior. If it happens again, we can reopen it but it'd be great if you could attach a running example (like a Snack) 😊

[pontusab]

Still persists in 0.59.1, with multiline set to true.

[mahdieh-dev]

still persists in 0.59.5

i have style of textAlign: 'right', the placeholder goes to left and while I type, the value is typed on the right. I want both on the right. can anyone help please?