example file fixed

templates/SnapCarouselExample.js.ejs

@@ -1,23 +1,121 @@
-import React from 'react'
-import { View, Text } from 'react-native'
+import React, {Component} from 'react'
+import { View, Text, StyleSheet, Dimensions } from 'react-native'
 import ExamplesRegistry from '../../../App/Services/ExamplesRegistry'
-import Carousel from 'react-native-snap-carousel';
+import Carousel, { Pagination } from 'react-native-snap-carousel';
+
+export const ENTRIES1 = [
+  {
+      description: '<< swipe left'
+  },
+  {
+      description: 'swipe right >>'
+  }
+];
+
+const { width: viewportWidth, height: viewportHeight } = Dimensions.get('window');
+export const sliderWidth = viewportWidth;
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#fff',
+    margin: 10,
+    overflow: 'hidden'
+  },
+  header: {
+    backgroundColor: '#F5FCFF',
+    padding: 10,
+  },
+  headerText: {
+    textAlign: 'center',
+    fontSize: 16,
+    fontWeight: '500',
+  },
+  body: {
+    backgroundColor: '#ff3b3a',
+    padding: 10,
+    paddingTop: 0
+  }
+})
+
+class SnapCarouselExample extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeSlideIndex: 0,
+      slider1Ref: null
+    };
+  }
+
+  get pagination() {
+    const { activeSlideIndex, slider1Ref } = this.state;
+
+    return (
+      <Pagination 
+        dotsLength={ENTRIES1.length}
+        activeDotIndex={activeSlideIndex}
+        dotStyle={{
+          width: 10,
+          height: 10,
+          borderRadius: 5,
+          marginHorizontal: 8,
+          backgroundColor: '#fbd029'
+        }}
+        inactiveDotStyle={{
+          width: 10,
+          height: 10,
+          borderRadius: 5,
+          marginHorizontal: 8,
+          backgroundColor: '#d7e6e7'
+        }}
+        inactiveDotScale={1.0}
+        carouselRef={slider1Ref}
+        tappableDots={!!slider1Ref}
+      />
+    );
+  }
+
+  _renderItem({ item, index }) {
+    return (
+      <View style={styles.header}>
+        <Text style={styles.headerText}>{item.description}</Text>
+      </View>
+    );
+  }
+
+  get carousel() {
+    return (
+        <Carousel 
+          ref={(c) => { if (!this.state.slider1Ref) { this.setState({ slider1Ref: c }); } }}
+          style={styles.body}
+          data={ENTRIES1}
+          renderItem={this._renderItem}
+          sliderWidth={sliderWidth}
+          itemWidth={sliderWidth}
+          inactiveSlideScale={1}
+          inactiveSlideOpacity={1}
+          enableMomentum
+          slideStyle={{ width: sliderWidth }}
+          activeSlideAlignment={'start'}
+          onSnapToItem={(index) => { 
+            this.setState({ activeSlideIndex: index }); 
+          }}
+        />
+    );
+  }
+
+  render() {
+    const { activeSlideIndex } = this.state;
+    return (
+      <View>
+        { this.carousel }
+        { this.pagination }
+      </View>
+    );
+  }
+}
 
 // Example
 ExamplesRegistry.addPluginExample('SnapCarousel', () =>
-  <View style={{margin: 20}}>
-    <Carousel
-      ref={(c) => { this._carousel = c; }}
-      data={this.state.entries}
-      renderItem={renderItem}
-      sliderWidth={sliderWidth}
-      itemWidth={itemWidth}
-    />
-  </View>
+  <SnapCarouselExample />
 )
-
-const renderItem = ({item, index}) => {
-  return <View style={styles.slide}>
-                <Text style={styles.title}>{ item.title }</Text>
-            </View>
-}