Initial commit and version of project.

.babelrc

@@ -0,0 +1,3 @@
+{
+	"presets": ["module:metro-react-native-babel-preset"]
+}

.gitignore

@@ -0,0 +1,11 @@
+# Logs
+*.log
+npm-debug.log
+
+# Runtime data
+tmp
+build
+dist
+
+# Dependency directory
+node_modules

.npmignore

@@ -0,0 +1,12 @@
+# Logs
+*.log
+npm-debug.log
+
+# Dependency directory
+node_modules
+
+# Runtime data
+tmp
+
+# Examples
+examples

package.json

@@ -0,0 +1,39 @@
+{
+  "name": "react-native-progress-steps",
+  "version": "1.0.0",
+  "description": "A simple and fully customizable React Native component that implements a progress stepper UI.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/colbymillerdev/react-native-progress-steps.git"
+  },
+  "keywords": [
+    "react-native",
+    "react-component",
+    "react-native-component",
+    "react",
+    "mobile",
+    "ios",
+    "android",
+    "ui",
+    "stepper",
+    "progress",
+    "progress-steps"
+  ],
+  "author": "Colby Miller",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/colbymillerdev/react-native-progress-steps/issues"
+  },
+  "homepage": "https://github.com/colbymillerdev/react-native-progress-steps#readme",
+  "devDependencies": {
+    "metro-react-native-babel-preset": "^0.51.1"
+  },
+  "dependencies": {
+    "lodash": "^4.17.11",
+    "prop-types": "^15.6.2"
+  }
+}

src/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Colby Miller
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

src/ProgressSteps/ProgressStep.js

@@ -0,0 +1,60 @@
+import React, { Component } from 'react';
+import { View, Button } from 'react-native';
+import PropTypes from 'prop-types';
+
+class ProgressStep extends Component {
+  onNextStep = () => {
+    // Changes active index and calls next function passed by parent
+    const activeStep = this.props.activeStep + 1;
+    this.props.onNext();
+    this.props.setActiveStep(activeStep);
+  };
+
+  onPreviousStep = () => {
+    // Changes active index and calls previous function passed by parent
+    const activeStep = this.props.activeStep - 1;
+    this.props.onPrevious();
+    this.props.setActiveStep(activeStep);
+  };
+
+  renderNextButton = () => {
+    if (this.props.activeStep > 0) {
+      return <Button title={this.props.previousBtnText} onPress={this.onPreviousStep} />;
+    }
+  };
+
+  renderPreviousButton = () => {
+    if (this.props.activeStep < this.props.stepCount - 1) {
+      return <Button title={this.props.nextBtnText} onPress={this.onNextStep} />;
+    }
+  };
+
+  render() {
+    return (
+      <View>
+        {this.props.children}
+        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+          {this.renderNextButton()}
+          {this.renderPreviousButton()}
+        </View>
+      </View>
+    );
+  }
+}
+
+ProgressStep.propTypes = {
+  label: PropTypes.string,
+  onNext: PropTypes.func,
+  onPrevious: PropTypes.func,
+  setActiveStep: PropTypes.func,
+  nextBtnText: PropTypes.string,
+  previousBtnText: PropTypes.string,
+  stepCount: PropTypes.number
+};
+
+ProgressStep.defaultProps = {
+  nextBtnText: 'Next',
+  previousBtnText: 'Previous'
+};
+
+export default ProgressStep;

src/ProgressSteps/ProgressSteps.js

@@ -0,0 +1,96 @@
+import React, { Component } from 'react';
+import { View } from 'react-native';
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+
+import StepIcon from '../../components/ProgressStep/StepIcon';
+
+class ProgressSteps extends Component {
+  state = {
+    stepCount: 0,
+    activeStep: 0
+  };
+
+  componentDidMount() {
+    this.setState({ stepCount: React.Children.count(this.props.children) });
+  }
+
+  getChildProps() {
+    return { ...this.props, ...this.state };
+  }
+
+  renderStepIcons = () => {
+    let step = [];
+
+    _.times(this.state.stepCount, i => {
+      step.push(
+        <View key={i}>
+          <View>
+            <StepIcon
+              {...this.getChildProps()}
+              stepNum={i + 1}
+              label={this.props.children[i].props.label}
+              isFirstStep={i === 0}
+              isLastStep={i === this.state.stepCount - 1}
+              isCompletedStep={i < this.state.activeStep}
+              isActiveStep={i === this.state.activeStep}
+            />
+          </View>
+        </View>
+      );
+    });
+
+    return step;
+  };
+
+  // Callback function from ProgressStep that passes current step.
+  setActiveStep = step => {
+    console.log('called setActiveStep');
+    this.setState({ activeStep: step });
+  };
+
+  render() {
+    const styles = {
+      container: {
+        flex: 1,
+        alignItems: 'center'
+      },
+      stepIcons: {
+        position: 'relative',
+        justifyContent: 'space-evenly',
+        flexDirection: 'row',
+        top: this.props.positionFromTop
+      },
+      bodyContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center'
+      }
+    };
+
+    return (
+      <View style={styles.container}>
+        <View style={styles.stepIcons}>{this.renderStepIcons()}</View>
+        <View style={this.props.style ? this.props.style : styles.bodyContainer}>
+          {React.cloneElement(this.props.children[this.state.activeStep], {
+            setActiveStep: this.setActiveStep,
+            activeStep: this.state.activeStep,
+            stepCount: this.state.stepCount
+          })}
+        </View>
+      </View>
+    );
+  }
+}
+
+ProgressSteps.propTypes = {
+  labelWidth: PropTypes.number,
+  positionFromTop: PropTypes.number
+};
+
+ProgressSteps.defaultProps = {
+  labelWidth: 100,
+  positionFromTop: 30
+};
+
+export default ProgressSteps;