React-native-snap-carousel: Navigation inside SliderEntry.js

Created on 11 Nov 2017 · 6Comments · Source: meliorence/react-native-snap-carousel

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 (
style={{flex: 1, paddingTop: 10}}
indicatorStyle={'white'}
scrollEventThrottle={200}
directionalLockEnabled={true}
>

{ this.example2 }

)
}
}

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>
    );
}

}
`

contribution?

Source

AldoAltamira

Most helpful comment

@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!

jordangrant on 13 Nov 2017

👍3 🎉2 ❤1

All 6 comments

⚠️ You did not follow the contributing guidelines!

As stated in these:

:warning: You need to fill out the issue template. This step is mandatory! Not doing so will result in your issue getting closed. Don't take this personally if this happens, and feel free to open a new issue once you've gathered all the information required by the template.

bd-arc on 11 Nov 2017