title: TypeError: Cannot read property 'navigate' of undefined in the main App.js file
body: <p>I am getting this error TypeError: Cannot read property 'navigate' of undefined. All code is defined in the main App.js file. Any solutions for this.</p>
  <pre><code>       &lt;Stack.Screen
                      name=&quot;Home&quot;
                      component={BottomNav}
                      options={{
                          headerShown: true,
                          headerTitle: 'Home',
                          headerTitleStyle: { color: 'blue', fontWeight: 'bold' },
                          headerRight: () =&gt; (
                              &lt;TouchableOpacity
                                  activeOpacity={0.5}
                                  onPress={() =&gt; this.props.navigation.navigate('PropertySearchScreen')}&gt;
                                  &lt;Image
                                      source={require('./../assets/icons/search.png')}
                                      style={{ width: 25, height: 25, marginRight: 20 }}
                                  /&gt;
                              &lt;/TouchableOpacity&gt;
                          ),
                      }}
                  /&gt;
  </code></pre>