Best way to access Navigation prop with renderItem function

Hi, this project looks awesome but I had a quick question about the new renderItem function.

I would like to pass the navigation prop down to my individual SliderEntry items, but can’t seem to find the best way to do so. I tried doing something like this, but the renderItem function in this example doesn’t seem to take any other arguments. I am working off of the example in this repo.

[jordangrant]

@pcooney10 @lucienboillod Hey guys, here’s my solution for this:

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
          >

Hope this helps!

[pcooney10]

@koswarabilly Adapting the example above:

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

_renderItem ({item, index}) {
        return (
            <SliderEntry
              data={item}
              index={index}
            />
        );
    }

import { withNavigation } from 'react-navigation'

class SliderEntry extends Component {

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

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

        return (
          <TouchableOpacity
          activeOpacity={1}
          style={styles.slideInnerContainer}
          onPress={() => navigation.navigate('Feed', {id: id})}  //<------- 
          >

export default withNavigation(SliderEntry)