1 files changed, 47 insertions, 0 deletions
diff --git a/src/components/onboarding/RegistrationWizard.tsx b/src/components/onboarding/RegistrationWizard.tsx
new file mode 100644
index 00000000..5d7e6ee2
--- /dev/null
+++ b/src/components/onboarding/RegistrationWizard.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import {View, StyleSheet, ViewProps} from 'react-native';
+
+interface RegistrationWizardProps extends ViewProps {
+  step: 'one' | 'two' | 'three';
+}
+
+const RegistrationWizard = (props: RegistrationWizardProps) => {
+  const stepStyle = styles.step;
+  const stepActiveStyle = [styles.step, styles.stepActive];
+  return (
+    <View {...props}>
+      <View style={styles.container}>
+        <View style={props.step === 'one' ? stepActiveStyle : stepStyle} />
+        <View style={styles.progress} />
+        <View style={props.step === 'two' ? stepActiveStyle : stepStyle} />
+        <View style={styles.progress} />
+        <View style={props.step === 'three' ? stepActiveStyle : stepStyle} />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  step: {
+    height: 18,
+    width: 18,
+    borderRadius: 9,
+    borderWidth: 2,
+    borderColor: '#e1f0ff',
+  },
+  stepActive: {
+    backgroundColor: '#e1f0ff',
+  },
+  progress: {
+    width: '30%',
+    height: 2,
+    backgroundColor: '#e1f0ff',
+  },
+});
+
+export default RegistrationWizard;