title: How to get and pass the details of the active slide in react native using react-native-snap-carousel
body: <p>I need to pass the details of the currently active slide to another js file. how can I do this (there are 8 slides)?</p>
  
  <p>The details that I need to pass is the slide's name and Index, </p>
  
  <p><strong>Here is my carousel js file :</strong> </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import { Dimensions, View, Image } from 'react-native';
  import Carousel from 'react-native-snap-carousel';
  
  const { height, width } = Dimensions.get('window');
  
  class TeamScroll extends Component {
  
    render() {
      return (
        &lt;View &gt;
        &lt;View style={{ transform: [{ rotate: '-14deg' }] }}&gt;
        &lt;Carousel
        ref={(c) =&gt; { this.props.carouselRef = c; }}
        inactiveSlideOpacity={0.6}
        inactiveSlideScale={0.65}
        firstItem={1}
        sliderWidth={width}
        itemWidth={width / 3} &gt;
        &lt;Image
        source={require('./Images/logo-chepauk.png')}
        style={styles.logoStyle}  /&gt;
        &lt;Image
        source={require('./Images/logo-dindigul.png')}
        style={styles.logoStyle}  /&gt;
        &lt;Image
        source={require('./Images/logo-kanchi.png')}
        style={styles.logoStyle}  /&gt;
        &lt;Image
        source={require('./Images/logo-karaikudi.png')}
        style={styles.logoStyle}  /&gt;
        &lt;Image
        source={require('./Images/logo-kovai.png')}
        style={styles.logoStyle}  /&gt;
        &lt;Image
        source={require('./Images/logomadurai.png')}
        style={styles.logoStyle}  /&gt;
        &lt;Image
        source={require('./Images/logothiruvallur.png')}
        style={styles.logoStyle}  /&gt;
        &lt;Image
        source={require('./Images/logotuti.png')}
        style={styles.logoStyle}  /&gt;
        &lt;/Carousel&gt;
        &lt;/View&gt;
        &lt;/View&gt;
  );
  }
  }
  const styles = {
    logoStyle: {
      transform: [{ rotate: '14deg' }],
      width: width / 3,
      height: width / 3
      }
  };
  export default TeamScroll;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Here is one of the files where I need to use these details</strong> </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import { Image, Text, View, TouchableWithoutFeedback, Animated, Dimensions } from 'react-native';
  import { Actions } from 'react-native-router-flux';
  import TeamScroll from './TeamScroll';
  
  const a = require('./Images/over3_selected.png');
  const b = require('./Images/over3.png');
  const c = require('./Images/over5_selected.png');
  const d = require('./Images/over5.png');
  const e = require('./Images/over10_selected.png');
  const f = require('./Images/over10.png');
  
  const Sound = require('react-native-sound');
  
  const btnSound = new Sound('btn_sound.mp3', Sound.MAIN_BUNDLE);
  
  const w = Dimensions.get('window').width;
  const h = Dimensions.get('window').height;
  
  
   class ChallengeScreen extends Component {
     state = {
       threePressed: false,
       fivePressed: false,
       tenPressed: false,
     }
     componentWillMount() {
    this.slide1 = new Animated.Value(0);
    this.slide2 = new Animated.Value(0);
    this.slide3 = new Animated.Value(0);
  
    this.ball1();
    this.ball2();
    this.ball3();
    }
   ball1() {
   Animated.timing(
   this.slide1, {
   delay: 100,
   toValue: -(w / 2.57),
   duration: 700,
   }
   ).start();
   }
  
   ball2() {
  Animated.timing(
   this.slide2, {
   delay: 200,
   toValue: -(w / 2.25),
  duration: 900,
  }
   ).start();
  }
   ball3() {
   Animated.timing(
     this.slide3, {
   delay: 300,
   toValue: -(w / 2),
   duration: 1100,
   }
   ).start();
   }
  
  
    render() {
    return (
  &lt;Image
      source={require('./Images/bg_inner.png')} style={styles.backgroundStyle}&gt;
  
      &lt;Text style={styles.chooseteamtextStyle}&gt;
      CHOOSE YOUR TEAM
      &lt;/Text&gt;
      &lt;Image source={require('./Images/team-logo-band.png')} style={styles.band1Style}&gt;
      &lt;TeamScroll carouselRef /&gt;
      &lt;/Image&gt;
  
      &lt;Text style={styles.opponentStyle}&gt;
      YOUR OPPONENT
      &lt;/Text&gt;
      &lt;Image source={require('./Images/team-logo-band.png')} style={styles.band2Style}&gt;
      &lt;TeamScroll carouselRef /&gt;
      &lt;/Image&gt;
  
      &lt;Text style={styles.overstextStyle}&gt;
      OVERS
      &lt;/Text&gt;
      &lt;View style={styles.viewStyle}&gt;
  
       &lt;TouchableWithoutFeedback
       onPress={() =&gt; {
         btnSound.play();
         playFunc(3, this.props.challenge); }
       }
       onPressIn={() =&gt; {
         this.setState({ threePressed: true });
       }}
       onPressOut={() =&gt; {
         this.setState({ threePressed: false });
       }}
       &gt;
      &lt;Animated.Image source={this.state.threePressed ? a : b}
      style={[styles.over3Style, { transform: [{ translateY: this.slide1 }] }]} /&gt;
      &lt;/ TouchableWithoutFeedback&gt;
  
      &lt;TouchableWithoutFeedback
      onPress={() =&gt; {
        btnSound.play();
        playFunc(5, this.props.challenge); }
      }
      onPressIn={() =&gt; {
        this.setState({ fivePressed: true });
      }}
      onPressOut={() =&gt; {
        this.setState({ fivePressed: false });
      }}&gt;
      &lt;Animated.Image source={this.state.fivePressed ? c : d}
      style={[styles.over5Style, { transform: [{ translateY: this.slide2 }] }]} /&gt;
  &lt;/ TouchableWithoutFeedback&gt;
  
      &lt;TouchableWithoutFeedback
      onPress={() =&gt; {
        btnSound.play();
        playFunc(10, this.props.challenge); }
      }
      onPressIn={() =&gt; {
        this.setState({ tenPressed: true });
      }}
      onPressOut={() =&gt; {
        this.setState({ tenPressed: false });
      }}&gt;
      &lt;Animated.Image source={this.state.tenPressed ? e : f}
      style={[styles.over10Style, { transform: [{ translateY: this.slide3 }] }]} /&gt;
      &lt;/ TouchableWithoutFeedback&gt;
  
      &lt;/View&gt;
  &lt;/ Image&gt;
  );
  }
  }
  function playFunc(num, param) {
  if (num === 3 &amp;&amp; param === 'Computer') {
    Actions.screen4({ balls: 18 });
    
  }
  else if (num === 5 &amp;&amp; param === 'Computer') {
    Actions.screen4({ balls: 30 });
  }
  else if (num === 10 &amp;&amp; param === 'Computer') {
    Actions.screen4({ balls: 60 });
  }
  else if (num === 3 &amp;&amp; param === 'Team') {
    Actions.screen3({ balls: 18 });
  }
  else if (num === 5 &amp;&amp; param === 'Team') {
    Actions.screen3({ balls: 30 });
    }
  else if (num === 10 &amp;&amp; param === 'Team') {
    Actions.screen3({ balls: 60 });
  }
  }
  const styles = {
    viewStyle: {
  
      flexDirection: 'row',
      justifyContent: 'flex-start'
    },
  backgroundStyle: {
     flex: 1,
     width: w,
     height: h,
     flexWrap: 'wrap',
  
   },
   chooseteamtextStyle: {
   textAlign: 'center',
     marginTop: h / 6.57,
     fontSize: 22,
     color: 'white',
     fontFamily: 'Switzerland-Cond-Black-Italic',
     transform: [{ rotate: '-14deg' }]
   },
   band1Style: {
  resizeMode: 'stretch',
  width: (w / 0.947),
  height: (h / 3.93),
   },
   opponentStyle: {
     textAlign: 'center',
     marginTop: -(h / 59.2),
     fontSize: 22,
     color: 'white',
     fontFamily: 'Switzerland-Cond-Black-Italic',
     transform: [{ rotate: '-15deg' }]
   },
   band2Style: {
  resizeMode: 'stretch',
  width: (w / 0.947),
  height: (h / 4),
   },
   overstextStyle: {
     textAlign: 'center',
     bottom: (h / 59.2),
     fontSize: 22,
     color: 'white',
     fontFamily: 'Switzerland-Cond-Black-Italic',
     transform: [{ rotate: '-15deg' }]
   },
   over3Style: {
     flexDirection: 'row',
  alignItems: 'flex-start',
  width: (w / 4.5),
  height: (h / 7.4),
  top: (h / 3.482),
  left: (w / 5.142),
   },
   over5Style: {
     flexDirection: 'row',
  alignItems: 'center',
  width: (w / 4.5),
  height: (h / 7.4),
  bottom: -(h / 3.48),
  left: (h / 8.45)
   },
   over10Style: {
     flexDirection: 'row',
  alignItems: 'flex-end',
  width: (w / 4.5),
  height: (h / 7.4),
   top: (h / 3.48),
  right: -(w / 5.42)
   }
   };
  export default ChallengeScreen;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have tried using state and props for doing it, and also using  getters like currentIndex using carousel's reference but couldn't get the details </p>