fixed conflicts

App.tsx

@@ -2,11 +2,11 @@ import * as React from 'react';
 import { DefaultTheme, NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import QRCodeScanner from '@/components/QRCodeScanner/QRCodeScanner';
-import ContactPage from '@/screens/ContactPage/contactPage';
+//import Contact from '@/screens/Contact/Contact';
 import HomeScreen from '@/screens/Home/Home';
 import LoginScreen from '@/screens/login/LoginScreen';
-import SearchScreen from '@/screens/SearchScreen/SearchScreen';
 import TreeInfoPage from '@/screens/TreeInfo/TreeInfo';
+import TreeSearch from '@/screens/TreeSearch/TreeSearch';
 import { LoginStackParamList, RootStackParamList } from '@/types/navigation';
 
 const RootStack = createNativeStackNavigator<RootStackParamList>();
@@ -42,15 +42,15 @@ const App = () => {
           options={{ headerShown: false }}
         />
         <RootStack.Screen
-          name="Search"
-          component={SearchScreen}
+          name="TreeSearch"
+          component={TreeSearch}
           options={{ headerShown: false }}
         />
-        <RootStack.Screen
+        {/* <RootStack.Screen
           name="Contact"
-          component={ContactPage}
+          component={Contact}
           options={{ headerShown: false }}
-        />
+        /> */}
       </RootStack.Navigator>
     </NavigationContainer>
   );

src/components/searchBar.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TextInput, View } from 'react-native';
-import { styles } from '../screens/SearchScreen/styles';
+import { styles } from '../screens/TreeSearch/styles';
 
 interface SearchBarProps {
   value: string;

src/icons/ArrowRight.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react';
+import * as React from 'react';
+
+const SvgArrowRight = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={18}
+    height={18}
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#446127"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeMiterlimit={10}
+      strokeWidth={1.5}
+      d="m6.964 14.586 4.458-4.618a1.443 1.443 0 0 0 0-1.984L6.964 3.366"
+    />
+  </svg>
+);
+export default SvgArrowRight;

src/icons/Back.tsx

@@ -0,0 +1,21 @@
+import type { SVGProps } from 'react';
+import * as React from 'react';
+
+const SvgBack = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={18}
+    height={16}
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#fff"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2.5}
+      d="M7.442 14.69 1.33 8.087m0 0 6.113-6.603M1.33 8.087H16"
+    />
+  </svg>
+);
+export default SvgBack;

src/icons/Call.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from 'react';
+import * as React from 'react';
+
+const SvgCall = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={29}
+    height={29}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#446127"
+      d="M26.068 22.361c0 .42-.093.852-.289 1.272s-.45.817-.784 1.19c-.566.63-1.189 1.085-1.893 1.377a5.7 5.7 0 0 1-2.25.443c-1.177 0-2.434-.28-3.761-.852s-2.654-1.341-3.97-2.31a33 33 0 0 1-3.784-3.267 33 33 0 0 1-3.22-3.814c-.945-1.33-1.707-2.66-2.26-3.979q-.832-1.995-.832-3.815c0-.793.139-1.552.416-2.252a5.4 5.4 0 0 1 1.327-1.948c.738-.735 1.546-1.097 2.4-1.097.323 0 .646.07.934.21.3.14.566.35.773.654l2.677 3.815c.208.291.358.56.462.816.104.245.161.49.161.712 0 .28-.08.56-.242.829a4 4 0 0 1-.646.828l-.877.922a.63.63 0 0 0-.185.466c0 .094.012.175.035.268.035.094.07.164.092.234.208.385.566.886 1.073 1.493.52.607 1.073 1.225 1.673 1.844.624.618 1.223 1.19 1.835 1.715.6.513 1.096.863 1.489 1.073.057.023.127.058.207.093a.8.8 0 0 0 .289.047c.196 0 .346-.07.473-.198l.877-.875c.288-.292.565-.514.83-.654.266-.163.531-.245.82-.245.219 0 .45.047.704.152s.519.257.807.455l3.82 2.741c.3.21.507.456.634.747.116.292.185.584.185.91"
+    />
+  </svg>
+);
+export default SvgCall;

src/icons/CallBig.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from 'react';
+import * as React from 'react';
+
+const SvgCallBig = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={56}
+    height={55}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#446127"
+      d="M51.263 42.008c0 .816-.186 1.654-.583 2.47a9.3 9.3 0 0 1-1.587 2.31c-1.143 1.225-2.403 2.108-3.827 2.675-1.4.566-2.916.86-4.55.86-2.38 0-4.923-.543-7.606-1.653s-5.367-2.606-8.027-4.487a66.6 66.6 0 0 1-7.653-6.345 65 65 0 0 1-6.51-7.41c-1.913-2.582-3.453-5.166-4.573-7.726q-1.68-3.875-1.68-7.41c0-1.54.28-3.013.84-4.373.56-1.382 1.446-2.651 2.683-3.784 1.493-1.428 3.127-2.13 4.853-2.13.654 0 1.307.136 1.89.408a3.8 3.8 0 0 1 1.564 1.269l5.413 7.41c.42.566.723 1.087.933 1.585.21.476.327.952.327 1.383 0 .544-.164 1.087-.49 1.609-.303.52-.747 1.064-1.307 1.608l-1.773 1.79c-.257.25-.373.544-.373.907a2 2 0 0 0 .07.521c.07.181.14.317.186.453.42.748 1.143 1.722 2.17 2.9a78 78 0 0 0 3.384 3.58c1.26 1.202 2.473 2.312 3.71 3.332 1.213.997 2.216 1.677 3.01 2.084.116.046.256.114.42.182.186.068.373.09.583.09.397 0 .7-.136.957-.385l1.773-1.7c.583-.566 1.143-.996 1.68-1.268.536-.318 1.073-.476 1.657-.476.443 0 .91.09 1.423.294s1.05.499 1.633.884l7.723 5.325c.607.408 1.027.884 1.284 1.45.233.567.373 1.133.373 1.768"
+    />
+  </svg>
+);
+export default SvgCallBig;

src/icons/Facebook.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from 'react';
+import * as React from 'react';
+
+const SvgFacebook = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={29}
+    height={30}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#fff"
+      d="M26.46 19.914c0 4.398-2.532 7.02-6.779 7.02h-1.388c-.642 0-1.166-.543-1.166-1.208v-6.972c0-.326.256-.604.571-.604l2.053-.037a.376.376 0 0 0 .339-.302l.408-2.307a.362.362 0 0 0-.35-.423l-2.485.036a.603.603 0 0 1-.595-.592l-.047-2.96c0-.194.152-.363.35-.363l2.8-.049a.35.35 0 0 0 .35-.362l-.046-2.9a.35.35 0 0 0-.35-.362l-3.15.048c-1.937.036-3.477 1.68-3.442 3.685l.059 3.323a.59.59 0 0 1-.572.616l-1.4.025a.35.35 0 0 0-.35.362l.035 2.296a.35.35 0 0 0 .35.362l1.4-.024c.327 0 .583.266.595.592l.105 6.888c.011.676-.514 1.232-1.167 1.232H9.905c-4.247 0-6.779-2.622-6.779-7.032V9.788c0-4.398 2.532-7.02 6.779-7.02h9.777c4.246 0 6.778 2.622 6.778 7.02z"
+    />
+  </svg>
+);
+export default SvgFacebook;

src/icons/Instagram.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from 'react';
+import * as React from 'react';
+
+const SvgInstagram = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={28}
+    height={30}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#fff"
+      d="M19.007 2.768H9.579c-4.095 0-6.536 2.622-6.536 7.02v10.114c0 4.41 2.441 7.032 6.536 7.032h9.417c4.095 0 6.536-2.622 6.536-7.02V9.788c.011-4.398-2.43-7.02-6.525-7.02m-4.714 16.771c-2.407 0-4.365-2.102-4.365-4.688s1.957-4.688 4.365-4.688 4.365 2.102 4.365 4.688-1.957 4.688-4.365 4.688m6.66-10.875a1.4 1.4 0 0 1-.236.4 1.3 1.3 0 0 1-.371.253 1.055 1.055 0 0 1-1.227-.254 1.4 1.4 0 0 1-.236-.399 1.3 1.3 0 0 1-.09-.459c0-.157.034-.314.09-.459.056-.157.135-.278.236-.399.259-.278.653-.41 1.013-.326a.7.7 0 0 1 .213.073.8.8 0 0 1 .203.108c.056.037.113.097.169.145.101.121.18.242.236.399.056.145.09.302.09.46 0 .156-.034.313-.09.458"
+    />
+  </svg>
+);
+export default SvgInstagram;

src/icons/Location.tsx

@@ -0,0 +1,25 @@
+import type { SVGProps } from 'react';
+import * as React from 'react';
+
+const SvgLocation = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={29}
+    height={29}
+    fill="none"
+    {...props}
+  >
+    <g clipPath="url(#location_svg__a)">
+      <path
+        fill="#446127"
+        d="M24.51 10.835c-1.211-5.39-5.861-7.817-9.946-7.817h-.011c-4.074 0-8.735 2.415-9.947 7.805-1.35 6.02 2.296 11.118 5.597 14.327a6.24 6.24 0 0 0 4.361 1.785c1.57 0 3.139-.595 4.35-1.785 3.3-3.209 6.946-8.295 5.596-14.315m-9.946 5.845c-2.008 0-3.635-1.646-3.635-3.675s1.627-3.676 3.635-3.676 3.635 1.646 3.635 3.675-1.627 3.676-3.635 3.676"
+      />
+    </g>
+    <defs>
+      <clipPath id="location_svg__a">
+        <path fill="#fff" d="M.718.976H28.41v28H.718z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default SvgLocation;

src/icons/Website.tsx

@@ -0,0 +1,26 @@
+import type { SVGProps } from 'react';
+import * as React from 'react';
+
+const SvgWebsite = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={29}
+    height={29}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#446127"
+      d="M14.564 27.518c-6.842 0-12.404-5.623-12.404-12.542S7.722 2.434 14.564 2.434s12.404 5.624 12.404 12.542-5.562 12.542-12.404 12.542m0-23.334c-5.885 0-10.673 4.842-10.673 10.792s4.788 10.792 10.673 10.792 10.673-4.842 10.673-10.792S20.45 4.184 14.564 4.184"
+    />
+    <path
+      fill="#446127"
+      d="M11.103 26.351H9.949a.877.877 0 0 1-.866-.875c0-.478.37-.863.843-.875a34.77 34.77 0 0 1 0-19.25.865.865 0 0 1-.843-.875c0-.478.393-.875.866-.875h1.153c.277 0 .543.14.704.362a.88.88 0 0 1 .116.793c-2.17 6.592-2.17 13.849 0 20.452a.88.88 0 0 1-.116.793.9.9 0 0 1-.703.35M18.025 26.351a.872.872 0 0 1-.82-1.155c2.17-6.591 2.17-13.848.001-20.452a.88.88 0 0 1 .542-1.108.86.86 0 0 1 1.097.548c2.296 6.954 2.296 14.607 0 21.549a.86.86 0 0 1-.82.618"
+    />
+    <path
+      fill="#446127"
+      d="M14.564 21.043c-3.22 0-6.427-.455-9.52-1.377a.87.87 0 0 1-.865.852.877.877 0 0 1-.865-.875v-1.167c0-.28.138-.548.358-.711.23-.164.519-.21.784-.117a31.9 31.9 0 0 0 20.227 0 .86.86 0 0 1 .785.117c.23.163.358.431.358.711v1.167a.877.877 0 0 1-.866.875.864.864 0 0 1-.865-.852 33.5 33.5 0 0 1-9.531 1.377M24.948 12.351a.8.8 0 0 1-.276-.046 31.9 31.9 0 0 0-20.227 0 .86.86 0 0 1-1.097-.549.89.89 0 0 1 .554-1.108c6.877-2.322 14.446-2.322 21.312 0 .45.152.704.653.542 1.108a.84.84 0 0 1-.808.595"
+    />
+  </svg>
+);
+export default SvgWebsite;

src/icons/X.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from 'react';
+import * as React from 'react';
+
+const SvgX = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={19}
+    height={17}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#fff"
+      fillRule="evenodd"
+      d="M7.45 9.022.705.643h5.341l4.163 5.18L14.656.666h2.942l-5.966 6.925 7.074 8.801h-5.325l-4.507-5.6-4.812 5.585H1.105zm6.707 5.819L3.981 2.196h1.29L15.433 14.84z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgX;

src/icons/Youtube.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from 'react';
+import * as React from 'react';
+
+const SvgYoutube = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={28}
+    height={30}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#fff"
+      d="M19.918 5.184H8.668c-3.375 0-5.625 2.417-5.625 6.042v7.25c0 3.625 2.25 6.042 5.625 6.042h11.25c3.375 0 5.625-2.417 5.625-6.042v-7.25c0-3.625-2.25-6.042-5.625-6.042m-3.499 10.912-2.779 1.788c-1.125.725-2.047.17-2.047-1.245v-3.588c0-1.414.922-1.97 2.047-1.245l2.78 1.788c1.068.701 1.068 1.813 0 2.502"
+    />
+  </svg>
+);
+export default SvgYoutube;

src/icons/index.ts

@@ -0,0 +1,11 @@
+export { default as ArrowRight } from './ArrowRight';
+export { default as Back } from './Back';
+export { default as CallBig } from './CallBig';
+export { default as Call } from './Call';
+export { default as Facebook } from './Facebook';
+export { default as Instagram } from './Instagram';
+export { default as Location } from './Location';
+export { default as OcfLogo } from './OcfLogo';
+export { default as Website } from './Website';
+export { default as X } from './X';
+export { default as Youtube } from './Youtube';

src/screens/Contact/Contact.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import {
+  Linking,
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
+import { RootStackParamList } 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 ContactProps = NativeStackScreenProps<RootStackParamList, 'Contact'>;
+
+export default function Contact({ navigation }: ContactProps) {
+  const openLink = (url: string) => {
+    Linking.openURL(url).catch(err => console.error("Failed to open URL:", err));
+  };
+
+  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.Heading4Contact}>Contact Us</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>
+
+        <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>
+
+        <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>
+  );
+};
+ */

src/screens/Contact/Directory.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import {
+  Linking,
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { styles } from './styles';

src/screens/ContactPage/styles.ts → src/screens/Contact/styles.ts

@@ -7,8 +7,19 @@ export const styles = StyleSheet.create({
     backgroundColor: 'white',
   },
 
-  ocfLogo: {
+  linksButton: {
     width: '100%',
+    height: 66,
+    color: 'gray',
+  },
+
+  contactIcons: {
+    width: 28,
+    height: 28,
+  },
+
+  ocfLogo: {
+    width: 93,
     height: 110,
   },