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/assets/images/onboarding-arrow.png     | Bin 385 -> 0 bytes
 src/assets/images/onboarding-backarrow.png | Bin 0 -> 2036 bytes
 src/components/onboarding/ArrowButton.tsx  |  44 +++++++++++++++++++++--------
 src/components/onboarding/TaggInput.tsx    |  11 ++++++--
 4 files changed, 41 insertions(+), 14 deletions(-)
 delete mode 100644 src/assets/images/onboarding-arrow.png
 create mode 100644 src/assets/images/onboarding-backarrow.png

(limited to 'src')

diff --git a/src/assets/images/onboarding-arrow.png b/src/assets/images/onboarding-arrow.png
deleted file mode 100644
index 8cca6502..00000000
Binary files a/src/assets/images/onboarding-arrow.png and /dev/null differ
diff --git a/src/assets/images/onboarding-backarrow.png b/src/assets/images/onboarding-backarrow.png
new file mode 100644
index 00000000..9aaa66cb
Binary files /dev/null and b/src/assets/images/onboarding-backarrow.png differ
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;
diff --git a/src/components/onboarding/TaggInput.tsx b/src/components/onboarding/TaggInput.tsx
index d52117b0..297392e5 100644
--- a/src/components/onboarding/TaggInput.tsx
+++ b/src/components/onboarding/TaggInput.tsx
@@ -1,5 +1,12 @@
 import React from 'react';
-import {View, TextInput, StyleSheet, TextInputProps, ViewStyle, StyleProp} from 'react-native';
+import {
+  View,
+  TextInput,
+  StyleSheet,
+  TextInputProps,
+  ViewStyle,
+  StyleProp,
+} from 'react-native';
 import * as Animatable from 'react-native-animatable';
 import {TAGG_LIGHT_PURPLE} from '../../constants';
 
@@ -7,7 +14,7 @@ interface TaggInputProps extends TextInputProps {
   valid?: boolean;
   invalidWarning?: string;
   attemptedSubmit?: boolean;
-  externalStyles?: Record<string, StyleProp<ViewStyle>>
+  externalStyles?: Record<string, StyleProp<ViewStyle>>;
 }
 /**
  * An input component that receives all props a normal TextInput component does. TaggInput components grow to 60% of their parent's width by default, but this can be set using the `width` prop.
-- 
cgit v1.2.3-70-g09d2