Initial commit/

1 files changed, 49 insertions, 0 deletions

diff --git a/frontend/app/components/paginationIndicator.js b/frontend/app/components/paginationIndicator.js
new file mode 100644
index 0000000..6a043d0
--- /dev/null
+++ b/frontend/app/components/paginationIndicator.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import { View } from 'react-native';
+import { RkStyleSheet } from 'react-native-ui-kitten';
+import PropTypes from 'prop-types';
+
+export class PaginationIndicator extends React.Component {
+  static propTypes = {
+    current: PropTypes.number,
+    length: PropTypes.number.isRequired,
+  };
+  static defaultProps = {
+    current: 0,
+  };
+
+  renderIndicatorItem = (index, selected) => (
+    <View style={selected ? [styles.base, styles.selected] : styles.base} key={index} />
+  );
+
+  renderIndicators = () => {
+    const indicators = [];
+    for (let i = 0; i < this.props.length; i += 1) {
+      indicators.push(this.renderIndicatorItem(i, i === this.props.current));
+    }
+    return indicators;
+  };
+
+  render = () => (
+    <View style={styles.container}>
+      {this.renderIndicators()}
+    </View>
+  );
+}
+
+const styles = RkStyleSheet.create(theme => ({
+  container: {
+    flexDirection: 'row',
+  },
+  base: {
+    width: 8,
+    height: 8,
+    borderRadius: 5,
+    borderColor: theme.colors.brand,
+    borderWidth: 1,
+    marginHorizontal: 5,
+  },
+  selected: {
+    backgroundColor: theme.colors.brand,
+  },
+}));