diff --git a/app/components/UI/ScanStep/__snapshots__/index.test.js.snap b/app/components/UI/ScanStep/__snapshots__/index.test.js.snap
new file mode 100644
index 00000000000..b48e5126165
--- /dev/null
+++ b/app/components/UI/ScanStep/__snapshots__/index.test.js.snap
@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ScanStep should render correctly 1`] = `
+
+
+
+ 1
+ .
+
+
+
+
+ some text
+
+
+
+`;
diff --git a/app/components/UI/ScanStep/index.js b/app/components/UI/ScanStep/index.js
new file mode 100644
index 00000000000..d4c98847bf8
--- /dev/null
+++ b/app/components/UI/ScanStep/index.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { StyleSheet, Text, View } from 'react-native';
+import { colors, fontStyles } from '../../../styles/common';
+import scaling from '../../../util/scaling';
+
+const styles = StyleSheet.create({
+ step: {
+ ...fontStyles.normal,
+ fontSize: scaling.scale(14),
+ color: colors.fontPrimary,
+ lineHeight: 28
+ },
+ row: {
+ flexDirection: 'row',
+ alignItems: 'flex-start',
+ flexWrap: 'wrap',
+ marginBottom: 6
+ },
+ val: { width: '8%' },
+ stepTitle: { width: '92%' }
+});
+
+const ScanStep = ({ step, children }) => (
+
+
+ {step}.
+
+
+ {children}
+
+
+);
+
+ScanStep.propTypes = {
+ children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+ step: PropTypes.number
+};
+
+export default ScanStep;
diff --git a/app/components/UI/ScanStep/index.test.js b/app/components/UI/ScanStep/index.test.js
new file mode 100644
index 00000000000..ba367379f0c
--- /dev/null
+++ b/app/components/UI/ScanStep/index.test.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import ScanStep from './';
+
+describe('ScanStep', () => {
+ it('should render correctly', () => {
+ const step = shallow(some text);
+ expect(step).toMatchSnapshot();
+ });
+});
diff --git a/app/components/UI/WarningExistingUserModal/index.js b/app/components/UI/WarningExistingUserModal/index.js
index 0eb0f9ef334..9e35d346450 100644
--- a/app/components/UI/WarningExistingUserModal/index.js
+++ b/app/components/UI/WarningExistingUserModal/index.js
@@ -20,7 +20,8 @@ const styles = StyleSheet.create({
...fontStyles.normal,
color: colors.black,
textAlign: 'center',
- fontSize: 14
+ fontSize: 14,
+ lineHeight: 18
},
warningModalTextBold: {
...fontStyles.bold
diff --git a/app/components/Views/ImportWallet/index.js b/app/components/Views/ImportWallet/index.js
index 683f8068564..17d63b48332 100644
--- a/app/components/Views/ImportWallet/index.js
+++ b/app/components/Views/ImportWallet/index.js
@@ -54,7 +54,7 @@ const styles = StyleSheet.create({
height: Device.isIos() ? 90 : 45
},
title: {
- fontSize: Device.isSmallDevice() ? 20 : 24,
+ fontSize: SMALL_DEVICE ? 20 : 24,
color: colors.fontPrimary,
justifyContent: 'center',
textAlign: 'center',
diff --git a/app/components/Views/Onboarding/index.js b/app/components/Views/Onboarding/index.js
index 7c8dcfdfedc..9f661ad5325 100644
--- a/app/components/Views/Onboarding/index.js
+++ b/app/components/Views/Onboarding/index.js
@@ -1,6 +1,16 @@
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
-import { ActivityIndicator, Text, View, ScrollView, StyleSheet, Alert, Image, InteractionManager } from 'react-native';
+import {
+ ActivityIndicator,
+ FlatList,
+ Text,
+ View,
+ ScrollView,
+ StyleSheet,
+ Alert,
+ Image,
+ InteractionManager
+} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import StyledButton from '../../UI/StyledButton';
import { colors, fontStyles, baseStyles } from '../../../styles/common';
@@ -16,6 +26,7 @@ import Analytics from '../../../core/Analytics';
import { ANALYTICS_EVENT_OPTS } from '../../../util/analytics';
import { saveOnboardingEvent } from '../../../actions/onboarding';
import { getTransparentBackOnboardingNavbarOptions } from '../../UI/Navbar';
+import ScanStep from '../../UI/ScanStep';
import PubNubWrapper from '../../../util/syncWithExtension';
import ActionModal from '../../UI/ActionModal';
import Logger from '../../../util/Logger';
@@ -37,8 +48,6 @@ import {
TRUE
} from '../../../constants/storage';
-import scaling from '../../../util/scaling';
-
const PUB_KEY = process.env.MM_PUBNUB_PUB_KEY;
const styles = StyleSheet.create({
@@ -110,14 +119,8 @@ const styles = StyleSheet.create({
...fontStyles.bold,
fontSize: 18,
color: colors.fontPrimary,
- textAlign: 'center'
- },
- steps: {},
- step: {
- ...fontStyles.normal,
- fontSize: scaling.scale(13),
- color: colors.fontPrimary,
- lineHeight: 32
+ textAlign: 'center',
+ lineHeight: 28
},
loader: {
marginTop: 180,
@@ -134,16 +137,15 @@ const styles = StyleSheet.create({
column: {
marginVertical: 24,
alignItems: 'flex-start'
- },
- row: {
- flexDirection: 'row',
- alignItems: 'flex-start',
- flexWrap: 'wrap'
- },
- bullet: {
- width: 20
- },
- bulletText: {}
+ }
+});
+
+const keyExtractor = ({ id }) => id;
+
+const createStep = step => ({
+ id: `ONBOARDING_SCAN_STEPS-${step}`,
+ step,
+ text: strings(`onboarding.scan_step_${step}`)
});
/**
@@ -565,6 +567,10 @@ class Onboarding extends PureComponent {
render() {
const { qrCodeModalVisible, loading, existingUser } = this.state;
+ const renderScanStep = ({ item: { step, text } }) => {text};
+
+ const ONBOARDING_SCAN_STEPS = [1, 2, 3, 4].map(createStep);
+
return (
@@ -617,16 +623,11 @@ class Onboarding extends PureComponent {
{strings('onboarding.scan_title')}
- {[1, 2, 3, 4].map(val => (
-
-
- {val}.
-
-
- {strings(`onboarding.scan_step_${val}`)}
-
-
- ))}
+