title: React Native Elements Line underneath FormInput Component
body: <p>I'm using the FormInput element from React Native Elements, which seems to produce a line underneath each FormInput component. One is more faint than the other.</p>
  
  <p><a href="https://i.stack.imgur.com/ZD8CI.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ZD8CI.png" alt="enter image description here"></a></p>
  
  <p>Form looks as follows</p>
  
  <pre><code>&lt;View style={styles.container}&gt;
                  &lt;Image 
                      style={styles.image}
                      source={app.imageBackground}
                  /&gt;
                  &lt;View style={{ alignItems: 'center' }}&gt;
                      &lt;Image 
                          style={styles.logo}
                          source={app.logo}
                      /&gt;
                  &lt;/View&gt;
  
                  &lt;View  style={styles.cardWrapper}&gt;
                      &lt;View style={styles.card}&gt;
                          &lt;FormInput 
                              inputStyle={styles.textInput}
                              placeholder='user@email.com'
                              autoCapitalize='none'
                              autoCorrect={false}
                              underlineColorAndroid='transparent'
                              placeholderTextColor='white'
                              onChangeText={this.onEmailChange.bind(this)} 
                          /&gt;
                          &lt;FormInput 
                              secureTextEntry={true}
                              autoCapitalize='none'
                              placeholder='password'
                              autoCorrect={false}
                              inputStyle={styles.textInput}
                              underlineColorAndroid='transparent'
                              placeholderTextColor = 'white'
                              onChangeText={this.onPasswordChange.bind(this)} 
                          /&gt;
                          &lt;FormValidationMessage&gt;{this.renderError()}&lt;/FormValidationMessage&gt;
                          {this.renderButton()}
  
                          &lt;Text style={{color:'white', textAlign:'center'}}&gt;New to Foodspecials?&lt;Text style={{fontWeight:'900'}} onPress={() =&gt; this.props.navigation.navigate('SignUp')}&gt; Sign up&lt;/Text&gt;&lt;/Text&gt;
                      &lt;/View&gt;
                  &lt;/View&gt;
  
              &lt;/View&gt;
  </code></pre>
  
  <p>Here are my styles</p>
  
  <pre><code>const styles = StyleSheet.create({
      container: {
          flex: 1,
          justifyContent: 'center',
      },
      cardWrapper: {
          padding: 20
      },
      card: {
  
      },
      logo: {
          justifyContent: 'center',
      },
      image: {
          backgroundColor: '#ccc',
          flex: 1,
          position: 'absolute',
          width: '100%',
          height: '100%',
          justifyContent: 'center',
      },
      textInput: {
          height: 50,
          fontSize: 20,
          borderRadius: 50,
          backgroundColor: 'rgba(255, 255, 255, 0.3)',
          color: 'white',
          width: '100%',
          paddingLeft: 20,
          marginTop: 10,
          marginBottom: 10
      },
      button: {
          borderWidth: 2,
          borderColor: 'white',
          marginTop: 10,
          marginBottom: 10
      }
  })
  </code></pre>
  
  <p>I've tried to add a borderWidth property of 0 to the FormInput but this doesn't seem to work. </p>
  
  <p>I've also tried to set a borderColor to transparent which didn't work either. </p>
  
  <p>I've also noticed, if I remove the FormValidationMessage component, both line become more apparent.</p>
  
  <p>Is there a workaround for this? </p>