React Navigator is not working and not moving to next Screen

Question

I am trying to perform navigation between two screens but it is not working. here is my code.

<FlatList
            style={{ paddingBottom: 5 }}
            data={this.state.fetchFreelancer}
            keyExtractor={(y, z) => z.toString()}
            renderItem={({ item }) => (
                <TouchableOpacity   
      // onPress={() => navigate('Details', {id: item.id})}
             onPress={() => this.props.navigation.navigate('DetailFreelancerScreen', {profile_id: item.profile_id})}
            //onPress={() => alert(item.profile_id)}
                >
                <FreelancerCategory
                    imageUrifreelancer = {{uri: `${item.profile_img}`}}
                    imageUrifeatured = {{uri: `${item.badge.badget_url}`}}
                    featuredColor ={`${entities.decode(item.badge.badget_color)}`}
                    flagimageUri= {{uri: `${item.location.flag}`}}
                    freelancername={`${entities.decode(item.name)}`}
                    title={`${entities.decode(item._tag_line)}`}
                    rate={`${entities.decode(item._perhour_rate)}`}
                    country={`${entities.decode(item.location._country)}`}
                /> 
            </TouchableOpacity>
            )}
          />

Answer 1

You should pass the navigation prop in to screen.

ref