fix: remove cycles (#2378)

example/src/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { I18nManager, Platform, YellowBox } from 'react-native';
+import { I18nManager, Platform } from 'react-native';
 import AsyncStorage from '@react-native-community/async-storage';
 import { Updates } from 'expo';
 import { useKeepAwake } from 'expo-keep-awake';
@@ -32,8 +32,6 @@ declare global {
   }
 }
 
-YellowBox.ignoreWarnings(['Require cycle:']);
-
 const PERSISTENCE_KEY = 'NAVIGATION_STATE';
 const PREFERENCES_KEY = 'APP_PREFERENCES';
 

src/components/Appbar/Appbar.tsx

@@ -2,14 +2,12 @@ import * as React from 'react';
 import { View, ViewStyle, Platform, StyleSheet, StyleProp } from 'react-native';
 import color from 'color';
 
-import AppbarContent, {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  AppbarContent as _AppbarContent,
-} from './AppbarContent';
-import AppbarAction from './AppbarAction';
-import AppbarBackAction from './AppbarBackAction';
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import AppbarHeader, { AppbarHeader as _AppbarHeader } from './AppbarHeader';
+import {
+  AppbarContent,
+  AppbarAction,
+  AppbarBackAction,
+  AppbarHeader,
+} from './AppbarElements';
 import Surface from '../Surface';
 import { withTheme } from '../../core/theming';
 import { black, white } from '../../styles/colors';
@@ -196,3 +194,8 @@ const styles = StyleSheet.create({
 });
 
 export default withTheme(Appbar);
+
+// @component-docs ignore-next-line
+const AppbarWithTheme = withTheme(Appbar);
+// @component-docs ignore-next-line
+export { AppbarWithTheme as Appbar };

src/components/Appbar/AppbarAction.tsx

@@ -97,3 +97,6 @@ const AppbarAction = ({
 AppbarAction.displayName = 'Appbar.Action';
 
 export default AppbarAction;
+
+// @component-docs ignore-next-line
+export { AppbarAction };

src/components/Appbar/AppbarBackAction.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { $Omit } from './../../types';
-import AppbarAction from './AppbarAction';
-import AppbarBackIcon from './AppbarBackIcon';
+import { AppbarAction, AppbarBackIcon } from './AppbarElements';
 import type { StyleProp, ViewStyle } from 'react-native';
 
 type Props = $Omit<
@@ -74,3 +73,6 @@ const AppbarBackAction = ({ accessibilityLabel = 'Back', ...rest }: Props) => (
 AppbarBackAction.displayName = 'Appbar.BackAction';
 
 export default AppbarBackAction;
+
+// @component-docs ignore-next-line
+export { AppbarBackAction };

src/components/Appbar/AppbarBackIcon.tsx

@@ -41,3 +41,6 @@ const styles = StyleSheet.create({
 });
 
 export default AppbarBackIcon;
+
+// @component-docs ignore-next-line
+export { AppbarBackIcon };

src/components/Appbar/AppbarContent.tsx

@@ -144,4 +144,6 @@ const styles = StyleSheet.create({
 export default withTheme(AppbarContent);
 
 // @component-docs ignore-next-line
-export { AppbarContent };
+const AppbarContentWithTheme = withTheme(AppbarContent);
+// @component-docs ignore-next-line
+export { AppbarContentWithTheme as AppbarContent };

src/components/Appbar/AppbarElements.tsx

@@ -0,0 +1,6 @@
+export { Appbar } from './Appbar';
+export { AppbarAction } from './AppbarAction';
+export { AppbarBackAction } from './AppbarBackAction';
+export { AppbarBackIcon } from './AppbarBackIcon';
+export { AppbarContent } from './AppbarContent';
+export { AppbarHeader } from './AppbarHeader';

src/components/Appbar/AppbarHeader.tsx

@@ -7,7 +7,8 @@ import {
   ViewStyle,
 } from 'react-native';
 import overlay from '../../styles/overlay';
-import Appbar, { DEFAULT_APPBAR_HEIGHT } from './Appbar';
+import { Appbar } from './AppbarElements';
+import { DEFAULT_APPBAR_HEIGHT } from './Appbar';
 import shadow from '../../styles/shadow';
 import { withTheme } from '../../core/theming';
 import { APPROX_STATUSBAR_HEIGHT } from '../../constants';
@@ -134,4 +135,6 @@ const styles = StyleSheet.create({
 export default withTheme(AppbarHeader);
 
 // @component-docs ignore-next-line
-export { AppbarHeader };
+const AppbarHeaderWithTheme = withTheme(AppbarHeader);
+// @component-docs ignore-next-line
+export { AppbarHeaderWithTheme as AppbarHeader };

src/components/Checkbox/Checkbox.tsx

@@ -1,12 +1,6 @@
 import * as React from 'react';
 import { Platform } from 'react-native';
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import CheckboxIOS, { CheckboxIOS as _CheckboxIOS } from './CheckboxIOS';
-import CheckboxAndroid, {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  CheckboxAndroid as _CheckboxAndroid,
-} from './CheckboxAndroid';
-import CheckboxItem from './CheckboxItem';
+import { CheckboxIOS, CheckboxItem, CheckboxAndroid } from './CheckboxElements';
 import { withTheme } from '../../core/theming';
 
 type Props = {
@@ -100,3 +94,8 @@ Checkbox.Android = CheckboxAndroid;
 Checkbox.IOS = CheckboxIOS;
 
 export default withTheme(Checkbox);
+
+// @component-docs ignore-next-line
+const CheckboxWithTheme = withTheme(Checkbox);
+// @component-docs ignore-next-line
+export { CheckboxWithTheme as Checkbox };

src/components/Checkbox/CheckboxAndroid.tsx

@@ -188,4 +188,6 @@ const styles = StyleSheet.create({
 export default withTheme(CheckboxAndroid);
 
 // @component-docs ignore-next-line
-export { CheckboxAndroid };
+const CheckboxAndroidWithTheme = withTheme(CheckboxAndroid);
+// @component-docs ignore-next-line
+export { CheckboxAndroidWithTheme as CheckboxAndroid };

src/components/Checkbox/CheckboxElements.tsx

@@ -0,0 +1,4 @@
+export { Checkbox } from './Checkbox';
+export { CheckboxAndroid } from './CheckboxAndroid';
+export { CheckboxIOS } from './CheckboxIOS';
+export { CheckboxItem } from './CheckboxItem';

src/components/Checkbox/CheckboxIOS.tsx

@@ -114,4 +114,6 @@ const styles = StyleSheet.create({
 export default withTheme(CheckboxIOS);
 
 // @component-docs ignore-next-line
-export { CheckboxIOS };
+const CheckboxIOSWithTheme = withTheme(CheckboxIOS);
+// @component-docs ignore-next-line
+export { CheckboxIOSWithTheme as CheckboxIOS };

src/components/Checkbox/CheckboxItem.tsx

@@ -8,9 +8,7 @@ import {
   ViewStyle,
 } from 'react-native';
 
-import CheckBox from './Checkbox';
-import CheckboxAndroid from './CheckboxAndroid';
-import CheckboxIOS from './CheckboxIOS';
+import { Checkbox, CheckboxAndroid, CheckboxIOS } from './CheckboxElements';
 import Text from '../Typography/Text';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 import { withTheme } from '../../core/theming';
@@ -101,7 +99,7 @@ const CheckboxItem = ({
   } else if (mode === 'ios') {
     checkbox = <CheckboxIOS {...checkboxProps} />;
   } else {
-    checkbox = <CheckBox {...checkboxProps} />;
+    checkbox = <Checkbox {...checkboxProps} />;
   }
 
   return (
@@ -123,7 +121,9 @@ CheckboxItem.displayName = 'Checkbox.Item';
 export default withTheme(CheckboxItem);
 
 // @component-docs ignore-next-line
-export { CheckboxItem };
+const CheckboxItemWithTheme = withTheme(CheckboxItem);
+// @component-docs ignore-next-line
+export { CheckboxItemWithTheme as CheckboxItem };
 
 const styles = StyleSheet.create({
   container: {

src/components/FAB/FAB.tsx

@@ -2,8 +2,6 @@ import color from 'color';
 import * as React from 'react';
 import { Animated, View, ViewStyle, StyleSheet, StyleProp } from 'react-native';
 import ActivityIndicator from '../ActivityIndicator';
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import FABGroup, { FABGroup as _FABGroup } from './FABGroup';
 import Surface from '../Surface';
 import CrossFadeIcon from '../CrossFadeIcon';
 import Icon from '../Icon';
@@ -14,6 +12,7 @@ import { withTheme } from '../../core/theming';
 import type { $RemoveChildren } from '../../types';
 import type { IconSource } from './../Icon';
 import type { AccessibilityState } from 'react-native';
+import { FABGroup } from './FABElements';
 
 type Props = $RemoveChildren<typeof Surface> & {
   /**
@@ -285,3 +284,8 @@ const styles = StyleSheet.create({
 });
 
 export default withTheme(FAB);
+
+// @component-docs ignore-next-line
+const FABWithTheme = withTheme(FAB);
+// @component-docs ignore-next-line
+export { FABWithTheme as FAB };

src/components/FAB/FABElements.tsx

@@ -0,0 +1,2 @@
+export { FABGroup } from './FABGroup';
+export { FAB } from './FAB';

src/components/FAB/FABGroup.tsx

@@ -9,7 +9,7 @@ import {
   ViewStyle,
 } from 'react-native';
 import color from 'color';
-import FAB from './FAB';
+import { FAB } from './FABElements';
 import Text from '../Typography/Text';
 import Card from '../Card/Card';
 import { withTheme } from '../../core/theming';
@@ -358,7 +358,9 @@ FABGroup.displayName = 'FAB.Group';
 export default withTheme(FABGroup);
 
 // @component-docs ignore-next-line
-export { FABGroup };
+const FABGroupWithTheme = withTheme(FABGroup);
+// @component-docs ignore-next-line
+export { FABGroupWithTheme as FABGroup };
 
 const styles = StyleSheet.create({
   safeArea: {

src/components/RadioButton/RadioButton.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { Platform } from 'react-native';
-import RadioButtonGroup from './RadioButtonGroup';
-import RadioButtonAndroid from './RadioButtonAndroid';
-import RadioButtonIOS from './RadioButtonIOS';
-import RadioButtonItem from './RadioButtonItem';
+import {
+  RadioButtonAndroid,
+  RadioButtonGroup,
+  RadioButtonIOS,
+  RadioButtonItem,
+} from './RadioButtonElements';
 import { withTheme } from '../../core/theming';
 
 export type Props = {
@@ -113,3 +115,8 @@ RadioButton.IOS = RadioButtonIOS;
 RadioButton.Item = RadioButtonItem;
 
 export default withTheme(RadioButton);
+
+// @component-docs ignore-next-line
+const RadioButtonWithTheme = withTheme(RadioButton);
+// @component-docs ignore-next-line
+export { RadioButtonWithTheme as RadioButton };

src/components/RadioButton/RadioButtonAndroid.tsx

@@ -217,4 +217,6 @@ const styles = StyleSheet.create({
 export default withTheme(RadioButtonAndroid);
 
 // @component-docs ignore-next-line
-export { RadioButtonAndroid };
+const RadioButtonAndroidWithTheme = withTheme(RadioButtonAndroid);
+// @component-docs ignore-next-line
+export { RadioButtonAndroidWithTheme as RadioButtonAndroid };

src/components/RadioButton/RadioButtonElements.tsx

@@ -0,0 +1,5 @@
+export { RadioButton } from './RadioButton';
+export { RadioButtonAndroid } from './RadioButtonAndroid';
+export { RadioButtonGroup } from './RadioButtonGroup';
+export { RadioButtonIOS } from './RadioButtonIOS';
+export { RadioButtonItem } from './RadioButtonItem';

src/components/RadioButton/RadioButtonGroup.tsx

@@ -75,3 +75,6 @@ const RadioButtonGroup = ({ value, onValueChange, children }: Props) => (
 
 RadioButtonGroup.displayName = 'RadioButton.Group';
 export default RadioButtonGroup;
+
+// @component-docs ignore-next-line
+export { RadioButtonGroup };

src/components/RadioButton/RadioButtonIOS.tsx

@@ -140,4 +140,6 @@ const styles = StyleSheet.create({
 export default withTheme(RadioButtonIOS);
 
 // @component-docs ignore-next-line
-export { RadioButtonIOS };
+const RadioButtonIOSWithTheme = withTheme(RadioButtonIOS);
+// @component-docs ignore-next-line
+export { RadioButtonIOSWithTheme as RadioButtonIOS };

src/components/RadioButton/RadioButtonItem.tsx

@@ -10,7 +10,7 @@ import { withTheme } from '../../core/theming';
 import { RadioButtonContext, RadioButtonContextType } from './RadioButtonGroup';
 import { handlePress } from './utils';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
-import RadioButton from './RadioButton';
+import { RadioButton } from './RadioButtonElements';
 import Text from '../Typography/Text';
 import RadioButtonAndroid from './RadioButtonAndroid';
 import RadioButtonIOS from './RadioButtonIOS';
@@ -162,7 +162,9 @@ RadioButtonItem.displayName = 'RadioButton.Item';
 export default withTheme(RadioButtonItem);
 
 // @component-docs ignore-next-line
-export { RadioButtonItem };
+const RadioButtonItemWithTheme = withTheme(RadioButtonItem);
+// @component-docs ignore-next-line
+export { RadioButtonItemWithTheme as RadioButtonItem };
 
 const styles = StyleSheet.create({
   container: {

src/components/ToggleButton/ToggleButton.tsx

@@ -8,12 +8,10 @@ import {
 import { withTheme } from '../../core/theming';
 import color from 'color';
 import IconButton from '../IconButton';
-import ToggleButtonGroup, {
-  ToggleButtonGroupContext,
-} from './ToggleButtonGroup';
-import ToggleButtonRow from './ToggleButtonRow';
+import { ToggleButtonGroupContext } from './ToggleButtonGroup';
 import { black, white } from '../../styles/colors';
 import type { IconSource } from '../Icon';
+import { ToggleButtonRow, ToggleButtonGroup } from './ToggleButtonElements';
 
 type Props = {
   /**
@@ -171,3 +169,8 @@ const styles = StyleSheet.create({
 });
 
 export default withTheme(ToggleButton);
+
+// @component-docs ignore-next-line
+const ToggleButtonWithTheme = withTheme(ToggleButton);
+// @component-docs ignore-next-line
+export { ToggleButtonWithTheme as ToggleButton };

src/components/ToggleButton/ToggleButtonElements.tsx

@@ -0,0 +1,3 @@
+export { ToggleButton } from './ToggleButton';
+export { ToggleButtonRow } from './ToggleButtonRow';
+export { ToggleButtonGroup } from './ToggleButtonGroup';

src/components/ToggleButton/ToggleButtonGroup.tsx

@@ -69,3 +69,6 @@ const ToggleButtonGroup = ({ value, onValueChange, children }: Props) => (
 ToggleButtonGroup.displayName = 'ToggleButton.Group';
 
 export default ToggleButtonGroup;
+
+// @component-docs ignore-next-line
+export { ToggleButtonGroup };

src/components/ToggleButton/ToggleButtonRow.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
-import ToggleButton from './ToggleButton';
+import { ToggleButton } from './ToggleButtonElements';
 
 type Props = {
   /**
@@ -106,3 +106,6 @@ const styles = StyleSheet.create({
 });
 
 export default ToggleButtonRow;
+
+// @component-docs ignore-next-line
+export { ToggleButtonRow };

src/components/__tests__/Checkbox/CheckboxItem.test.js

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { Platform } from 'react-native';
 import renderer from 'react-test-renderer';
-import CheckboxItem from '../../Checkbox/CheckboxItem';
+import Checkbox from '../../Checkbox/Checkbox';
 
 it('renders unchecked', () => {
   const tree = renderer
-    .create(<CheckboxItem status="unchecked" label="Unchecked Button" />)
+    .create(<Checkbox.Item status="unchecked" label="Unchecked Button" />)
     .toJSON();
 
   expect(tree).toMatchSnapshot();
@@ -14,7 +14,9 @@ it('renders unchecked', () => {
 it('can render the iOS checkbox on different platforms', () => {
   Platform.OS = 'android';
   const tree = renderer
-    .create(<CheckboxItem status="unchecked" label="iOS Checkbox" mode="ios" />)
+    .create(
+      <Checkbox.Item status="unchecked" label="iOS Checkbox" mode="ios" />
+    )
     .toJSON();
 
   expect(tree).toMatchSnapshot();
@@ -24,7 +26,7 @@ it('can render the Android checkbox on different platforms', () => {
   Platform.OS = 'ios';
   const tree = renderer
     .create(
-      <CheckboxItem status="unchecked" label="iOS Checkbox" mode="android" />
+      <Checkbox.Item status="unchecked" label="iOS Checkbox" mode="android" />
     )
     .toJSON();
 

src/components/__tests__/FAB.test.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import renderer from 'react-test-renderer';
-import FAB from '../FAB/FAB.tsx';
+import FAB from '../FAB/FAB';
 
 it('renders normal FAB', () => {
   const tree = renderer.create(<FAB onPress={() => {}} icon="plus" />).toJSON();