[Wallet] Create new carousel component

packages/mobile/package.json

@@ -93,7 +93,7 @@
     "react-native-flag-secure-android": "git://github.com/kristiansorens/react-native-flag-secure-android#e234251",
     "react-native-fs": "^2.14.1",
     "react-native-gesture-handler": "^1.4.1",
-    "react-native-geth": "https://github.com/celo-org/react-native-geth#8ba5091",
+    "react-native-geth": "https://github.com/celo-org/react-native-geth#6f993d9",
     "react-native-install-referrer": "git://github.com/celo-org/react-native-install-referrer#343bf3d",
     "react-native-keep-awake": "^4.0.0",
     "react-native-keyboard-aware-scroll-view": "^0.9.1",
@@ -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",

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)

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,

packages/mobile/src/navigator/NavigatorWrapper.tsx

@@ -1,3 +1,4 @@
+import AsyncStorage from '@react-native-community/async-storage'
 import * as React from 'react'
 import { StyleSheet, View } from 'react-native'
 import { createAppContainer, NavigationState } from 'react-navigation'
@@ -6,6 +7,33 @@ import AlertBanner from 'src/alert/AlertBanner'
 import { recordStateChange, setTopLevelNavigator } from 'src/navigator/NavigationService'
 import Navigator from 'src/navigator/Navigator'
 import BackupPrompt from 'src/shared/BackupPrompt'
+import Logger from 'src/utils/Logger'
+
+// This uses RN Navigation's experimental nav state persistence
+// to improve the hot reloading experience when in DEV mode
+// https://reactnavigation.org/docs/en/state-persistence.html
+function getPersistenceFunctions() {
+  if (!__DEV__) {
+    return undefined
+  }
+
+  const persistenceKey = 'NAV_STATE_PERSIST_KEY'
+  const persistNavigationState = async (navState: any) => {
+    try {
+      await AsyncStorage.setItem(persistenceKey, JSON.stringify(navState))
+    } catch (e) {
+      Logger.error('NavigatorWrapper', 'Error persisting nav state', e)
+    }
+  }
+  const loadNavigationState = async () => {
+    const state = await AsyncStorage.getItem(persistenceKey)
+    return state && JSON.parse(state)
+  }
+  return {
+    persistNavigationState,
+    loadNavigationState,
+  }
+}
 
 const navigationStateChange = (prev: NavigationState, current: NavigationState) =>
   recordStateChange(prev, current)
@@ -26,7 +54,11 @@ export class NavigatorWrapper extends React.Component<Props> {
   render() {
     return (
       <View style={styles.container}>
-        <AppContainer ref={this.setNavigator} onNavigationStateChange={navigationStateChange} />
+        <AppContainer
+          ref={this.setNavigator}
+          onNavigationStateChange={navigationStateChange}
+          {...getPersistenceFunctions()}
+        />
         <View style={styles.floating}>
           <BackupPrompt />
           <AlertBanner />

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