Replace carousel component

mozilla-magnet · Jan 31, 2017 · 5debd42 · 5debd42
1 parent b540959
commit 5debd42
Show file tree

Hide file tree

Showing 4 changed files with 141 additions and 27 deletions.
diff --git a/js/components/ViewPagerIndicator.js b/js/components/ViewPagerIndicator.js
@@ -0,0 +1,80 @@
+import React, { PropTypes } from 'react';
+import {
+  View,
+  Animated,
+  Dimensions,
+  StyleSheet,
+} from 'react-native';
+
+const { width } = Dimensions.get('window');
+const DOT_SIZE = 12;
+const DOT_SPACE = 6;
+
+const ViewPagerIndicator = ({
+  pageCount,
+  activePage,
+  scrollValue,
+  scrollOffset,
+}) => {
+  const itemWidth = DOT_SIZE + DOT_SPACE * 2;
+  const offsetX = width / 2 - itemWidth - scrollOffset * activePage;
+  const left = scrollValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [offsetX, offsetX + itemWidth],
+  });
+
+  const indicators = [];
+  for (let i = 0; i < pageCount; i++) {
+    indicators.push((
+      <View key={i} style={styles.tab}>
+        <View style={styles.dot}/>
+      </View>
+    ));
+  }
+
+  return (
+    <View style={styles.tabs}>
+      {indicators}
+      <Animated.View style={[styles.curDot, { left }]}/>
+    </View>
+  );
+};
+
+ViewPagerIndicator.propTypes = {
+  goToPage: PropTypes.func,
+  pageCount: PropTypes.number,
+  activePage: PropTypes.number,
+  scrollValue: PropTypes.object,
+  scrollOffset: PropTypes.number,
+};
+
+const styles = StyleSheet.create({
+  tab: {
+    alignItems: 'center',
+  },
+  tabs: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 20,
+  },
+  dot: {
+    width: DOT_SIZE,
+    height: DOT_SIZE,
+    borderRadius: DOT_SIZE / 2,
+    backgroundColor: 'rgba(255,255,255,0.5)',
+    marginLeft: DOT_SPACE,
+    marginRight: DOT_SPACE,
+  },
+  curDot: {
+    position: 'absolute',
+    width: DOT_SIZE,
+    height: DOT_SIZE,
+    borderRadius: DOT_SIZE / 2,
+    backgroundColor: '#fff',
+    margin: DOT_SPACE,
+    bottom: 0,
+  },
+});
+
+export default ViewPagerIndicator;
diff --git a/js/scenes/FTU.js b/js/scenes/FTU.js
@@ -7,41 +7,67 @@ import {
   Dimensions,
   StyleSheet,
   Platform,
+  StatusBar,
 } from 'react-native';
-import Carousel from 'react-native-looped-carousel';
+import ViewPager from 'react-native-viewpager';
+import ViewPagerIndicator from '../components/ViewPagerIndicator';
 import { connect } from 'react-redux';
+import { theme } from '../../config';
 
 export class FTU extends Component {
+  constructor(props) {
+    super(props);
+
+    const PAGES = [
+      this.renderPage1(),
+      this.renderPage2(),
+    ];
+    const dataSource = new ViewPager.DataSource({
+      pageHasChanged: (p1, p2) => p1 !== p2,
+    });
+
+    this.state = {
+      dataSource: dataSource.cloneWithPages(PAGES),
+    };
+  }
+
   render() {
     return (
       <Image
         source={require('../images/ftu/background.jpg')}
         resizeMode="cover"
         style={styles.container}>
-        <Carousel
-          autoplay={false}
-          bullets={true}
-          bulletStyle={styles.bulletStyle}
-          onAnimateNextPage={(p) => console.log(p)}
-          style={styles.carousel}>
-          {this.renderPage1()}
-          {this.renderPage2()}
-        </Carousel>
+        <StatusBar
+          translucent={true}
+          backgroundColor="rgba(0, 0, 0, 0)"
+          barStyle="light-content"
+        />
+        <View style={styles.scrim}>
+          <ViewPager
+            ref="viewPager"
+            autoPlay={false}
+            isLoop={false}
+            locked={true}
+            dataSource={this.state.dataSource}
+            renderPage={(data) => data}
+            renderPageIndicator={() => <ViewPagerIndicator/>}
+            style={styles.viewPager}/>
+        </View>
       </Image>
     );
   }
 
   renderPage1() {
     return (
       <View style={styles.screen}>
-        <Text style={styles.title}>{'Hear the story of London vibrant street art'.toUpperCase()}</Text>
+        <Text style={styles.title}>{`Hear the story of London's vibrant street art`.toUpperCase()}</Text>
         <Text style={styles.text}>This month Project Magnet brings you a selection of amazing street art from around London.</Text>
         <View style={styles.button}>
           <View style={styles.border}>
             <Button
               title="GET STARTED"
               accessibilityLabel="Continue to the next screen."
-              onPress={() => {}}
+              onPress={() => this.refs.viewPager.goToPage(1)}
               color={Platform.OS === 'ios' ? 'white' : 'transparent'}/>
           </View>
         </View>
@@ -76,8 +102,6 @@ export class FTU extends Component {
   }
 }
 
-FTU.propTypes = {};
-
 const { width, height } = Dimensions.get('window');
 
 const styles = StyleSheet.create({
@@ -86,13 +110,13 @@ const styles = StyleSheet.create({
     width,
     height,
   },
-  carousel: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'rgba(0,0,0,0.5)',
+  viewPager: {
+    flex: 1,
   },
-  bulletStyle: {
-    backgroundColor: 'rgba(255,255,255,0.5)',
-    borderWidth: 0,
+  scrim: {
+    width,
+    height,
+    backgroundColor: 'rgba(0,0,0,0.5)',
   },
   screen: {
     width,
@@ -101,12 +125,13 @@ const styles = StyleSheet.create({
     justifyContent: 'space-around',
   },
   title: {
+    fontFamily: theme.fontBook,
     fontSize: 30,
     lineHeight: Math.round(30 * 1.5),
-    fontWeight: 'bold',
     color: 'white',
   },
   text: {
+    fontFamily: theme.fontBook,
     fontSize: 20,
     lineHeight: Math.round(20 * 1.5),
     color: 'white',

diff --git a/package.json b/package.json
@@ -16,9 +16,9 @@
     "react": "~15.4.0-rc.4",
     "react-native": "0.40.0",
     "react-native-heading": "git://github.com/arcturus/react-native-heading.git",
-    "react-native-looped-carousel": "^0.1.5",
     "react-native-maps": "^0.13.0",
     "react-native-share": "^1.0.18",
+    "react-native-viewpager": "^0.2.13",
     "react-redux": "^5.0.1",
     "realm": "^0.15.4",
     "redux": "^3.6.0",

diff --git a/yarn.lock b/yarn.lock
@@ -3493,10 +3493,6 @@ react-deep-force-update@^1.0.0:
   version "1.0.0"
   resolved "git://github.com/arcturus/react-native-heading.git#75edf448383e37cbf5d96760dad4a32f43e5ee15"
 
-react-native-looped-carousel@^0.1.5:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/react-native-looped-carousel/-/react-native-looped-carousel-0.1.5.tgz#322ffe6cec208949113ed732bfd64d2d5107cbff"
-
 react-native-maps@^0.13.0:
   version "0.13.0"
   resolved "https://registry.yarnpkg.com/react-native-maps/-/react-native-maps-0.13.0.tgz#f3d791a06d36d553bcc177514ee52fdea45474c0"
@@ -3505,6 +3501,13 @@ react-native-share@^1.0.18:
   version "1.0.19"
   resolved "https://registry.yarnpkg.com/react-native-share/-/react-native-share-1.0.19.tgz#82c210efb156175d67ee271efee29ed9cf8e1449"
 
+react-native-viewpager@^0.2.13:
+  version "0.2.13"
+  resolved "https://registry.yarnpkg.com/react-native-viewpager/-/react-native-viewpager-0.2.13.tgz#75e421ae90e89efcd77d2c077c0525382b7c39c5"
+  dependencies:
+    react-timer-mixin "^0.13.3"
+    warning "^2.1.0"
+
 [email protected]:
   version "0.40.0"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.40.0.tgz#ca7b86a8e8fbc7653634ad47ca2ffd69fdf18ad5"
@@ -3610,7 +3613,7 @@ react-test-renderer@~15.4.0-rc.4:
     fbjs "^0.8.4"
     object-assign "^4.1.0"
 
-react-timer-mixin@^0.13.2:
+react-timer-mixin@^0.13.2, react-timer-mixin@^0.13.3:
   version "0.13.3"
   resolved "https://registry.yarnpkg.com/react-timer-mixin/-/react-timer-mixin-0.13.3.tgz#0da8b9f807ec07dc3e854d082c737c65605b3d22"
 
@@ -4426,6 +4429,12 @@ walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
+warning@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-2.1.0.tgz#21220d9c63afc77a8c92111e011af705ce0c6901"
+  dependencies:
+    loose-envify "^1.0.0"
+
 watch@~0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/watch/-/watch-0.10.0.tgz#77798b2da0f9910d595f1ace5b0c2258521f21dc"