title: how to solve Property 'navigation' does not exist on type 'Readonly<{}> &
body: <p>I have the following two pieces of code:</p>
  
  <p><strong>CustomHeader.tsx</strong></p>
  
  <pre><code>import { View, StyleSheet, Button } from 'react-native';
  import { NavigationScreenProps } from 'react-navigation';
  import Icon from 'react-native-vector-icons/Ionicons';
  
  
  export  const CustomHeader = ({ navigation }: NavigationScreenProps) =&gt; (
      &lt;View style={[styles.container]}&gt;
        &lt;Icon
          name="md-menu"
          size={32}
          color="black"
          style={{ marginLeft: 10 }}
          onPress={() =&gt; navigation.openDrawer()}
        /&gt;
      &lt;/View&gt;
    );
  
    const styles = StyleSheet.create({
      container: {
        borderBottomWidth: 2,
        height: 70,
        paddingTop: 20,
      },
    });
  </code></pre>
  
  <p><strong>DetailScreen.tsx</strong></p>
  
  <pre><code>import React from 'react';
  import { Text, View, Button, Alert } from 'react-native';
  import { NavigationScreenProps } from "react-navigation";
  import { CustomHeader } from '../components/Header';
  
  export class ChangeAccountDetailScreen extends React.Component {
    render() {
      return (
        &lt;View style={{ flex: 1 }}&gt;
          &lt;CustomHeader navigation={this.props.navigation} /&gt;
          &lt;Text style={{ fontSize: 20 }}&gt;Profile Screen&lt;/Text&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  
  <p>In detailscreen i get the following error: </p>
  
  <blockquote>
    <p>Property 'navigation' does not exist on type 'Readonly&lt;{}> &amp; Readonly&lt;{ children?: ReactNode; }>'.</p>
  </blockquote>
  
  <p>I searched for the issue and i understand it has something the fact that i am not declaring a type in my CustomHeader. However i do not know how to solve this. I am kinda new to typescript. Could someone explain to me how to fix this type issue?</p>