React Navigation not working. Getting error: "undefined is not an object (evaluating 'this.props.navigation.navigate')".

Card.js

import React from 'react'
import { Image, ListView, ScrollView, Text, TouchableOpacity, View } from 'react-native'
import styles from './Styles/CardStyle'
import { connect } from 'react-redux'
import Icon from 'react-native-vector-icons/FontAwesome'
import ButtonCTA from '../Components/ButtonCTA'
import CheckInStatus from '../Components/CheckInStatus'

class Card extends React.Component {

  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <ButtonCTA text='View Details' onPress={() => navigate('DetailsScreen')} />
      </View>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    dataSource: state.dataSource
  }
}

export default connect(mapStateToProps)(Card)