chore: fix require cycles

lukewalczak · lukewalczak · commit 2c8c7b169e0a · 2025-05-07T14:13:09.000+02:00
diff --git a/example/src/DrawerItems.tsx b/example/src/DrawerItems.tsx
@@ -18,8 +18,8 @@ import {
 } from 'react-native-paper';
 
 import { deviceColorsSupported, isWeb } from '../utils';
-
-import { PreferencesContext, useExampleTheme } from './';
+import { useExampleTheme } from './hooks/useExampleTheme';
+import { PreferencesContext } from './PreferencesContext';
 
 const DrawerItemsData = [
   {
diff --git a/example/src/ExampleList.tsx b/example/src/ExampleList.tsx
@@ -49,8 +49,7 @@ import ThemingWithReactNavigation from './Examples/ThemingWithReactNavigation';
 import ToggleButtonExample from './Examples/ToggleButtonExample';
 import TooltipExample from './Examples/TooltipExample';
 import TouchableRippleExample from './Examples/TouchableRippleExample';
-
-import { useExampleTheme } from '.';
+import { useExampleTheme } from './hooks/useExampleTheme';
 
 export const mainExamples: Record<
   string,
diff --git a/example/src/Examples/ActivityIndicatorExample.tsx b/example/src/Examples/ActivityIndicatorExample.tsx
@@ -9,7 +9,7 @@ import {
   MD3Colors,
 } from 'react-native-paper';
 
-import { useExampleTheme } from '..';
+import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 const ActivityIndicatorExample = () => {
diff --git a/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx b/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx
@@ -16,8 +16,8 @@ import CustomFABControls, {
   Controls,
   initialControls,
 } from './CustomFABControls';
-import { useExampleTheme } from '../..';
 import { animatedFABExampleData } from '../../../utils';
+import { useExampleTheme } from '../../hooks/useExampleTheme';
 
 type Item = {
   id: string;
diff --git a/example/src/Examples/AnimatedFABExample/CustomFAB.tsx b/example/src/Examples/AnimatedFABExample/CustomFAB.tsx
@@ -9,7 +9,7 @@ import {
 
 import { AnimatedFAB } from 'react-native-paper';
 
-import { useExampleTheme } from '../..';
+import { useExampleTheme } from '../../hooks/useExampleTheme';
 
 type CustomFABProps = {
   animatedValue: Animated.Value;
diff --git a/example/src/Examples/AnimatedFABExample/CustomFABControls.tsx b/example/src/Examples/AnimatedFABExample/CustomFABControls.tsx
@@ -8,7 +8,7 @@ import type {
 } from 'react-native-paper';
 import { Paragraph, RadioButton, Text } from 'react-native-paper';
 
-import { useExampleTheme } from '../..';
+import { useExampleTheme } from '../../hooks/useExampleTheme';
 
 export type Controls = {
   iconMode: AnimatedFABIconMode;
diff --git a/example/src/Examples/AppbarExample.tsx b/example/src/Examples/AppbarExample.tsx
@@ -14,8 +14,8 @@ import {
 } from 'react-native-paper';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { useExampleTheme } from '..';
 import { yellowA200 } from '../../../src/styles/themes/v2/colors';
+import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 type Props = {
diff --git a/example/src/Examples/AvatarExample.tsx b/example/src/Examples/AvatarExample.tsx
@@ -3,7 +3,7 @@ import { StyleSheet, View } from 'react-native';
 
 import { Avatar, List, MD2Colors, MD3Colors } from 'react-native-paper';
 
-import { useExampleTheme } from '..';
+import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 const AvatarExample = () => {
diff --git a/example/src/Examples/BadgeExample.tsx b/example/src/Examples/BadgeExample.tsx
@@ -11,7 +11,7 @@ import {
   Switch,
 } from 'react-native-paper';
 
-import { useExampleTheme } from '..';
+import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 const BadgeExample = () => {
diff --git a/example/src/Examples/BannerExample.tsx b/example/src/Examples/BannerExample.tsx
@@ -10,7 +10,7 @@ import {
 
 import { Banner, FAB, MD2Colors, MD3Colors } from 'react-native-paper';
 
-import { useExampleTheme } from '..';
+import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 const PHOTOS = Array.from({ length: 24 }).map(
diff --git a/example/src/Examples/BottomNavigationExample.tsx b/example/src/Examples/BottomNavigationExample.tsx
@@ -17,7 +17,7 @@ import {
 } from 'react-native-paper';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { useExampleTheme } from '..';
+import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 type Route = { route: { key: string } };
diff --git a/example/src/Examples/ButtonExample.tsx b/example/src/Examples/ButtonExample.tsx
@@ -3,7 +3,7 @@ import { Image, StyleSheet, View } from 'react-native';
 
 import { Button, List, Text } from 'react-native-paper';
 
-import { useExampleTheme } from '..';
+import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 const ButtonExample = () => {
diff --git a/example/src/Examples/CardExample.tsx b/example/src/Examples/CardExample.tsx
@@ -11,8 +11,9 @@ import {
   Text,
 } from 'react-native-paper';
 
-import { PreferencesContext, useExampleTheme } from '..';
 import { isWeb } from '../../utils';
+import { useExampleTheme } from '../hooks/useExampleTheme';
+import { PreferencesContext } from '../PreferencesContext';
 import ScreenWrapper from '../ScreenWrapper';
 
 type Mode = 'elevated' | 'outlined' | 'contained';
diff --git a/example/src/Examples/CheckboxExample.tsx b/example/src/Examples/CheckboxExample.tsx
@@ -10,7 +10,7 @@ import {
   TouchableRipple,
 } from 'react-native-paper';
 
-import { useExampleTheme } from '..';
+import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 const CheckboxExample = () => {
diff --git a/example/src/Examples/CheckboxItemExample.tsx b/example/src/Examples/CheckboxItemExample.tsx
@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
 
 import { Checkbox } from 'react-native-paper';
 
-import { useExampleTheme } from '..';
+import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 const CheckboxExample = () => {
diff --git a/example/src/Examples/ChipExample.tsx b/example/src/Examples/ChipExample.tsx
@@ -11,7 +11,7 @@ import {
   Text,
 } from 'react-native-paper';
 
-import { useExampleTheme } from '..';
+import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 const ChipExample = () => {
diff --git a/example/src/Examples/DialogExample.tsx b/example/src/Examples/DialogExample.tsx
@@ -3,7 +3,6 @@ import { Platform, StyleSheet } from 'react-native';
 
 import { Button } from 'react-native-paper';
 
-import { useExampleTheme } from '..';
 import {
   DialogWithCustomColors,
   DialogWithDismissableBackButton,
@@ -13,6 +12,7 @@ import {
   DialogWithRadioBtns,
   UndismissableDialog,
 } from './Dialogs';
+import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 type ButtonVisibility = {
diff --git a/example/src/Examples/Dialogs/DialogTextComponent.tsx b/example/src/Examples/Dialogs/DialogTextComponent.tsx
@@ -7,7 +7,7 @@ import {
   Text,
 } from 'react-native-paper';
 
-import { useExampleTheme } from '../..';
+import { useExampleTheme } from '../../hooks/useExampleTheme';
 
 type Props = React.ComponentProps<typeof NativeText> & {
   isSubheading?: boolean;
diff --git a/example/src/Examples/Dialogs/DialogWithCustomColors.tsx b/example/src/Examples/Dialogs/DialogWithCustomColors.tsx
@@ -9,7 +9,7 @@ import {
 } from 'react-native-paper';
 
 import { TextComponent } from './DialogTextComponent';
-import { useExampleTheme } from '../..';
+import { useExampleTheme } from '../../hooks/useExampleTheme';
 
 const DialogWithCustomColors = ({
   visible,
diff --git a/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx b/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx
@@ -4,7 +4,7 @@ import { ActivityIndicator, Platform, StyleSheet, View } from 'react-native';
 import { Dialog, MD2Colors, MD3Colors, Portal } from 'react-native-paper';
 
 import { TextComponent } from './DialogTextComponent';
-import { useExampleTheme } from '../..';
+import { useExampleTheme } from '../../hooks/useExampleTheme';
 
 const isIOS = Platform.OS === 'ios';
 
diff --git a/example/src/Examples/DividerExample.tsx b/example/src/Examples/DividerExample.tsx
@@ -3,7 +3,7 @@ import { FlatList } from 'react-native';
 
 import { Divider, List } from 'react-native-paper';
 
-import { useExampleTheme } from '..';
+import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 const items = ['Apple', 'Banana', 'Coconut', 'Lemon', 'Mango', 'Peach'];
diff --git a/example/src/Examples/FABExample.tsx b/example/src/Examples/FABExample.tsx
@@ -3,8 +3,8 @@ import { Alert, StyleSheet, View } from 'react-native';
 
 import { FAB, Portal, Text } from 'react-native-paper';
 
-import { useExampleTheme } from '..';
 import { isWeb } from '../../utils';
+import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 type FABVariant = 'primary' | 'secondary' | 'tertiary' | 'surface';
diff --git a/example/src/Examples/IconButtonExample.tsx b/example/src/Examples/IconButtonExample.tsx
@@ -3,7 +3,7 @@ import { StyleSheet, View } from 'react-native';
 
 import { IconButton, List, MD2Colors, MD3Colors } from 'react-native-paper';
 
-import { useExampleTheme } from '..';
+import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 const ButtonExample = () => {
diff --git a/example/src/Examples/MenuExample.tsx b/example/src/Examples/MenuExample.tsx
@@ -16,7 +16,7 @@ import {
   TouchableRipple,
 } from 'react-native-paper';
 
-import { useExampleTheme } from '..';
+import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 type ContextualMenuCoord = { x: number; y: number };
diff --git a/example/src/Examples/ProgressBarExample.tsx b/example/src/Examples/ProgressBarExample.tsx
@@ -10,7 +10,7 @@ import {
   Text,
 } from 'react-native-paper';
 
-import { useExampleTheme } from '..';
+import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 class ClassProgressBar extends React.Component {
diff --git a/example/src/Examples/RadioButtonExample.tsx b/example/src/Examples/RadioButtonExample.tsx
@@ -10,7 +10,7 @@ import {
   TouchableRipple,
 } from 'react-native-paper';
 
-import { useExampleTheme } from '..';
+import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 type State = 'normal' | 'normal-ios' | 'normal-item' | 'custom';
diff --git a/example/src/Examples/RadioButtonGroupExample.tsx b/example/src/Examples/RadioButtonGroupExample.tsx
@@ -3,7 +3,7 @@ import { StyleSheet, View } from 'react-native';
 
 import { List, Paragraph, RadioButton, Text } from 'react-native-paper';
 
-import { useExampleTheme } from '..';
+import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 const RadioButtonGroupExample = () => {
diff --git a/example/src/Examples/RadioButtonItemExample.tsx b/example/src/Examples/RadioButtonItemExample.tsx
@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
 
 import { RadioButton } from 'react-native-paper';
 
-import { useExampleTheme } from '..';
+import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 const RadioButtonItemExample = () => {
diff --git a/example/src/Examples/SearchbarExample.tsx b/example/src/Examples/SearchbarExample.tsx
@@ -11,7 +11,7 @@ import {
   Avatar,
 } from 'react-native-paper';
 
-import { useExampleTheme } from '..';
+import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 type Props = {
diff --git a/example/src/Examples/SnackbarExample.tsx b/example/src/Examples/SnackbarExample.tsx
@@ -3,7 +3,8 @@ import { StyleSheet, View } from 'react-native';
 
 import { Snackbar, Button, List, Text, Switch } from 'react-native-paper';
 
-import { PreferencesContext, useExampleTheme } from '..';
+import { useExampleTheme } from '../hooks/useExampleTheme';
+import { PreferencesContext } from '../PreferencesContext';
 import ScreenWrapper from '../ScreenWrapper';
 
 const SHORT_MESSAGE = 'Single-line snackbar';
diff --git a/example/src/Examples/SurfaceExample.tsx b/example/src/Examples/SurfaceExample.tsx
@@ -9,7 +9,7 @@ import {
   List,
 } from 'react-native-paper';
 
-import { useExampleTheme } from '..';
+import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 const SurfaceExample = () => {
diff --git a/example/src/Examples/SwitchExample.tsx b/example/src/Examples/SwitchExample.tsx
@@ -10,7 +10,7 @@ import {
   TouchableRipple,
 } from 'react-native-paper';
 
-import { useExampleTheme } from '..';
+import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 const SwitchExample = () => {
diff --git a/example/src/Examples/TextExample.tsx b/example/src/Examples/TextExample.tsx
@@ -13,7 +13,7 @@ import {
   Title,
 } from 'react-native-paper';
 
-import { useExampleTheme } from '..';
+import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 const Text = customText<'customVariant'>();
diff --git a/example/src/Examples/TextInputExample.tsx b/example/src/Examples/TextInputExample.tsx
@@ -18,8 +18,8 @@ import {
   TextInput,
 } from 'react-native-paper';
 
-import { useExampleTheme } from '..';
 import { inputReducer, State } from '../../utils';
+import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 const MAX_LENGTH = 20;
diff --git a/example/src/PreferencesContext.tsx b/example/src/PreferencesContext.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+import { MD2Theme, MD3Theme } from 'react-native-paper';
+
+export const PreferencesContext = React.createContext<{
+  toggleShouldUseDeviceColors?: () => void;
+  toggleTheme: () => void;
+  toggleRtl: () => void;
+  toggleThemeVersion: () => void;
+  toggleCollapsed: () => void;
+  toggleCustomFont: () => void;
+  toggleRippleEffect: () => void;
+  customFontLoaded: boolean;
+  rippleEffectEnabled: boolean;
+  collapsed: boolean;
+  rtl: boolean;
+  theme: MD2Theme | MD3Theme;
+  shouldUseDeviceColors?: boolean;
+} | null>(null);
diff --git a/example/src/ScreenWrapper.tsx b/example/src/ScreenWrapper.tsx
@@ -10,7 +10,7 @@ import {
 
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { useExampleTheme } from '.';
+import { useExampleTheme } from './hooks/useExampleTheme';
 
 type Props = ScrollViewProps & {
   children: React.ReactNode;
diff --git a/example/src/hooks/useExampleTheme.ts b/example/src/hooks/useExampleTheme.ts
@@ -0,0 +1,3 @@
+import { MD2Theme, MD3Theme, useTheme } from 'react-native-paper';
+
+export const useExampleTheme = () => useTheme<MD2Theme | MD3Theme>();
diff --git a/example/src/index.native.tsx b/example/src/index.native.tsx
@@ -15,15 +15,13 @@ import {
   MD2LightTheme,
   MD3DarkTheme,
   MD3LightTheme,
-  MD2Theme,
-  MD3Theme,
-  useTheme,
 } from 'react-native-paper';
 import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
 
 import DrawerItems from './DrawerItems';
 import App from './RootNavigator';
 import { deviceColorsSupported } from '../utils';
+import { PreferencesContext } from './PreferencesContext';
 import {
   CombinedDefaultTheme,
   CombinedDarkTheme,
@@ -34,24 +32,6 @@ import {
 const PERSISTENCE_KEY = 'NAVIGATION_STATE';
 const PREFERENCES_KEY = 'APP_PREFERENCES';
 
-export const PreferencesContext = React.createContext<{
-  toggleShouldUseDeviceColors?: () => void;
-  toggleTheme: () => void;
-  toggleRtl: () => void;
-  toggleThemeVersion: () => void;
-  toggleCollapsed: () => void;
-  toggleCustomFont: () => void;
-  toggleRippleEffect: () => void;
-  customFontLoaded: boolean;
-  rippleEffectEnabled: boolean;
-  collapsed: boolean;
-  rtl: boolean;
-  theme: MD2Theme | MD3Theme;
-  shouldUseDeviceColors?: boolean;
-} | null>(null);
-
-export const useExampleTheme = () => useTheme<MD2Theme | MD3Theme>();
-
 const Drawer = createDrawerNavigator<{ Home: undefined }>();
 
 export default function PaperExample() {

Original file line number	Diff line number	Diff line change
`@@ -18,8 +18,8 @@ import {`
`18`	`18`	`} from 'react-native-paper';`
`19`	`19`
`20`	`20`	`import { deviceColorsSupported, isWeb } from '../utils';`
`21`		`-`
`22`		`-import { PreferencesContext, useExampleTheme } from './';`
	`21`	`+import { useExampleTheme } from './hooks/useExampleTheme';`
	`22`	`+import { PreferencesContext } from './PreferencesContext';`
`23`	`23`
`24`	`24`	`const DrawerItemsData = [`
`25`	`25`	`{`