Uncaught Error: undefined is not an object (evaluating '_this.setState') - react-native

Question

After a lot of research, I'm getting this error every time I enter text into the message box.
I've removed a lot of code - so the issue is with the TextInput and var state{ ... }
I have no idea what to do
I plan on submitting the data to an SQLite database in the future, but for now, I'm just trying to capture the text input on the button press - I found a script online, but it doesn't work.
const JournalNewEntryScreen = ({navigation}) => {
const messageImage = require('./images/Imatter-icons-13.png');
const homeImage = require('./images/Imatter-icons-14.png');
const settingsImage = require('./images/Imatter-icons-11.png');
const journalHomeImage = require('./images/Imatter-icons-09.png');
const cancelAlert = () =>
Alert.alert(
"Are You Sure?",
"Any content will be deleted and cannot be recovered",
[
{
text: "Cancel",
style: "cancel"
},
{ text: "Yes, I'm Sure",
onPress: () => navigation.navigate("JournalHome") }
]
);
var state = {
message: '',
}
const getValues = () => {
console.log(this.state.message);
}
return (
<>
<StatusBar barStyle='dark-content' />
<SafeAreaView style={homePage.flexContainer}>
<View style={{ flex: 1 }}>
<ScrollView>
<View style={JournalNewEntryPage.container}>
<Image
source={require("./assets/images/cropped-img_1619-1-e1610564001477.png")}
resizeMode="contain"
style={JournalNewEntryPage.image}>
</Image>
<Text style={JournalNewEntryPage.myJournal}>New Journal Entry</Text>
<Text style={JournalNewEntryPage.descriptionText}>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</Text>
<Text style={JournalNewEntryPage.messageText}>
Type a message
</Text>
<TextInput
multiline
editable
numberOfLines={4}
style={JournalNewEntryPage.textBox}
onChangeText={(text) => this.setState({ message: text })}
/>
<Text style={JournalNewEntryPage.messageText}>
Attach a file:
</Text>
<Text style={JournalNewEntryPage.upload}>
+ Add a photo, audio or video file
</Text>
<TouchableOpacity onPress={() => this.getValues()}>
<Text style = {JournalNewEntryPage.journalButton}>
Save Entry
</Text>
</TouchableOpacity>
<TouchableOpacity onPress={cancelAlert}>
<Text style = {JournalNewEntryPage.journalButton}>
Cancel
</Text>
</TouchableOpacity>
<View style = {custom.spacer10}></View>
</View>
</ScrollView>
</View>
{/* <Button title="Reload" onPress={() => navigation.navigate('Home')}/> */}
<View style={homePage.tabBarContainer}>
<View style={homePage.column}>
<TouchableOpacity onPress={hide ? dataButtonHandler : onPress1}>
<Text style={hide ? homePage.button : homePage.codeButton}>{hide ? "Data" : "XXXXXX"}</Text>
</TouchableOpacity>
</View>
<View style={homePage.column}>
<TouchableOpacity onPress={() => navigation.navigate('Home')}>
<Image style={homePage.navImage} source={homeImage}/>
</TouchableOpacity>
</View>
<View style={homePage.column}>
<TouchableOpacity onPress={() => navigation.navigate('JournalHome')}>
<Image style={homePage.navImage} source={journalHomeImage}/>
</TouchableOpacity>
</View>
<View style={homePage.column}>
<TouchableOpacity onPress={messagesButtonHandler}>
<Image style={homePage.navImage} source={messageImage}/>
</TouchableOpacity>
</View>
<View style={homePage.column}>
<TouchableOpacity onPress={() => navigation.navigate('Settings')}>
<Image style={homePage.navImage} source={settingsImage}/>
</TouchableOpacity>
</View>
<View style={homePage.column}>
<TouchableOpacity onPress={hide ? logButtonHandler : onPress3}>
<Text style={hide ? homePage.button : homePage.codeButton}>{hide ? "Logs" : "XXXXXX"}</Text>
</TouchableOpacity>
</View>
</View>
<View style={homePage.tabBarContainerText}>
<View style={homePage.column}>
</View>
<View style={homePage.column}>
<TouchableOpacity onPress={() => navigation.navigate('Home')}>
<Text style={homePage.button}>Home</Text>
</TouchableOpacity>
</View>
<View style={homePage.column}>
<TouchableOpacity onPress={() => navigation.navigate('JournalHome')}>
<Text style={homePage.button}>Journal</Text>
</TouchableOpacity>
</View>
<View style={homePage.column}>
<TouchableOpacity onPress={messagesButtonHandler}>
<Text style={homePage.button}>Messages</Text>
</TouchableOpacity>
</View>
<View style={homePage.column}>
<TouchableOpacity onPress={() => navigation.navigate('Settings')}>
<Text style={homePage.button}>Settings</Text>
</TouchableOpacity>
</View>
<View style={homePage.column}>
</View>
</View>
</SafeAreaView>
</>
);
};
Image of error

Answer 1

You're using functional component not class-based, so this is not the way to go with declaring states and setState, this only works with class-based component.
So you need to check this doc out for handling states with React Hooks https://reactnative.dev/docs/state