added Pagination to web

Author: Fulanko

index.android.js

@@ -1,7 +1,9 @@
 'use strict';
 
-import Carousel from 'react-native-snap-carousel';
+import Carousel, { Pagination, getInputRangeFromIndexes } from 'react-native-snap-carousel';
 
 module.exports = {
-  Carousel
+  Carousel,
+  Pagination,
+  getInputRangeFromIndexes
 };

index.ios.js

@@ -1,7 +1,9 @@
 'use strict';
 
-import Carousel from 'react-native-snap-carousel';
+import Carousel, { Pagination, getInputRangeFromIndexes } from 'react-native-snap-carousel';
 
 module.exports = {
-  Carousel
+  Carousel,
+  Pagination,
+  getInputRangeFromIndexes
 };

samples/CarouselTest/src/App.jsx

@@ -2,10 +2,10 @@
  * This file demonstrates basic usage of the Carousel component
  */
 
-let React, RX;
-React = RX = require('reactxp');
+let React = require('react');
+let RX = require('reactxp');
 
-let { Carousel } = require('reactxp-carousel');
+let { Carousel, Pagination } = require('reactxp-carousel');
 
 const _styles = {
   slide: RX.Styles.createViewStyle({
@@ -49,6 +49,11 @@ const entries = [
 
 class App extends RX.Component {
 
+  state = {
+    index: 0
+  }
+  carouselRef = React.createRef();
+
   _renderItem ({item, index}) {
     return (
       <RX.View style={_styles.slide}>
@@ -71,12 +76,13 @@ class App extends RX.Component {
     const sliderWidth = width;
     const itemWidth = slideWidth + itemHorizontalMargin * 2;
 
-    const type = 'tinder';
+    const type = 'default';
 
     return (
       <RX.View style={[_styles.exampleContainer, _styles.exampleContainerDark]}>
         <Carousel
           data={entries}
+          ref={this.carouselRef}
           renderItem={this._renderItem}
           sliderWidth={sliderWidth}
           itemWidth={itemWidth}
@@ -86,8 +92,17 @@ class App extends RX.Component {
           inactiveSlideOpacity={0.1}
           inactiveSlideScale={0.5}
           vertical={false}
+          onSnapToItem={(index) => this.setState({ activeSlide: index })}
           autoplay={false}
         />
+        <Pagination
+          dotsLength={entries.length}
+          activeDotIndex={this.state.activeSlide}
+          inactiveDotOpacity={0.4}
+          inactiveDotScale={0.6}
+          tappableDots={true}
+          carouselRef={this.carouselRef.current}
+        />
       </RX.View>
     );
   }

src/carousel/Carousel.js

@@ -1175,7 +1175,6 @@ export class Carousel extends Component {
         const animate = this._shouldAnimateSlides();
         const Component = animate ? Animated.View : View;
         const animatedStyle = animate ? this._getSlideInterpolatedStyle(index, animatedValue) : {};
-        console.log(animatedStyle)
 
         const parallaxProps = hasParallaxImages ? {
             scrollPosition: this._scrollPos,

src/pagination/Pagination.js

@@ -1,12 +1,12 @@
-import React, { PureComponent } from 'react';
+let React = require('react');
 import { International, View } from 'reactxp';
 var PropTypes = require('prop-types');
 import PaginationDot from './PaginationDot';
 import styles from './Pagination.style';
 
 const IS_RTL = International.isRTL();
 
-export class Pagination extends PureComponent {
+export class Pagination extends React.PureComponent {
 
     static propTypes = {
         activeDotIndex: PropTypes.number.isRequired,

src/pagination/PaginationDot.js

@@ -1,9 +1,9 @@
-import React, { PureComponent } from 'react';
+let React = require('react');
 import { View, Animated } from 'reactxp';
 var PropTypes = require('prop-types');
 import styles from './Pagination.style';
 
-export default class PaginationDot extends PureComponent {
+export default class PaginationDot extends React.PureComponent {
 
     static propTypes = {
         inactiveOpacity: PropTypes.number.isRequired,
@@ -53,9 +53,8 @@ export default class PaginationDot extends PureComponent {
                 easing: Animated.Easing.linear,
                 ...commonProperties
             }),
-            Animated.spring(animTransform, {
-                friction: 4,
-                tension: 50,
+            Animated.timing(animTransform, {
+                easing: Animated.Easing.linear,
                 ...commonProperties
             })
         ];