This page goes over the map file.

The layout of the page can be broken up into 6 parts:

1. Setup (Imports, useStates, useEffects, and helper functions)
2. The MapView
3. The Calculator Modal
4. The Create Sale Modal
5. The Details View (hidden until a marker on the MapView is clicked)
6. Styling, the stylesheets used on the page.

The top of the file is also subdivided into parts.

First, there's the Imports. The relevant libraries for this page are react-native-maps, which provides the map view, and expo-location, which provides functionality for getting the user's location and for reverse geocaching (more on that later). After that, there's some styling boilerplate, see the styling page for an explanation on that.

Next, are useStates and a useEffect for getting the user's location

• the useEffect asks for the user's permission, then if given sets the latitude and longitude vars to the user's lat and long. otherwise, it defaults to Ruston.
• see the react-native-maps documentation for an explanation of latDelta and lngDelta;
• also worth noting is the helper function getLatLong(address:string), which is an async function that takes an address written out, and returns the latitude and longitude of that address

After that are useStates, useEffects, and interfaces used in making a new sale and grabbing sales from the DB

• There are also functions used for rendering and recording the date and time of an estate sale when creating a new sale.

Then, there are useStates and useEffects for handling when Markers are pressed and showing the details view.

Finally, there are the helper functions that are used throughout the app.

The map is very simple. This is what it looks like:

       <MapView
        ref={mapRef}
        style={styles.map}
        customMapStyle={isDarkMode ? darkMapStyle : []}
        region={{
          latitude: lat,
          longitude: lng,
          latitudeDelta: latDelta,
          longitudeDelta: lngDelta,
        }}
        showsUserLocation={true}
        showsMyLocationButton={true}
      >
        {savedMapList.map((marker, index) => (
          <Marker
            key={index}
            coordinate={marker.latlong}
            title={marker.title}
            onSelect={() => {markerSelected(marker)}}
            onDeselect={() => {markerDeselected(marker)}}
          />
        ))}
      </MapView>

It is a MapView component that takes a region prop for where the map currently is. It also has a customMapStyle prop for rendering the map in darkmode.

The MapView has one child, a Marker component, that renders a list of markers on the map from the savedMapList useEffect. It has two notable props: onSelect, which calls the markerSelected function when the marker is selected, and onDeselect, which calls the markerDeselected function when the marker is deselcted. markerSelected makes the Details View visible and fills it with the data from the marker that was selected. markerDeselected hides the Details View and clears the data from it.

The calculator consists of a button that opens a modal which contains a calculator.

Sale Creation consists of a "+" button that opens a modal to allow users to register a new sale. It has the following fields:

• Sale Name- name of the sale, a text input, required
• Addresses Stuff:
  • Street Address - the address, a text input, required
  • Suite/Apt - a secondary address, a text input, not required
  • City - the city, a text input, required
  • State - state you live in, a drop down menu, required.
  • Zip Code - your zip code, a text input, required
• Dates:
  • Choose Date Button - a PressableOpacity (button) that opens a DatePicker so the user can choose what day they want their sale on, required
  • Choose Start Time - a PressableOpacity (button) that opens a TimePicker so the user can choose what time they want their sale to start, required
  • End Date - a PressableOpacity (button) that opens a TimePicker so the user can choose what time they want their sale to end, required
• Details: any extra details about the sale, a text input, not required
• Website: if the sale is listed on a website (i.e. estatesale.net), user can put the link to it here. a text input, not required

Once the user has filled out the forms, they can press the button "List your sale!" and it will be listed. Alternatively, they can press the cancel button and it will close the modal and remove the information.

When the user clicks on a sale, this view shows up and displays information about the sale. It's quite simple, here's what it looks like:

<View className={`bg-white dark:bg-blue-dark-200 ${showSaleDetails} w-full h-1/3 absolute bottom-0 left-0 border rounded border-blue-light-100 dark:border-white`}>
    <Text className={`${defaultStyle.title} ${nativeWindStyles.descTitle}`}>{focusedSale.title}</Text>
    {focusedSale.details != '' && <Text className={`${defaultStyle.text} ${nativeWindStyles.descText}`}>Details: {focusedSale.details}</Text>}
    <Text className={`${defaultStyle.text} ${nativeWindStyles.descText}`}>Address: {focusedSale.address}</Text>
    <Text className={`${defaultStyle.text} ${nativeWindStyles.descText}`}>Start Date and Time: {focusedSale.dates.startDates[0]}</Text>
    <Text className={`${defaultStyle.text} ${nativeWindStyles.descText}`}>End Date and Time: {focusedSale.dates.endDates[0]}</Text>
    <Text className={`${defaultStyle.text} ${nativeWindStyles.descText}`}>Sale Type: {focusedSale.type}</Text>
    {focusedSale.website !== '' && <Text className={`${defaultStyle.text} ${nativeWindStyles.descText}`}>Links: {focusedSale.website}</Text>}
</View>

The important thing to note is that the z-index of the view is determined by the showSaleDetails useState. It defaults to -10 (so that it's behind the map, and therefore hidden), then when a marker is pressed the z-index is set to 10 (so that it's in front of the map). As mentioned previously, the data is set when the marker is selected and removed when the marker is deselected

There are three styling components:

1. NativeWind Styling: this contains the styles for componets styled with NativeWind.
2. Regular Styling: the style sheet for components that have to use regular styles
3. Dark Map Style: the styling used when the map is in dark mode.