1 files changed, 63 insertions, 0 deletions
diff --git a/frontend/app/components/walkthrough.js b/frontend/app/components/walkthrough.js
new file mode 100644
index 0000000..7fdb247
--- /dev/null
+++ b/frontend/app/components/walkthrough.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import {
+  View,
+  FlatList,
+  Dimensions,
+  StyleSheet,
+} from 'react-native';
+import PropTypes from 'prop-types';
+
+export class Walkthrough extends React.Component {
+  static propTypes = {
+    children: PropTypes.arrayOf(PropTypes.element).isRequired,
+    onChanged: PropTypes.func,
+  };
+  static defaultProps = {
+    onChanged: (() => null),
+  };
+
+  constructor(props) {
+    super(props);
+    this.itemWidth = Dimensions.get('window').width;
+  }
+
+  extractItemKey = (item) => `${this.props.children.indexOf(item)}`;
+
+  onScrollEnd = (e) => {
+    const { contentOffset } = e.nativeEvent;
+    const viewSize = e.nativeEvent.layoutMeasurement;
+    const pageNum = Math.floor(contentOffset.x / viewSize.width);
+    this.props.onChanged(pageNum);
+  };
+
+  renderItem = ({ item }) => (
+    <View style={[styles.item, { width: this.itemWidth }]}>
+      {item}
+    </View>
+  );
+
+  render = () => (
+    <FlatList
+      style={styles.list}
+      data={this.props.children}
+      onMomentumScrollEnd={this.onScrollEnd}
+      keyExtractor={this.extractItemKey}
+      pagingEnabled
+      horizontal
+      renderSeparator={() => null}
+      showsHorizontalScrollIndicator={false}
+      showsVerticalScrollIndicator={false}
+      directionalLockEnabled
+      renderItem={this.renderItem}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  list: {
+    flex: 1,
+  },
+  item: {
+    flex: 1,
+  },
+});