OnPress not getting called

Question

I'm trying to build an application using React Native. I made a custom button, and the onPress is not working, tried to look for answers but couldn't find any, The code looks just like the docs (copied from there).

This is the custom button:

    import React from 'react';
    import { View, Text, StyleSheet, TouchableHighlight, TouchableOpacity } from 'react-native';
    import COLORS from '../constants/constants';

    class AppButton extends React.Component {
        render() {
            return(
                <View style={styles.container}>
                    <TouchableOpacity>
                        <Text style={styles.title}>
                            {this.props.title}
                        </Text>
                    </TouchableOpacity>
                </View>
              );
        }
    }

    const styles = StyleSheet.create({
      container: {
        backgroundColor: COLORS.appOrange,
        borderRadius: 20,
        elevation: 3,
        flexShrink: 0,
        width: '100%',
        height: 60,
        justifyContent: 'center'
      },
      title: {
          fontSize: 24,
          color: COLORS.appWhite,
          textAlign: 'center',
      },
    });

    export default AppButton;

This is how I try to use the onPress:

    import React from 'react';
import { View, Text, StyleSheet, TextInput } from 'react-native';
import COLORS from '../constants/constants';
import Card from '../components/card';
import { Colors } from 'react-native/Libraries/NewAppScreen';
import AppTextInput from '../components/appTextInput';
import AppButton from '../components/appButton';

class Login extends React.Component {

    onPress = () => {
      console.log("hello world!@#!@#@!#");
        // this.setState({
        //   count: this.state.count + 1
        // });
    };

    render() {
        return(
            <View style={styles.superContainer}>
              <View style={styles.formContainer}>
                  <AppTextInput placeHolderText="Email@Address.com"></AppTextInput>
                  <AppTextInput placeHolderText="Passwrod"></AppTextInput>
              </View>
              <View style={styles.buttonContainer}>
                  <AppButton
                  title="LOGIN"
                  style={styles.loginButton}
                  onPress={this.onPress}
                  />
              </View>
            </View>

        );
    }
}

I tried to look at the console, but nothing gets printed out, tried few different examples I saw on the internet but the tap just won't register.

Answer 1

Are you sure the "this" verb refer to the right object (class instance) ?

Let's check this :

class Login extends React.Component {

    const onPress = () => {
      console.log("the world is not enough");
    };

    render() {
        /* assign this class instance to that reference */
        const that = this;

        return(
            ...
              <View style={styles.buttonContainer}>
                  <AppButton
                  title="LOGIN"
                  style={styles.loginButton}

                  /* use that class reference */
                  onPress={that.onPress}
                  />
              </View>
            ... 
        );
    }
}

Answer 2

In your case you didn't pass the onPress props into TouchableOpacity inside your custom button component.

Try this

Custom Button

import React from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableHighlight,
  TouchableOpacity
} from "react-native";
import COLORS from "../constants/constants";

class AppButton extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this.props.onPress}>
          <Text style={styles.title}>{this.props.title}</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: COLORS.appOrange,
    borderRadius: 20,
    elevation: 3,
    flexShrink: 0,
    width: "100%",
    height: 60,
    justifyContent: "center"
  },
  title: {
    fontSize: 24,
    color: COLORS.appWhite,
    textAlign: "center"
  }
});

export default AppButton;

Login Class

import React from "react";
import { View, Text, StyleSheet, TextInput } from "react-native";
import COLORS from "../constants/constants";
import Card from "../components/card";
import { Colors } from "react-native/Libraries/NewAppScreen";
import AppTextInput from "../components/appTextInput";
import AppButton from "../components/appButton";

class Login extends React.Component {
  onPress = () => {
    console.log("hello world!@#!@#@!#");
    // this.setState({
    //   count: this.state.count + 1
    // });
  };

  render() {
    return (
      <View style={styles.superContainer}>
        <View style={styles.formContainer}>
          <AppTextInput placeHolderText="Email@Address.com"></AppTextInput>
          <AppTextInput placeHolderText="Passwrod"></AppTextInput>
        </View>
        <View style={styles.buttonContainer}>
          <AppButton
            title="LOGIN"
            style={styles.loginButton}
            onPress={this.onPress}
          />
        </View>
      </View>
    );
  }
}

Answer 3

I have passed OnPress method as props to AppButton and attached this method to TouchableOpcaity OnPress Event

 import React from 'react';
    import { View, Text, StyleSheet, TouchableHighlight, TouchableOpacity } from 'react-native';
    import COLORS from '../constants/constants';

    class AppButton extends React.Component {
        render() {
            return(
                <View style={styles.container}>
                    <TouchableOpacity onPress={this.props.handleOnPress}>
                        <Text style={styles.title}>
                            {this.props.title}
                        </Text>
                    </TouchableOpacity>
                </View>
              );
        }
    }

    const styles = StyleSheet.create({
      container: {
        backgroundColor: COLORS.appOrange,
        borderRadius: 20,
        elevation: 3,
        flexShrink: 0,
        width: '100%',
        height: 60,
        justifyContent: 'center'
      },
      title: {
          fontSize: 24,
          color: COLORS.appWhite,
          textAlign: 'center',
      },
    });

    export default AppButton;

  import React from 'react';
import { View, Text, StyleSheet, TextInput } from 'react-native';
import COLORS from '../constants/constants';
import Card from '../components/card';
import { Colors } from 'react-native/Libraries/NewAppScreen';
import AppTextInput from '../components/appTextInput';
import AppButton from '../components/appButton';

class Login extends React.Component {

    onPress = () => {
      console.log("hello world!@#!@#@!#");
        // this.setState({
        //   count: this.state.count + 1
        // });
    };

    render() {
        return(
            <View style={styles.superContainer}>
              <View style={styles.formContainer}>
                  <AppTextInput placeHolderText="Email@Address.com"></AppTextInput>
                  <AppTextInput placeHolderText="Passwrod"></AppTextInput>
              </View>
              <View style={styles.buttonContainer}>
                  <AppButton
                  title="LOGIN"
                  style={styles.loginButton}
                  handleOnPress={this.onPress}
                  />
              </View>
            </View>

        );
    }
}