feat: lofi search screen (#15)

* Updated tree search screen.

---------

Co-authored-by: Chris Torres <[email protected]>

app.json

@@ -8,6 +8,7 @@
     "orientation": "portrait",
     "icon": "./assets/bp-icon.png",
     "userInterfaceStyle": "light",
+    "newArchEnabled": true,
     "plugins": [
       [
         "expo-camera",

package.json

@@ -35,6 +35,7 @@
     "expo-constants": "~17.0.3",
     "expo-crypto": "~14.0.1",
     "expo-dev-client": "~5.0.6",
+    "expo-dev-launcher": "^5.0.14",
     "expo-device": "~7.0.1",
     "expo-font": "^13.0.1",
     "expo-linking": "~7.0.3",
@@ -75,6 +76,7 @@
     "@eslint/object-schema": "^2.1.4",
     "@ianvs/prettier-plugin-sort-imports": "^4.4.0",
     "@types/react": "~18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^8.18.0",
     "@typescript-eslint/parser": "^8.18.0",
     "babel-plugin-module-resolver": "^5.0.2",

src/components/SearchBar.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { TextInput, View } from 'react-native';
+import { styles } from '../screens/TreeSearch/styles';
+
+type SearchBarProps = {
+  value: string;
+  onChange: (text: string) => void;
+};
+
+const SearchBar: React.FC<SearchBarProps> = ({ value, onChange }) => {
+  return (
+    <View>
+      <TextInput
+        style={styles.searchBarInput}
+        placeholder="Search for trees..."
+        value={value}
+        onChangeText={onChange}
+      />
+    </View>
+  );
+};
+
+export default SearchBar;

src/screens/Contact/Contact.tsx

@@ -1,67 +1,75 @@
-import React from 'react';
-import { Image, ScrollView, Text, View } from 'react-native';
+/* import React from 'react';
+import {
+  Linking,
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
-import GoogleSignOutButton from '@/components/GoogleSignOutButton/GoogleSignOutButton';
 import { ContactStackParamList } from '@/types/navigation';
+import ArrowRight from '../svg/arrow-right.svg';
+import Call from '../svg/call.svg';
+import Location from '../svg/location.svg';
+import OcfLogo from '../svg/ocf-logo.svg';
+import Website from '../svg/website.svg';
 import { styles } from './styles';
 
 type ContactScreenProps = NativeStackScreenProps<
   ContactStackParamList,
   'Contact'
 >;
 
-export default function ContactScreen({
-  navigation,
-  route,
-}: ContactScreenProps) {
-  return (
-    <ScrollView style={styles.backgroundContainer}>
-      <View style={styles.imageContainer}>
-        <Image
-          source={{
-            uri: 'https://images.squarespace-cdn.com/content/v1/545bbd7ee4b032c1794c4020/1502738972151-U1234630JTWT5NEITDFG/image-asset.jpeg?format=1500w',
-          }}
-          style={styles.contactImage}
-        />
+export default function ContactScreen({ navigation }: ContactScreenProps) {
+  const openLink = (url: string) => {
+    Linking.openURL(url).catch(err => console.error("Failed to open URL:", err));
+  };
 
-        <View style={styles.contactOverlay}></View>
-      </View>
-
-      <View style={styles.contactInfo}>
-        {/* temporary button */}
-        <GoogleSignOutButton navigation={navigation} route={route} />
+  const openLocation = () => {
+    const locationUrl = 'https://www.google.com/maps/place/Our+City+Forest/@37.590136,-122.3968825,10z/data=!4m20!...';
+    Linking.openURL(locationUrl).catch(err => console.error("Failed to open location:", err));
+  };
 
+  return (
+    <ScrollView style={styles.backgroundContainer}>
+      <View>
         <View>
+          <OcfLogo style={styles.ocfLogo} />
           <Text style={styles.contactHeader}>Contact Us</Text>
         </View>
-        <View>
-          <Text style={styles.contactboldText}>Location</Text>
-          <Text style={styles.contactText}>
-            123 Berkeley Way, San Jose, CA 95035
-          </Text>
-        </View>
+        
+        <TouchableOpacity
+          onPress={() => navigation.navigate('Directory')}
+        >
+          <View style={styles.linksButton}>
+            <Call style={styles.contactIcons} />
+            <Text style={styles.contactboldText}>Directory</Text>
+            <ArrowRight style={styles.contactIcons}  />
+          </View>
+        </TouchableOpacity>
 
-        <View>
-          <Text style={styles.contactboldText}>Hours</Text>
-          <Text style={styles.contactText}>M-TH | 9 AM - 12 PM</Text>
-        </View>
+        <TouchableOpacity
+          onPress={() => openLink('https://www.ourcityforest.org/')}
+        >
+          <View style={styles.linksButton}>
+            <Website style={styles.contactIcons} />
+            <Text style={styles.contactboldText}>Website</Text>
+            <ArrowRight style={styles.contactIcons} />
+          </View>
+        </TouchableOpacity>
 
-        <View>
-          <Text style={styles.contactboldText}>Call</Text>
-          <Text style={styles.contactText}>123 - 456 - 7890</Text>
-        </View>
-
-        <View>
-          <Text style={styles.contactboldText}>Email</Text>
-          <Text style={styles.contactText}>
-            [email protected]
-          </Text>
-        </View>
-
-        <View>
-          <Text style={styles.contactText}>Instagram - Facebook</Text>
-        </View>
+        <TouchableOpacity  
+          onPress={openLocation}
+        >
+          <View style={styles.linksButton}>
+            <Location style={styles.contactIcons} />
+            <Text style={styles.contactboldText}>Visit Us</Text>
+            <ArrowRight style={styles.contactIcons}  />
+          </View>
+        </TouchableOpacity>
       </View>
     </ScrollView>
   );
-}
+};
+
+ */