this.props.navigate inside carousel is not working

Hello, I want to add navigation to my carousel but its not working I keep getting this error cannot read property navigation of undefined I used the example provided in this repo, and I added my StackNavigator like this inside index.js

import { StackNavigator } from 'react-navigation';
import Feed from './Feed';
class Feeds extends Component...

export default StackNavigator({
  Feeds: {
    screen: Feeds,
    navigationOptions: {
       header: null
    },
  },
  Result: {
    screen: Feed
  }
})

This is my Feed screen that i want to navigate to it when the user choose an item inside the carousel

import React, { Component } from 'react';
import {
  ToastAndroid,View,Text,
} from 'react-native';
export default class Feed extends Component {
  constructor(props) {
    super(props);
    this.state = {
      feed: props.navigation.state.params.feed,
      report: null
    };
  }
  static navigationOptions = ({ navigation }) => {
    return {
      title: `Feed / ${navigation.state.params.feed}`,
    }
  };
  render() {
    <View>
        <Text>{this.navigation.state.params.feed}</Text>
    </View>
  }
}

and then inside SliderEntry.js I’ve just add a button to navigate into the Feed screen <Button onPress={() => this.props.navigation.navigate("Result", {feed: title})} /> this.props contain only

static propTypes = {
        title: PropTypes.string.isRequired,
        subtitle: PropTypes.string,
        illustration: PropTypes.string,
        even: PropTypes.bool,
    };

no navigation inside, am I doing it wrong ?

[jordangrant]

@efstathiosntonas @Pradnyana28 Here’s my solution:

In your Carousel:

<Carousel
    data={image1}
    renderItem={this._renderItem.bind(this)}   //<------
    sliderWidth={equalWidth2}
    itemWidth={equalWidth5}
  />

Adding the bind allows the _renderItem function to understand what “this” is in this.props.navigation.

In the renderItem function:

_renderItem ({item, index}) {
        return (
            <SliderEntry
              data={item}
              navigation={this.props.navigation}   //<-------
            />
        );
    }

And inside SliderEntry.js:

export default class SliderEntry extends Component {

    static propTypes = {
        data: PropTypes.object.isRequired,
    };

    render () {
        const { data: { title, subtitle, illustration}, navigation } = this.props;    //<------

        return (
          <TouchableOpacity
          activeOpacity={1}
          style={styles.slideInnerContainer}
          onPress={() => navigation.navigate('Feed')}  //<------- now you can use navigation
          >

[trandat9h]

How to do this with fuctional components.

do you have any solutions?