TouchableOpacity onPress not working(emulator test)

Question

So just getting started with react-native . I have a stateful component built as below:

class LoginView extends Component {
  constructor(props) {
  super(props);
  this.state = {
  inProgress: false
   };
 }

 processLogin(){
  this.setState({
  inProgress: true
  })
 }

render() {
 return (
  <View style={styles.mainContainer}>
    <View style={styles.loginContainer}>
      <TextInput style={styles.input} placeholder="Password" />
      <TouchableOpacity style={styles.button} onPress={() => this.processLogin()}>
        {!this.state.inProgress && <Text style={styles.button_text}>Log in</Text>}/>}
      </TouchableOpacity>
    </View>
  </View>
);}}

As you can see, i am binding the onPress event of the touchable opacity to the function processLogin . But for some reason, the function isn't fired!

The state doesn't change, also tried console.log but didn't fire either. Made sure that TouchableOpacity is imported from React-Native .

I am guessing that i messed up the binding. Any leads would be appreciated!

Note: Have only been trying this in the emulator, not in a real device yet.

Answer 1

instead of using the arrow function on onPress prop, use it when you are declaring the business function processLogin So concretly, replace the declaration of this method by:

processLogin = () => {
    this.setState({
        inProgress : true
    })
}

Then on onPress method, just change make it like this:

onPress = {this.processLogin}

Contrarily, you refer to the wrong this Hope it's gonna help you sir Regards.