React Native: Enable Login Button when username and password fields are filled in

index.ios.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');

var signalr = require('react-native-signalr');

var {
    AppRegistry,
    StyleSheet,
    Text,
    TextInput,
    AlertIOS,
    View,
    TouchableHighlight,
    } = React;


var SlcTest = React.createClass({
    getInitialState: function () {
        return {
            username: "",
            password: ""
        }
    },
    render: function () {

        // Note you must wrap a TextInput in a view for it to center properly... BUG!
        return (
            <View style={styles.container}>

                <View style={{backgroundColor: 'blue',width: 20,height:20}}/>


                <View>
                    <TextInput style={styles.textInput} placeholder="Username"
                               onChange={(event) => this.setState({username:event.nativeEvent.text})}/>
                </View>
                <View>
                    <TextInput style={styles.textInput} placeholder="Password"
                               onChange={(event) => this.setState({password:event.nativeEvent.text})}/>
                </View>
                <Text style={styles.buttonLink} onPress={this.onForgotPressed}>
                    Forgot password?
                </Text>

                <TouchableHighlight style={[styles.button, !this.canLogin() && styles.disabled]}
                                    activeOpacity={0.4} underlayColor="white">
                    <Text>
                        LOG IN
                    </Text>
                </TouchableHighlight>

            </View>
        );
    },
    onForgotPressed: function () {
        AlertIOS.alert("HELLO ")
    },
    canLogin: function () {
        return this.state.username && this.state.password
    }

});

var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
        padding: 20,
    },
    textInput: {
        height: 40,
        borderColor: 'gray',
        borderWidth: 1,
        width: 250,
        margin: 10,
        padding: 10,
        shadowOffset: {width: 0, height: 0},
    },
    buttonLink: {
        textDecorationLine: "underline"
    },
    button: {marginTop: 30, borderWidth: 1, borderColor: 'gray', padding: 20,},
    disabled: {
        opacity: 0.2,
    }
});

AppRegistry.registerComponent('SlcTest', () => SlcTest);