title: React-Native Big Problems with Confirming Password
body: <p>i got a Questions because I am new in React native! I was trying to find an Answer that fits with my Code. But nothing is working well! Im overloaded. Maybe some of u guys can help me with my problem!</p>
  
  <p>So i need a "simple" confirming password message if someone is writing the two fields wrong because there is no match! </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import {View, Image, TextInput} from 'react-native';
  import { Container, Header, Content, Button, Icon, Body, Left, Right,
      Text, Title, Card, CardItem } from 'native-base';
  import styles from '../Style/Style.js'
  import Foect from 'foect';
  import IconNew from 'react-native-vector-icons/MaterialIcons';
  
  export default class AnmeldeScreen extends Component {
    constructor(props) {
      super(props);
      
      this.state = {
          icEye: 'visibility-off',
          password: true,
      }
  }
  
  static navigationOptions = {
    header: null
  }
  changePwdType = () =&gt; {
    let newState;
    if (this.state.password) {
        newState = {
            icEye: 'visibility',
            password: false
        }
    } else {
        newState = {
            icEye: 'visibility-off',
            password: true
        }
    }
  
    // set new state value
    this.setState(newState)
  
  };
  
    render () {
      var {navigate} = this.props.navigation;
  
      return (
            &lt;Container&gt;
  {/*---------------------------------------------------- H E A D E R  ------------------------------------------------------------*/}
  
                          &lt;Header&gt;
                          &lt;Left&gt;
                          &lt;Button transparent onPress={() =&gt; navigate("Start", {})}&gt;
                          &lt;Icon name="arrow-back" /&gt;
                          &lt;/Button&gt;
                          &lt;/Left&gt;                        
                          &lt;Body&gt;
                          &lt;Title style={styles.titelintervall}&gt;Registrieren&lt;/Title&gt;
                          &lt;/Body&gt;
                          &lt;Right&gt;
                          &lt;/Right&gt;
                          &lt;/Header&gt;     
  {/*---------------------------------------------------- C O N T E N T ------------------------------------------------------------*/}
           &lt;Content padder&gt;
           
              &lt;Image source={require('../images/low-carb-camp-logo-breit.png')} style={styles.secondimagelogo} /&gt;
              &lt;Foect.Form
    defaultValue={{
      email: ''
    }}
    onValidSubmit={model =&gt; {
      console.log(model);
    }}
  &gt;
    { /* you can use form for triggering submit or checking form state(form.isSubmitted, form.isValid, ...) */ }
    { form =&gt; (
      &lt;View&gt;
        { /* every Foect.Control must have a name and optionally validation rules */ }
        &lt;Foect.Control name="fullName" required minLength={2} maxLength={32}&gt;
          { /* you can use control for getting/setting it's value, checking/updating(control.isValid, control.markAsTouched(), ...) it's state, checking it's errors(control.errors.required) */ }
          { control =&gt; (
            &lt;View&gt;
              &lt;Text style={{ marginTop: 10, color: '#8BC051' }}&gt;Dein Name&lt;/Text&gt;
  
              &lt;TextInput
                style={{height: 40, borderColor: 'gray', borderBottomWidth: 1}}
                /* mark control as touched on blur */ 
                onBlur={control.markAsTouched}
                /* update control's value */ 
                onChangeText={(text) =&gt; control.onChange(text)}
                 /* get control's value */ 
                value={control.value}
                placeholder="Hier vollständigen Namen eingeben"
              /&gt;
  
              { /* check control state and show error if necessary */ }
              { control.isTouched &amp;&amp;
                control.isInvalid &amp;&amp; 
                &lt;Text style={{ color: 'red' }}&gt;Bitte trage deinen Namen ein.&lt;/Text&gt; }
            &lt;/View&gt;
          ) }
        &lt;/Foect.Control&gt;
  
  
        &lt;Foect.Control name="email" required email&gt;
          { control =&gt; (
            &lt;View&gt;
              &lt;Text style={{ marginTop: 10, color: '#8BC051' }}&gt;Email&lt;/Text&gt;
  
              &lt;TextInput
                style={{height: 40, borderColor: 'gray', borderBottomWidth: 1}}
                keyboardType="email-address"
                onBlur={control.markAsTouched}
                onChangeText={(text) =&gt; control.onChange(text)}
                value={control.value}
                placeholder="Hier E-Mail eingeben"
              /&gt;
  
              { control.isTouched &amp;&amp;
                control.isInvalid &amp;&amp; 
                &lt;View&gt;
                  &lt;Text style={{ color: 'red'}}&gt;{control.value} ist keine gültige E-Mail&lt;/Text&gt;
                &lt;/View&gt; }
            &lt;/View&gt;
          ) }
        &lt;/Foect.Control&gt;
  
  
        &lt;Foect.Control name="password" required pattern={/(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$/}&gt;
          { control =&gt; (
            &lt;View&gt;
              &lt;Text style={{ marginTop: 10, color: '#8BC051' }}&gt;Passwort
              &lt;/Text&gt;
  
              &lt;TextInput
                style={{height: 40, borderColor: 'gray', borderBottomWidth: 1}}
                secureTextEntry={true}
                onBlur={control.markAsTouched}
                onChangeText={(text) =&gt; control.onChange(text)}
                value={control.value}
                secureTextEntry={this.state.password}
                placeholder="Passwort erstellen"
              /&gt;
  &lt;IconNew style={styles.icon}
                        name={this.state.icEye}
                        size={25}
                        color={this.props.iconColor}
                        onPress={this.changePwdType}
                  /&gt;
              { control.isTouched &amp;&amp;
                control.isInvalid &amp;&amp; 
                &lt;View&gt;
                  { control.errors.pattern ?
                    &lt;Text style={{ color: 'red' }}&gt;Dein Passwort muss mindestens 8 Zeichen lang sein und mindestens ein Sonderzeichen oder eine Zahl enthalten.&lt;/Text&gt; : 
                    &lt;Text style={{ color: 'red' }}&gt;Bitte trage dein Passwort ein.&lt;/Text&gt; }
                &lt;/View&gt; }
            &lt;/View&gt;
          ) }
        &lt;/Foect.Control&gt;
  
  &lt;Foect.Control name="confirmpassword"&gt;
          { control =&gt; (
            &lt;View&gt;
              &lt;Text style={{ marginTop: 10, color: '#8BC051' }}&gt;Passwort wiederholen
              &lt;/Text&gt;
  
              &lt;TextInput
                style={{height: 40, borderColor: 'gray', borderBottomWidth: 1}}
                secureTextEntry={true}
                onBlur={control.markAsTouched}
                onChangeText={(text) =&gt; control.onChange(text)}
                value={control.value}
                placeholder="Passwort bitte wiederholen"
              /&gt;
            &lt;/View&gt;
          ) }
        &lt;/Foect.Control&gt;
      &lt;/View&gt;
    ) }
  &lt;/Foect.Form&gt;
            
              &lt;View style={{marginTop: 10}}&gt;
              &lt;Button full warning style={styles.buttonintervall} onPress={
              () =&gt; navigate("Ziel", {})}&gt;&gt;&gt;
              &lt;Text&gt;Registrieren&lt;/Text&gt;
              &lt;/Button&gt;
              &lt;/View&gt;
  
              &lt;Text style={styles.secondtextfb}&gt; oder &lt;/Text&gt;
              
            &lt;Card&gt;
            &lt;CardItem&gt;
  
              &lt;Icon name="logo-facebook" style={{color: '#234c6e'}} /&gt;
              &lt;Text&gt;Über Facebook registrieren&lt;/Text&gt;
              &lt;Right&gt;
              &lt;Icon name="arrow-forward" /&gt;
              &lt;/Right&gt;
  
            &lt;/CardItem&gt;
            &lt;/Card&gt; 
             
          &lt;/Content&gt;
          &lt;/Container&gt;
          
        );
      }
    }
  
  
      </code></pre>
  </div>
  </div>
  </p>