added arrow button asset

1 files changed, 32 insertions, 12 deletions

diff --git a/src/components/onboarding/ArrowButton.tsx b/src/components/onboarding/ArrowButton.tsx
index 57ebc774..78dbab32 100644
--- a/src/components/onboarding/ArrowButton.tsx
+++ b/src/components/onboarding/ArrowButton.tsx
@@ -1,26 +1,46 @@
 import React from 'react';
-import {Image, TouchableOpacity, TouchableOpacityProps} from 'react-native';
+import {
+  Image,
+  StyleSheet,
+  TouchableOpacity,
+  TouchableOpacityProps,
+} from 'react-native';
 
 interface ArrowButtonProps extends TouchableOpacityProps {
   direction: 'forward' | 'backward';
   disabled?: boolean;
-  onboarding?: 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')
-      ? props.onboarding
-      : require ('../../assets/images/onboarding-arrow.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} />
+      <Image style={styles.image} source={uri} />
     </TouchableOpacity>
   );
 };
 
+const styles = StyleSheet.create({
+  image: {
+    // width: '100%',
+    // height: '100%',
+  },
+});
+
 export default ArrowButton;