Fix circular

Author: EQuimper

src/components/common/BottomSheet.tsx

@@ -9,10 +9,8 @@ import Reanimated, {
 import { Dimensions, View } from 'react-native';
 import { toJS } from 'mobx';
 
-import { useUiStore } from '../../stores/ui';
 import colors from '../../constants/colors';
-
-export const BOTTOM_SHEET_POPUP_ANIMATION_TIME = 250;
+import { useUiStore } from '../../stores';
 
 // Centralized props used to style the top section of the BottomSheetGorhom.
 export const greenBottomSheetGorhomProps = {

src/stores/index.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import UiClass from './ui';
 
 /**
@@ -8,3 +9,15 @@ export class RootStore {
 }
 
 export const rootStore = new RootStore();
+
+export const StoreContext = React.createContext<typeof rootStore>(rootStore);
+
+// This store needs to be separated in his own file in order to avoid init error.
+// Leave this hook here as the single element of the file.
+export function useStores() {
+  return React.useContext(StoreContext);
+}
+
+export function useUiStore() {
+  return useStores().ui;
+}

src/stores/ui.ts

@@ -2,8 +2,8 @@ import { action, makeAutoObservable } from 'mobx';
 import { Keyboard, ViewStyle } from 'react-native';
 import { AnimatedStyle, SharedValue } from 'react-native-reanimated';
 import metrics from '../constants/metrics';
-import { useStores } from './useStores';
-import { BOTTOM_SHEET_POPUP_ANIMATION_TIME } from '../components/common/BottomSheet';
+
+export const BOTTOM_SHEET_POPUP_ANIMATION_TIME = 250;
 
 const DEFAULT_BOTTOM_SHEET_SNAP_POINTS = [1, 300 + metrics.safeBottomDistance];
 interface OpenBottomSheetOps {
@@ -39,8 +39,7 @@ class UiClass {
 
   bottomSheetSharedValue: UiStore['bottomSheetSharedValue'] = undefined;
 
-  bottomSheetSnapPoints: UiStore['bottomSheetSnapPoints'] =
-    DEFAULT_BOTTOM_SHEET_SNAP_POINTS;
+  bottomSheetSnapPoints: UiStore['bottomSheetSnapPoints'] = DEFAULT_BOTTOM_SHEET_SNAP_POINTS;
   containerStyle: UiStore['containerStyle'] = {};
   bottomSheetGorhomProps: UiStore['bottomSheetGorhomProps'] = {};
   bottomSheetStyle: OpenBottomSheetOps['bottomSheetStyle'] = undefined;
@@ -53,10 +52,11 @@ class UiClass {
 
   bottomSheetTargetSharedValue: UiStore['bottomSheetTargetSharedValue'] = 0;
 
-  setBottomSheetTargetSharedValue: UiStore['setBottomSheetTargetSharedValue'] =
-    action((targetSharedValue) => {
+  setBottomSheetTargetSharedValue: UiStore['setBottomSheetTargetSharedValue'] = action(
+    (targetSharedValue) => {
       this.bottomSheetTargetSharedValue = targetSharedValue;
-    });
+    },
+  );
 
   openBottomSheet: UiStore['openBottomSheet'] = action((options) => {
     if (!this.isBottomSheetOpen && !this.bottomSheetDebouncedDelay) {
@@ -108,8 +108,4 @@ class UiClass {
   }
 }
 
-export function useUiStore() {
-  return useStores().ui;
-}
-
 export default UiClass;