React-native-snap-carousel: Best way to access Navigation prop with renderItem function

[pcooney10]

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.

[bd-arc]

Hi @pcooney10,

Well, you need to create a custom function that "extends" renderItem(). If you take a look at the source code of the plugin, you'll see that it's exactly what I've done.

My answer to this SO question might also help you figuring it out.

Hope that helps!

[lucienboillod]

@pcooney10 I'm facing the same problem, did you manage to fix it using @bd-arc method ?

[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]

Hey @lucienboillod, I didn't see your message for some reason but I ended up using the withNavigation HOC from react-navigation: https://github.com/react-community/react-navigation/blob/master/docs/api/withNavigation.md. I wrapped the equivalency of SliderEntry above.

@jordangrant's solution seem like it might be better though, thanks @jordangrant !

[koswarabilly]

@pcooney10 can you provide example, because @jordangrant 's code work for me

[pcooney10]

@koswarabilly Adapting the example above:

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

```js
_renderItem ({item, index}) {
return (
data={item}
index={index}
/>
);
}

```js
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)

[fachrinfl]

hey can help me, i want to send props navigation from wix react-native-navigator

renderSlinder ({item, index}, parallaxProps) {
        return (
            <SliderSubMenu
                data={item}
                even={(index + 1) % 2 === 0}
                parallax={true}
                parallaxProps={parallaxProps}
                navigate={this.props.navigator}
            />
        )
    }

render () {
        const { data: { title, icon, screen}, even, navigate} = this.props;

        return (
            <TouchableOpacity
                activeOpacity={0.8}
                onPress={() => navigate.push({
                    screen: {data.screen}
                })}
            >
                <View
                    style={styles.slideInnerContainer}
                >
                    <View style={[styles.imageContainer, even ? styles.imageContainerEven : {}]}>
                        { this.image }
                        <View
                            style={styleIn.mainContent}>
                            <Image
                                source={icon}
                                style={styleIn.image}
                            />
                            <Text style={styleIn.textTitle}>{title}</Text>
                        </View>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }



md5-94a4fbe2cc054b83a4f7c7fbfb12a369



TypeError: undefined is not an object (evaluating 'this.props.navigator')

[koswarabilly]

@fachrinfl const { data: { title, icon, screen}, even, navigate} = this.props; . it must have been navigator as the props not the navigate isn't it?

[fachrinfl]

@koswarabilly when i tried using this.props.navigator directly , the result is still 'TypeError: undefined is not an object (evaluating 'this.props.navigator')'

[koswarabilly]

render () {
        const { data: { title, icon, screen}, even, navigate} = this.props;

        ...

in that code the navigate should change to navigator isn't it? @fachrinfl

[fachrinfl]

render () {
        const { data: { title, icon, screen}, even, navigator} = this.props;

        return (
            <TouchableOpacity
                activeOpacity={0.8}
                onPress={() => navigator.push({
                    title: 'Detail Menu',
                    screen: 'Ksei.DetailMenu',
                    animated: true,
                    animationType: 'fade'
                })}
            >
                <View
                    style={styles.slideInnerContainer}
                >
                    <View style={[styles.imageContainer, even ? styles.imageContainerEven : {}]}>
                        { this.image }
                        <View
                            style={styleIn.mainContent}>
                            <Image
                                source={icon}
                                style={styleIn.image}
                            />
                            <Text style={styleIn.textTitle}>{title}</Text>
                        </View>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }

@koswarabilly i tried changing with navigator but eror is

undefined is not an object (evaluating 'navigator.push')

[koswarabilly]

@fachrinfl what library are you using? if you are using react-navigation thennavigator.push is not a correct syntax. you should change navigator.pushto navigator.navigate

[fachrinfl]

@koswarabilly i used library 'https://wix.github.io/react-native-navigation/', this library using 'this.props.navigator.push' to move screen

[pedrocardoz0]

Idk, for me appears 'navigation.navigate' is not an object