ordering-ui-react-native 0.24.43-test → 0.25.1

package/themes/uber-eats/src/types/ordering-api-sdk/index.d.ts

@@ -1 +1 @@
-declare module 'ordering-api-sdk'
+declare module 'ordering-api-sdk'

package/themes/uber-eats/src/types/ordering-components/index.d.ts

@@ -1 +1 @@
-declare module 'ordering-components/native';
+declare module 'ordering-components/native';

package/themes/uber-eats/src/types/react-hook-form/index.d.ts

@@ -1 +1 @@
-declare module 'react-hook-form';
+declare module 'react-hook-form';

package/themes/uber-eats/src/types/react-native-credit-card-input/index.d.ts

@@ -1 +1 @@
-declare module 'react-native-credit-card-input';
+declare module 'react-native-credit-card-input';

package/themes/uber-eats/src/types/react-native-fbsdk/index.d.ts

@@ -1 +1 @@
-declare module 'react-native-fbsdk';
+declare module 'react-native-fbsdk';

package/themes/uber-eats/src/types/react-native-gesture-handler/index.d.ts

@@ -1 +1 @@
-declare module 'react-native-gesture-handler';
+declare module 'react-native-gesture-handler';

package/themes/uber-eats/src/types/react-native-gifted-chat/index.d.ts

@@ -1 +1 @@
-declare module 'react-native-gifted-chat'
+declare module 'react-native-gifted-chat'

package/themes/uber-eats/src/types/react-native-image-picker/index.d.ts

@@ -1 +1 @@
-declare module 'react-native-image-picker'
+declare module 'react-native-image-picker'

package/themes/uber-eats/src/types/react-native-restart/index.d.ts

@@ -1 +1 @@
-declare module 'react-native-restart';
+declare module 'react-native-restart';

package/themes/uber-eats/src/types/styled-components/index.d.ts

@@ -1 +1 @@
-declare module 'styled-components/native';
+declare module 'styled-components/native';

package/themes/uber-eats/src/utils/index.tsx

@@ -1,191 +1,191 @@
-import React from 'react';
-import FontAwesome from 'react-native-vector-icons/FontAwesome';
-import {CODES} from 'ordering-components/native'
-
-export const flatArray = (arr: any) => [].concat(...arr)
-
-/**
- * Function to return the traduction depending of a key 't'
- * @param {string} key for traduction
- */
-export const getTraduction = (key: string, t: any) => {
-
-  const keyList: any = {
-    // Add the key and traduction that you need below
-    ERROR_ORDER_WITHOUT_CART: 'The order was placed without a cart',
-    ERROR_INVALID_COUPON: "The coupon doesn't exist",
-    ERROR_IVALID_COUPON_MINIMUM: 'You must have more products in your cart to use the coupon',
-    ERROR_ADD_PRODUCT_VERY_FAR_FOR_PICKUP: 'The business is too far for order type pickup',
-    ERROR_PLACE_PAY_WITH_CARD2: 'An error occurred while trying to pay by card',
-    ERROR_ADD_PRODUCT_BUSINESS_CLOSED: 'The business is closed at the moment',
-    INTERNAL_ERROR: 'Server Error, please wait, we are working to fix it',
-    ERROR_NOT_FOUND_BUSINESSES: 'No businesses found near your location',
-    YOU_DO_NOT_HAVE_PERMISSION: 'You do not have permission',
-    INVALID_CODE: 'Invalid verify code',
-    STRIPE_ERROR: 'Payment service error. Try again later.',
-    ERROR_AUTH_TWILIO_DISABLED: 'Auth error, twilio is disabled',
-    ERROR_CART_SELECT_PAYMETHOD: 'An error occurred with selected pay method',
-    ERROR_YOU_HAVE_ACTIVE_CART: 'You can\'t reorder this cart',
-    ERROR_YOU_HAVE_NOT_CART: 'Cart not found',
-    ERROR_PLACE_PAY_WITH_REDIRECT: 'An error occurred while trying to pay by redirect',
-    ERROR_PLACE_PAY_WITH_CARD1: 'An error occurred while trying to pay by card',
-    ERROR_PLACE_PAY_WITH_PAYPAL_CAPTURE: 'An error occurred while trying to pay by PayPal',
-    ERROR_ADD_PRODUCT_VERY_FAR_FOR_DELIVERY: 'Error adding product, very far for delivery',
-    ERROR_PRODUCT_NOT_FOUND: 'Error with the product'
-  }
-
-  return keyList[key] ? t(key, keyList[key]) : t(key)
-}
-
-/**
- * Function to convert delivery time in minutes
- * @param {string} time business delivery time
- */
-export const convertHoursToMinutes = (time: any) => {
-  if (!time) return '0min'
-  const [hour, minute] = time.split(':')
-  const result = (parseInt(hour, 10) * 60) + parseInt(minute, 10)
-  return `${result}min`
-}
-
-export const getIconCard = (brand: string, size: number) => {
-  const value = brand?.toLowerCase()
-  switch (value) {
-    case 'visa':
-      return (
-        FontAwesome && <FontAwesome
-          name='cc-visa'
-          size={size}
-          color={'#000'}
-        />
-      )
-    case 'mastercard':
-      return (
-        FontAwesome && <FontAwesome
-          name='cc-mastercard'
-          size={size}
-          color={'#000'}
-        />
-      )
-    case 'amex':
-      return (
-        FontAwesome && <FontAwesome
-          name='cc-amex'
-          size={size}
-          color={'#000'}
-        />
-      )
-    case 'discover':
-      return (
-        FontAwesome && <FontAwesome
-          name='cc-discover'
-          size={size}
-          color={'#000'}
-        />
-      )
-    case 'jcb':
-      return (
-        FontAwesome && <FontAwesome
-          name='cc-jcb'
-          size={size}
-          color={'#000'}
-        />
-      )
-    case 'diners-club':
-      return (
-        FontAwesome && <FontAwesome
-          name='cc-diners-club'
-          size={size}
-          color={'#000'}
-        />
-      )
-    default:
-      return (
-        FontAwesome && <FontAwesome
-          name='credit-card-alt'
-          size={size}
-          color={'#000'}
-        />
-      )
-  }
-}
-/**
- * Function to return a static google maps image based in location
- * @param {object} param object with latitude and logitude
- */
- export const getGoogleMapImage = ({ lat, lng }: any, apiKey: string) => {
-  return `https://maps.googleapis.com/maps/api/staticmap?size=500x190&center=${lat},${lng}&zoom=17&scale=2&maptype=roadmap&&markers=icon:https://res.cloudinary.com/ditpjbrmz/image/upload/f_auto,q_auto,w_45,q_auto:best,q_auto:best/v1564675872/marker-customer_kvxric.png%7Ccolor:white%7C${lat},${lng}&key=${apiKey}`
-}
-/**
- * List of fields with correct order
- */
-export const fieldsToSort = ['name', 'middle_name', 'lastname', 'second_lastname', 'email'];
-/**
- * Function to return a array sorted by certain fields
- * @param fields Array with right order
- * @param array Array to sort
- */
-export const sortInputFields = ({ fields, values }: any) => {
-  let fieldsBase = fields;
-  const fieldsSorted: any = [];
-  const fieldsArray = Array.isArray(values) ? values : values && Object.values(values);
-
-  if (!fieldsBase) {
-    fieldsBase = fieldsToSort
-  }
-
-  fieldsBase.forEach((f: any) => {
-    fieldsArray && fieldsArray.forEach((field: any) => {
-      if (f === field.code) {
-        fieldsSorted.push(field)
-      }
-    })
-  });
-  return fieldsSorted;
-}
-
-export const transformCountryCode = (countryCode : number) => {
-  const code = CODES.find((code : any) => code.phoneCode === countryCode)
-  return code?.countryCode
-}
-
-/**
- * Function to check if a number is decimal or not
- * @param {*} value number to check if decimal or not
- * @param {*} parser function fallback when is decimal
- * @returns string
- */
- export const verifyDecimals = (value: number, parser: any) => {
-  if (value % 1 === 0) {
-    return value
-  } else {
-    return parser(value)
-  }
-}
-
-/**
- * Function to transform degree to radian
- * @param {number} value for transform
- *
- */
- export const convertToRadian = (value: number) => {
-  return value * Math.PI / 180
-}
-
-/**
- * Function to distance between two locations
- * @param lat1 Lat for first location
- * @param lon1 Lon for first location
- * @param lat2 Lat for second location
- * @param lon2 Lon for second location
- */
- export const getDistance = (lat1: any, lon1: any, lat2: any, lon2: any) => {
-  const R = 6371 // km
-  const dLat = convertToRadian(lat2 - lat1)
-  const dLon = convertToRadian(lon2 - lon1)
-  const curLat1 = convertToRadian(lat1)
-  const curLat2 = convertToRadian(lat2)
-  const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(curLat1) * Math.cos(curLat2)
-  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
-  return R * c
-}
+import React from 'react';
+import FontAwesome from 'react-native-vector-icons/FontAwesome';
+import {CODES} from 'ordering-components/native'
+
+export const flatArray = (arr: any) => [].concat(...arr)
+
+/**
+ * Function to return the traduction depending of a key 't'
+ * @param {string} key for traduction
+ */
+export const getTraduction = (key: string, t: any) => {
+
+  const keyList: any = {
+    // Add the key and traduction that you need below
+    ERROR_ORDER_WITHOUT_CART: 'The order was placed without a cart',
+    ERROR_INVALID_COUPON: "The coupon doesn't exist",
+    ERROR_IVALID_COUPON_MINIMUM: 'You must have more products in your cart to use the coupon',
+    ERROR_ADD_PRODUCT_VERY_FAR_FOR_PICKUP: 'The business is too far for order type pickup',
+    ERROR_PLACE_PAY_WITH_CARD2: 'An error occurred while trying to pay by card',
+    ERROR_ADD_PRODUCT_BUSINESS_CLOSED: 'The business is closed at the moment',
+    INTERNAL_ERROR: 'Server Error, please wait, we are working to fix it',
+    ERROR_NOT_FOUND_BUSINESSES: 'No businesses found near your location',
+    YOU_DO_NOT_HAVE_PERMISSION: 'You do not have permission',
+    INVALID_CODE: 'Invalid verify code',
+    STRIPE_ERROR: 'Payment service error. Try again later.',
+    ERROR_AUTH_TWILIO_DISABLED: 'Auth error, twilio is disabled',
+    ERROR_CART_SELECT_PAYMETHOD: 'An error occurred with selected pay method',
+    ERROR_YOU_HAVE_ACTIVE_CART: 'You can\'t reorder this cart',
+    ERROR_YOU_HAVE_NOT_CART: 'Cart not found',
+    ERROR_PLACE_PAY_WITH_REDIRECT: 'An error occurred while trying to pay by redirect',
+    ERROR_PLACE_PAY_WITH_CARD1: 'An error occurred while trying to pay by card',
+    ERROR_PLACE_PAY_WITH_PAYPAL_CAPTURE: 'An error occurred while trying to pay by PayPal',
+    ERROR_ADD_PRODUCT_VERY_FAR_FOR_DELIVERY: 'Error adding product, very far for delivery',
+    ERROR_PRODUCT_NOT_FOUND: 'Error with the product'
+  }
+
+  return keyList[key] ? t(key, keyList[key]) : t(key)
+}
+
+/**
+ * Function to convert delivery time in minutes
+ * @param {string} time business delivery time
+ */
+export const convertHoursToMinutes = (time: any) => {
+  if (!time) return '0min'
+  const [hour, minute] = time.split(':')
+  const result = (parseInt(hour, 10) * 60) + parseInt(minute, 10)
+  return `${result}min`
+}
+
+export const getIconCard = (brand: string, size: number) => {
+  const value = brand?.toLowerCase()
+  switch (value) {
+    case 'visa':
+      return (
+        FontAwesome && <FontAwesome
+          name='cc-visa'
+          size={size}
+          color={'#000'}
+        />
+      )
+    case 'mastercard':
+      return (
+        FontAwesome && <FontAwesome
+          name='cc-mastercard'
+          size={size}
+          color={'#000'}
+        />
+      )
+    case 'amex':
+      return (
+        FontAwesome && <FontAwesome
+          name='cc-amex'
+          size={size}
+          color={'#000'}
+        />
+      )
+    case 'discover':
+      return (
+        FontAwesome && <FontAwesome
+          name='cc-discover'
+          size={size}
+          color={'#000'}
+        />
+      )
+    case 'jcb':
+      return (
+        FontAwesome && <FontAwesome
+          name='cc-jcb'
+          size={size}
+          color={'#000'}
+        />
+      )
+    case 'diners-club':
+      return (
+        FontAwesome && <FontAwesome
+          name='cc-diners-club'
+          size={size}
+          color={'#000'}
+        />
+      )
+    default:
+      return (
+        FontAwesome && <FontAwesome
+          name='credit-card-alt'
+          size={size}
+          color={'#000'}
+        />
+      )
+  }
+}
+/**
+ * Function to return a static google maps image based in location
+ * @param {object} param object with latitude and logitude
+ */
+ export const getGoogleMapImage = ({ lat, lng }: any, apiKey: string) => {
+  return `https://maps.googleapis.com/maps/api/staticmap?size=500x190&center=${lat},${lng}&zoom=17&scale=2&maptype=roadmap&&markers=icon:https://res.cloudinary.com/ditpjbrmz/image/upload/f_auto,q_auto,w_45,q_auto:best,q_auto:best/v1564675872/marker-customer_kvxric.png%7Ccolor:white%7C${lat},${lng}&key=${apiKey}`
+}
+/**
+ * List of fields with correct order
+ */
+export const fieldsToSort = ['name', 'middle_name', 'lastname', 'second_lastname', 'email'];
+/**
+ * Function to return a array sorted by certain fields
+ * @param fields Array with right order
+ * @param array Array to sort
+ */
+export const sortInputFields = ({ fields, values }: any) => {
+  let fieldsBase = fields;
+  const fieldsSorted: any = [];
+  const fieldsArray = Array.isArray(values) ? values : values && Object.values(values);
+
+  if (!fieldsBase) {
+    fieldsBase = fieldsToSort
+  }
+
+  fieldsBase.forEach((f: any) => {
+    fieldsArray && fieldsArray.forEach((field: any) => {
+      if (f === field.code) {
+        fieldsSorted.push(field)
+      }
+    })
+  });
+  return fieldsSorted;
+}
+
+export const transformCountryCode = (countryCode : number) => {
+  const code = CODES.find((code : any) => code.phoneCode === countryCode)
+  return code?.countryCode
+}
+
+/**
+ * Function to check if a number is decimal or not
+ * @param {*} value number to check if decimal or not
+ * @param {*} parser function fallback when is decimal
+ * @returns string
+ */
+ export const verifyDecimals = (value: number, parser: any) => {
+  if (value % 1 === 0) {
+    return value
+  } else {
+    return parser(value)
+  }
+}
+
+/**
+ * Function to transform degree to radian
+ * @param {number} value for transform
+ *
+ */
+ export const convertToRadian = (value: number) => {
+  return value * Math.PI / 180
+}
+
+/**
+ * Function to distance between two locations
+ * @param lat1 Lat for first location
+ * @param lon1 Lon for first location
+ * @param lat2 Lat for second location
+ * @param lon2 Lon for second location
+ */
+ export const getDistance = (lat1: any, lon1: any, lat2: any, lon2: any) => {
+  const R = 6371 // km
+  const dLat = convertToRadian(lat2 - lat1)
+  const dLon = convertToRadian(lon2 - lon1)
+  const curLat1 = convertToRadian(lat1)
+  const curLat2 = convertToRadian(lat2)
+  const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(curLat1) * Math.cos(curLat2)
+  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
+  return R * c
+}

package/themes/original/src/components/HelpAccountAndPayment/index.tsx

@@ -1,62 +0,0 @@
-import React from 'react'
-import { Platform } from 'react-native'
-import { useLanguage } from 'ordering-components/native'
-import { HelpAccountAndPaymentParams } from '../../types'
-import { OText, OButton, OIcon } from '../shared'
-import { useTheme } from 'styled-components/native'
-import { StyleSheet, TouchableOpacity } from 'react-native'
-import AntDesignIcon from 'react-native-vector-icons/AntDesign'
-
-import {
-  Content,
-  Container
-} from './styles'
-import NavBar from '../NavBar'
-
-export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
-  const {
-    navigation
-  } = props
-  const [, t] = useLanguage()
-  const theme = useTheme()
-
-  const styles = StyleSheet.create({
-    imageStyle: {
-      width: '100%',
-      height: 300,
-      marginVertical: 20
-    },
-  })
-
-  const goToBack = () => navigation?.canGoBack() && navigation.goBack()
-
-  return (
-    <Container>
-      <NavBar
-        title={t('ACCOUNT_PAYMENT_OPTIONS', 'Account and Payment Options')}
-        onActionLeft={goToBack}
-        btnStyle={{ paddingLeft: 0 }}
-        showCall={false}
-      />
-      <Content>
-        <OText mBottom={20}>
-          -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel in congue nisl, nisi. Mauris, condimentum auctor sed cras cursus arcu pellentesque.
-        </OText>
-        <OText mBottom={20}>
-          -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel in congue nisl, nisi. Mauris, condimentum auctor sed cras cursus arcu pellentesque.
-        </OText>
-        <OText mBottom={20}>
-          -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel in congue nisl, nisi. Mauris, condimentum auctor sed cras cursus arcu pellentesque.
-        </OText>
-        <OText>
-          -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel in congue nisl, nisi. Mauris, condimentum auctor sed cras cursus arcu pellentesque.
-        </OText>
-        <OIcon
-          src={theme.images.general.help}
-          style={styles.imageStyle}
-          cover
-        />
-      </Content>
-    </Container>
-  )
-}

package/themes/original/src/components/HelpAccountAndPayment/styles.tsx

@@ -1,12 +0,0 @@
-import styled from 'styled-components/native'
-
-export const Content = styled.View`
-  padding-vertical: 20px;
-  margin-bottom: 20px;
-`
-
-export const Container = styled.ScrollView`
-    position: relative;
-    flex: 1;
-    margin: 10px 0;
-`

package/themes/original/src/components/HelpGuide/index.tsx

@@ -1,68 +0,0 @@
-import React from 'react'
-import { useLanguage } from 'ordering-components/native'
-import { HelpGuideParams } from '../../types'
-import { OText, OIcon } from '../shared'
-import { useTheme } from 'styled-components/native'
-import { Platform, StyleSheet } from 'react-native'
-import NavBar from '../NavBar'
-import {
-  Content,
-  Container
-} from './styles'
-
-export const HelpGuide = (props: HelpGuideParams) => {
-  const {
-    navigation
-  } = props
-  const [, t] = useLanguage()
-  const theme = useTheme()
-
-  const styles = StyleSheet.create({
-    btnBackArrow: {
-      borderWidth: 0,
-      backgroundColor: theme.colors.white,
-      borderColor: theme.colors.white,
-      shadowColor: theme.colors.white,
-      display: 'flex',
-      justifyContent: 'flex-start',
-      paddingLeft: 0,
-    },
-    imageStyle: {
-      width: '100%',
-      height: 120,
-      marginVertical: 20
-    },
-  })
-
-  const goToBack = () => navigation?.canGoBack() && navigation.goBack()
-
-  return (
-    <Container pdng={Platform.OS === 'ios' ? '10px' : '0px'}>
-      <NavBar
-        title={t('GUIDE_TO_ORDERING', 'Guide to Ordering')}
-        onActionLeft={goToBack}
-        btnStyle={{ paddingLeft: 0 }}
-        showCall={false}
-      />
-      <Content>
-        <OText mBottom={15}>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blandit mauris varius faucibus varius condimentum morbi pretium mus. Aliquam bibendum erat venenatis feugiat sed.
-        </OText>
-        <OText mBottom={15}>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blandit mauris varius faucibus varius condimentum morbi pretium mus. Aliquam bibendum erat venenatis feugiat sed.
-        </OText>
-        <OText mBottom={15}>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blandit mauris varius faucibus varius condimentum morbi pretium mus. Aliquam bibendum erat venenatis feugiat sed.
-        </OText>
-        <OText>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blandit mauris varius faucibus varius condimentum morbi pretium mus. Aliquam bibendum erat venenatis feugiat sed.
-        </OText>
-        <OIcon
-          src={theme.images.general.help}
-          style={styles.imageStyle}
-          cover
-        />
-      </Content>
-    </Container>
-  )
-}

package/themes/original/src/components/HelpGuide/styles.tsx

@@ -1,12 +0,0 @@
-import styled from 'styled-components/native'
-
-export const Content = styled.View`
-  padding-vertical: 20px;
-  margin-bottom: 20px;
-`
-export const Container = styled.ScrollView`
-    position: relative;
-    flex: 1;
-    margin: 10px 0;
-    padding-top: ${(props: any) => props.pdng}
-`

package/themes/original/src/components/HelpOrder/index.tsx

@@ -1,71 +0,0 @@
-import React from 'react'
-import { useLanguage } from 'ordering-components/native'
-import { HelpOrderParams } from '../../types'
-import { OText, OIcon } from '../shared'
-import { useTheme } from 'styled-components/native'
-import { StyleSheet } from 'react-native'
-import { WebView } from 'react-native-webview'
-import NavBar from '../NavBar'
-
-import {
-  Content,
-  Container
-} from './styles'
-
-export const HelpOrder = (props: HelpOrderParams) => {
-  const {
-    navigation
-  } = props
-  const [, t] = useLanguage()
-  const theme = useTheme()
-
-  const styles = StyleSheet.create({
-    imageStyle: {
-      width: '100%',
-      height: 120
-    },
-    videoStyle: {
-      height: 200,
-      marginVertical: 20
-    }
-  })
-
-  const goToBack = () => navigation?.canGoBack() && navigation.goBack()
-
-  return (
-    <Container>
-      <NavBar
-        title={t('HELP_WITH_ORDER', 'Help with an order')}
-        onActionLeft={goToBack}
-        btnStyle={{ paddingLeft: 0 }}
-        showCall={false}
-      />
-      <Content>
-        <OText mBottom={20}>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel in congue nisl, nisi. Mauris, condimentum auctor sed cras cursus arcu pellentesque. Sed tempus et, cursus ultricies nisl nisl, in eros.
-          Velit sollicitudin vestibulum massa porttitor sit sed vestibulum turpis.
-          Id id adipiscing sit bibendum aliquet at suspendisse. Posuere felis nec non pulvinar in.
-        </OText>
-        <OIcon
-          src={theme.images.general.help}
-          style={styles.imageStyle}
-          cover
-        />
-        <OText style={{ marginVertical: 20 }}>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel in congue nisl, nisi. Mauris, condimentum auctor sed cras cursus arcu pellentesque. Sed tempus et, cursus ultricies nisl nisl, in eros.
-          Velit sollicitudin vestibulum massa porttitor sit sed vestibulum turpis.
-          Id id adipiscing sit bibendum aliquet at suspendisse. Posuere felis nec non pulvinar in.
-        </OText>
-        <WebView
-          allowsFullscreenVideo
-          allowsInlineMediaPlayback
-          mediaPlaybackRequiresUserAction
-          cacheEnabled={false}
-          cacheMode='LOAD_NO_CACHE'
-          source={{ uri: 'https://www.youtube-nocookie.com/embed/Bi8WLLRzZ1g' }}
-          style={styles.videoStyle}
-        />
-      </Content>
-    </Container>
-  )
-}

package/themes/original/src/components/HelpOrder/styles.tsx

@@ -1,13 +0,0 @@
-import styled from 'styled-components/native'
-
-export const Content = styled.View`
-  padding-vertical: 20px;
-  margin-bottom: 20px;
-`
-
-export const Container = styled.ScrollView`
-    position: relative;
-    flex: 1;
-    margin: 10px 0;
-`
-