Add a basic FTU

js/App.js

@@ -11,13 +11,14 @@ import {
 
 import { theme } from '../config';
 
-import Settings from './scenes/Settings';
-import Profile from './scenes/Profile';
-import Compass from './scenes/Compass';
-import Demos from './scenes/Demos';
+import FTU from './scenes/FTU';
 import Home from './scenes/Home';
 import Item from './scenes/Item';
 import Map from './scenes/Map';
+import Profile from './scenes/Profile';
+import Settings from './scenes/Settings';
+import Compass from './scenes/Compass';
+import Demos from './scenes/Demos';
 
 import { connect } from 'react-redux';
 import { watchLocation } from './store/actions';
@@ -28,6 +29,7 @@ export class App extends Component {
     super(props);
 
     this.routes = {
+      ftu: { component: FTU },
       home: { component: Home },
       item: { component: Item },
       map: { component: Map },

js/components/ViewPagerIndicator.js

@@ -0,0 +1,85 @@
+import React, { PropTypes } from 'react';
+import {
+  View,
+  Animated,
+  Dimensions,
+  StyleSheet,
+} from 'react-native';
+
+const { width } = Dimensions.get('window');
+const DOT_SIZE = 8;
+const DOT_SPACING = 6;
+const DOT_FULL_WIDTH = DOT_SIZE + DOT_SPACING * 2;
+
+/**
+ * This component is used to style the dots (or bullets) used by
+ * react-native-viewpager. It's a purely stateless functional component that is
+ * only concerned with rendering the dots and transitioning the active dot from
+ * one page of the view pager to another.
+ *
+ * @param pageCount {number} The total number of pages.
+ * @param activePage {number} The currently active page.
+ * @param scrollValue {Animated.Value} Used to transition the active dot.
+ * @param scrollOffset {number} Used to reset dot position after a transition.
+ * @return {Component}
+ */
+const ViewPagerIndicator = ({
+  pageCount,
+  activePage,
+  scrollValue,
+  scrollOffset,
+}) => {
+  // Initial left position of the active dot used during transition.
+  const offsetX = (width - DOT_FULL_WIDTH * pageCount) / 2 +
+    (activePage - scrollOffset) * DOT_FULL_WIDTH;
+
+  // The CSS `left` property.
+  const left = scrollValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [offsetX, offsetX + DOT_FULL_WIDTH],
+  });
+
+  // Create the elements for the inactive dots.
+  const indicators = [];
+  for (let i = 0; i < pageCount; i++) {
+    indicators.push(
+      <View key={i} style={styles.dot}/>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      {indicators}
+      <Animated.View style={[styles.dot, styles.activeDot, { left }]}/>
+    </View>
+  );
+};
+
+ViewPagerIndicator.propTypes = {
+  goToPage: PropTypes.func,
+  pageCount: PropTypes.number,
+  activePage: PropTypes.number,
+  scrollValue: PropTypes.object,
+  scrollOffset: PropTypes.number,
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginBottom: 20,
+  },
+  dot: {
+    width: DOT_SIZE,
+    height: DOT_SIZE,
+    borderRadius: DOT_SIZE / 2,
+    backgroundColor: 'rgba(255,255,255,0.5)',
+    marginHorizontal: DOT_SPACING,
+  },
+  activeDot: {
+    position: 'absolute',
+    backgroundColor: '#fff',
+  },
+});
+
+export default ViewPagerIndicator;

js/scenes/Demos.js

@@ -29,6 +29,10 @@ export class List extends Component {
         <Header
           title="Component Demos"
           navigator={navigator}/>
+        <TouchableOpacity
+          onPress={this.onItemPress.bind(this, 'ftu')}>
+          <Text style={styles.text}>Go to FTU scene</Text>
+        </TouchableOpacity>
         <TouchableOpacity
           onPress={this.onItemPress.bind(this, 'map')}>
           <Text style={styles.text}>Go to Map scene</Text>

js/scenes/FTU.js

@@ -0,0 +1,169 @@
+import React, { Component, PropTypes } from 'react';
+import {
+  View,
+  Image,
+  Text,
+  Button,
+  Dimensions,
+  StyleSheet,
+  Platform,
+} from 'react-native';
+import ViewPager from 'react-native-viewpager';
+import ViewPagerIndicator from '../components/ViewPagerIndicator';
+import { connect } from 'react-redux';
+import { theme } from '../../config';
+
+const CONTENT = [
+  {
+    title: 'Hear the story of London\'s vibrant street art',
+    main: 'This month Project Magnet brings you a selection of amazing street art from around London.',
+    footer: 'Not in London? Tell us where you\'d like to go next.',
+  },
+  {
+    title: 'Turn on notifications?',
+    main: 'Notifications can alert you when you\'re close to a point of interest, even when you\'re not inside the app.',
+  },
+];
+
+export class FTU extends Component {
+  constructor(props) {
+    super(props);
+
+    this.navigator = this.props.navigator;
+
+    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}>
+        <View style={styles.scrim}>
+          <ViewPager
+            ref="viewPager"
+            autoPlay={false}
+            isLoop={false}
+            locked={true}
+            dataSource={this.state.dataSource}
+            renderPage={(render) => render()}
+            renderPageIndicator={() => <ViewPagerIndicator/>}
+            style={styles.viewPager}/>
+        </View>
+      </Image>
+    );
+  }
+
+  renderPage1() {
+    const DATA = CONTENT[0];
+
+    return (
+      <View style={styles.screen}>
+        <Text style={styles.title}>{DATA.title.toUpperCase()}</Text>
+        <Text style={styles.text}>{DATA.main}</Text>
+        <View style={styles.button}>
+          <View style={styles.border}>
+            <Button
+              title="GET STARTED"
+              accessibilityLabel="Continue to the next screen."
+              onPress={() => this.refs.viewPager.goToPage(1)}
+              color={Platform.OS === 'ios' ? 'white' : 'transparent'}/>
+          </View>
+        </View>
+        <Text style={styles.text}>{DATA.footer}</Text>
+      </View>
+    );
+  }
+
+  renderPage2() {
+    const DATA = CONTENT[1];
+
+    return (
+      <View style={styles.screen}>
+        <Text style={styles.title}>{DATA.title.toUpperCase()}</Text>
+        <Text style={styles.text}>{DATA.main}</Text>
+        <View style={styles.button}>
+          <View style={styles.border}>
+            <Button
+              title="TURN ON"
+              accessibilityLabel="Turn on notifications."
+              onPress={() => this.navigator.push({ id: 'home' })}
+              color={Platform.OS === 'ios' ? 'white' : 'transparent'}/>
+          </View>
+          <View style={styles.border}>
+            <Button
+              title="SKIP"
+              accessibilityLabel="Skip this step."
+              onPress={() => this.navigator.push({ id: 'home' })}
+              color={Platform.OS === 'ios' ? 'white' : 'transparent'}/>
+          </View>
+        </View>
+      </View>
+    );
+  }
+
+  static propTypes = {
+    navigator: PropTypes.object,
+  }
+}
+
+const { width, height } = Dimensions.get('window');
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width,
+    height,
+  },
+  viewPager: {
+    flex: 1,
+  },
+  scrim: {
+    width,
+    height,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+  },
+  screen: {
+    width,
+    padding: 30,
+    flexDirection: 'column',
+    justifyContent: 'space-around',
+  },
+  title: {
+    fontFamily: theme.fontBook,
+    fontSize: 30,
+    lineHeight: Math.round(30 * 1.5),
+    color: 'white',
+  },
+  text: {
+    fontFamily: theme.fontBook,
+    fontSize: 20,
+    lineHeight: Math.round(20 * 1.5),
+    color: 'white',
+  },
+  button: {
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
+  border: {
+    width: width / 2,
+    borderRadius: 15,
+    borderColor: 'white',
+    borderWidth: 2,
+    padding: 4,
+    marginBottom: 10,
+  },
+});
+
+export default connect()(FTU);

package.json

@@ -19,6 +19,7 @@
     "react-native-heading": "git://github.com/arcturus/react-native-heading.git",
     "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",

yarn.lock

@@ -3501,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"
@@ -3606,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"
 
@@ -4422,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"