I am trying to create a profile button using TouchableOpacity. I have setup the mapStateToProps and the mapDispatchToProps properly. However when I set the onPress to this.props.openMenu, it states that undefined is not an object (evaluating 'this.props')

Any idea on what I can do to fix this problem? I am learning React Native so there may be some things that I am missing.

Here is my current code:

import React, { Component } from "react";
import {
  ScrollView,
  SafeAreaView,
  TouchableOpacity,
  Animated,
  Easing,
  StatusBar,
  Platform
} from "react-native";
import styled from "styled-components";
import Card from "../components/Card";
import { Ionicons } from "@expo/vector-icons";
import { NotificationIcon } from "../components/Icons";
import Logo from "../components/Logo";
import Course from "../components/Course";
import Menu from "../components/Menu";
import { connect } from "react-redux";

function mapStateToProps(state) {
  return { action:state.action }
}

function mapDispatchToProps(dispatch) {
  return {
    openMenu: () => dispatch({
      type: "OPEN_MENU"
    })
  }
}

function HomeScreen() {
    return (
        <Container>
            <Menu />
            <SafeAreaView>
                <ScrollView>
          <TitleBar>
          <TouchableOpacity
                  onPress={this.props.openMenu}
                  style={{ position: "absolute", top: 0, left: 20 }}
                >
                        <Avatar source={require("../assets/avatar-default.jpg")} />
            </TouchableOpacity>
                        <Title>Welcome Back,</Title>
                        <Name>Censored</Name>
                        <NotificationIcon
                            style={{ position: "absolute", right: 20, top: 5 }}
                        />
                    </TitleBar>
                    <ScrollView
                        style={{ flexDirection: "row", padding: 20, paddingLeft: 12 }}
                        horizontal={true}
                        showsHorizontalScrollIndicator={false}
                    >
                        {logos.map((logo, index) => (
                            <Logo key={index} image={logo.image} text={logo.text} />
                        ))}
                    </ScrollView>
                    <SubTitle>Pinned Posts</SubTitle>
                    <ScrollView
                        horizontal={true}
                        style={{ paddingBottom: 30 }}
                        showsHorizontalScrollIndicator={false}
                    >
                        {cards.map((card, index) => (
                            <Card
                                key={index}
                                title={card.title}
                                image={card.image}
                                caption={card.caption}
                                logo={card.logo}
                                subtitle={card.subtitle}
                            />
                        ))}
                    </ScrollView>
                    <SubTitle>Other Articles</SubTitle>
                    {courses.map((course, index) => (
                        <Course
                            key={index}
                            image={course.image}
                            title={course.title}
                            subtitle={course.subtitle}
                            logo={course.logo}
                            author={course.author}
                            avatar={course.avatar}
                            caption={course.caption}
                        />
                    ))}
                </ScrollView>
            </SafeAreaView>
        </Container>
    );
}

export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen)

Thanks in advance!

CodePudding user response：

You are not using a class component here, but a functional component. There is no this in functional components. You can access the props directly as follows.

function HomeScreen(props) {
    return (
        <Container>
            <Menu />
            <SafeAreaView>
                <ScrollView>
          <TitleBar>
          <TouchableOpacity
                  onPress={props.openMenu}
                  style={{ position: "absolute", top: 0, left: 20 }}
                >

...