andrew-bierman · imrizwan · Feb 23, 2024 · Feb 25, 2024 · Mar 8, 2024
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/about/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/about/index.tsx
@@ -1,5 +1,5 @@
 import About from 'app/screens/about';
-import { Platform, ScrollView, StyleSheet } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
 

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx
@@ -7,19 +7,19 @@ import { useProfileId } from 'app/hooks/user';
 
 const Profile = () => {
   const { id } = useProfileId();
-
+  const metaTitle = id ? `${id}'s Profile` : "Profile"
   return (
     <>
       {Platform.OS === 'web' && (
         <Head>
-          <title>{`${id}'s Profile`}</title>
-          <meta name="description" content={`${id}'s Profile`} />
+          <title>{metaTitle}</title>
+          <meta name="description" content={metaTitle} />
         </Head>
       )}
       <Stack.Screen
         options={{
-          title: `${id}'s Profile`,
-          name: `${id}'s Profile`,
+          title: metaTitle,
+          name: metaTitle,
         }}
       />
       <ProfileContainer id={id} />

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/settings/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/settings/index.tsx
@@ -1,4 +1,4 @@
-import { Platform, ScrollView } from 'react-native';
+import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Settings from 'app/screens/user/Settings';
 import Head from 'expo-router/head';

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/profile/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/profile/index.tsx
@@ -1,5 +1,5 @@
 import ProfileContainer from 'app/screens/user/ProfileContainer';
-import { Platform, ScrollView } from 'react-native';
+import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
 

diff --git a/apps/expo/app/(app)/modal.tsx b/apps/expo/app/(app)/modal.tsx
@@ -1,4 +1,4 @@
-import { Platform, ScrollView, View } from 'react-native';
+import { Platform, View } from 'react-native';
 import { Stack, router, Link } from 'expo-router';
 import Head from 'expo-router/head';
 import { RText } from '@packrat/ui';

diff --git a/apps/expo/ios/packrat.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist b/apps/expo/ios/packrat.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>
diff --git a/apps/next/pages/about/index.tsx b/apps/next/pages/about/index.tsx
@@ -1,5 +1,5 @@
 import About from 'app/screens/about';
-import { Platform, ScrollView, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
 
 // export const runtime = 'experimental-edge'
 

diff --git a/apps/tauri/pages/about/index.tsx b/apps/tauri/pages/about/index.tsx
@@ -1,5 +1,5 @@
 import About from 'app/screens/about';
-import { Platform, ScrollView, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
 
 // export const runtime = 'experimental-edge'
 

diff --git a/packages/app/components/Loader.tsx b/packages/app/components/Loader.tsx
@@ -20,6 +20,7 @@ const loaderStyles = {
     marginTop: 20,
     justifyContent: 'center',
     gap: 8,
+    alignItems: 'center',
   },
   heading: {
     color: '#0a84ff',

diff --git a/packages/app/components/PackOptions/index.tsx b/packages/app/components/PackOptions/index.tsx
@@ -1,44 +1,56 @@
-import { useState } from 'react';
-import { useRouter } from 'app/hooks/router';
-import { RStack, RIconButton, BaseModal } from '@packrat/ui';
+/* eslint-disable react/react-in-jsx-scope */
+import { RStack, RIconButton, BaseModal, View } from '@packrat/ui';
 import { Entypo } from '@expo/vector-icons';
 import { useModalState } from './useModalState';
-import { View } from 'react-native';
+import { Text } from 'react-native';
 
-interface PackOptionsProps {
+interface IPackOptions {
   Edit: React.ReactNode;
   Delete: React.ReactNode;
   Ignore: React.ReactNode;
+  isOpen?: boolean | undefined;
+  hideIcon?: boolean;
+  toggle?: Function | undefined;
 }
 
-export const PackOptions: React.FC<PackOptionsProps> = ({
+export const PackOptions = ({
   Edit,
   Delete,
   Ignore,
-}) => {
+  isOpen,
+  hideIcon = false,
+  toggle,
+}: IPackOptions) => {
   const { isModalOpen, openModal, closeModal } = useModalState();
 
   return (
     <RStack>
       <BaseModal
-        isOpen={isModalOpen}
+        isOpen={isOpen}
+        toggle={toggle}
+        hideIcon={hideIcon}
         onClose={closeModal}
         triggerComponent={<MenuTriggerComponent openModal={openModal} />}
       >
-        <RStack style={{ flexDirection: 'row', alignItems: 'center' }}>
-          {Edit} Edit{' '}
-        </RStack>
-        <RStack style={{ flexDirection: 'row', alignItems: 'center' }}>
-          {Delete} Delete{' '}
-        </RStack>
+        {Edit && (
+          <RStack style={{ flexDirection: 'row', alignItems: 'center' }}>
+            <Text>{Edit} Edit</Text>
+          </RStack>
+        )}
+        {Delete && (
+          <RStack style={{ flexDirection: 'row', alignItems: 'center' }}>
+            <Text> {Delete}Delete </Text>
+          </RStack>
+        )}
         <RStack
           style={{
+            width: 200,
             flexDirection: 'row',
             alignItems: 'center',
-            justifyContent: 'flex-end',
+            justifyContent: 'center',
           }}
         >
-          {Ignore}{' '}
+          <Text>{Ignore}</Text>
         </RStack>
       </BaseModal>
     </RStack>

diff --git a/packages/app/components/ScoreContainer.tsx b/packages/app/components/ScoreContainer.tsx
@@ -241,6 +241,7 @@ const loadStyles = (theme: any) => {
       width: Platform.OS == 'web' ? '60%' : '100%',
     },
     scoreText: {
+      paddingTop: 10,
       color: currentTheme.colors.textPrimary,
       fontSize: 26,
       fontWeight: 'bold',

diff --git a/packages/app/components/card/CustomCard.tsx b/packages/app/components/card/CustomCard.tsx
@@ -69,7 +69,7 @@ export const CustomCard = ({
           )}
         </View>
         <RSeparator />
-        {type === 'pack' ? (
+        {type === 'pack' && (
           <>
             <View
               style={{
@@ -83,7 +83,7 @@ export const CustomCard = ({
             </View>
             <RSeparator />
           </>
-        ) : null}
+        )}
         <View
           style={{
             paddingRight: 16,

diff --git a/packages/app/components/card/LargeCard.tsx b/packages/app/components/card/LargeCard.tsx
@@ -71,7 +71,7 @@ const LargeCard: React.FC<LargeCardProps> = ({
           paddingVertical: 15,
         }}
       >
-        {Icon ? <Icon /> : null}
+        {Icon && <Icon />}
         <RText
           style={{
             color: currentTheme.colors.textPrimary,
@@ -82,7 +82,7 @@ const LargeCard: React.FC<LargeCardProps> = ({
           {title && <RText>{title}</RText>}
         </RText>
       </View>
-      {ContentComponent ? <ContentComponent {...contentProps} /> : null}
+      {ContentComponent && <ContentComponent {...contentProps} />}
       {children}
     </RStack>
   );

diff --git a/packages/app/components/carousel/index.tsx b/packages/app/components/carousel/index.tsx
@@ -1,11 +1,6 @@
-import React, { useRef, useState, ReactNode } from 'react';
-import {
-  ScrollView,
-  Platform,
-  Dimensions,
-  NativeScrollEvent,
-} from 'react-native';
-import { RStack } from '@packrat/ui';
+import React, { useRef, useState, type ReactNode } from 'react';
+import { Platform, Dimensions, type NativeScrollEvent } from 'react-native';
+import { RStack, RScrollView } from '@packrat/ui';
 import ScrollButton from './ScrollButton';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 
@@ -17,7 +12,7 @@ interface CarouselProps {
 const { height, width } = Dimensions.get('window');
 
 const Carousel: React.FC<CarouselProps> = ({ children = [], itemWidth }) => {
-  const scrollViewRef = useRef<ScrollView>(null);
+  const scrollViewRef = useRef<RScrollView>(null);
   const [currentIndex, setCurrentIndex] = useState<number>(0);
   const styles = useCustomStyles(loadStyles);
 
@@ -55,7 +50,7 @@ const Carousel: React.FC<CarouselProps> = ({ children = [], itemWidth }) => {
         disabled={currentIndex === 0}
       />
 
-      <ScrollView
+      <RScrollView
         ref={scrollViewRef}
         horizontal
         scrollEnabled={Platform.OS === 'web'}
@@ -80,7 +75,7 @@ const Carousel: React.FC<CarouselProps> = ({ children = [], itemWidth }) => {
               {child}
             </RStack>
           ))}
-      </ScrollView>
+      </RScrollView>
       <ScrollButton
         direction="right"
         onPress={() => {

diff --git a/packages/app/components/chat/index.tsx b/packages/app/components/chat/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import {
   View,
   Text,
@@ -163,7 +163,7 @@ const ChatComponent: React.FC<ChatComponentProps> = ({
           //       <Text style={styles.newChatButtonText}>New Chat</Text>
           //     </TouchableOpacity>
           //   </Box>
-          // </ScrollView>
+          // </RScrollView>
         )}
         <MessageList messages={parsedMessages} />
         <Form

diff --git a/packages/app/components/destination/index.tsx b/packages/app/components/destination/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { ScrollView, View } from 'react-native';
-import { RText } from '@packrat/ui';
+import { View } from 'react-native';
+import { Container, Text } from 'native-base';
 import { useRouter } from 'app/hooks/router';
 import { createParam } from 'app/hooks/params';
 import useTheme from '../../hooks/useTheme';
@@ -21,6 +21,7 @@ import {
 } from 'app/hooks/destination';
 import { WeatherData } from '../weather/WeatherData';
 import { useGEOLocationSearch } from 'app/hooks/geojson';
+import { RScrollView } from '@packrat/ui';
 
 const DestinationHeader = ({ geoJSON, selectedSearchResult }) => {
   const styles = useCustomStyles(loadStyles);
@@ -99,7 +100,7 @@ export const DestinationPage = () => {
   const map = () => <MapContainer shape={shape} />;
 
   return (
-    <ScrollView>
+    <RScrollView>
       {!isLoading && !isError && (
         <View style={styles.container}>
           <DestinationHeader
@@ -122,7 +123,7 @@ export const DestinationPage = () => {
           <WeatherData geoJSON={currentDestination} />
         </View>
       )}
-    </ScrollView>
+    </RScrollView>
   );
 };
 

diff --git a/packages/app/components/details/index.tsx b/packages/app/components/details/index.tsx
@@ -3,7 +3,7 @@ import { Text } from 'react-native';
 import { CustomCard } from '../card';
 import { RStack } from '@packrat/ui';
 
-interface DetailsComponent {
+interface IDetailsComponent {
   type: string;
   data: any; // Need type for this
   isLoading: boolean;
@@ -19,7 +19,7 @@ export const DetailsComponent = ({
   error,
   additionalComps,
   link,
-}: DetailsComponent) => {
+}: IDetailsComponent) => {
   const renderDetails = () => {
     switch (type) {
       case 'pack':

diff --git a/packages/app/components/feed/FeedCard.tsx b/packages/app/components/feed/FeedCard.tsx
@@ -265,7 +265,7 @@ export default function Card({
                             gap: 8,
                           }}
                         >
-                          {user?._id === owner_id ? null : (
+                          {user?._id !== owner_id && (
                             <TouchableOpacity onPress={handleAddToFavorite}>
                               <AntDesign
                                 name="heart"