React Native can't click TouchableOpacity or TextInput - react-native

Question

In my React Native project I have a TextInput and a TouchableOpacity component at the top of the screen that for some reason cannot be clicked. It worked at some point while I was working on the project, but for some reason it no longer recognizes clicks or key events. The component is as follows:
import React, { Component } from "react";
import {
AsyncStorage,
Dimensions,
FlatList,
Platform,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View
} from "react-native";
import styles from "./style/styles";
import NotificationBar from "./components/NotificationBar";
export default class App extends Component {
constructor(props) {
super(props);
this.data = [];
this._initData();
}
_initData() {
for (let i = 0; i < 500; i++) {
this.data.push({
// key: i,
id: "ABC" + i,
name: "Random Name",
value: 50 * i
});
}
}
_renderItem = ({ item }) => {
return (
<View style={styles.itemContainer}>
<Text style={styles.textItem}>{item.id}</Text>
</View>
);
};
render() {
return (
<View>
<NotificationBar />
<View style={{ flex: 1, flexDirection: "column" }}>
<View style={{ flex: 1, flexDirection: "row" }}>
<View
style={{
width: (Dimensions.get("window").width / 3) * 2,
height: 50,
backgroundColor: "white"
}}
>
<TextInput
placeholder="New List Name"
style={styles.textInputStyle}
/>
</View>
<View
style={{
width: Dimensions.get("window").width / 3,
height: 50,
backgroundColor: "#4ce31e"
}}
>
<TouchableOpacity
style={styles.button}
onPress={this.testSetStorage}
>
<Text> Create List </Text>
</TouchableOpacity>
</View>
</View>
</View>
<View style={{ paddingTop: 50 }}>
<FlatList
data={this.data}
renderItem={this._renderItem}
style={{ alignSelf: "stretch" }}
keyExtractor={(item, index) => item.id}
/>
</View>
</View>
);
}
}
The style sheet is:
import { StyleSheet } from 'react-native';
export default StyleSheet.create({
statusBarBackground: {
height: 20,
backgroundColor: 'white',
},
textInputStyle: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
textAlign: 'center',
borderWidth: 1,
borderRadius: 6,
},
button: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
width: 100,
paddingLeft: 20,
},
container: {
flex: 1,
justifyContent: 'center',
paddingHorizontal: 10
},
});
My best guess is that it the issue would have something to do with the parent View components that the TouchableOpacity and TextInput components are in, but I'm not sure. How can I get those components to recognize clicks and respond to them? I'm running on an iPhone 7 emulator.

Answer 1

You have not defined testSetStorage function in your component.
You need to testSetStorage = () => {console.log("Tapped")} outside render function.