Calling Authentication Function in react-native

Question

I am setting up a basic authentication screen for my app.
What I have going on right now is a button calling a function called auth
My problem is when I click on the button, in turn calling the function, nothing in my function seems to be executed.
Here is my code:

import React from "react";
import {
  View,
  TextInput,
  StyleSheet,
  Alert,
  KeyboardAvoidingView,
  Dimensions
} from "react-native";
import { Button, Text } from "native-base";


let width = Dimensions.get("window").width;
let height = Dimensions.get("window").height;

export default class Login extends React.Component {
  static navigationOptions = {
    title: "Login to Aeries"
  };

  constructor(props) {
    super(props);
    this.state = { isAuthed: false, username: "", authError: false, password: "" };
    this.auth = this.auth.bind(this);


    const showAlert = () => {
      Alert.alert(
        'There was an error loging in. Please check your username and password and try again.'
      )
    }
  }

  auth(){

    //do auth 
    this.setState({ authError: false,isAuthed: false });

    if (this.state.isAuthed === false && this.state.isAuthed === false && this.state.username == "admin" && this.state.password == "admin") { // authentication is successful
      this.setState({ isAuthed: true });
      this.props.navigation.navigate("Grades")
    } else { // auth error
      this.setState({ authError: true,isAuthed: false });
      this.showAlert
    }

  };
  render() {
    const { showAlert } = this.state
    return (
      <View style={styles.wrapper}>
        <KeyboardAvoidingView behavior="padding" style={styles.loginContainer}>
          <TextInput
            placeholder="school email"
            keyboardType="email-address"
            autoCapitalize="none"
            autoCorrect={false}
            placeholderTextColor="white"
            style={styles.input}
            value={this.state.username}
          />

          <TextInput
            placeholder="password"
            secureTextEntry
            autoCorrect={false}
            autoCapitalize="none"
            placeholderTextColor="white"
            style={styles.input}
            value={this.state.password}
          />

          <View style={{
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
            margin: 12
          }}>

            <Button
              primary
              onPress={this.auth}
            >

              <Text> Login </Text>

            </Button>
          </View>

        </KeyboardAvoidingView>

      </View>
    );
  }
}

const styles = {
  loginContainer: {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    width: width - 42,
    backgroundColor: "#bdc3c7",
    borderRadius: 9,
    marginTop: 21,
    marginBottom: 21
  },

  input: {
    paddingHorizontal: 10,
    color: "#2c3e50",
    backgroundColor: "#95a5a6",
    margin: 12,
    height: 42,
    width: width - 69,
    borderRadius: 3
  },

  logo: {
    width: 231,
    height: 231
  },

  wrapper: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    marginTop: -21
  },

  loginButton: {
    borderRadius: 3,
    marginTop: 9,
    marginBottom: 21
  },
  error: {
    color: 'red',
    textAlign: 'center',
  }
};

What should be happening when I click the button is it should be calling the auth function

The auth function should check if the username and password are both admin and if so navigate to the screen called Grades (btw I am using react-navigation)

If the username and password are not 'admin' then an alert should show up saying the authentication was unsuccessful.

Thanks in advance. Let me know if you would like me to append any other code.

Answer 1

Your approach is wrong, do this

Bind the function in constructor

constructor(props) {
   super(props);
   this.auth = this.auth.bind(this);
}

set function like this

auth() {
   // Your chunk of code
}

The button should be like this

<Button onPress={this.auth} />

If there is any issue let me know in the comment section!

Check this live demo