From e2f6485e8c505bce37aabdab0f4dc3379f99dbbc Mon Sep 17 00:00:00 2001
From: J M Rossy <jm.rossy@gmail.com>
Date: Mon, 4 Nov 2019 14:36:02 +0100
Subject: [PATCH] [Wallet] Create new carousel component (#1555)

* Add a new carousel for user education
* Remove unused verify input screen
* Create new screen for first stage of new verification designs
---
 packages/mobile/package.json                  |   2 +
 packages/mobile/src/components/Carousel.tsx   | 110 +++++
 packages/mobile/src/navigator/Navigator.tsx   |   4 +-
 packages/mobile/src/navigator/Screens.tsx     |   2 +-
 packages/mobile/src/verify/Input.tsx          | 188 --------
 .../src/verify/VerificationLoadingScreen.tsx  |  58 +++
 packages/mobile/src/verify/Verify.test.tsx    |  17 -
 .../verify/__snapshots__/Verify.test.tsx.snap | 446 ------------------
 packages/react-components/styles/colors.tsx   |   1 +
 yarn.lock                                     |  24 +
 10 files changed, 198 insertions(+), 654 deletions(-)
 create mode 100644 packages/mobile/src/components/Carousel.tsx
 delete mode 100644 packages/mobile/src/verify/Input.tsx
 create mode 100644 packages/mobile/src/verify/VerificationLoadingScreen.tsx

diff --git a/packages/mobile/package.json b/packages/mobile/package.json
index 330729c0b0c..19e912a23de 100644
--- a/packages/mobile/package.json
+++ b/packages/mobile/package.json
@@ -114,6 +114,7 @@
     "react-native-send-intent": "git+https://github.com/celo-org/react-native-send-intent#a0f4b00",
     "react-native-shadow": "^1.2.2",
     "react-native-share": "^2.0.0",
+    "react-native-snap-carousel": "^3.8.4",
     "react-native-sms": "^1.9.0",
     "react-native-splash-screen": "^3.2.0",
     "react-native-svg": "^9.11.1",
@@ -148,6 +149,7 @@
     "@types/lodash": "^4.14.136",
     "@types/react": "^16.8.19",
     "@types/react-native": "^0.60.19",
+    "@types/react-native-snap-carousel": "^3.7.4",
     "@types/react-native-fs": "^2.8.1",
     "@types/react-native-keep-awake": "^2.0.1",
     "@types/react-redux": "^7.1.2",
diff --git a/packages/mobile/src/components/Carousel.tsx b/packages/mobile/src/components/Carousel.tsx
new file mode 100644
index 00000000000..9c6e2ba3adc
--- /dev/null
+++ b/packages/mobile/src/components/Carousel.tsx
@@ -0,0 +1,110 @@
+/**
+ * A custom style carousel based on react-native-snap-carousel
+ */
+
+import colors from '@celo/react-components/styles/colors'
+import fontStyles from '@celo/react-components/styles/fonts'
+import variables from '@celo/react-components/styles/variables'
+import * as React from 'react'
+import { StyleSheet, Text, View, ViewStyle } from 'react-native'
+import { BoxShadow } from 'react-native-shadow'
+import RNCarousel, { Pagination } from 'react-native-snap-carousel'
+
+const ITEM_WIDTH = variables.width - 70
+const ITEM_HEIGHT = 250
+
+interface OwnProps {
+  containerStyle: ViewStyle
+  items: CarouselItem[]
+}
+
+export interface CarouselItem {
+  text: string
+  icon?: React.ComponentType
+}
+
+function renderItem({ item, index }: { item: CarouselItem; index: number }) {
+  return (
+    <View style={{ position: 'relative' }}>
+      <BoxShadow setting={shadowOpt}>
+        <View style={styles.itemContainer}>
+          {item.icon}
+          <Text style={styles.itemText}>{item.text}</Text>
+        </View>
+      </BoxShadow>
+    </View>
+  )
+}
+
+export function Carousel(props: OwnProps) {
+  const ref = React.useRef(null)
+  const [activeItem, setActiveItem] = React.useState(0)
+
+  return (
+    <View style={props.containerStyle}>
+      {/* For some reason the carousel is adding a bunch of item height, wrapping to cut it off*/}
+      <View style={{ height: ITEM_HEIGHT }}>
+        <RNCarousel
+          ref={ref}
+          data={props.items}
+          renderItem={renderItem}
+          sliderWidth={variables.width}
+          sliderHeight={ITEM_HEIGHT}
+          itemWidth={ITEM_WIDTH}
+          itemHeight={ITEM_HEIGHT}
+          inactiveSlideScale={0.9}
+          inactiveSlideOpacity={1}
+          onSnapToItem={setActiveItem}
+        />
+      </View>
+      <Pagination
+        dotsLength={props.items.length}
+        activeDotIndex={activeItem}
+        containerStyle={styles.paginationContainer}
+        dotColor={colors.dark}
+        inactiveDotColor={colors.lightGray}
+        dotStyle={styles.paginationDot}
+        inactiveDotOpacity={1}
+        inactiveDotScale={0.8}
+        carouselRef={ref as any}
+        tappableDots={false}
+      />
+    </View>
+  )
+}
+
+const shadowOpt = {
+  width: ITEM_WIDTH,
+  height: ITEM_HEIGHT,
+  color: '#6b7b8b',
+  opacity: 0.03,
+  border: 1,
+  radius: 12,
+  x: 0,
+  y: 0,
+  style: {
+    padding: 3,
+  },
+}
+
+const styles = StyleSheet.create({
+  itemContainer: {
+    backgroundColor: '#FFFFFF',
+    borderWidth: 2,
+    borderColor: 'rgba(255, 255, 255, 0.5)',
+    borderRadius: 12,
+    width: ITEM_WIDTH - 6,
+    height: ITEM_HEIGHT - 6,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  itemText: {
+    ...fontStyles.bodyLarge,
+  },
+  paginationContainer: {
+    marginVertical: 10,
+  },
+  paginationDot: {},
+})
+
+export default React.memo(Carousel)
diff --git a/packages/mobile/src/navigator/Navigator.tsx b/packages/mobile/src/navigator/Navigator.tsx
index 3dbbfb801cb..4c0022663c6 100644
--- a/packages/mobile/src/navigator/Navigator.tsx
+++ b/packages/mobile/src/navigator/Navigator.tsx
@@ -62,7 +62,7 @@ import SendAmount from 'src/send/SendAmount'
 import SendConfirmation from 'src/send/SendConfirmation'
 import SetClock from 'src/set-clock/SetClock'
 import TransactionReviewScreen from 'src/transactions/TransactionReviewScreen'
-import VerifyInput from 'src/verify/Input'
+import VerificationLoadingScreen from 'src/verify/VerificationLoadingScreen'
 import VerifyVerified from 'src/verify/Verified'
 import VerifyVerifying from 'src/verify/Verifying'
 import VerifyEducation from 'src/verify/VerifyPhoneEducation'
@@ -113,7 +113,7 @@ const NuxStack = createStackNavigator(
     [Screens.ImportWalletEmpty]: { screen: ImportWalletEmpty },
     [Screens.ImportContacts]: { screen: ImportContacts },
     [Screens.VerifyEducation]: { screen: VerifyEducation },
-    [Screens.VerifyInput]: { screen: VerifyInput },
+    [Screens.VerificationLoadingScreen]: { screen: VerificationLoadingScreen },
     [Screens.VerifyVerifying]: { screen: VerifyVerifying },
     [Screens.VerifyVerified]: { screen: VerifyVerified },
     ...commonScreens,
diff --git a/packages/mobile/src/navigator/Screens.tsx b/packages/mobile/src/navigator/Screens.tsx
index a6a7718a9b3..e680e1f602f 100644
--- a/packages/mobile/src/navigator/Screens.tsx
+++ b/packages/mobile/src/navigator/Screens.tsx
@@ -65,8 +65,8 @@ export enum Screens {
   TransactionReview = 'TransactionReview',
   UpgradeScreen = 'UpgradeScreen',
   VerifyEducation = 'VerifyEducation',
-  VerifyInput = 'VerifyInput',
   VerifyVerified = 'VerifyVerified',
   VerifyVerifying = 'VerifyVerifying',
+  VerificationLoadingScreen = 'VerificationLoadingScreen',
   WalletHome = 'WalletHome',
 }
diff --git a/packages/mobile/src/verify/Input.tsx b/packages/mobile/src/verify/Input.tsx
deleted file mode 100644
index 7150dcc7898..00000000000
--- a/packages/mobile/src/verify/Input.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import Button, { BtnTypes } from '@celo/react-components/components/Button'
-import PhoneNumberInput from '@celo/react-components/components/PhoneNumberInput'
-import colors from '@celo/react-components/styles/colors'
-import { fontStyles } from '@celo/react-components/styles/fonts'
-import { isE164Number } from '@celo/utils/src/phoneNumbers'
-import * as React from 'react'
-import { WithNamespaces, withNamespaces } from 'react-i18next'
-import { Platform, ScrollView, StyleSheet, Text, View } from 'react-native'
-import { connect } from 'react-redux'
-import { setPhoneNumber } from 'src/account/actions'
-import { hideAlert, showError } from 'src/alert/actions'
-import componentWithAnalytics from 'src/analytics/wrapper'
-import { ErrorMessages } from 'src/app/ErrorMessages'
-import DevSkipButton from 'src/components/DevSkipButton'
-import { DEFAULT_COUNTRY } from 'src/config'
-import NuxLogo from 'src/icons/NuxLogo'
-import { startVerification } from 'src/identity/actions'
-import { navigate } from 'src/navigator/NavigationService'
-import { Screens } from 'src/navigator/Screens'
-import { RootState } from 'src/redux/reducers'
-import DisconnectBanner from 'src/shared/DisconnectBanner'
-
-interface StateProps {
-  devModeActive: boolean
-}
-
-interface DispatchProps {
-  setPhoneNumber: typeof setPhoneNumber
-  showError: typeof showError
-  hideAlert: typeof hideAlert
-  startVerification: typeof startVerification
-}
-
-type Props = StateProps & DispatchProps & WithNamespaces
-
-interface State {
-  e164Number: string
-  countryCode: string
-  isValidNumber: boolean
-}
-
-const mapDispatchToProps = {
-  setPhoneNumber,
-  showError,
-  hideAlert,
-  startVerification,
-}
-
-const mapStateToProps = (state: RootState): StateProps => {
-  return {
-    devModeActive: state.account.devModeActive || false,
-  }
-}
-
-export class Input extends React.Component<Props, State> {
-  state = {
-    e164Number: '',
-    countryCode: '',
-    isValidNumber: false,
-  }
-
-  scrollView = React.createRef<ScrollView>()
-
-  onInputChange = () => {
-    this.props.hideAlert()
-  }
-
-  setE164Number = (e164Number: string) => {
-    this.setState({
-      e164Number,
-    })
-  }
-
-  setCountryCode = (countryCode: string) => {
-    this.setState({
-      countryCode,
-    })
-  }
-
-  setIsValidNumber = (isValidNumber: boolean) => {
-    this.setState({
-      isValidNumber,
-    })
-  }
-
-  onSubmit = async () => {
-    const { e164Number, countryCode, isValidNumber } = this.state
-    if (!e164Number || !isValidNumber || !isE164Number(e164Number)) {
-      this.props.showError(ErrorMessages.INVALID_PHONE_NUMBER)
-      return
-    }
-
-    this.props.setPhoneNumber(e164Number, countryCode)
-    this.props.startVerification()
-
-    navigate(Screens.VerifyVerifying)
-  }
-
-  scrollToEnd = () => {
-    // (Rossy): This does not work without a setTimeout.
-    // I believe the animation of the keyboard showing is the problem
-    setTimeout(() => {
-      if (this.scrollView && this.scrollView.current) {
-        this.scrollView.current.scrollToEnd()
-      }
-    }, 1000)
-  }
-
-  render() {
-    const { t, lng } = this.props
-    // This locks the country code
-    const defaultCountry = this.props.devModeActive ? null : DEFAULT_COUNTRY
-
-    return (
-      <View style={style.container}>
-        <DevSkipButton nextScreen={Screens.VerifyVerifying} />
-        <DisconnectBanner />
-        <ScrollView style={style.content} ref={this.scrollView} keyboardShouldPersistTaps="always">
-          <NuxLogo testID="VerifyLogo" />
-          <Text style={[fontStyles.h1, style.title]}>{t('enterPhoneToVerify')}</Text>
-          <PhoneNumberInput
-            style={style.phoneNumberInput}
-            defaultCountry={defaultCountry}
-            setE164Number={this.setE164Number}
-            setCountryCode={this.setCountryCode}
-            setIsValidNumber={this.setIsValidNumber}
-            onInputFocus={this.scrollToEnd}
-            onInputChange={this.onInputChange}
-            inputCountryPlaceholder={t('country')}
-            inputPhonePlaceholder={t('phoneNumber')}
-            lng={lng}
-          />
-          <View style={style.spacer} />
-        </ScrollView>
-        <View>
-          <Button
-            onPress={this.onSubmit}
-            text={t('startVerification')}
-            standard={true}
-            type={BtnTypes.PRIMARY}
-            testID="VerifyInputAutomaticButton"
-          />
-        </View>
-      </View>
-    )
-  }
-}
-
-const style = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'space-between',
-    paddingHorizontal: 20,
-    // Stop gap solution until we properly fix layout on iOS
-    paddingTop: Platform.OS === 'ios' ? 100 : 20,
-    backgroundColor: colors.background,
-  },
-  content: {
-    flex: 1,
-  },
-  logo: {
-    alignItems: 'center',
-    marginTop: 75,
-    marginBottom: 25,
-  },
-  title: {
-    marginHorizontal: 40,
-  },
-  phoneNumberInput: {
-    marginTop: 10,
-  },
-  disclaimer: {
-    marginTop: 20,
-    marginBottom: 40,
-    textAlign: 'center',
-    color: colors.dark,
-  },
-  spacer: {
-    height: 100,
-  },
-})
-
-export default componentWithAnalytics(
-  connect<StateProps, DispatchProps, {}, RootState>(
-    mapStateToProps,
-    mapDispatchToProps
-  )(withNamespaces('nuxVerification2')(Input))
-)
diff --git a/packages/mobile/src/verify/VerificationLoadingScreen.tsx b/packages/mobile/src/verify/VerificationLoadingScreen.tsx
new file mode 100644
index 00000000000..8e219debfaa
--- /dev/null
+++ b/packages/mobile/src/verify/VerificationLoadingScreen.tsx
@@ -0,0 +1,58 @@
+import colors from '@celo/react-components/styles/colors'
+import * as React from 'react'
+import { withNamespaces, WithNamespaces } from 'react-i18next'
+import { ScrollView, StyleSheet } from 'react-native'
+import SafeAreaView from 'react-native-safe-area-view'
+import componentWithAnalytics from 'src/analytics/wrapper'
+import Carousel, { CarouselItem } from 'src/components/Carousel'
+import { Namespaces } from 'src/i18n'
+import { headerWithCancelButton } from 'src/navigator/Headers'
+
+export class VerificationLoadingScreen extends React.Component<WithNamespaces> {
+  static navigationOptions = headerWithCancelButton
+
+  render() {
+    // const { t } = this.props
+    const items: CarouselItem[] = [
+      {
+        text: 'Test 1',
+      },
+      {
+        text: 'Test 2',
+      },
+      {
+        text: 'Test 3',
+      },
+    ]
+    return (
+      <SafeAreaView style={styles.container}>
+        <ScrollView contentContainerStyle={styles.scrollContainer}>
+          {/* <DevSkipButton nextScreen={Screens.WalletHome} /> */}
+          <Carousel containerStyle={styles.carouselContainer} items={items} />
+        </ScrollView>
+      </SafeAreaView>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'space-between',
+    backgroundColor: colors.backgroundDarker,
+  },
+  scrollContainer: {
+    flex: 1,
+    padding: 30,
+    paddingTop: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  carouselContainer: {
+    marginVertical: 30,
+  },
+})
+
+export default componentWithAnalytics(
+  withNamespaces(Namespaces.nuxVerification2)(VerificationLoadingScreen)
+)
diff --git a/packages/mobile/src/verify/Verify.test.tsx b/packages/mobile/src/verify/Verify.test.tsx
index a4200af9d84..b0e15271f4e 100644
--- a/packages/mobile/src/verify/Verify.test.tsx
+++ b/packages/mobile/src/verify/Verify.test.tsx
@@ -2,7 +2,6 @@ import * as React from 'react'
 import 'react-native'
 import { Provider } from 'react-redux'
 import * as renderer from 'react-test-renderer'
-import { Input } from 'src/verify/Input'
 import { Verified } from 'src/verify/Verified'
 import Verifying from 'src/verify/Verifying'
 import { VerifyPhoneEducation } from 'src/verify/VerifyPhoneEducation'
@@ -20,22 +19,6 @@ it('renders the Education step correctly', () => {
   expect(tree).toMatchSnapshot()
 })
 
-it('renders the Input step correctly', () => {
-  const tree = renderer.create(
-    <Provider store={store}>
-      <Input
-        devModeActive={false}
-        showError={jest.fn()}
-        hideAlert={jest.fn()}
-        setPhoneNumber={jest.fn()}
-        startVerification={jest.fn()}
-        {...getMockI18nProps()}
-      />
-    </Provider>
-  )
-  expect(tree).toMatchSnapshot()
-})
-
 describe('Verifying process', () => {
   it('renders the initial verifying state correctly', () => {
     const tree = renderer.create(
diff --git a/packages/mobile/src/verify/__snapshots__/Verify.test.tsx.snap b/packages/mobile/src/verify/__snapshots__/Verify.test.tsx.snap
index 53c2c91e662..34e9de0626c 100644
--- a/packages/mobile/src/verify/__snapshots__/Verify.test.tsx.snap
+++ b/packages/mobile/src/verify/__snapshots__/Verify.test.tsx.snap
@@ -2346,452 +2346,6 @@ exports[`renders the Education step correctly 1`] = `
 </SafeAreaView>
 `;
 
-exports[`renders the Input step correctly 1`] = `
-<View
-  style={
-    Object {
-      "backgroundColor": "#FFFFFF",
-      "flex": 1,
-      "justifyContent": "space-between",
-      "paddingHorizontal": 20,
-      "paddingTop": 20,
-    }
-  }
->
-  <View
-    style={
-      Object {
-        "height": 35,
-        "paddingRight": 10,
-        "paddingTop": 10,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-        "width": 70,
-        "zIndex": 100,
-      }
-    }
-  >
-    <Text
-      accessible={true}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-    >
-         
-    </Text>
-  </View>
-  <RCTScrollView
-    keyboardShouldPersistTaps="always"
-    style={
-      Object {
-        "flex": 1,
-      }
-    }
-  >
-    <View>
-      <View
-        style={
-          Array [
-            Object {
-              "alignItems": "center",
-              "marginBottom": 20,
-            },
-            Object {},
-          ]
-        }
-        testID="VerifyLogo"
-      >
-        <Image
-          resizeMode="contain"
-          source={
-            Object {
-              "testUri": "../../../packages/mobile/src/images/coins-logo.png",
-            }
-          }
-          style={
-            Object {
-              "height": 35,
-              "width": 35,
-            }
-          }
-        />
-      </View>
-      <Text
-        style={
-          Array [
-            Object {
-              "color": "#2E3338",
-              "fontFamily": "Hind-Light",
-              "fontSize": 22,
-              "paddingBottom": 20,
-              "textAlign": "center",
-            },
-            Object {
-              "marginHorizontal": 40,
-            },
-          ]
-        }
-      >
-        enterPhoneToVerify
-      </Text>
-      <View
-        style={
-          Array [
-            Object {
-              "marginTop": 10,
-            },
-            Object {
-              "backgroundColor": "#FFFFFF",
-              "position": "relative",
-            },
-          ]
-        }
-      >
-        <View
-          style={
-            Array [
-              Object {
-                "flex": 1,
-              },
-              undefined,
-            ]
-          }
-        >
-          <View
-            style={
-              Array [
-                Object {
-                  "borderColor": "#b9b9b9",
-                  "borderRadius": 1,
-                  "borderWidth": 1,
-                  "marginBottom": 0,
-                },
-                Array [
-                  Object {
-                    "borderColor": "#D1D5D8",
-                    "borderRadius": 3,
-                    "borderWidth": 1,
-                  },
-                  Object {
-                    "height": 50,
-                  },
-                  Object {
-                    "marginTop": 1,
-                    "padding": 3,
-                  },
-                ],
-              ]
-            }
-          >
-            <View
-              style={
-                Array [
-                  Object {
-                    "alignItems": "center",
-                    "flex": 1,
-                    "flexDirection": "row",
-                    "justifyContent": "center",
-                  },
-                  Array [
-                    Object {
-                      "backgroundColor": "white",
-                      "height": 40,
-                      "paddingLeft": 3,
-                    },
-                    undefined,
-                  ],
-                ]
-              }
-            >
-              <TextInput
-                allowFontScaling={true}
-                autoCapitalize="none"
-                autoCorrect={false}
-                data={Array []}
-                defaultValue=""
-                flatListProps={Object {}}
-                inputContainerStyle={
-                  Array [
-                    Object {
-                      "borderColor": "#D1D5D8",
-                      "borderRadius": 3,
-                      "borderWidth": 1,
-                    },
-                    Object {
-                      "height": 50,
-                    },
-                    Object {
-                      "marginTop": 1,
-                      "padding": 3,
-                    },
-                  ]
-                }
-                keyExtractor={[Function]}
-                keyboardShouldPersistTaps="always"
-                listContainerStyle={
-                  Object {
-                    "flex": 1,
-                    "padding": 0,
-                    "position": "relative",
-                    "top": 3,
-                  }
-                }
-                listStyle={
-                  Array [
-                    Object {
-                      "borderColor": "#D1D5D8",
-                      "borderRadius": 3,
-                      "borderWidth": 1,
-                    },
-                    Object {
-                      "backgroundColor": "#FFFFFF",
-                      "borderColor": "#D1D5D8",
-                      "borderRadius": 3,
-                      "borderTopWidth": 1,
-                      "borderWidth": 1,
-                      "flex": 1,
-                      "marginHorizontal": 0,
-                      "paddingHorizontal": 0,
-                      "paddingVertical": 6,
-                    },
-                  ]
-                }
-                onBlur={[Function]}
-                onChangeText={[Function]}
-                onFocus={[Function]}
-                onStartShouldSetResponderCapture={[Function]}
-                placeholder="country"
-                placeholderTextColor="#D1D5D8"
-                rejectResponderTermination={true}
-                renderItem={[Function]}
-                renderSeparator={null}
-                renderTextInput={[Function]}
-                style={
-                  Object {
-                    "backgroundColor": "#FFFFFF",
-                    "borderColor": "#D1D5D8",
-                    "borderRadius": 3,
-                    "flex": 1,
-                    "fontFamily": "Hind-Regular",
-                    "padding": 8,
-                  }
-                }
-                testID="CountryNameField"
-                underlineColorAndroid="transparent"
-                value=""
-              />
-            </View>
-          </View>
-          <View
-            onStartShouldSetResponderCapture={[Function]}
-            style={
-              Object {
-                "flex": 1,
-                "padding": 0,
-                "position": "relative",
-                "top": 3,
-              }
-            }
-          />
-        </View>
-        <View
-          style={
-            Array [
-              Object {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "marginTop": 5,
-                "paddingVertical": 2,
-              },
-              Object {
-                "borderColor": "#D1D5D8",
-                "borderRadius": 3,
-                "borderWidth": 1,
-              },
-            ]
-          }
-        >
-          <Text
-            style={
-              Object {
-                "lineHeight": 35,
-                "textAlign": "center",
-                "width": 60,
-              }
-            }
-          >
-            
-          </Text>
-          <View
-            style={
-              Object {
-                "borderColor": "#D1D5D8",
-                "borderRightWidth": 1,
-                "height": 35,
-              }
-            }
-          />
-          <View
-            style={
-              Array [
-                Object {
-                  "alignItems": "center",
-                  "flex": 1,
-                  "flexDirection": "row",
-                  "justifyContent": "center",
-                },
-                Array [
-                  Object {
-                    "height": 50,
-                  },
-                  Object {
-                    "flex": 1,
-                    "marginLeft": 9,
-                  },
-                ],
-              ]
-            }
-          >
-            <TextInput
-              allowFontScaling={true}
-              countryCallingCode=""
-              keyboardType="phone-pad"
-              onBlur={[Function]}
-              onChangeText={[Function]}
-              onFocus={[Function]}
-              placeholder="phoneNumber"
-              placeholderTextColor="#D1D5D8"
-              rejectResponderTermination={true}
-              style={
-                Object {
-                  "backgroundColor": "#FFFFFF",
-                  "borderColor": "#D1D5D8",
-                  "borderRadius": 3,
-                  "flex": 1,
-                  "fontFamily": "Hind-Regular",
-                  "padding": 8,
-                }
-              }
-              testID="PhoneNumberField"
-              underlineColorAndroid="transparent"
-              validator="phone"
-              value=""
-            />
-          </View>
-        </View>
-      </View>
-      <View
-        style={
-          Object {
-            "height": 100,
-          }
-        }
-      />
-    </View>
-  </RCTScrollView>
-  <View>
-    <View
-      style={
-        Array [
-          Object {
-            "alignItems": "center",
-            "borderRadius": 3,
-            "flexDirection": "row",
-          },
-          Object {
-            "marginVertical": 10,
-          },
-          Object {
-            "marginBottom": 10,
-          },
-          undefined,
-          Object {
-            "backgroundColor": "#42D689",
-          },
-        ]
-      }
-    >
-      <View
-        accessible={true}
-        focusable={true}
-        isTVSelectable={true}
-        nativeBackgroundAndroid={
-          Object {
-            "attribute": "selectableItemBackground",
-            "type": "ThemeAttrAndroid",
-          }
-        }
-        onClick={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          Array [
-            Object {
-              "alignItems": "center",
-              "flex": 1,
-              "justifyContent": "center",
-            },
-            Object {
-              "backgroundColor": "#42D689",
-            },
-            Object {
-              "height": 50,
-            },
-            Object {
-              "borderColor": "#42D689",
-              "borderRadius": 3,
-              "borderWidth": 2,
-            },
-          ]
-        }
-        testID="VerifyInputAutomaticButton"
-      >
-        <View
-          style={
-            Object {
-              "alignItems": "center",
-              "flex": 1,
-              "flexDirection": "row",
-              "justifyContent": "space-between",
-            }
-          }
-        >
-          <Text
-            style={
-              Array [
-                Object {
-                  "fontFamily": "Hind-SemiBold",
-                  "fontSize": 16,
-                },
-                Object {
-                  "color": "#FFFFFF",
-                },
-                Object {
-                  "paddingLeft": 5,
-                  "paddingRight": 5,
-                },
-              ]
-            }
-          >
-            startVerification
-          </Text>
-        </View>
-      </View>
-    </View>
-  </View>
-</View>
-`;
-
 exports[`renders the Verified step correctly 1`] = `
 <SafeAreaView
   style={
diff --git a/packages/react-components/styles/colors.tsx b/packages/react-components/styles/colors.tsx
index 83f44646825..e94e0b8d6b0 100644
--- a/packages/react-components/styles/colors.tsx
+++ b/packages/react-components/styles/colors.tsx
@@ -1,6 +1,7 @@
 // Todo make the casing consistent with these
 export default {
   background: '#FFFFFF',
+  backgroundDarker: '#FAFAFA',
   loadingBarGrey: '#DBDBDB',
   darkGrey: '#3D3D3D',
   gray: 'rgba(0, 0, 0, .4)',
diff --git a/yarn.lock b/yarn.lock
index 35fe2db7a33..bf4ea74db6f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5409,6 +5409,14 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-native-snap-carousel@^3.7.4":
+  version "3.7.4"
+  resolved "https://registry.yarnpkg.com/@types/react-native-snap-carousel/-/react-native-snap-carousel-3.7.4.tgz#1e1ad5b5314715d538f6785b4f3a6590a036a6bd"
+  integrity sha512-Egwj264i8lQtp4O8+TXse2yagW5im8oPzPcfWzIEYspKspPE0NikqWFtpVrecgbd/uwhwEjLXLY5kEXOvpiJjA==
+  dependencies:
+    "@types/react" "*"
+    "@types/react-native" "*"
+
 "@types/react-native@*":
   version "0.55.8"
   resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.55.8.tgz#31a6b42852088742e7464876742081a2c1ef3fe7"
@@ -26279,6 +26287,14 @@ rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-addons-shallow-compare@15.6.2:
+  version "15.6.2"
+  resolved "https://registry.yarnpkg.com/react-addons-shallow-compare/-/react-addons-shallow-compare-15.6.2.tgz#198a00b91fc37623db64a28fd17b596ba362702f"
+  integrity sha1-GYoAuR/DdiPbZKKP0XtZa6NicC8=
+  dependencies:
+    fbjs "^0.8.4"
+    object-assign "^4.1.0"
+
 react-apollo@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/react-apollo/-/react-apollo-2.4.1.tgz#89db63ebacf01c1603553bb476f089492aaeab2c"
@@ -26779,6 +26795,14 @@ react-native-share@^2.0.0:
   resolved "https://registry.yarnpkg.com/react-native-share/-/react-native-share-2.0.0.tgz#4543a746013e0d8fa9f765fb8937007cfbcffcf7"
   integrity sha512-J8Xl3mq0L9KDFtSYtKsQDAnZWw/niZIpAD1PRiNfZFHo44Rc+oS2bEIhskNnoQXKEgBNdPzCl/DenMXYAHXRYg==
 
+react-native-snap-carousel@^3.8.4:
+  version "3.8.4"
+  resolved "https://registry.yarnpkg.com/react-native-snap-carousel/-/react-native-snap-carousel-3.8.4.tgz#4c749c6a714d46ed82de527233850cb5da41bc62"
+  integrity sha512-KMxLl75Tyf12DzeTCtV7xU0KuPZQQs/2+2iM90cgxcm3lrg4+hLXff5/61ynasBkzzJ5v4bTRq5CEy/qGUJVQw==
+  dependencies:
+    prop-types "^15.6.1"
+    react-addons-shallow-compare "15.6.2"
+    
 react-native-sms@^1.9.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/react-native-sms/-/react-native-sms-1.9.0.tgz#362d94f75664d45144433d820155d9da66adf053"