How to use the react-navigation.withNavigation function in react-navigation

{/* 
              
             */}
      
    
  
);

export default withNavigation(PostHeader);

})
    );
  }
}
const mapStateToProps = state => ({
  currency: state.application.currency,
  isConnected: state.application.isConnected,
  isDarkTheme: state.application.isDarkTheme,
  isLoggedIn: state.application.isLoggedIn,
  pinCode: state.application.pin,
  activeBottomTab: state.ui.activeBottomTab,
  currentAccount: state.account.currentAccount,
  isHideImage: state.ui.hidePostsThumbnails,
});

export default connect(mapStateToProps)(withNavigation(ProfileContainer));
/* eslint-enable */

hintDescription={
                get(item, 'subTextKey') &&
                intl.formatMessage({ id: `wallet.${get(item, 'subTextKey')}` })
              }
              rightText={get(item, 'value')}
              hintIconName={get(item, 'subTextKey') && 'ios-information-circle-outline'}
              isBlackText
              isThin
            />
          ))}
      
    
  );
};

export default withNavigation(WalletHeaderView);
/* eslint-enable */

style={styles.button}
    >{trans('onboarding.login')}
  
);

Boarding.navigationOptions = {
  header: null,
};

Boarding.propTypes = {
  navigation: PropTypes.shape({
    navigate: PropTypes.func,
  }).isRequired,
};

export default withNavigation(Boarding);

style={styles.chevron}
          name="chevron-right"
          size={18}
          color="#fff"
        />
      
    
  );
};

export default connect(
  null,
  {
    set: Events.actions.set
  }
)(withNavigation(ImageGallery));

const styles = StyleSheet.create({
  imageContainer: {
    flex: 1,
    backgroundColor: "#e0e0e0"
  },
  image: {
    resizeMode: "cover",
    backgroundColor: "#e0e0e0"
  },
  action: {
    position: "absolute",
    bottom: 6,
    right: 6,
    backgroundColor: "rgba(0,0,0,0.5)",
    borderRadius: 6

...gStyle.textSpotify12,
    color: colors.white
  },
  artist: {
    ...gStyle.textSpotify12,
    color: colors.greyLight
  },
  device: {
    ...gStyle.textSpotify10,
    color: colors.brandPrimary,
    marginLeft: 4,
    textTransform: 'uppercase'
  }
});

export default withNavigation(BarMusicPlayer);

{
		occuspaceData: state.occuspace.data,
		selectedLocations: state.occuspace.selectedLocations,
		requestErrors: state.requestErrors
	}
)

function mapDispatchtoProps(dispatch) {
	return {
		retry: () => {
			dispatch({ type: 'UPDATE_OCCUSPACE_DATA' })
		}
	}
}

export default connect(mapStateToProps, mapDispatchtoProps)(withNavigation(OccuspaceCardContainer))

style={styles.buttonText}
          onPress={addWallet}
          disabled={this.state.creating}
        >
          Create wallet
        
        {this.state.creating && }
        {this.state.error != "" && (
          
        )}
      
    );
  }
}

export default withNavigation(withLnd(ComponentCreate));

const styles = StyleSheet.create({
  button: {
    margin: 5,
    color: "#0277BD",
    margin: 10,
    padding: 10,
    marginVertical: 5,
    borderRadius: 10,
    flex: 1,
    fontWeight: "300"
  },
  nameInput: {
    height: 50,
    backgroundColor: "#ECEFF1",
    borderRadius: 10,

>
            {t('onboarding.contacts.link-share')}
          
        
        
      
    
  
)

export default withNamespaces()(withNavigation(Contacts))

<header>
          
        
      )}
    
  );
};

export default withNavigation(DishDetail);
</header>