could you please tell me how to get input field value or in other words username and password input field value on button click .

here is my code https://rnplay.org/apps/drT9vw

import React from 'react';
import {
  registerComponent,
} from 'react-native-playground';
import {
      Text,
    View,
    Image,
    StyleSheet,
    TextInput,
    TouchableHighlight
} from 'react-native';

class App extends React.Component {
    constructor(props){
        super(props);
        this.state ={
            userName :'',
            password:''
        };
    }

    login(){
        alert(this.state.userName)
    }
    OnChangesValue(e){
        console.log(e.nativeEvent.text);
        this.setState({
            userName :e.nativeEvent.text,
        })
    }

    changePassword(e){
        console.log(e.nativeEvent.text);
        this.setState({
            password :e.nativeEvent.text,
        })
    }

    render() {
        return (
            <View style={styles.container}>

                <Text style={styles.heading}> Login</Text>
                <TextInput
                    style={styles.loginInput}
                    onChange={(text)=> this.setState({userName:text})}
                    ref="myInput"
                    underlineColorAndroid='transparent'
                    placeholder="username !"
                />
                <TextInput
                    style={styles.loginInput}
                    ref="pass"
                    onChange={this.changePassword.bind(this)}
                    underlineColorAndroid='transparent'
                    placeholder="password to ff!"
                    secureTextEntry={true}
                />
                <TouchableHighlight style={styles.touchable} onPress={this.login.bind(this)}>
                    <Text style={styles.touchableButton}>Click</Text>
                </TouchableHighlight>
            </View>

        )
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#EF501E',
        flex: 1,
        alignItems: 'center',
        padding :20
    },
    logo: {
        width: 50,
        height: 50
    },
    heading: {
        fontSize: 30,
        marginTop: 20
    },
    loginInput: {
        height: 50,
        alignSelf: 'stretch',
        borderWidth: 1,
        borderColor: '#33090C',
        flexDirection: 'row',
        justifyContent: 'center',
        marginBottom:10
    },
    touchable:{
        backgroundColor:'#2E18DD',
        height:40,
        alignSelf:'stretch',
        alignItems:'center',
        justifyContent:'center'

    },
    touchableButton:{
      color:'#fff',
        fontSize:10
    }
});

registerComponent(App);

update

login(){
        alert(this.refs.myInput.value)
    }

it give undefined