OnPress not getting called - react-native

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

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>
);
}
}

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

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>
...
);
}
}