title: Enable and disable button when text is entered in textInput or removed in react native
body: <p>I want to make button enabled when something is typed in text field and it should get disabled when value in the text field is removed.</p>
  
  <p>But currently when i type in the text field the the button gets activated but when i remove the text it remains enabled and doesn't update it's state.</p>
  
  <p>What should i do?  </p>
  
  <p>My code:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { StyleSheet, View, Text, TouchableHighlight,TextInput,TouchableOpacity, ImageBackground,Button } from 'react-native';
  import { createStackNavigator, createAppContainer } from "react-navigation";
  
  
  class App extends Component {
  
    state={
      username:'',
      password:'',
      validity:true
    }
  
    static navigationOptions={
      header:null
    };
  render() {
      return (
  
       &lt;View style={styles.container}&gt;
  
        &lt;View style={{marginLeft:50,marginTop:30}}&gt;
         &lt;TextInput 
           style={styles.textInputStyle}
           placeholderTextColor="#FFF" 
           placeholder='Username'
           onChangeText={(value)=&gt;this.setState({username:value,validity:false})}
           value={this.state.username}
            /&gt;
         &lt;TextInput 
           style={styles.textInputStyle}
           placeholderTextColor="#FFF" 
           placeholder='Password'
           secureTextEntry={true}
           onChangeText={(value)=&gt;this.setState({password:value,validity:false})}
           value={this.state.password}
            /&gt;
         &lt;/View&gt;
  
         &lt;View style={{alignSelf:'center'}} &gt;
  
          &lt;TouchableOpacity style={this.state.validity? 
               styles.inactiveStyle:styles.activeStyle}                           
               disabled={this.state.validity}                                                                                                                     
               onPress={this.handleLogin}&gt;
           &lt;Text&gt;Login&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
         &lt;/View&gt;
          &lt;/View&gt;
      )
    }
  }
  
  const AppNavigator = createStackNavigator(
    {
      Home: App,    
    },
    {
      initialRouteName: "Home",
      defaultNavigationOptions:{
        header:null
      }
    }
  );
  const styles = StyleSheet.create({
    container:{
      flex:1,    
    },
    textInputStyle:{
      height:50,
      width:300,
      borderBottomWidth:1,
      borderBottomColor:'#FFF',
      marginTop:20,
      color:'#FFF'
    },
    activeStyle:{
      marginTop:18,
      width:180,
      backgroundColor:'#05acfa', 
      alignItems: 'center',
      padding: 10
    },
    inactiveStyle:{
      marginTop:18,
      width:180,
      backgroundColor:'grey', 
      alignItems: 'center',
      padding: 10
    }
  });
  
  export default createAppContainer(AppNavigator);
  </code></pre>