diff --git a/example/src/index.tsx b/example/src/index.tsx
index 07d83b5789..0112a5671c 100644
--- a/example/src/index.tsx
+++ b/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';
 
diff --git a/src/components/Appbar/Appbar.tsx b/src/components/Appbar/Appbar.tsx
index 4abcf557a1..8c6f9e2008 100644
--- a/src/components/Appbar/Appbar.tsx
+++ b/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 };
diff --git a/src/components/Appbar/AppbarAction.tsx b/src/components/Appbar/AppbarAction.tsx
index f250bbd73f..1ef4de58dd 100644
--- a/src/components/Appbar/AppbarAction.tsx
+++ b/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 };
diff --git a/src/components/Appbar/AppbarBackAction.tsx b/src/components/Appbar/AppbarBackAction.tsx
index 79d7944510..7cc483937b 100644
--- a/src/components/Appbar/AppbarBackAction.tsx
+++ b/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 };
diff --git a/src/components/Appbar/AppbarBackIcon.tsx b/src/components/Appbar/AppbarBackIcon.tsx
index 133144db82..d4ff2e33c3 100644
--- a/src/components/Appbar/AppbarBackIcon.tsx
+++ b/src/components/Appbar/AppbarBackIcon.tsx
@@ -41,3 +41,6 @@ const styles = StyleSheet.create({
 });
 
 export default AppbarBackIcon;
+
+// @component-docs ignore-next-line
+export { AppbarBackIcon };
diff --git a/src/components/Appbar/AppbarContent.tsx b/src/components/Appbar/AppbarContent.tsx
index a73e52b2d3..cda690f9ba 100644
--- a/src/components/Appbar/AppbarContent.tsx
+++ b/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 };
diff --git a/src/components/Appbar/AppbarElements.tsx b/src/components/Appbar/AppbarElements.tsx
new file mode 100644
index 0000000000..bbde3a135e
--- /dev/null
+++ b/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';
diff --git a/src/components/Appbar/AppbarHeader.tsx b/src/components/Appbar/AppbarHeader.tsx
index 5d099450f8..54232f5677 100644
--- a/src/components/Appbar/AppbarHeader.tsx
+++ b/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 };
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index cf201be0d4..12c8e50c33 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/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 };
diff --git a/src/components/Checkbox/CheckboxAndroid.tsx b/src/components/Checkbox/CheckboxAndroid.tsx
index f1a33e191d..03869454b4 100644
--- a/src/components/Checkbox/CheckboxAndroid.tsx
+++ b/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 };
diff --git a/src/components/Checkbox/CheckboxElements.tsx b/src/components/Checkbox/CheckboxElements.tsx
new file mode 100644
index 0000000000..2b88791314
--- /dev/null
+++ b/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';
diff --git a/src/components/Checkbox/CheckboxIOS.tsx b/src/components/Checkbox/CheckboxIOS.tsx
index 154e7101bb..d60b9f80ce 100644
--- a/src/components/Checkbox/CheckboxIOS.tsx
+++ b/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 };
diff --git a/src/components/Checkbox/CheckboxItem.tsx b/src/components/Checkbox/CheckboxItem.tsx
index d5de585d11..d1f8056725 100644
--- a/src/components/Checkbox/CheckboxItem.tsx
+++ b/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: {
diff --git a/src/components/FAB/FAB.tsx b/src/components/FAB/FAB.tsx
index 2e1e5a355a..668399ffeb 100644
--- a/src/components/FAB/FAB.tsx
+++ b/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 };
diff --git a/src/components/FAB/FABElements.tsx b/src/components/FAB/FABElements.tsx
new file mode 100644
index 0000000000..f2e84ad67a
--- /dev/null
+++ b/src/components/FAB/FABElements.tsx
@@ -0,0 +1,2 @@
+export { FABGroup } from './FABGroup';
+export { FAB } from './FAB';
diff --git a/src/components/FAB/FABGroup.tsx b/src/components/FAB/FABGroup.tsx
index d8cfa16c64..3f03d3b948 100644
--- a/src/components/FAB/FABGroup.tsx
+++ b/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: {
diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx
index be97c16b71..b36de5bafd 100644
--- a/src/components/RadioButton/RadioButton.tsx
+++ b/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 };
diff --git a/src/components/RadioButton/RadioButtonAndroid.tsx b/src/components/RadioButton/RadioButtonAndroid.tsx
index ce7955fc56..49c89f169a 100644
--- a/src/components/RadioButton/RadioButtonAndroid.tsx
+++ b/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 };
diff --git a/src/components/RadioButton/RadioButtonElements.tsx b/src/components/RadioButton/RadioButtonElements.tsx
new file mode 100644
index 0000000000..4ef21de368
--- /dev/null
+++ b/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';
diff --git a/src/components/RadioButton/RadioButtonGroup.tsx b/src/components/RadioButton/RadioButtonGroup.tsx
index 8f955ae360..416bb65d0f 100644
--- a/src/components/RadioButton/RadioButtonGroup.tsx
+++ b/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 };
diff --git a/src/components/RadioButton/RadioButtonIOS.tsx b/src/components/RadioButton/RadioButtonIOS.tsx
index 2b763bbe14..53ac1b93ae 100644
--- a/src/components/RadioButton/RadioButtonIOS.tsx
+++ b/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 };
diff --git a/src/components/RadioButton/RadioButtonItem.tsx b/src/components/RadioButton/RadioButtonItem.tsx
index 65bb55bb2b..d25794476c 100644
--- a/src/components/RadioButton/RadioButtonItem.tsx
+++ b/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: {
diff --git a/src/components/ToggleButton/ToggleButton.tsx b/src/components/ToggleButton/ToggleButton.tsx
index 1a86f47a9c..a8be3c7df0 100644
--- a/src/components/ToggleButton/ToggleButton.tsx
+++ b/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 };
diff --git a/src/components/ToggleButton/ToggleButtonElements.tsx b/src/components/ToggleButton/ToggleButtonElements.tsx
new file mode 100644
index 0000000000..29c574498e
--- /dev/null
+++ b/src/components/ToggleButton/ToggleButtonElements.tsx
@@ -0,0 +1,3 @@
+export { ToggleButton } from './ToggleButton';
+export { ToggleButtonRow } from './ToggleButtonRow';
+export { ToggleButtonGroup } from './ToggleButtonGroup';
diff --git a/src/components/ToggleButton/ToggleButtonGroup.tsx b/src/components/ToggleButton/ToggleButtonGroup.tsx
index 62357b2c03..e1430904a6 100644
--- a/src/components/ToggleButton/ToggleButtonGroup.tsx
+++ b/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 };
diff --git a/src/components/ToggleButton/ToggleButtonRow.tsx b/src/components/ToggleButton/ToggleButtonRow.tsx
index 109d3d855a..080bf7487c 100644
--- a/src/components/ToggleButton/ToggleButtonRow.tsx
+++ b/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 };
diff --git a/src/components/__tests__/Checkbox/CheckboxItem.test.js b/src/components/__tests__/Checkbox/CheckboxItem.test.js
index 90a24af683..cdf2f4952d 100644
--- a/src/components/__tests__/Checkbox/CheckboxItem.test.js
+++ b/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();
 
diff --git a/src/components/__tests__/FAB.test.js b/src/components/__tests__/FAB.test.js
index 447b6b9971..11bb069fc9 100644
--- a/src/components/__tests__/FAB.test.js
+++ b/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();
diff --git a/src/components/__tests__/RadioButton/RadioButtonItem.test.js b/src/components/__tests__/RadioButton/RadioButtonItem.test.js
index fa647633b6..d9201885b9 100644
--- a/src/components/__tests__/RadioButton/RadioButtonItem.test.js
+++ b/src/components/__tests__/RadioButton/RadioButtonItem.test.js
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { Platform } from 'react-native';
 import renderer from 'react-test-renderer';
-import RadioButtonItem from '../../RadioButton/RadioButtonItem';
+import RadioButton from '../../RadioButton/RadioButton';
 
 it('renders unchecked', () => {
   const tree = renderer
     .create(
-      <RadioButtonItem
+      <RadioButton.Item
         status="unchecked"
         label="Unchecked Button"
         value="unchecked"
@@ -21,7 +21,7 @@ it('can render the iOS radio button on different platforms', () => {
   Platform.OS = 'android';
   const tree = renderer
     .create(
-      <RadioButtonItem
+      <RadioButton.Item
         status="unchecked"
         label="iOS Radio button"
         mode="ios"
@@ -37,7 +37,7 @@ it('can render the Android radio button on different platforms', () => {
   Platform.OS = 'ios';
   const tree = renderer
     .create(
-      <RadioButtonItem
+      <RadioButton.Item
         status="unchecked"
         label="iOS Checkbox"
         mode="android"
diff --git a/src/components/__tests__/ToggleButton.test.js b/src/components/__tests__/ToggleButton.test.js
index 731107f271..b6331015c0 100644
--- a/src/components/__tests__/ToggleButton.test.js
+++ b/src/components/__tests__/ToggleButton.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import renderer from 'react-test-renderer';
-import ToggleButton from '../ToggleButton/ToggleButton.tsx';
+import ToggleButton from '../ToggleButton/ToggleButton';
 
 it('renders toggle button', () => {
   const tree = renderer