Use FlatList for scan steps modal

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`] = `
+<View
+  style={
+    Object {
+      "alignItems": "flex-start",
+      "flexDirection": "row",
+      "flexWrap": "wrap",
+      "marginBottom": 6,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "width": "8%",
+      }
+    }
+  >
+    <Text
+      style={
+        Object {
+          "color": "#000000",
+          "fontFamily": "EuclidCircularB-Regular",
+          "fontSize": 14,
+          "fontWeight": "400",
+          "lineHeight": 28,
+        }
+      }
+    >
+      1
+      .
+    </Text>
+  </View>
+  <View
+    style={
+      Object {
+        "width": "92%",
+      }
+    }
+  >
+    <Text
+      style={
+        Object {
+          "color": "#000000",
+          "fontFamily": "EuclidCircularB-Regular",
+          "fontSize": 14,
+          "fontWeight": "400",
+          "lineHeight": 28,
+        }
+      }
+    >
+      some text
+    </Text>
+  </View>
+</View>
+`;

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 }) => (
+	<View style={styles.row}>
+		<View style={styles.val}>
+			<Text style={styles.step}>{step}.</Text>
+		</View>
+		<View style={styles.stepTitle}>
+			<Text style={styles.step}>{children}</Text>
+		</View>
+	</View>
+);
+
+ScanStep.propTypes = {
+	children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+	step: PropTypes.number
+};
+
+export default ScanStep;

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(<ScanStep step={1}>some text</ScanStep>);
+		expect(step).toMatchSnapshot();
+	});
+});

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

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',

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 } }) => <ScanStep step={step}>{text}</ScanStep>;
+
+		const ONBOARDING_SCAN_STEPS = [1, 2, 3, 4].map(createStep);
+
 		return (
 			<View style={baseStyles.flexGrow} testID={'onboarding-screen'}>
 				<OnboardingScreenWithBg screen={'c'}>
@@ -617,16 +623,11 @@ class Onboarding extends PureComponent {
 					<View style={styles.modalWrapper}>
 						<Text style={styles.scanTitle}>{strings('onboarding.scan_title')}</Text>
 						<View style={styles.column}>
-							{[1, 2, 3, 4].map(val => (
-								<View key={val} style={[styles.row, styles.steps]}>
-									<View style={styles.bullet}>
-										<Text style={styles.step}>{val}.</Text>
-									</View>
-									<View style={styles.bulletText}>
-										<Text style={styles.step}>{strings(`onboarding.scan_step_${val}`)}</Text>
-									</View>
-								</View>
-							))}
+							<FlatList
+								data={ONBOARDING_SCAN_STEPS}
+								renderItem={renderScanStep}
+								keyExtractor={keyExtractor}
+							/>
 						</View>
 					</View>
 				</ActionModal>