From 8c20f573c29e9e42046aeeefbc786ca30aa74e68 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 7 May 2021 19:06:53 -0400
Subject: added arrow button asset

---
 src/components/onboarding/ArrowButton.tsx | 44 ++++++++++++++++++++++---------
 1 file changed, 32 insertions(+), 12 deletions(-)

(limited to 'src/components/onboarding/ArrowButton.tsx')

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;
-- 
cgit v1.2.3-70-g09d2

