Remove most of the require cycles

babel.config.js

@@ -11,6 +11,7 @@ module.exports = function (api) {
           '@assets': './assets',
           '@root': './src',
           '@api': './src/api',
+          '@helpers': './src/helpers',
           '@components': './src/components',
           '@screens': './src/screens',
           '@utils': './src/utils'

src/App.tsx

@@ -1,4 +1,5 @@
 import { ActionSheetProvider } from '@expo/react-native-action-sheet'
+import queryClient from '@helpers/queryClient'
 import i18n from '@root/i18n/i18n'
 import Screens from '@root/Screens'
 import audio from '@root/startup/audio'
@@ -14,8 +15,7 @@ import * as Notifications from 'expo-notifications'
 import * as SplashScreen from 'expo-splash-screen'
 import React, { useCallback, useEffect, useState } from 'react'
 import { AppState, LogBox, Platform } from 'react-native'
-import { enableScreens } from 'react-native-screens'
-import { QueryClient, QueryClientProvider } from 'react-query'
+import { QueryClientProvider } from 'react-query'
 import { Provider } from 'react-redux'
 import { PersistGate } from 'redux-persist/integration/react'
 import push from './startup/push'
@@ -29,12 +29,6 @@ sentry()
 audio()
 push()
 
-log('log', 'react-query', 'initializing')
-export const queryClient = new QueryClient()
-
-log('log', 'react-native-screens', 'initializing')
-enableScreens()
-
 const App: React.FC = () => {
   log('log', 'App', 'rendering App')
   const [localCorrupt, setLocalCorrupt] = useState<string>()

src/Screens.tsx

@@ -1,9 +1,7 @@
 import { displayMessage, Message, removeMessage } from '@components/Message'
+import navigationRef from '@helpers/navigationRef'
 import { useNetInfo } from '@react-native-community/netinfo'
-import {
-  NavigationContainer,
-  NavigationContainerRef
-} from '@react-navigation/native'
+import { NavigationContainer } from '@react-navigation/native'
 import ScreenActions from '@screens/Actions'
 import ScreenAnnouncements from '@screens/Announcements'
 import ScreenCompose from '@screens/Compose'
@@ -19,7 +17,7 @@ import { useTheme } from '@utils/styles/ThemeManager'
 import { themes } from '@utils/styles/themes'
 import * as Analytics from 'expo-firebase-analytics'
 import { addScreenshotListener } from 'expo-screen-capture'
-import React, { createRef, useCallback, useEffect, useRef } from 'react'
+import React, { useCallback, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Alert, Platform, StatusBar } from 'react-native'
 import { createNativeStackNavigator } from 'react-native-screens/native-stack'
@@ -28,7 +26,6 @@ import { useDispatch, useSelector } from 'react-redux'
 import * as Sentry from 'sentry-expo'
 
 const Stack = createNativeStackNavigator<Nav.RootStackParamList>()
-export const navigationRef = createRef<NavigationContainerRef>()
 
 export interface Props {
   localCorrupt?: string

src/components/Emojis.tsx

@@ -4,7 +4,6 @@ import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
 import { useEmojisQuery } from '@utils/queryHooks/emojis'
 import { chunk, forEach, groupBy, sortBy } from 'lodash'
 import React, {
-  createContext,
   Dispatch,
   MutableRefObject,
   SetStateAction,
@@ -13,27 +12,10 @@ import React, {
   useReducer
 } from 'react'
 import FastImage from 'react-native-fast-image'
-
-type EmojisState = {
-  enabled: boolean
-  active: boolean
-  emojis: { title: string; data: Mastodon.Emoji[][] }[]
-  shortcode: Mastodon.Emoji['shortcode'] | null
-}
-
-type EmojisAction =
-  | {
-      type: 'load'
-      payload: NonNullable<EmojisState['emojis']>
-    }
-  | {
-      type: 'activate'
-      payload: EmojisState['active']
-    }
-  | {
-      type: 'shortcode'
-      payload: EmojisState['shortcode']
-    }
+import EmojisContext, {
+  EmojisAction,
+  EmojisState
+} from './Emojis/helpers/EmojisContext'
 
 const emojisReducer = (state: EmojisState, action: EmojisAction) => {
   switch (action.type) {
@@ -46,12 +28,6 @@ const emojisReducer = (state: EmojisState, action: EmojisAction) => {
   }
 }
 
-type ContextType = {
-  emojisState: EmojisState
-  emojisDispatch: Dispatch<EmojisAction>
-}
-const EmojisContext = createContext<ContextType>({} as ContextType)
-
 const prefetchEmojis = (
   sortedEmojis: { title: string; data: Mastodon.Emoji[][] }[],
   reduceMotionEnabled: boolean
@@ -163,4 +139,4 @@ const ComponentEmojis: React.FC<Props> = ({
   )
 }
 
-export { ComponentEmojis, EmojisContext, EmojisButton, EmojisList }
+export { ComponentEmojis, EmojisButton, EmojisList }

src/components/Emojis/Button.tsx

@@ -1,9 +1,9 @@
-import { EmojisContext } from '@components/Emojis'
 import Icon from '@components/Icon'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useContext } from 'react'
 import { Pressable, StyleSheet } from 'react-native'
+import EmojisContext from './helpers/EmojisContext'
 
 const EmojisButton = React.memo(
   () => {

src/components/Emojis/List.tsx

@@ -1,4 +1,3 @@
-import { EmojisContext } from '@components/Emojis'
 import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
 import { StyleConstants } from '@utils/styles/constants'
 import layoutAnimation from '@utils/styles/layoutAnimation'
@@ -16,6 +15,7 @@ import {
 } from 'react-native'
 import FastImage from 'react-native-fast-image'
 import validUrl from 'valid-url'
+import EmojisContext from './helpers/EmojisContext'
 
 const EmojisList = React.memo(
   () => {

src/components/Emojis/helpers/EmojisContext.tsx

@@ -0,0 +1,30 @@
+import { createContext, Dispatch } from 'react'
+
+export type EmojisState = {
+  enabled: boolean
+  active: boolean
+  emojis: { title: string; data: Mastodon.Emoji[][] }[]
+  shortcode: Mastodon.Emoji['shortcode'] | null
+}
+
+export type EmojisAction =
+  | {
+      type: 'load'
+      payload: NonNullable<EmojisState['emojis']>
+    }
+  | {
+      type: 'activate'
+      payload: EmojisState['active']
+    }
+  | {
+      type: 'shortcode'
+      payload: EmojisState['shortcode']
+    }
+
+type ContextType = {
+  emojisState: EmojisState
+  emojisDispatch: Dispatch<EmojisAction>
+}
+const EmojisContext = createContext<ContextType>({} as ContextType)
+
+export default EmojisContext

src/components/Input.tsx

@@ -18,12 +18,8 @@ import {
   View
 } from 'react-native'
 import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated'
-import {
-  ComponentEmojis,
-  EmojisButton,
-  EmojisContext,
-  EmojisList
-} from './Emojis'
+import { ComponentEmojis, EmojisButton, EmojisList } from './Emojis'
+import EmojisContext from './Emojis/helpers/EmojisContext'
 
 export interface Props {
   autoFocus?: boolean

src/components/openLink.ts

@@ -1,6 +1,6 @@
 import apiInstance from '@api/instance'
+import navigationRef from '@helpers/navigationRef'
 import { NavigationProp, ParamListBase } from '@react-navigation/native'
-import { navigationRef } from '@root/Screens'
 import { store } from '@root/store'
 import { SearchResult } from '@utils/queryHooks/search'
 import { getInstanceUrl } from '@utils/slices/instancesSlice'

src/helpers/navigationRef.ts

@@ -0,0 +1,6 @@
+import { NavigationContainerRef } from '@react-navigation/native'
+import { createRef } from 'react'
+
+const navigationRef = createRef<NavigationContainerRef>()
+
+export default navigationRef

src/helpers/queryClient.ts

@@ -0,0 +1,5 @@
+import { QueryClient } from 'react-query'
+
+const queryClient = new QueryClient()
+
+export default queryClient

src/startup/sentry.ts

@@ -1,12 +1,12 @@
-import Constants from 'expo-constants'
 import * as Updates from 'expo-updates'
+import { Constants } from 'react-native-unimodules'
 import * as Sentry from 'sentry-expo'
 import log from './log'
 
 const sentry = () => {
   log('log', 'Sentry', 'initializing')
   Sentry.init({
-    dsn: Constants.manifest.extra.sentryDSN,
+    dsn: Constants.manifest.extra?.sentryDSN,
     enableInExpoDevelopment: false,
     debug:
       __DEV__ ||

src/utils/queryHooks/profile.ts

@@ -1,9 +1,7 @@
 import apiInstance from '@api/instance'
-import { displayMessage } from '@components/Message'
-import { queryClient } from '@root/App'
+import queryClient from '@helpers/queryClient'
 import { AxiosError } from 'axios'
 import { useMutation, useQuery, UseQueryOptions } from 'react-query'
-import { QueryKeyAccount } from './account'
 
 type AccountWithSource = Mastodon.Account &
   Required<Pick<Mastodon.Account, 'source'>>

src/utils/queryHooks/timeline.ts

@@ -1,6 +1,6 @@
 import apiInstance from '@api/instance'
 import haptics from '@components/haptics'
-import { queryClient } from '@root/App'
+import queryClient from '@helpers/queryClient'
 import { store } from '@root/store'
 import { getInstanceNotificationsFilter } from '@utils/slices/instancesSlice'
 import { AxiosError } from 'axios'

src/utils/queryHooks/timeline/deleteItem.ts

@@ -1,4 +1,4 @@
-import { queryClient } from '@root/App'
+import queryClient from '@helpers/queryClient'
 import { InfiniteData } from 'react-query'
 import { MutationVarsTimelineDeleteItem } from '../timeline'
 

src/utils/queryHooks/timeline/updateStatusProperty.ts

@@ -1,4 +1,4 @@
-import { queryClient } from '@root/App'
+import queryClient from '@helpers/queryClient'
 import { findIndex } from 'lodash'
 import { InfiniteData } from 'react-query'
 import {

tsconfig.json

@@ -13,6 +13,7 @@
     "paths": {
       "@api/*": ["./src/api/*"],
       "@components/*": ["./src/components/*"],
+      "@helpers/*": ["./src/helpers/*"],
       "@screens/*": ["./src/screens/*"],
       "@utils/*": ["./src/utils/*"],
       "@root/*": ["./src/*"]