Navigation inside SliderEntry.js

hi I want to add navigation to my carousel but its not working i try to use the issue #83 but i dont know how implement this

this is my code:

ProjectInfo.js `import React from ‘react’; import { AppRegistry, Linking, Platform, Alert, StatusBar, Animated, ActivityIndicator, ScrollView, ListView, Dimensions, WebView, TouchableHighlight, Image, FlatList, Text, View, Button, StyleSheet, TextInput } from ‘react-native’; import { StackNavigator, NavigationActions, TabNavigator } from ‘react-navigation’; import Carousel, { Pagination } from ‘react-native-snap-carousel’; import SliderEntry from ‘…/components/SliderEntry’; import styles from ‘./style’;

const SLIDER_1_FIRST_ITEM = 1;

export class ProjectsInfo extends React.Component { static navigationOptions = ({ navigation }) => ({ title: navigation.state.params.json.address.street, headerTintColor: ‘white’, headerStyle: { backgroundColor: ‘black’, }, });

constructor (props) {
    super(props);
    this.state = {
        slider1ActiveSlide: SLIDER_1_FIRST_ITEM,
        slider1Ref: null
    };
}

_renderItem ({item, index}) {
    return (
        <SliderEntry
          data={item}
          even={(index + 1) % 2 === 0}
          navigation={this.props.navigation}
        />
    );
}

get example2 () {
  var imageSlider = this.props.navigation.state.params.json.gallery;
  var num = 1;
  var image1 = imageSlider.map((type)=> {
    var url1 = {illustration: type , key:num++};
    return url1;
  });
    return (
        <View>
            <Carousel
              data={image1}
              renderItem={this._renderItem}
              sliderWidth={equalWidth2}
              itemWidth={equalWidth5}
            />
        </View>
    );
}

render() { const { params } = this.props.navigation.state; const { navigate } = this.props.navigation; return ( <View style={{flex: 1}}> <ScrollView style={{flex: 1, paddingTop: 10}} indicatorStyle={‘white’} scrollEventThrottle={200} directionalLockEnabled={true} > <Text style={[styles.textcenter,{fontSize:18, marginBottom: 10}]}>Imágenes</Text> { this.example2 } </ScrollView> </View> ) } }

module.exports = ProjectsInfo; ` SliderEntry.js

`import React, { Component } from ‘react’; import PropTypes from ‘prop-types’; import { View, Alert, BackHandler, Text, Image, Modal, TouchableHighlight, TouchableOpacity, Dimensions } from ‘react-native’; import { ParallaxImage } from ‘react-native-snap-carousel’; import styles from ‘…/styles/SliderEntry.style’; import { StackNavigator, NavigationActions, TabNavigator } from ‘react-navigation’; const { width, height } = Dimensions.get(‘window’);

const equalWidth = (width / 1.05 ) const equalHeight = (height / 2.5)

const equalWidth1 = (width / 1.8) const equalHeight1 = (height / 2.5)

const equalWidth2 = (width) const equalHeight2 = (height)

export default class SliderEntry extends Component {

static propTypes = {
    data: PropTypes.object.isRequired,
    even: PropTypes.bool,
    parallax: PropTypes.bool,
    parallaxProps: PropTypes.object,
    navigation: PropTypes.string
};

state = {
  modalVisible: false,
  url1: '',
}

setModalVisible(visible, url) {
  this.setState({modalVisible: visible,url1: url});
  console.log('recibe url',url);
}

get image () {
    const { data: { illustration }, parallax, parallaxProps, even } = this.props;

    return parallax ? (
        <ParallaxImage
          source={{ uri: illustration }}
          containerStyle={[styles.imageContainer, even ? styles.imageContainerEven : {}]}
          style={[styles.image, { position: 'relative' }]}
          parallaxFactor={0.15}
          showSpinner={true}
          spinnerColor={even ? 'rgba(255, 255, 255, 0.4)' : 'rgba(0, 0, 0, 0.25)'}
          {...parallaxProps}
        />
    ) : (
        <Image
          source={{ uri: illustration }}
          style={styles.image}
        />
    );
}

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



    return (
      <View>

        <TouchableOpacity
          activeOpacity={1}
          style={styles.slideInnerContainer}
          onPress={() => { onPress('Images1'); }}
          >
            <View style={[styles.imageContainer, even ? styles.imageContainerEven : {}]}>
                { this.image }
                <View style={[styles.radiusMask, even ? styles.radiusMaskEven : {}]} />
            </View>
        </TouchableOpacity>
        </View>
    );
}

} `

[jordangrant]

@AldoAltamira After a few hours of research/trial & error I found the solution (for myself):

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!

[NibyP]

@jordangrant Thanks. Your code saved my day.☺