Use babel-plugin-module-resolver (#188)

* Add alias and update eslint/flow to resolve modules

* Update aliases for components and api

* Add other src directories to module resolver aliases

.eslintrc.js

@@ -9,6 +9,7 @@ module.exports = {
   },
   extends: ["airbnb", "plugin:i18next/recommended"],
   plugins: [
+    "module-resolver",
     "react-hooks",
     "react-native",
     "simple-import-sort"
@@ -59,6 +60,7 @@ module.exports = {
     "prefer-destructuring": [2, { object: true, array: false }],
     quotes: [2, "double"],
     "space-in-parens": [2, "always"],
+    "module-resolver/use-alias": 2,
     "no-restricted-globals": 0,
     "no-param-reassign": 0,
     "no-var": 1,
@@ -84,5 +86,10 @@ module.exports = {
   env: {
     jest: true
   },
-  ignorePatterns: ["/coverage/*"]
+  ignorePatterns: ["/coverage/*"],
+  settings: {
+    "import/resolver": {
+      "babel-module": { allowExistingDirectories: true }
+    }
+  }
 };

.flowconfig

@@ -37,6 +37,11 @@ munge_underscores=true
 module.name_mapper='^react-native/\(.*\)$' -> '<PROJECT_ROOT>/node_modules/react-native/\1'
 module.name_mapper='^@?[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '<PROJECT_ROOT>/node_modules/react-native/Libraries/Image/RelativeImageStub'
 
+; https://github.com/facebook/flow/issues/4103#issuecomment-565613909
+; this is used to remove flow errors related to babel-plugin-module-resolver
+module.system.node.allow_root_relative=true
+module.system.node.root_relative_dirname=./src
+
 suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FlowFixMeProps

babel.config.js

@@ -1,6 +1,23 @@
 module.exports = {
   presets: ["module:metro-react-native-babel-preset"],
-  plugins: ["react-native-reanimated/plugin", "transform-inline-environment-variables"],
+  plugins: [
+    "react-native-reanimated/plugin",
+    "transform-inline-environment-variables",
+    ["module-resolver", {
+      alias: {
+        api: "./src/api",
+        components: "./src/components",
+        dictionaries: "./src/dictionaries",
+        i18n: "./src/i18n",
+        images: "./src/images",
+        // for some reason, this doesn't seem to work for models, so I'm leaving that directory out
+        navigation: "./src/navigation",
+        providers: "./src/providers",
+        sharedHelpers: "./src/sharedHelpers",
+        sharedHooks: "./src/sharedHooks",
+        styles: "./src/styles"
+      }
+    }]],
   env: {
     production: {
       plugins: ["react-native-paper/babel"]

index.js

@@ -1,7 +1,7 @@
 // @flow
 
 import "react-native-gesture-handler";
-import "./src/i18n";
+import "i18n";
 
 import inatjs from "inaturalistjs";
 import { AppRegistry } from "react-native";

ios/Podfile.lock

@@ -10,6 +10,9 @@ PODS:
     - React-jsi (= 0.68.2)
     - ReactCommon/turbomodule/core (= 0.68.2)
   - fmt (6.2.1)
+  - GCDWebServer (3.5.4):
+    - GCDWebServer/Core (= 3.5.4)
+  - GCDWebServer/Core (3.5.4)
   - glog (0.3.5)
   - Permission-LocationWhenInUse (3.3.1):
     - RNPermissions
@@ -311,7 +314,8 @@ PODS:
     - React-jsi (= 0.68.2)
     - React-logger (= 0.68.2)
     - React-perflogger (= 0.68.2)
-  - RealmJS (10.20.0-beta.5):
+  - RealmJS (10.21.1):
+    - GCDWebServer
     - React
   - RNAudioRecorderPlayer (3.5.1):
     - React-Core
@@ -438,6 +442,7 @@ DEPENDENCIES:
 SPEC REPOS:
   trunk:
     - fmt
+    - GCDWebServer
 
 EXTERNAL SOURCES:
   boost:
@@ -563,6 +568,7 @@ SPEC CHECKSUMS:
   FBLazyVector: a7a655862f6b09625d11c772296b01cd5164b648
   FBReactNativeSpec: 81ce99032d5b586fddd6a38d450f8595f7e04be4
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
+  GCDWebServer: 2c156a56c8226e2d5c0c3f208a3621ccffbe3ce4
   glog: 476ee3e89abb49e07f822b48323c51c57124b572
   Permission-LocationWhenInUse: 006c85c8de0c05b5d8be8e8029e4f6b813270293
   RCT-Folly: 4d8508a426467c48885f1151029bc15fa5d7b3b8
@@ -600,7 +606,7 @@ SPEC CHECKSUMS:
   React-RCTVibration: 79040b92bfa9c3c2d2cb4f57e981164ec7ab9374
   React-runtimeexecutor: b960b687d2dfef0d3761fbb187e01812ebab8b23
   ReactCommon: 095366164a276d91ea704ce53cb03825c487a3f2
-  RealmJS: 772520fb85c19b65c2ea0c8f9aa6e790a905a377
+  RealmJS: 96af0fcb0bf79530e090067df590650917c27b20
   RNAudioRecorderPlayer: 308940de4f9d1448a064874fd9d83479ae47c7a7
   RNCAsyncStorage: d81ee5c3db1060afd49ea7045ad460eff82d2b7d
   RNCCheckbox: ed1b4ca295475b41e7251ebae046360a703b6eb5

package.json

@@ -86,14 +86,17 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/react-native": "^9.0.0",
     "babel-jest": "^26.6.3",
+    "babel-plugin-module-resolver": "^4.1.0",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^19.0.4",
+    "eslint-import-resolver-babel-module": "^5.3.1",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-flowtype": "^7.0.0",
     "eslint-plugin-i18next": "^6.0.0-2",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "^26.1.3",
     "eslint-plugin-jsx-a11y": "^6.6.0",
+    "eslint-plugin-module-resolver": "^1.5.0",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-native": "^4.0.0",

src/api/messages.js

@@ -1,8 +1,8 @@
 // @flow
 
 import inatjs from "inaturalistjs";
+import MESSAGE_FIELDS from "providers/fields";
 
-import MESSAGE_FIELDS from "../providers/fields";
 import handleError from "./error";
 
 const searchMessages = async ( options: Object ): Promise<any> => {

src/components/Camera/CameraOptionsModal.js

@@ -1,13 +1,12 @@
 // @flow
 
 import { useNavigation } from "@react-navigation/native";
+import TranslatedText from "components/SharedComponents/TranslatedText";
+import { ObsEditContext } from "providers/contexts";
 import * as React from "react";
 import { Pressable, View } from "react-native";
 import { Avatar } from "react-native-paper";
-
-import { ObsEditContext } from "../../providers/contexts";
-import { textStyles, viewStyles } from "../../styles/sharedComponents/modal";
-import TranslatedText from "../SharedComponents/TranslatedText";
+import { textStyles, viewStyles } from "styles/sharedComponents/modal";
 
 type Props = {
   closeModal: ( ) => void

src/components/Camera/FadeInOutView.js

@@ -4,8 +4,7 @@ import type { Node } from "react";
 import React, { useEffect, useRef } from "react";
 import { Animated } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-
-import viewStyles from "../../styles/camera/fadeInOutView";
+import viewStyles from "styles/camera/fadeInOutView";
 
 type Props = {
   savingPhoto: boolean

src/components/Camera/FocusSquare.js

@@ -3,8 +3,7 @@
 import type { Node } from "react";
 import React, { useEffect } from "react";
 import { Animated } from "react-native";
-
-import { viewStyles } from "../../styles/camera/standardCamera";
+import { viewStyles } from "styles/camera/standardCamera";
 
 type Props = {
   tappedCoordinates: Object,

src/components/Camera/PhotoPreview.js

@@ -1,16 +1,15 @@
 // @flow
 
+import MediaViewer from "components/MediaViewer/MediaViewer";
+import MediaViewerModal from "components/MediaViewer/MediaViewerModal";
+import DeletePhotoDialog from "components/SharedComponents/DeletePhotoDialog";
+import PhotoCarousel from "components/SharedComponents/PhotoCarousel";
 import type { Node } from "react";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Text, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-
-import { textStyles, viewStyles } from "../../styles/camera/photoPreview";
-import MediaViewer from "../MediaViewer/MediaViewer";
-import MediaViewerModal from "../MediaViewer/MediaViewerModal";
-import DeletePhotoDialog from "../SharedComponents/DeletePhotoDialog";
-import PhotoCarousel from "../SharedComponents/PhotoCarousel";
+import { textStyles, viewStyles } from "styles/camera/photoPreview";
 
 type Props = {
   photoUris: Array<string>,

src/components/Camera/StandardCamera.js

@@ -2,6 +2,7 @@
 
 import { useNavigation, useRoute } from "@react-navigation/native";
 import { t } from "i18next";
+import { ObsEditContext, RealmContext } from "providers/contexts";
 import type { Node } from "react";
 import React, {
   useContext, useEffect, useRef, useState
@@ -9,12 +10,11 @@ import React, {
 import { Pressable, Text, View } from "react-native";
 import { Avatar, Snackbar, useTheme } from "react-native-paper";
 import { Camera, useCameraDevices } from "react-native-vision-camera";
+import { viewStyles } from "styles/camera/standardCamera";
+import colors from "styles/colors";
+import { textStyles } from "styles/obsDetails/obsDetails";
 
 import Photo from "../../models/Photo";
-import { ObsEditContext, RealmContext } from "../../providers/contexts";
-import { viewStyles } from "../../styles/camera/standardCamera";
-import colors from "../../styles/colors";
-import { textStyles } from "../../styles/obsDetails/obsDetails";
 import CameraView from "./CameraView";
 import FadeInOutView from "./FadeInOutView";
 import PhotoPreview from "./PhotoPreview";

src/components/Explore/BottomCard.js

@@ -1,12 +1,12 @@
 // @flow
 
+import TranslatedText from "components/SharedComponents/TranslatedText";
+import { ExploreContext } from "providers/contexts";
 import type { Node } from "react";
 import React, { useContext } from "react";
 import { View } from "react-native";
+import { viewStyles } from "styles/explore/explore";
 
-import { ExploreContext } from "../../providers/contexts";
-import { viewStyles } from "../../styles/explore/explore";
-import TranslatedText from "../SharedComponents/TranslatedText";
 import DropdownPicker from "./DropdownPicker";
 import FiltersIcon from "./FiltersIcon";
 

src/components/Explore/DropdownPicker.js

@@ -8,9 +8,8 @@ import { Image } from "react-native";
 // and allows users to input immediately instead of first tapping the dropdown
 // this is a placeholder to get functionality working
 import DropDownPicker from "react-native-dropdown-picker";
-
-import useRemoteSearchResults from "../../sharedHooks/useRemoteSearchResults";
-import { imageStyles, viewStyles } from "../../styles/explore/explore";
+import useRemoteSearchResults from "sharedHooks/useRemoteSearchResults";
+import { imageStyles, viewStyles } from "styles/explore/explore";
 
 type Props = {
   searchQuery: string,

src/components/Explore/Explore.js

@@ -1,12 +1,12 @@
 // @flow
 
+import ObservationViews from "components/SharedComponents/ObservationViews/ObservationViews";
+import ViewWithFooter from "components/SharedComponents/ViewWithFooter";
+import { ExploreContext } from "providers/contexts";
 import type { Node } from "react";
 import React, { useContext } from "react";
 import { Dimensions } from "react-native";
 
-import { ExploreContext } from "../../providers/contexts";
-import ObservationViews from "../SharedComponents/ObservationViews/ObservationViews";
-import ViewWithFooter from "../SharedComponents/ViewWithFooter";
 import BottomCard from "./BottomCard";
 
 const { height } = Dimensions.get( "screen" );

src/components/Explore/ExploreFilters.js

@@ -1,18 +1,18 @@
 // @flow
 
 import CheckBox from "@react-native-community/checkbox";
+import InputField from "components/SharedComponents/InputField";
+import ScrollNoFooter from "components/SharedComponents/ScrollNoFooter";
+import TranslatedText from "components/SharedComponents/TranslatedText";
 import { t } from "i18next";
+import { ExploreContext } from "providers/contexts";
 import RadioButtonRN from "radio-buttons-react-native";
 import type { Node } from "react";
 import React, { useContext, useState } from "react";
 import { View } from "react-native";
 import RNPickerSelect from "react-native-picker-select";
+import { pickerSelectStyles, viewStyles } from "styles/explore/exploreFilters";
 
-import { ExploreContext } from "../../providers/contexts";
-import { pickerSelectStyles, viewStyles } from "../../styles/explore/exploreFilters";
-import InputField from "../SharedComponents/InputField";
-import ScrollNoFooter from "../SharedComponents/ScrollNoFooter";
-import TranslatedText from "../SharedComponents/TranslatedText";
 import DropdownPicker from "./DropdownPicker";
 import ExploreFooter from "./ExploreFooter";
 import ResetFiltersButton from "./ResetFiltersButton";

src/components/Explore/ExploreFooter.js

@@ -2,13 +2,12 @@
 
 import { HeaderBackButton } from "@react-navigation/elements";
 import { useNavigation } from "@react-navigation/native";
+import Button from "components/SharedComponents/Buttons/Button";
+import { ExploreContext } from "providers/contexts";
 import type { Node } from "react";
 import React from "react";
 import { View } from "react-native";
-
-import { ExploreContext } from "../../providers/contexts";
-import { viewStyles } from "../../styles/explore/exploreFilters";
-import Button from "../SharedComponents/Buttons/Button";
+import { viewStyles } from "styles/explore/exploreFilters";
 
 const ExploreFooter = ( ): Node => {
   const { applyFilters, resetUnappliedFilters } = React.useContext( ExploreContext );

src/components/Explore/ExploreLanding.js

@@ -1,16 +1,16 @@
 // @flow
 
 import { useNavigation } from "@react-navigation/native";
+import Button from "components/SharedComponents/Buttons/Button";
+import TranslatedText from "components/SharedComponents/TranslatedText";
+import ViewWithFooter from "components/SharedComponents/ViewWithFooter";
+// import DropdownPicker from "./DropdownPicker";
+import { ExploreContext } from "providers/contexts";
 import type { Node } from "react";
 import React, { useContext } from "react";
 import { View } from "react-native";
+import { textStyles, viewStyles } from "styles/explore/explore";
 
-// import DropdownPicker from "./DropdownPicker";
-import { ExploreContext } from "../../providers/contexts";
-import { textStyles, viewStyles } from "../../styles/explore/explore";
-import Button from "../SharedComponents/Buttons/Button";
-import TranslatedText from "../SharedComponents/TranslatedText";
-import ViewWithFooter from "../SharedComponents/ViewWithFooter";
 import FiltersIcon from "./FiltersIcon";
 import TaxonLocationSearch from "./TaxonLocationSearch";
 

src/components/Explore/FiltersIcon.js

@@ -4,8 +4,7 @@ import { useNavigation } from "@react-navigation/native";
 import * as React from "react";
 import { Pressable } from "react-native";
 import IconMaterial from "react-native-vector-icons/MaterialIcons";
-
-import { viewStyles } from "../../styles/observations/messagesIcon";
+import { viewStyles } from "styles/observations/messagesIcon";
 
 const FiltersIcon = ( ): React.Node => {
   const navigation = useNavigation( );

src/components/Explore/ResetFiltersButton.js

@@ -1,11 +1,10 @@
 // @flow
 
+import TranslatedText from "components/SharedComponents/TranslatedText";
+import { ExploreContext } from "providers/contexts";
 import * as React from "react";
 import { Pressable } from "react-native";
-
-import { ExploreContext } from "../../providers/contexts";
-import { viewStyles } from "../../styles/observations/messagesIcon";
-import TranslatedText from "../SharedComponents/TranslatedText";
+import { viewStyles } from "styles/observations/messagesIcon";
 
 const ResetFiltersButton = ( ): React.Node => {
   const { resetFilters } = React.useContext( ExploreContext );

src/components/Explore/TaxonLocationSearch.js

@@ -1,10 +1,10 @@
 // @flow
 
+import TranslatedText from "components/SharedComponents/TranslatedText";
+import { ExploreContext } from "providers/contexts";
 import type { Node } from "react";
 import React, { useCallback, useContext, useState } from "react";
 
-import { ExploreContext } from "../../providers/contexts";
-import TranslatedText from "../SharedComponents/TranslatedText";
 import DropdownPicker from "./DropdownPicker";
 
 const TaxonLocationSearch = ( ): Node => {

src/components/Identify/CardSwipeView.js

@@ -1,13 +1,13 @@
 // @flow
 
+import PlaceholderText from "components/PlaceholderText";
 import type { Node } from "react";
 import React, { useState } from "react";
 import { Image, Text, View } from "react-native";
 import TinderCard from "react-tinder-card";
+import { imageStyles, textStyles, viewStyles } from "styles/identify/identify";
 
 import Observation from "../../models/Observation";
-import { imageStyles, textStyles, viewStyles } from "../../styles/identify/identify";
-import PlaceholderText from "../PlaceholderText";
 import createIdentification from "./helpers/createIdentification";
 import markAsReviewed from "./helpers/markAsReviewed";
 

src/components/Identify/GridItem.js

@@ -1,18 +1,18 @@
 // @flow
 
+import Button from "components/SharedComponents/Buttons/Button";
 import type { Node } from "react";
 import React, { useState } from "react";
 import {
   ActivityIndicator, Image, Pressable, Text, View
 } from "react-native";
-
-import Observation from "../../models/Observation";
 import {
   imageStyles,
   textStyles,
   viewStyles
-} from "../../styles/sharedComponents/observationViews/gridItem";
-import Button from "../SharedComponents/Buttons/Button";
+} from "styles/sharedComponents/observationViews/gridItem";
+
+import Observation from "../../models/Observation";
 import createIdentification from "./helpers/createIdentification";
 
 type Props = {

src/components/Identify/Identify.js

@@ -1,13 +1,13 @@
 // @flow
 
+import DropdownPicker from "components/Explore/DropdownPicker";
+import ViewWithFooter from "components/SharedComponents/ViewWithFooter";
 import type { Node } from "react";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Pressable, Text, View } from "react-native";
+import { viewStyles } from "styles/identify/identify";
 
-import { viewStyles } from "../../styles/identify/identify";
-import DropdownPicker from "../Explore/DropdownPicker";
-import ViewWithFooter from "../SharedComponents/ViewWithFooter";
 import CardSwipeView from "./CardSwipeView";
 import GridView from "./GridView";
 import useObservations from "./hooks/useObservations";

src/components/Identify/helpers/createIdentification.js

@@ -1,9 +1,8 @@
 // @flow
 
+import { getJWTToken } from "components/LoginSignUp/AuthenticationService";
 import inatjs from "inaturalistjs";
 
-import { getJWTToken } from "../../LoginSignUp/AuthenticationService";
-
 const createIdentification = async ( params: Object ): Promise<?number> => {
   const apiToken = await getJWTToken( false );
   const apiParams = {

src/components/Identify/helpers/markAsReviewed.js

@@ -1,9 +1,8 @@
 // @flow
 
+import { getJWTToken } from "components/LoginSignUp/AuthenticationService";
 import inatjs from "inaturalistjs";
 
-import { getJWTToken } from "../../LoginSignUp/AuthenticationService";
-
 const markAsReviewed = async ( id: number ) => {
   const apiToken = await getJWTToken( false );
   try {

src/components/LoginSignUp/Login.js

@@ -2,6 +2,8 @@
 
 import { useNavigation } from "@react-navigation/native";
 import { useQueryClient } from "@tanstack/react-query";
+import Button from "components/SharedComponents/Buttons/Button";
+import { RealmContext } from "providers/contexts";
 import type { Node } from "react";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -20,13 +22,11 @@ import {
   Dialog, Paragraph, Portal, Text, TextInput
 } from "react-native-paper";
 import IconMaterial from "react-native-vector-icons/MaterialIcons";
-
-import { RealmContext } from "../../providers/contexts";
-import colors from "../../styles/colors";
+import colors from "styles/colors";
 import {
   closeButton, imageStyles, textStyles, viewStyles
-} from "../../styles/login/login";
-import Button from "../SharedComponents/Buttons/Button";
+} from "styles/login/login";
+
 import {
   authenticateUser,
   getUsername,
@@ -146,7 +146,7 @@ const Login = ( ): Node => {
       <Image
         style={imageStyles.logo}
         resizeMode="contain"
-        source={require( "../../images/inat_logo.png" )}
+        source={require( "images/inat_logo.png" )}
       />
 
       <Text style={textStyles.header}>{t( "Login-header" )}</Text>

src/components/LoginSignUp/SignUp.js

@@ -6,8 +6,8 @@ import React, { useState } from "react";
 import {
   Button, Text, TextInput, View
 } from "react-native";
+import { textStyles, viewStyles } from "styles/login/login";
 
-import { textStyles, viewStyles } from "../../styles/login/login";
 import { registerUser } from "./AuthenticationService";
 
 const SignUp = (): Node => {

src/components/MediaViewer/CustomImageZoom.js

@@ -4,8 +4,7 @@ import type { Node } from "react";
 import React, { useRef } from "react";
 import { Dimensions, Image, View } from "react-native";
 import ImageZoom from "react-native-image-pan-zoom";
-
-import { imageStyles, viewStyles } from "../../styles/mediaViewer/mediaViewer";
+import { imageStyles, viewStyles } from "styles/mediaViewer/mediaViewer";
 
 // lifted from this issue: https://github.com/ascoders/react-native-image-zoom/issues/42#issuecomment-734209924
 

src/components/MediaViewer/HorizontalScroll.js

@@ -1,12 +1,12 @@
 // @flow
 
+import DeletePhotoDialog from "components/SharedComponents/DeletePhotoDialog";
+import PhotoCarousel from "components/SharedComponents/PhotoCarousel";
 import type { Node } from "react";
 import React, { useRef, useState } from "react";
 import { Dimensions, FlatList } from "react-native";
 
 import Photo from "../../models/Photo";
-import DeletePhotoDialog from "../SharedComponents/DeletePhotoDialog";
-import PhotoCarousel from "../SharedComponents/PhotoCarousel";
 import CustomImageZoom from "./CustomImageZoom";
 
 type Props = {

src/components/MediaViewer/MediaViewer.js

@@ -5,9 +5,9 @@ import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { SafeAreaView } from "react-native";
 import { Appbar, Button, IconButton } from "react-native-paper";
+import colors from "styles/colors";
+import { textStyles, viewStyles } from "styles/mediaViewer/mediaViewer";
 
-import colors from "../../styles/colors";
-import { textStyles, viewStyles } from "../../styles/mediaViewer/mediaViewer";
 import HorizontalScroll from "./HorizontalScroll";
 
 type Props = {

src/components/MediaViewer/MediaViewerModal.js

@@ -4,8 +4,7 @@ import type { Node } from "react";
 import React from "react";
 import { Modal, Portal } from "react-native-paper";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-
-import colors from "../../styles/colors";
+import colors from "styles/colors";
 
 type Props = {
   children: any,

src/components/Messages/MessageList.js

@@ -2,8 +2,7 @@
 
 import * as React from "react";
 import { ActivityIndicator, FlatList, Text } from "react-native";
-
-import { textStyles } from "../../styles/messages/messages";
+import { textStyles } from "styles/messages/messages";
 
 type Props = {
   loading: boolean,

src/components/Messages/Messages.js

@@ -1,11 +1,11 @@
 // @flow
 
+import searchMessages from "api/messages";
+import ViewWithFooter from "components/SharedComponents/ViewWithFooter";
 import type { Node } from "react";
 import React from "react";
+import useQuery from "sharedHooks/useAuthenticatedQuery";
 
-import searchMessages from "../../api/messages";
-import useQuery from "../../sharedHooks/useAuthenticatedQuery";
-import ViewWithFooter from "../SharedComponents/ViewWithFooter";
 import MessageList from "./MessageList";
 
 const Messages = ( ): Node => {

src/components/ObsDetails/ActivityItem.js

@@ -1,24 +1,24 @@
 // @flow
 
+import { isCurrentUser } from "components/LoginSignUp/AuthenticationService";
+import PlaceholderText from "components/PlaceholderText";
+import KebabMenu from "components/SharedComponents/KebabMenu";
+import UserIcon from "components/SharedComponents/UserIcon";
 import { t } from "i18next";
+import { RealmContext } from "providers/contexts";
 import type { Node } from "react";
 import React, { useEffect, useState } from "react";
 import {
   Image, Pressable, Text, View
 } from "react-native";
 import { Menu } from "react-native-paper";
+import { formatIdDate } from "sharedHelpers/dateAndTime";
+import useApiToken from "sharedHooks/useApiToken";
+import { imageStyles, textStyles, viewStyles } from "styles/obsDetails/obsDetails";
 
 import Comment from "../../models/Comment";
 import Taxon from "../../models/Taxon";
 import User from "../../models/User";
-import { RealmContext } from "../../providers/contexts";
-import { formatIdDate } from "../../sharedHelpers/dateAndTime";
-import useApiToken from "../../sharedHooks/useApiToken";
-import { imageStyles, textStyles, viewStyles } from "../../styles/obsDetails/obsDetails";
-import { isCurrentUser } from "../LoginSignUp/AuthenticationService";
-import PlaceholderText from "../PlaceholderText";
-import KebabMenu from "../SharedComponents/KebabMenu";
-import UserIcon from "../SharedComponents/UserIcon";
 import SmallSquareImage from "./SmallSquareImage";
 
 const { useRealm } = RealmContext;
@@ -67,7 +67,7 @@ const ActivityItem = ( {
             && (
             <Image
               style={imageStyles.smallGreenIcon}
-              source={require( "../../images/id_rg.png" )}
+              source={require( "images/id_rg.png" )}
             />
             )}
           <Text style={[textStyles.labels, textStyles.activityCategory]}>

src/components/ObsDetails/DataTab.js

@@ -1,16 +1,16 @@
 // @flow
 
+import DropdownPicker from "components/Explore/DropdownPicker";
+import Map from "components/SharedComponents/Map";
 import { format, parseISO } from "date-fns";
 import { t } from "i18next";
 import type { Node } from "react";
 import React, { useState } from "react";
 import { Text, View } from "react-native";
 import IconMaterial from "react-native-vector-icons/MaterialIcons";
+import colors from "styles/colors";
+import { textStyles, viewStyles } from "styles/obsDetails/obsDetails";
 
-import colors from "../../styles/colors";
-import { textStyles, viewStyles } from "../../styles/obsDetails/obsDetails";
-import DropdownPicker from "../Explore/DropdownPicker";
-import Map from "../SharedComponents/Map";
 import addToProject from "./helpers/addToProject";
 import checkCamelAndSnakeCase from "./helpers/checkCamelAndSnakeCase";
 

src/components/ObsDetails/ObsDetails.js

@@ -5,8 +5,17 @@ import {
   BottomSheetTextInput
 } from "@gorhom/bottom-sheet";
 import { useNavigation, useRoute } from "@react-navigation/native";
+import createIdentification from "components/Identify/helpers/createIdentification";
+import { getUser } from "components/LoginSignUp/AuthenticationService";
+import Button from "components/SharedComponents/Buttons/Button";
+import PhotoScroll from "components/SharedComponents/PhotoScroll";
+import QualityBadge from "components/SharedComponents/QualityBadge";
+import TranslatedText from "components/SharedComponents/TranslatedText";
+import UserIcon from "components/SharedComponents/UserIcon";
+import ViewWithFooter from "components/SharedComponents/ViewWithFooter";
 import { formatISO } from "date-fns";
 import _ from "lodash";
+import { ObsEditContext, RealmContext } from "providers/contexts";
 import type { Node } from "react";
 import React, {
   useContext, useEffect, useRef, useState
@@ -19,23 +28,14 @@ import {
 } from "react-native";
 import { ActivityIndicator, Button as IconButton } from "react-native-paper";
 import IconMaterial from "react-native-vector-icons/MaterialIcons";
+import { formatObsListTime } from "sharedHelpers/dateAndTime";
+import useApiToken from "sharedHooks/useApiToken";
+import colors from "styles/colors";
+import { imageStyles, textStyles, viewStyles } from "styles/obsDetails/obsDetails";
 
 import Observation from "../../models/Observation";
 import Taxon from "../../models/Taxon";
 import User from "../../models/User";
-import { ObsEditContext, RealmContext } from "../../providers/contexts";
-import { formatObsListTime } from "../../sharedHelpers/dateAndTime";
-import useApiToken from "../../sharedHooks/useApiToken";
-import colors from "../../styles/colors";
-import { imageStyles, textStyles, viewStyles } from "../../styles/obsDetails/obsDetails";
-import createIdentification from "../Identify/helpers/createIdentification";
-import { getUser } from "../LoginSignUp/AuthenticationService";
-import Button from "../SharedComponents/Buttons/Button";
-import PhotoScroll from "../SharedComponents/PhotoScroll";
-import QualityBadge from "../SharedComponents/QualityBadge";
-import TranslatedText from "../SharedComponents/TranslatedText";
-import UserIcon from "../SharedComponents/UserIcon";
-import ViewWithFooter from "../SharedComponents/ViewWithFooter";
 import ActivityTab from "./ActivityTab";
 import DataTab from "./DataTab";
 import checkCamelAndSnakeCase from "./helpers/checkCamelAndSnakeCase";
@@ -323,7 +323,7 @@ const ObsDetails = ( ): Node => {
               <View style={viewStyles.rowWithIcon}>
                 <Image
                   style={imageStyles.smallIcon}
-                  source={require( "../../images/ic_id.png" )}
+                  source={require( "images/ic_id.png" )}
                 />
                 <Text style={textStyles.idCommentCount}>{observation.identifications.length}</Text>
               </View>

src/components/ObsDetails/ObsDetailsHeader.js

@@ -2,15 +2,14 @@
 
 import { HeaderBackButton } from "@react-navigation/elements";
 import { useNavigation } from "@react-navigation/native";
+import { ObsEditContext } from "providers/contexts";
 import type { Node } from "react";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { View } from "react-native";
 import { Button, Headline } from "react-native-paper";
-
-import { ObsEditContext } from "../../providers/contexts";
-import colors from "../../styles/colors";
-import { viewStyles } from "../../styles/obsDetails/obsDetailsHeader";
+import colors from "styles/colors";
+import { viewStyles } from "styles/obsDetails/obsDetailsHeader";
 
 type Props = {
   observationUUID: string

src/components/ObsDetails/SmallSquareImage.js

@@ -2,8 +2,7 @@
 
 import * as React from "react";
 import { Image } from "react-native";
-
-import { imageStyles } from "../../styles/obsDetails/obsDetails";
+import { imageStyles } from "styles/obsDetails/obsDetails";
 
 type Props = {
   uri: Object

src/components/ObsDetails/helpers/addToProject.js

@@ -1,9 +1,8 @@
 // @flow
 
+import { getJWTToken } from "components/LoginSignUp/AuthenticationService";
 import inatjs from "inaturalistjs";
 
-import { getJWTToken } from "../../LoginSignUp/AuthenticationService";
-
 const addToProject = async ( projectId: number, obsId: string ): Promise<?number> => {
   const apiToken = await getJWTToken( false );
   try {

src/components/ObsDetails/helpers/createComment.js

@@ -1,9 +1,8 @@
 // @flow
 
+import { getJWTToken } from "components/LoginSignUp/AuthenticationService";
 import inatjs from "inaturalistjs";
 
-import { getJWTToken } from "../../LoginSignUp/AuthenticationService";
-
 const createComment = async ( body: string, uuid: string ): Promise<?number> => {
   const apiToken = await getJWTToken( false );
   try {

src/components/ObsDetails/helpers/faveObservation.js

@@ -1,9 +1,8 @@
 // @flow
 
+import { getJWTToken } from "components/LoginSignUp/AuthenticationService";
 import inatjs from "inaturalistjs";
 
-import { getJWTToken } from "../../LoginSignUp/AuthenticationService";
-
 const faveObservation = async ( uuid: string, endpoint: string ): Promise<?number> => {
   const apiToken = await getJWTToken( false );
 

src/components/ObsDetails/helpers/flagObservation.js

@@ -1,9 +1,8 @@
 // @flow
 
+import { getJWTToken } from "components/LoginSignUp/AuthenticationService";
 import inatjs from "inaturalistjs";
 
-import { getJWTToken } from "../../LoginSignUp/AuthenticationService";
-
 const flagObservation = async ( id: number ): Promise<?number> => {
   const apiToken = await getJWTToken( false );
   try {

src/components/ObsDetails/hooks/useRemoteObservation.js

@@ -1,12 +1,12 @@
 // @flow
 
 import NetInfo from "@react-native-community/netinfo";
+import { getUsername } from "components/LoginSignUp/AuthenticationService";
 import inatjs from "inaturalistjs";
 import { useEffect, useRef, useState } from "react";
 
 import Observation from "../../../models/Observation";
 import User from "../../../models/User";
-import { getUsername } from "../../LoginSignUp/AuthenticationService";
 
 const useRemoteObservation = ( observation: Object, refetch: boolean ): Object => {
   const [remoteObservation, setRemoteObservation] = useState( null );

src/components/ObsEdit/AddID.js

@@ -6,6 +6,7 @@ import {
   BottomSheetModalProvider
 } from "@gorhom/bottom-sheet";
 import { useNavigation } from "@react-navigation/native";
+import ViewNoFooter from "components/SharedComponents/ViewNoFooter";
 import * as React from "react";
 import { useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -20,11 +21,10 @@ import {
 } from "react-native-paper";
 import uuid from "react-native-uuid";
 import IconMaterial from "react-native-vector-icons/MaterialIcons";
+import useRemoteSearchResults from "sharedHooks/useRemoteSearchResults";
+import colors from "styles/colors";
+import { textStyles, viewStyles } from "styles/obsDetails/addID";
 
-import useRemoteSearchResults from "../../sharedHooks/useRemoteSearchResults";
-import colors from "../../styles/colors";
-import { textStyles, viewStyles } from "../../styles/obsDetails/addID";
-import ViewNoFooter from "../SharedComponents/ViewNoFooter";
 import AddIDHeader from "./AddIDHeader";
 
 type Props = {

src/components/ObsEdit/AddIDHeader.js

@@ -8,8 +8,7 @@ import { useTranslation } from "react-i18next";
 import { Pressable, View } from "react-native";
 import { Headline } from "react-native-paper";
 import IconMaterial from "react-native-vector-icons/MaterialIcons";
-
-import { viewStyles } from "../../styles/obsDetails/addID";
+import { viewStyles } from "styles/obsDetails/addID";
 
 type Props = {
   showEditComment: boolean,

src/components/ObsEdit/BottomModal.js

@@ -1,14 +1,13 @@
 // @flow
 
 import { useNavigation } from "@react-navigation/native";
+import PlaceholderText from "components/PlaceholderText";
+import Button from "components/SharedComponents/Buttons/Button";
+import { ObsEditContext } from "providers/contexts";
 import type { Node } from "react";
 import React, { useContext } from "react";
 import { View } from "react-native";
-
-import { ObsEditContext } from "../../providers/contexts";
-import { viewStyles } from "../../styles/obsEdit/obsEdit";
-import PlaceholderText from "../PlaceholderText";
-import Button from "../SharedComponents/Buttons/Button";
+import { viewStyles } from "styles/obsEdit/obsEdit";
 
 const BottomModal = ( ): Node => {
   const navigation = useNavigation( );

src/components/ObsEdit/CVSuggestions.js

@@ -1,22 +1,22 @@
 // @flow
 
 import { useNavigation } from "@react-navigation/native";
+import PlaceholderText from "components/PlaceholderText";
+import Button from "components/SharedComponents/Buttons/Button";
+import PhotoCarousel from "components/SharedComponents/PhotoCarousel";
+import ViewNoFooter from "components/SharedComponents/ViewNoFooter";
 import { t } from "i18next";
+import { ObsEditContext } from "providers/contexts";
 import type { Node } from "react";
 import React, { useContext, useState } from "react";
 import {
   ActivityIndicator, FlatList, Image, Pressable, Text, View
 } from "react-native";
 import { Searchbar } from "react-native-paper";
+import useLoggedIn from "sharedHooks/useLoggedIn";
+import useRemoteObsEditSearchResults from "sharedHooks/useRemoteSearchResults";
+import { textStyles, viewStyles } from "styles/obsEdit/cvSuggestions";
 
-import { ObsEditContext } from "../../providers/contexts";
-import useLoggedIn from "../../sharedHooks/useLoggedIn";
-import useRemoteObsEditSearchResults from "../../sharedHooks/useRemoteSearchResults";
-import { textStyles, viewStyles } from "../../styles/obsEdit/cvSuggestions";
-import PlaceholderText from "../PlaceholderText";
-import Button from "../SharedComponents/Buttons/Button";
-import PhotoCarousel from "../SharedComponents/PhotoCarousel";
-import ViewNoFooter from "../SharedComponents/ViewNoFooter";
 import useCVSuggestions from "./hooks/useCVSuggestions";
 
 const CVSuggestions = ( ): Node => {

src/components/ObsEdit/DatePicker.js

@@ -1,13 +1,12 @@
 // @flow
 
+import DateTimePicker from "components/SharedComponents/DateTimePicker";
 import type { Node } from "react";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Pressable, Text } from "react-native";
-
-import { displayDateTimeObsEdit } from "../../sharedHelpers/dateAndTime";
-import { textStyles } from "../../styles/obsEdit/obsEdit";
-import DateTimePicker from "../SharedComponents/DateTimePicker";
+import { displayDateTimeObsEdit } from "sharedHelpers/dateAndTime";
+import { textStyles } from "styles/obsEdit/obsEdit";
 
 type Props = {
   handleDatePicked: ( Date ) => void,

src/components/ObsEdit/DeleteObservationDialog.js

@@ -1,15 +1,14 @@
 // @flow
 
+import Button from "components/SharedComponents/Buttons/Button";
 import { t } from "i18next";
+import { ObsEditContext } from "providers/contexts";
 import type { Node } from "react";
 import React, { useContext } from "react";
 import {
   Dialog, Paragraph, Portal
 } from "react-native-paper";
 
-import { ObsEditContext } from "../../providers/contexts";
-import Button from "../SharedComponents/Buttons/Button";
-
 type Props = {
   deleteDialogVisible: boolean,
   hideDialog: Function

src/components/ObsEdit/EvidenceSection.js

@@ -1,14 +1,14 @@
 // @flow
 
+import PhotoCarousel from "components/SharedComponents/PhotoCarousel";
+import { ObsEditContext } from "providers/contexts";
 import type { Node } from "react";
 import React, { useContext } from "react";
 import { useTranslation } from "react-i18next";
 import { Text } from "react-native";
+import { createObservedOnStringForUpload } from "sharedHelpers/dateAndTime";
+import { textStyles } from "styles/obsEdit/obsEdit";
 
-import { ObsEditContext } from "../../providers/contexts";
-import { createObservedOnStringForUpload } from "../../sharedHelpers/dateAndTime";
-import { textStyles } from "../../styles/obsEdit/obsEdit";
-import PhotoCarousel from "../SharedComponents/PhotoCarousel";
 import DatePicker from "./DatePicker";
 
 type Props = {

src/components/ObsEdit/IdentificationSection.js

@@ -1,6 +1,10 @@
 // @flow
 
 import { useNavigation } from "@react-navigation/native";
+import PlaceholderText from "components/PlaceholderText";
+import Button from "components/SharedComponents/Buttons/Button";
+import { iconicTaxaIds, iconicTaxaNames } from "dictionaries/iconicTaxaIds";
+import { ObsEditContext } from "providers/contexts";
 import type { Node } from "react";
 import React, { useContext } from "react";
 import { useTranslation } from "react-i18next";
@@ -8,12 +12,7 @@ import {
   FlatList, Pressable, Text, View
 } from "react-native";
 import { Avatar, useTheme } from "react-native-paper";
-
-import { iconicTaxaIds, iconicTaxaNames } from "../../dictionaries/iconicTaxaIds";
-import { ObsEditContext } from "../../providers/contexts";
-import { textStyles, viewStyles } from "../../styles/obsEdit/obsEdit";
-import PlaceholderText from "../PlaceholderText";
-import Button from "../SharedComponents/Buttons/Button";
+import { textStyles, viewStyles } from "styles/obsEdit/obsEdit";
 
 const IdentificationSection = ( ): Node => {
   const {

src/components/ObsEdit/LocationPicker.js

@@ -1,15 +1,15 @@
 // @flow
 
+import Button from "components/SharedComponents/Buttons/Button";
+import InputField from "components/SharedComponents/InputField";
+import Map from "components/SharedComponents/Map";
+import ViewNoFooter from "components/SharedComponents/ViewNoFooter";
 import type { Node } from "react";
 import React, { useEffect, useState } from "react";
 import { View } from "react-native";
+import useLocationName from "sharedHooks/useLocationName";
+import { viewStyles } from "styles/obsEdit/locationPicker";
 
-import useLocationName from "../../sharedHooks/useLocationName";
-import { viewStyles } from "../../styles/obsEdit/locationPicker";
-import Button from "../SharedComponents/Buttons/Button";
-import InputField from "../SharedComponents/InputField";
-import Map from "../SharedComponents/Map";
-import ViewNoFooter from "../SharedComponents/ViewNoFooter";
 import useCoords from "./hooks/useCoords";
 
 type Props = {

src/components/ObsEdit/Notes.js

@@ -6,9 +6,8 @@ import React, { useEffect, useState } from "react";
 import { Keyboard, useWindowDimensions } from "react-native";
 import { TextInput } from "react-native-paper";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-
-import colors from "../../styles/colors";
-import { textStyles } from "../../styles/obsEdit/notes";
+import colors from "styles/colors";
+import { textStyles } from "styles/obsEdit/notes";
 
 type Props = {
   addNotes: Function,

src/components/ObsEdit/ObsEdit.js

@@ -7,6 +7,14 @@ import {
 } from "@gorhom/bottom-sheet";
 import { HeaderBackButton } from "@react-navigation/elements";
 import { useNavigation, useRoute } from "@react-navigation/native";
+import { MAX_PHOTOS_ALLOWED } from "components/Camera/StandardCamera";
+import MediaViewer from "components/MediaViewer/MediaViewer";
+import MediaViewerModal from "components/MediaViewer/MediaViewerModal";
+import Button from "components/SharedComponents/Buttons/Button";
+import EvidenceButton from "components/SharedComponents/Buttons/EvidenceButton";
+import KebabMenu from "components/SharedComponents/KebabMenu";
+import ScrollNoFooter from "components/SharedComponents/ScrollNoFooter";
+import { ObsEditContext, RealmContext } from "providers/contexts";
 import type { Node } from "react";
 import React, {
   useContext, useEffect, useRef, useState
@@ -15,19 +23,11 @@ import { useTranslation } from "react-i18next";
 import { Pressable, Text, View } from "react-native";
 import { Headline, Menu } from "react-native-paper";
 import Icon from "react-native-vector-icons/MaterialIcons";
+import fetchUserLocation from "sharedHelpers/fetchUserLocation";
+import useLoggedIn from "sharedHooks/useLoggedIn";
+import { textStyles, viewStyles } from "styles/obsEdit/obsEdit";
 
 import Photo from "../../models/Photo";
-import { ObsEditContext, RealmContext } from "../../providers/contexts";
-import fetchUserLocation from "../../sharedHelpers/fetchUserLocation";
-import useLoggedIn from "../../sharedHooks/useLoggedIn";
-import { textStyles, viewStyles } from "../../styles/obsEdit/obsEdit";
-import { MAX_PHOTOS_ALLOWED } from "../Camera/StandardCamera";
-import MediaViewer from "../MediaViewer/MediaViewer";
-import MediaViewerModal from "../MediaViewer/MediaViewerModal";
-import Button from "../SharedComponents/Buttons/Button";
-import EvidenceButton from "../SharedComponents/Buttons/EvidenceButton";
-import KebabMenu from "../SharedComponents/KebabMenu";
-import ScrollNoFooter from "../SharedComponents/ScrollNoFooter";
 import DeleteObservationDialog from "./DeleteObservationDialog";
 import EvidenceSection from "./EvidenceSection";
 import IdentificationSection from "./IdentificationSection";

src/components/ObsEdit/ObsEditSearch.js

@@ -1,13 +1,12 @@
 // @flow
 
+import InputField from "components/SharedComponents/InputField";
 import * as React from "react";
 import {
   FlatList, Image, Pressable, Text
 } from "react-native";
-
-import useRemoteObsEditSearchResults from "../../sharedHooks/useRemoteSearchResults";
-import { imageStyles, viewStyles } from "../../styles/search/search";
-import InputField from "../SharedComponents/InputField";
+import useRemoteObsEditSearchResults from "sharedHooks/useRemoteSearchResults";
+import { imageStyles, viewStyles } from "styles/search/search";
 
 type Props = {
   source: string,

src/components/ObsEdit/OtherDataSection.js

@@ -1,15 +1,15 @@
 // @flow
 
 import { t } from "i18next";
+import { ObsEditContext } from "providers/contexts";
 import type { Node } from "react";
 import React, { useContext } from "react";
 import { View } from "react-native";
 import { Button } from "react-native-paper";
 import RNPickerSelect from "react-native-picker-select";
+import colors from "styles/colors";
+import { pickerSelectStyles, viewStyles } from "styles/obsEdit/obsEdit";
 
-import { ObsEditContext } from "../../providers/contexts";
-import colors from "../../styles/colors";
-import { pickerSelectStyles, viewStyles } from "../../styles/obsEdit/obsEdit";
 import Notes from "./Notes";
 
 const OtherDataSection = ( ): Node => {

src/components/ObsEdit/hooks/useCVSuggestions.js

@@ -1,10 +1,10 @@
 // @flow
 
+import { getJWTToken } from "components/LoginSignUp/AuthenticationService";
 import inatjs, { FileUpload } from "inaturalistjs";
 import { useEffect, useState } from "react";
 
 import Photo from "../../../models/Photo";
-import { getJWTToken } from "../../LoginSignUp/AuthenticationService";
 
 const TAXON_FIELDS = {
   name: true,

src/components/Observations/ObsList.js

@@ -1,10 +1,10 @@
 // @flow
 
+import ObservationViews from "components/SharedComponents/ObservationViews/ObservationViews";
+import ViewWithFooter from "components/SharedComponents/ViewWithFooter";
 import type { Node } from "react";
 import React from "react";
 
-import ObservationViews from "../SharedComponents/ObservationViews/ObservationViews";
-import ViewWithFooter from "../SharedComponents/ViewWithFooter";
 import useLocalObservations from "./hooks/useLocalObservations";
 import useRemoteObservations from "./hooks/useRemoteObservations";
 

src/components/Observations/hooks/useLocalObservations.js

@@ -1,12 +1,12 @@
 // @flow
 
 import _ from "lodash";
+import { RealmContext } from "providers/contexts";
 import {
   useEffect, useState
 } from "react";
 
 import Observation from "../../../models/Observation";
-import { RealmContext } from "../../../providers/contexts";
 
 const { useRealm } = RealmContext;
 

src/components/Observations/hooks/useRemoteObservations.js

@@ -1,12 +1,12 @@
 // @flow
 
+import { RealmContext } from "providers/contexts";
 import {
   useCallback, useEffect, useState
 } from "react";
+import useApiToken from "sharedHooks/useApiToken";
 
 import Observation from "../../../models/Observation";
-import { RealmContext } from "../../../providers/contexts";
-import useApiToken from "../../../sharedHooks/useApiToken";
 
 const { useRealm } = RealmContext;
 

src/components/Observations/hooks/useUploadObservations.js

@@ -1,10 +1,9 @@
 // @flow
 
+import { RealmContext } from "providers/contexts";
+import uploadObservation from "providers/uploadHelpers/uploadObservation";
 import { useCallback, useEffect, useState } from "react";
-
-import { RealmContext } from "../../../providers/contexts";
-import uploadObservation from "../../../providers/uploadHelpers/uploadObservation";
-import useApiToken from "../../../sharedHooks/useApiToken";
+import useApiToken from "sharedHooks/useApiToken";
 
 const { useRealm } = RealmContext;
 

src/components/PhotoLibrary/GroupPhotoImage.js

@@ -4,9 +4,8 @@ import type { Node } from "react";
 import React from "react";
 import { Image, Pressable } from "react-native";
 import IconMaterial from "react-native-vector-icons/MaterialIcons";
-
-import colors from "../../styles/colors";
-import { imageStyles, viewStyles } from "../../styles/photoLibrary/photoGallery";
+import colors from "styles/colors";
+import { imageStyles, viewStyles } from "styles/photoLibrary/photoGallery";
 
 type Props = {
   item: Object,

src/components/PhotoLibrary/GroupPhotos.js

@@ -1,14 +1,14 @@
 // @flow
 
 import { useNavigation, useRoute } from "@react-navigation/native";
+import ViewNoFooter from "components/SharedComponents/ViewNoFooter";
+import { ObsEditContext, RealmContext } from "providers/contexts";
 import type { Node } from "react";
 import React, { useContext, useState } from "react";
 import { ActivityIndicator, FlatList } from "react-native";
+import { viewStyles } from "styles/photoLibrary/photoGallery";
 
 import Observation from "../../models/Observation";
-import { ObsEditContext, RealmContext } from "../../providers/contexts";
-import { viewStyles } from "../../styles/photoLibrary/photoGallery";
-import ViewNoFooter from "../SharedComponents/ViewNoFooter";
 import GroupPhotoImage from "./GroupPhotoImage";
 import GroupPhotosFooter from "./GroupPhotosFooter";
 import GroupPhotosHeader from "./GroupPhotosHeader";

src/components/PhotoLibrary/GroupPhotosFooter.js

@@ -1,15 +1,14 @@
 // @flow
 
+import Button from "components/SharedComponents/Buttons/Button";
+import SecondaryCTAButton from "components/SharedComponents/Buttons/SecondaryCTAButton";
+import KebabMenu from "components/SharedComponents/KebabMenu";
 import { t } from "i18next";
 import type { Node } from "react";
 import React from "react";
 import { Text, View } from "react-native";
 import { Menu } from "react-native-paper";
-
-import { viewStyles } from "../../styles/photoLibrary/photoGalleryFooter";
-import Button from "../SharedComponents/Buttons/Button";
-import SecondaryCTAButton from "../SharedComponents/Buttons/SecondaryCTAButton";
-import KebabMenu from "../SharedComponents/KebabMenu";
+import { viewStyles } from "styles/photoLibrary/photoGalleryFooter";
 
 type Props = {
   combinePhotos: Function,

src/components/PhotoLibrary/GroupPhotosHeader.js

@@ -6,8 +6,7 @@ import { t } from "i18next";
 import type { Node } from "react";
 import React from "react";
 import { Text, View } from "react-native";
-
-import { textStyles, viewStyles } from "../../styles/photoLibrary/photoGalleryHeader";
+import { textStyles, viewStyles } from "styles/photoLibrary/photoGalleryHeader";
 
 type Props = {
   photos: number,

src/components/PhotoLibrary/PhotoGallery.js

@@ -1,7 +1,10 @@
 // @flow
 
 import { useNavigation, useRoute } from "@react-navigation/native";
+import Button from "components/SharedComponents/Buttons/Button";
+import ViewNoFooter from "components/SharedComponents/ViewNoFooter";
 import { t } from "i18next";
+import { ObsEditContext, RealmContext } from "providers/contexts";
 import type { Node } from "react";
 import React, {
   useCallback, useContext, useEffect, useState
@@ -10,12 +13,9 @@ import {
   ActivityIndicator, FlatList, Text, View
 } from "react-native";
 import { Snackbar } from "react-native-paper";
+import { viewStyles } from "styles/photoLibrary/photoGallery";
 
 import Observation from "../../models/Observation";
-import { ObsEditContext, RealmContext } from "../../providers/contexts";
-import { viewStyles } from "../../styles/photoLibrary/photoGallery";
-import Button from "../SharedComponents/Buttons/Button";
-import ViewNoFooter from "../SharedComponents/ViewNoFooter";
 import useCameraRollPhotos from "./hooks/useCameraRollPhotos";
 import PhotoGalleryHeader from "./PhotoGalleryHeader";
 import PhotoGalleryImage from "./PhotoGalleryImage";

src/components/PhotoLibrary/PhotoGalleryHeader.js

@@ -6,8 +6,8 @@ import type { Node } from "react";
 import React from "react";
 import { View } from "react-native";
 import RNPickerSelect from "react-native-picker-select";
+import { viewStyles } from "styles/photoLibrary/photoGalleryHeader";
 
-import { viewStyles } from "../../styles/photoLibrary/photoGalleryHeader";
 import usePhotoAlbums from "./hooks/usePhotoAlbums";
 
 type Props = {

src/components/PhotoLibrary/PhotoGalleryImage.js

@@ -4,9 +4,8 @@ import type { Node } from "react";
 import React from "react";
 import { Image, Pressable } from "react-native";
 import IconMaterial from "react-native-vector-icons/MaterialIcons";
-
-import colors from "../../styles/colors";
-import { imageStyles } from "../../styles/photoLibrary/photoGallery";
+import colors from "styles/colors";
+import { imageStyles } from "styles/photoLibrary/photoGallery";
 
 type Props = {
   uri: string,

src/components/Projects/ProjectDetails.js

@@ -1,11 +1,11 @@
 // @flow
 
 import { useRoute } from "@react-navigation/native";
+import ViewWithFooter from "components/SharedComponents/ViewWithFooter";
 import * as React from "react";
 import { Image, ImageBackground, Text } from "react-native";
+import { imageStyles, textStyles } from "styles/projects/projectDetails";
 
-import { imageStyles, textStyles } from "../../styles/projects/projectDetails";
-import ViewWithFooter from "../SharedComponents/ViewWithFooter";
 import useProjectDetails from "./hooks/useProjectDetails";
 import ProjectObservations from "./ProjectObservations";
 

src/components/Projects/ProjectList.js

@@ -5,8 +5,7 @@ import * as React from "react";
 import {
   FlatList, Image, Pressable, Text
 } from "react-native";
-
-import { imageStyles, textStyles, viewStyles } from "../../styles/projects/projects";
+import { imageStyles, textStyles, viewStyles } from "styles/projects/projects";
 
 type Props = {
   data: Array<Object>

src/components/Projects/ProjectObservations.js

@@ -1,10 +1,10 @@
 // @flow
 
 import { useNavigation } from "@react-navigation/native";
+import GridItem from "components/SharedComponents/ObservationViews/GridItem";
 import * as React from "react";
 import { FlatList } from "react-native";
 
-import GridItem from "../SharedComponents/ObservationViews/GridItem";
 import useProjectObservations from "./hooks/useProjectObservations";
 
 type Props = {

src/components/Projects/ProjectSearch.js

@@ -1,10 +1,10 @@
 // @flow
 
+import PlaceholderText from "components/PlaceholderText";
 import * as React from "react";
 import { Pressable } from "react-native";
+import useRemoteSearchResults from "sharedHooks/useRemoteSearchResults";
 
-import useRemoteSearchResults from "../../sharedHooks/useRemoteSearchResults";
-import PlaceholderText from "../PlaceholderText";
 import ProjectList from "./ProjectList";
 
 type Props = {

src/components/Projects/ProjectTabs.js

@@ -3,9 +3,9 @@
 import { t } from "i18next";
 import * as React from "react";
 import { Pressable, Text, View } from "react-native";
+import useUserLocation from "sharedHooks/useUserLocation";
+import { viewStyles } from "styles/projects/projects";
 
-import useUserLocation from "../../sharedHooks/useUserLocation";
-import { viewStyles } from "../../styles/projects/projects";
 import useMemberId from "./hooks/useMemberId";
 import useProjects from "./hooks/useProjects";
 import ProjectList from "./ProjectList";

src/components/Projects/Projects.js

@@ -1,9 +1,9 @@
 // @flow
 
+import InputField from "components/SharedComponents/InputField";
+import ViewWithFooter from "components/SharedComponents/ViewWithFooter";
 import * as React from "react";
 
-import InputField from "../SharedComponents/InputField";
-import ViewWithFooter from "../SharedComponents/ViewWithFooter";
 import ProjectSearch from "./ProjectSearch";
 import ProjectTabs from "./ProjectTabs";
 

src/components/Projects/hooks/useMemberId.js

@@ -1,10 +1,9 @@
 // @flow
 
+import { getJWTToken } from "components/LoginSignUp/AuthenticationService";
 import inatjs from "inaturalistjs";
 import { useEffect, useState } from "react";
 
-import { getJWTToken } from "../../LoginSignUp/AuthenticationService";
-
 const useMemberId = ( ): ?number => {
   const [memberId, setMemberId] = useState( null );
 

src/components/Search/Search.js

@@ -1,16 +1,15 @@
 // @flow
 
 import { useNavigation } from "@react-navigation/native";
+import PlaceholderText from "components/PlaceholderText";
+import InputField from "components/SharedComponents/InputField";
+import ViewWithFooter from "components/SharedComponents/ViewWithFooter";
 import * as React from "react";
 import {
   FlatList, Image, Pressable, Text, View
 } from "react-native";
-
-import useRemoteSearchResults from "../../sharedHooks/useRemoteSearchResults";
-import { imageStyles, viewStyles } from "../../styles/search/search";
-import PlaceholderText from "../PlaceholderText";
-import InputField from "../SharedComponents/InputField";
-import ViewWithFooter from "../SharedComponents/ViewWithFooter";
+import useRemoteSearchResults from "sharedHooks/useRemoteSearchResults";
+import { imageStyles, viewStyles } from "styles/search/search";
 
 const Search = ( ): React.Node => {
   const navigation = useNavigation( );

src/components/Settings/BlockedUser.js

@@ -9,8 +9,7 @@ import {
   Text,
   View
 } from "react-native";
-
-import { viewStyles } from "../../styles/settings/settings";
+import { viewStyles } from "styles/settings/settings";
 
 type Props = {
   unblockUser: Function,

src/components/Settings/MutedUser.js

@@ -9,8 +9,7 @@ import {
   Text,
   View
 } from "react-native";
-
-import { viewStyles } from "../../styles/settings/settings";
+import { viewStyles } from "styles/settings/settings";
 
 type Props = {
   unmuteUser: Function,

src/components/Settings/PlaceSearchInput.js

@@ -1,12 +1,12 @@
+import inatPlaceTypes from "dictionaries/places";
 import React, { useEffect } from "react";
 import {
   Image, Text, TextInput, View
 } from "react-native";
 import Pressable from "react-native/Libraries/Components/Pressable/Pressable";
+import { textStyles, viewStyles } from "styles/settings/settings";
 import { useDebounce } from "use-debounce";
 
-import inatPlaceTypes from "../../dictionaries/places";
-import { textStyles, viewStyles } from "../../styles/settings/settings";
 import usePlaceDetails from "./hooks/usePlaceDetails";
 import usePlaces from "./hooks/usePlaces";
 
@@ -49,7 +49,7 @@ const PlaceSearchInput = ( { placeId, onPlaceChanged } ): React.Node => {
           <Image
             style={viewStyles.clearSearch}
             resizeMode="contain"
-            source={require( "../../images/clear.png" )}
+            source={require( "images/clear.png" )}
           />
         </Pressable>
       </View>

src/components/Settings/Relationship.js

@@ -10,9 +10,8 @@ import {
   Text,
   View
 } from "react-native";
-
-import colors from "../../styles/colors";
-import { viewStyles } from "../../styles/settings/settings";
+import colors from "styles/colors";
+import { viewStyles } from "styles/settings/settings";
 
 type Props = {
   relationship: Object,

src/components/Settings/Settings.js

@@ -1,4 +1,6 @@
 import { useFocusEffect } from "@react-navigation/native";
+import { getAPIToken } from "components/LoginSignUp/AuthenticationService";
+import ViewWithFooter from "components/SharedComponents/ViewWithFooter";
 import { t } from "i18next";
 import inatjs from "inaturalistjs";
 import type { Node } from "react";
@@ -14,10 +16,8 @@ import {
   Text,
   View
 } from "react-native";
+import { textStyles, viewStyles } from "styles/settings/settings";
 
-import { textStyles, viewStyles } from "../../styles/settings/settings";
-import { getAPIToken } from "../LoginSignUp/AuthenticationService";
-import ViewWithFooter from "../SharedComponents/ViewWithFooter";
 import useUserMe from "./hooks/useUserMe";
 import SettingsAccount from "./SettingsAccount";
 import SettingsApplications from "./SettingsApplications";

src/components/Settings/SettingsAccount.js

@@ -2,16 +2,16 @@
 
 import CheckBox from "@react-native-community/checkbox";
 import { Picker } from "@react-native-picker/picker";
+import inatLanguages from "dictionaries/languages";
+import inatNetworks from "dictionaries/networks";
 import { t } from "i18next";
 import type { Node } from "react";
 import React from "react";
 import { Text, View } from "react-native";
 import Pressable from "react-native/Libraries/Components/Pressable/Pressable";
+import colors from "styles/colors";
+import { textStyles, viewStyles } from "styles/settings/settings";
 
-import inatLanguages from "../../dictionaries/languages";
-import inatNetworks from "../../dictionaries/networks";
-import colors from "../../styles/colors";
-import { textStyles, viewStyles } from "../../styles/settings/settings";
 import PlaceSearchInput from "./PlaceSearchInput";
 import type { SettingsProps } from "./types";
 

src/components/Settings/SettingsApplications.js

@@ -1,14 +1,14 @@
 // @flow
 
+import inatProviders from "dictionaries/providers";
 import { t } from "i18next";
 import inatjs from "inaturalistjs";
 import type { Node } from "react";
 import React, { useEffect, useState } from "react";
 import { Alert, Text, View } from "react-native";
 import Pressable from "react-native/Libraries/Components/Pressable/Pressable";
+import { textStyles, viewStyles } from "styles/settings/settings";
 
-import inatProviders from "../../dictionaries/providers";
-import { textStyles, viewStyles } from "../../styles/settings/settings";
 import useAuthorizedApplications from "./hooks/useAuthorizedApplications";
 import useProviderAuthorizations from "./hooks/useProviderAuthorizations";
 

src/components/Settings/SettingsContentDisplay.js

@@ -2,14 +2,14 @@
 
 import CheckBox from "@react-native-community/checkbox";
 import { Picker } from "@react-native-picker/picker";
+import inatLicenses from "dictionaries/licenses";
 import { t } from "i18next";
 import type { Node } from "react";
 import React from "react";
 import { Pressable, Text, View } from "react-native";
+import colors from "styles/colors";
+import { textStyles, viewStyles } from "styles/settings/settings";
 
-import inatLicenses from "../../dictionaries/licenses";
-import colors from "../../styles/colors";
-import { textStyles, viewStyles } from "../../styles/settings/settings";
 import PlaceSearchInput from "./PlaceSearchInput";
 import type { SettingsProps } from "./types";
 

src/components/Settings/SettingsNotifications.js

@@ -6,9 +6,9 @@ import type { Node } from "react";
 import React from "react";
 import { Pressable, Text, View } from "react-native";
 import Switch from "react-native/Libraries/Components/Switch/Switch";
+import colors from "styles/colors";
+import { textStyles, viewStyles } from "styles/settings/settings";
 
-import colors from "../../styles/colors";
-import { textStyles, viewStyles } from "../../styles/settings/settings";
 import type { SettingsProps } from "./types";
 
 const EMAIL_NOTIFICATIONS = {

src/components/Settings/SettingsProfile.js

@@ -8,8 +8,8 @@ import {
 } from "react-native";
 // $FlowIgnore
 import { launchImageLibrary } from "react-native-image-picker";
+import { viewStyles } from "styles/settings/settings";
 
-import { viewStyles } from "../../styles/settings/settings";
 import type { SettingsProps } from "./types";
 
 const SettingsProfile = ( { settings, onSettingsModified }: SettingsProps ): Node => {
@@ -20,7 +20,7 @@ const SettingsProfile = ( { settings, onSettingsModified }: SettingsProps ): Nod
     settings.icon && !settings.removeProfilePhoto ) {
     profileSource = { uri: settings.icon };
   } else {
-    profileSource = require( "../../images/profile.png" );
+    profileSource = require( "images/profile.png" );
   }
 
   const onImageSelected = response => {

src/components/Settings/SettingsRelationships.js

@@ -9,10 +9,10 @@ import {
   Alert, Image, Text, TextInput, View
 } from "react-native";
 import Pressable from "react-native/Libraries/Components/Pressable/Pressable";
+import colors from "styles/colors";
+import { textStyles, viewStyles } from "styles/settings/settings";
 import { useDebounce } from "use-debounce";
 
-import colors from "../../styles/colors";
-import { textStyles, viewStyles } from "../../styles/settings/settings";
 import BlockedUser from "./BlockedUser";
 import useRelationships from "./hooks/useRelationships";
 import MutedUser from "./MutedUser";
@@ -319,7 +319,7 @@ const SettingsRelationships = ( { accessToken, settings, onRefreshUser }: Props
           <Image
             style={viewStyles.clearSearch}
             resizeMode="contain"
-            source={require( "../../images/clear.png" )}
+            source={require( "images/clear.png" )}
           />
         </Pressable>
       </View>

src/components/Settings/UserSearchInput.js

@@ -3,11 +3,10 @@ import {
   Image, Text, TextInput, View
 } from "react-native";
 import Pressable from "react-native/Libraries/Components/Pressable/Pressable";
+import useRemoteSearchResults from "sharedHooks/useRemoteSearchResults";
+import { textStyles, viewStyles } from "styles/settings/settings";
 import { useDebounce } from "use-debounce";
 
-import useRemoteSearchResults from "../../sharedHooks/useRemoteSearchResults";
-import { textStyles, viewStyles } from "../../styles/settings/settings";
-
 const UserSearchInput = ( { onUserChanged } ): React.Node => {
   const [hideResults, setHideResults] = React.useState( true );
   const [userSearch, setUserSearch] = React.useState( "" );
@@ -47,7 +46,7 @@ const UserSearchInput = ( { onUserChanged } ): React.Node => {
           <Image
             style={viewStyles.clearSearch}
             resizeMode="contain"
-            source={require( "../../images/clear.png" )}
+            source={require( "images/clear.png" )}
           />
         </Pressable>
       </View>

src/components/SharedComponents/BottomSheet.js

@@ -5,8 +5,7 @@ import type { Node } from "react";
 import React, {
   useCallback, useEffect, useRef
 } from "react";
-
-import { viewStyles } from "../../styles/sharedComponents/bottomSheet";
+import { viewStyles } from "styles/sharedComponents/bottomSheet";
 
 type Props = {
   children: any,

src/components/SharedComponents/Buttons/Button.js

@@ -1,10 +1,9 @@
 // @flow
 
+import TranslatedText from "components/SharedComponents/TranslatedText";
 import * as React from "react";
 import { Button as ButtonRNP } from "react-native-paper";
-
-import { textStyles, viewStyles } from "../../../styles/sharedComponents/buttons/buttonVariants";
-import TranslatedText from "../TranslatedText";
+import { textStyles, viewStyles } from "styles/sharedComponents/buttons/buttonVariants";
 
 type ButtonProps = {
   text: string,

src/components/SharedComponents/Buttons/CameraOptionsButton.js

@@ -1,12 +1,11 @@
 // @flow
 
+import CameraOptionsModal from "components/Camera/CameraOptionsModal";
+import Modal from "components/SharedComponents/Modal";
 import * as React from "react";
 import { Pressable, View } from "react-native";
 import IconMaterial from "react-native-vector-icons/MaterialIcons";
-
-import { viewStyles } from "../../../styles/obsEdit/obsEdit";
-import CameraOptionsModal from "../../Camera/CameraOptionsModal";
-import Modal from "../Modal";
+import { viewStyles } from "styles/obsEdit/obsEdit";
 
 type Props = {
   buttonType?: string

src/components/SharedComponents/Buttons/EvidenceButton.js

@@ -2,8 +2,7 @@
 import * as React from "react";
 import { Pressable } from "react-native";
 import IconMaterial from "react-native-vector-icons/MaterialIcons";
-
-import { textStyles, viewStyles } from "../../../styles/sharedComponents/buttons/evidenceButton";
+import { textStyles, viewStyles } from "styles/sharedComponents/buttons/evidenceButton";
 
 type Props = {
   icon: any,

src/components/SharedComponents/Buttons/RoundGrayButton.js

@@ -1,9 +1,8 @@
 // @flow
+import TranslatedText from "components/SharedComponents/TranslatedText";
 import * as React from "react";
 import { Button } from "react-native-paper";
-
-import { textStyles, viewStyles } from "../../../styles/sharedComponents/buttons/roundGrayButton";
-import TranslatedText from "../TranslatedText";
+import { textStyles, viewStyles } from "styles/sharedComponents/buttons/roundGrayButton";
 
 type Props = {
   buttonText: string,

src/components/SharedComponents/Buttons/SecondaryCTAButton.js

@@ -3,8 +3,7 @@
 import type { Node } from "react";
 import React from "react";
 import { Button } from "react-native-paper";
-
-import colors from "../../../styles/colors";
+import colors from "styles/colors";
 
 type Props = {
   children: any,

src/components/SharedComponents/CustomHeader.js

@@ -5,8 +5,7 @@ import { useNavigation } from "@react-navigation/native";
 import type { Node } from "react";
 import React from "react";
 import { Text, View } from "react-native";
-
-import { textStyles, viewStyles } from "../../styles/sharedComponents/customHeader";
+import { textStyles, viewStyles } from "styles/sharedComponents/customHeader";
 
 type Props = {
   headerText: string

src/components/SharedComponents/CustomHeaderWithTranslation.js

@@ -4,8 +4,7 @@ import type { Node } from "react";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Text } from "react-native";
-
-import { textStyles, viewStyles } from "../../styles/sharedComponents/customHeader";
+import { textStyles, viewStyles } from "styles/sharedComponents/customHeader";
 
 type Props = {
   headerText: string

src/components/SharedComponents/DeletePhotoDialog.js

@@ -1,5 +1,6 @@
 // @flow
 
+import { RealmContext } from "providers/contexts";
 import type { Node } from "react";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -8,7 +9,6 @@ import {
 } from "react-native-paper";
 
 import Photo from "../../models/Photo";
-import { RealmContext } from "../../providers/contexts";
 import Button from "./Buttons/Button";
 
 const { useRealm } = RealmContext;

src/components/SharedComponents/Footer.js

@@ -4,8 +4,8 @@ import { useNavigation } from "@react-navigation/native";
 import * as React from "react";
 import { Pressable, View } from "react-native";
 import IconMaterial from "react-native-vector-icons/MaterialIcons";
+import { viewStyles } from "styles/sharedComponents/footer";
 
-import { viewStyles } from "../../styles/sharedComponents/footer";
 import CameraOptionsButton from "./Buttons/CameraOptionsButton";
 
 const Footer = ( ): React.Node => {