Merge pull request #405 from grusuTagg/tma823-onboarding-revamp

[TMA-823] Onboarding Revamp

1 files changed, 38 insertions, 10 deletions

diff --git a/src/components/onboarding/ArrowButton.tsx b/src/components/onboarding/ArrowButton.tsx
index bf07c6ac..67fd0f62 100644
--- a/src/components/onboarding/ArrowButton.tsx
+++ b/src/components/onboarding/ArrowButton.tsx
@@ -1,23 +1,51 @@
 import React from 'react';
-import {Image, TouchableOpacity, TouchableOpacityProps} from 'react-native';
+import {
+  Image,
+  StyleSheet,
+  TouchableOpacity,
+  TouchableOpacityProps,
+} from 'react-native';
+import {normalize} from '../../utils';
 
 interface ArrowButtonProps extends TouchableOpacityProps {
   direction: 'forward' | 'backward';
   disabled?: boolean;
+  onboarding?: boolean;
 }
-const ArrowButton: React.FC<ArrowButtonProps> = (props: ArrowButtonProps) => {
-  const arrow =
-    props.direction === 'forward'
-      ? props.disabled
-        ? require('../../assets/images/arrow-forward-disabled.png')
-        : require('../../assets/images/arrow-forward-enabled.png')
-      : require('../../assets/images/arrow-backward.png');
+const ArrowButton: React.FC<ArrowButtonProps> = (props) => {
+  const {direction, disabled, onboarding} = props;
+  let uri;
+
+  if (direction === 'forward') {
+    if (disabled) {
+      uri = require('../../assets/images/arrow-forward-disabled.png');
+    } else {
+      uri = require('../../assets/images/arrow-forward-enabled.png');
+    }
+  } else {
+    if (onboarding) {
+      uri = require('../../assets/images/onboarding-backarrow.png');
+    } else {
+      uri = require('../../assets/images/arrow-backward.png');
+    }
+  }
 
   return (
-    <TouchableOpacity {...props}>
-      <Image source={arrow} />
+    <TouchableOpacity style={[styles.defautSize, props.style]} {...props}>
+      <Image style={styles.image} source={uri} />
     </TouchableOpacity>
   );
 };
 
+const styles = StyleSheet.create({
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  defautSize: {
+    width: normalize(29),
+    height: normalize(25),
+  },
+});
+
 export default ArrowButton;