refactor(ui): export react element types

src/framework/theme/application/applicationProvider.component.tsx

@@ -23,6 +23,7 @@ interface ComponentProps {
 }
 
 export type ApplicationProviderProps = ComponentProps & ThemeProviderProps;
+export type ApplicationProviderElement = React.ReactElement<ApplicationProviderProps>;
 
 interface State {
   styles: ThemeStyleType;

src/framework/theme/index.ts

@@ -11,6 +11,7 @@ export {
 export {
   ApplicationProvider,
   ApplicationProviderProps,
+  ApplicationProviderElement,
 } from './application/applicationProvider.component';
 export {
   ModalPanel,

src/framework/ui/avatar/avatar.component.tsx

@@ -23,6 +23,7 @@ interface ComponentProps {
 }
 
 export type AvatarProps = StyledComponentProps & ImageProps & ComponentProps;
+export type AvatarElement = React.ReactElement<AvatarProps>;
 
 /**
  * Styled Image component.

src/framework/ui/bottomNavigation/bottomNavigation.component.tsx

@@ -17,15 +17,14 @@ import {
   StyledComponentProps,
   StyleType,
 } from '@kitten/theme';
-import { BottomNavigationTabProps } from './bottomNavigationTab.component';
+import { BottomNavigationTabElement } from './bottomNavigationTab.component';
 import {
   TabIndicator,
   TabIndicatorProps,
 } from '../support/components';
 
-type TabElement = React.ReactElement<BottomNavigationTabProps>;
 type IndicatorElement = React.ReactElement<TabIndicatorProps>;
-type ChildrenProp = TabElement | TabElement[];
+type ChildrenProp = BottomNavigationTabElement | BottomNavigationTabElement[];
 
 interface ComponentProps {
   children: ChildrenProp;
@@ -35,6 +34,7 @@ interface ComponentProps {
 }
 
 export type BottomNavigationProps = StyledComponentProps & ViewProps & ComponentProps;
+export type BottomNavigationElement = React.ReactElement<BottomNavigationProps>;
 
 /**
  * BottomNavigation component is designed to be a Bottom Tab Bar.
@@ -223,7 +223,7 @@ export class BottomNavigationComponent extends React.Component<BottomNavigationP
     );
   };
 
-  private renderTabElement = (element: TabElement, index: number): TabElement => {
+  private renderTabElement = (element: BottomNavigationTabElement, index: number): BottomNavigationTabElement => {
     return React.cloneElement(element, {
       key: index,
       style: [styles.item, element.props.style],
@@ -232,12 +232,12 @@ export class BottomNavigationComponent extends React.Component<BottomNavigationP
     });
   };
 
-  private renderTabElements = (source: ChildrenProp): TabElement[] => {
+  private renderTabElements = (source: ChildrenProp): BottomNavigationTabElement[] => {
     return React.Children.map(source, this.renderTabElement);
   };
 
   private renderComponentChildren = (style: StyleType): React.ReactNodeArray => {
-    const tabElements: TabElement[] = this.renderTabElements(this.props.children);
+    const tabElements: BottomNavigationTabElement[] = this.renderTabElements(this.props.children);
 
     const hasIndicator: boolean = style.indicator.height > 0;
 

src/framework/ui/bottomNavigation/bottomNavigationTab.component.tsx

@@ -21,11 +21,10 @@ import {
 } from '@kitten/theme';
 import {
   Text,
-  TextProps,
+  TextElement,
 } from '../text/text.component';
 import { isValidString } from '../support/services';
 
-type TitleElement = React.ReactElement<TextProps>;
 type IconElement = React.ReactElement<ImageProps>;
 type IconProp = (style: ImageStyle) => IconElement;
 
@@ -38,6 +37,7 @@ interface ComponentProps {
 }
 
 export type BottomNavigationTabProps = StyledComponentProps & TouchableOpacityProps & ComponentProps;
+export type BottomNavigationTabElement = React.ReactElement<BottomNavigationTabProps>;
 
 /**
  * BottomNavigationTab component is a part of the BottomNavigation component.
@@ -113,7 +113,7 @@ export class BottomNavigationTabComponent extends React.Component<BottomNavigati
     });
   };
 
-  private renderTitleElement = (style: TextStyle): TitleElement => {
+  private renderTitleElement = (style: TextStyle): TextElement => {
     const { title, titleStyle } = this.props;
 
     return (

src/framework/ui/button/button.component.tsx

@@ -23,11 +23,10 @@ import {
 } from '@kitten/theme';
 import {
   Text,
-  TextProps,
+  TextElement,
 } from '../text/text.component';
 import { isValidString } from '../support/services';
 
-type TextElement = React.ReactElement<TextProps>;
 type IconElement = React.ReactElement<ImageProps>;
 type IconProp = (style: ImageStyle) => IconElement;
 
@@ -40,6 +39,7 @@ interface ComponentProps {
 }
 
 export type ButtonProps = StyledComponentProps & TouchableOpacityProps & ComponentProps;
+export type ButtonElement = React.ReactElement<ButtonProps>;
 
 /**
  * Styled Button component.

src/framework/ui/buttonGroup/buttonGroup.component.tsx

@@ -16,9 +16,8 @@ import {
   StyledComponentProps,
   StyleType,
 } from '@kitten/theme';
-import { ButtonProps } from '../button/button.component';
+import { ButtonElement } from '../button/button.component';
 
-type ButtonElement = React.ReactElement<ButtonProps>;
 type ChildrenProp = ButtonElement | ButtonElement[];
 
 interface ComponentProps {
@@ -28,6 +27,7 @@ interface ComponentProps {
 }
 
 export type ButtonGroupProps = StyledComponentProps & ViewProps & ComponentProps;
+export type ButtonGroupElement = React.ReactElement<ButtonGroupProps>;
 
 /**
  * Renders a group of buttons.

src/framework/ui/checkbox/checkbox.component.tsx

@@ -25,13 +25,12 @@ import {
 } from '@kitten/theme';
 import {
   Text,
-  TextProps,
+  TextElement,
 } from '../text/text.component';
 import { CheckMark } from '../support/components';
 import { isValidString } from '../support/services';
 
 type IconElement = React.ReactElement<ViewProps>;
-type TextElement = React.ReactElement<TextProps>;
 
 interface ComponentProps {
   textStyle?: StyleProp<TextStyle>;
@@ -43,6 +42,7 @@ interface ComponentProps {
 }
 
 export type CheckBoxProps = StyledComponentProps & TouchableOpacityProps & ComponentProps;
+export type CheckBoxElement = React.ReactElement<CheckBoxProps>;
 
 /**
  * Styled CheckBox component.

src/framework/ui/index.ts

@@ -1,101 +1,126 @@
 export {
   Avatar,
   AvatarProps,
+  AvatarElement,
 } from './avatar/avatar.component';
 export {
   BottomNavigation,
   BottomNavigationProps,
+  BottomNavigationElement,
 } from './bottomNavigation/bottomNavigation.component';
 export {
   BottomNavigationTab,
   BottomNavigationTabProps,
+  BottomNavigationTabElement,
 } from './bottomNavigation/bottomNavigationTab.component';
 export {
   Button,
   ButtonProps,
+  ButtonElement,
 } from './button/button.component';
 export {
   ButtonGroup,
   ButtonGroupProps,
+  ButtonGroupElement,
 } from './buttonGroup/buttonGroup.component';
 export {
   CheckBox,
   CheckBoxProps,
+  CheckBoxElement,
 } from './checkbox/checkbox.component';
 export {
   Input,
   InputProps,
+  InputElement,
 } from './input/input.component';
 export {
   Layout,
   LayoutProps,
+  LayoutElement,
 } from './layout/layout.component';
 export {
   List,
   ListProps,
+  ListElement,
 } from './list/list.component';
 export {
   ListItem,
   ListItemProps,
+  ListItemElement,
 } from './list/listItem.component';
 export {
   Modal,
   ModalProps,
+  ModalElement,
 } from './modal/modal.component';
 export {
   OverflowMenu,
   OverflowMenuProps,
+  OverflowMenuElement,
 } from './overflowMenu/overflowMenu.component';
 export {
   OverflowMenuItem,
   OverflowMenuItemProps,
   OverflowMenuItemType,
+  OverflowMenuItemElement,
 } from './overflowMenu/overflowMenuItem.component';
 export {
   Popover,
   PopoverProps,
+  PopoverElement,
 } from './popover/popover.component';
 export {
   Radio,
   RadioProps,
+  RadioElement,
 } from './radio/radio.component';
 export {
   RadioGroup,
   RadioGroupProps,
+  RadioGroupElement,
 } from './radioGroup/radioGroup.component';
 export {
   TabView,
   TabViewProps,
+  TabViewElement,
 } from './tab/tabView.component';
 export {
   TabBar,
   TabBarProps,
+  TabBarElement,
 } from './tab/tabBar.component';
 export {
   Tab,
   TabProps,
+  TabElement,
 } from './tab/tab.component';
 export {
   Text,
   TextProps,
+  TextElement,
 } from './text/text.component';
 export {
   Toggle,
   ToggleProps,
+  ToggleElement,
 } from './toggle/toggle.component';
 export {
   Tooltip,
   TooltipProps,
+  TooltipElement,
 } from './tooltip/tooltip.component';
 export {
   TopNavigation,
   TopNavigationProps,
+  TopNavigationElement,
 } from './topNavigation/topNavigation.component';
 export {
   TopNavigationAction,
   TopNavigationActionProps,
+  TopNavigationActionElement,
 } from './topNavigation/topNavigationAction.component';
 export {
   ViewPager,
   ViewPagerProps,
+  ViewPagerElement,
 } from './viewPager/viewPager.component';

src/framework/ui/input/input.component.tsx

@@ -27,7 +27,7 @@ import {
 } from '@kitten/theme';
 import {
   Text,
-  TextProps,
+  TextElement,
 } from '../text/text.component';
 import {
   allWithRest,
@@ -38,7 +38,6 @@ import {
   InputFocusEvent,
 } from '../support/typings';
 
-type TextElement = React.ReactElement<TextProps>;
 type IconElement = React.ReactElement<ImageProps>;
 type IconProp = (style: StyleType) => IconElement;
 
@@ -57,6 +56,7 @@ interface ComponentProps {
 }
 
 export type InputProps = StyledComponentProps & TextInputProps & ComponentProps;
+export type InputElement = React.ReactElement<InputProps>;
 
 /**
  * Styled Input component.

src/framework/ui/layout/layout.component.tsx

@@ -26,6 +26,7 @@ interface ComponentProps {
 }
 
 export type LayoutProps = StyledComponentProps & ViewProps & ComponentProps;
+export type LayoutElement = React.ReactElement<LayoutProps>;
 
 /**
  * Layout container component. Behaves like React Native View.

src/framework/ui/list/list.component.tsx

@@ -29,6 +29,7 @@ interface ComponentProps {
 }
 
 export type ListProps = StyledComponentProps & FlatListProps<ItemType> & ComponentProps;
+export type ListElement = React.ReactElement<ListProps>;
 
 /**
  * List component is a performant interface for rendering simple, flat lists. Extends `FlatList`. Renders list of

src/framework/ui/list/listItem.component.tsx

@@ -26,12 +26,11 @@ import {
 } from '@kitten/theme';
 import {
   Text,
-  TextProps,
+  TextElement,
 } from '../text/text.component';
 import { TouchableIndexedProps } from '../support/typings';
 import { isValidString } from '../support/services';
 
-type TextElement = React.ReactElement<TextProps>;
 type IconElement = React.ReactElement<ImageProps>;
 type AccessoryElement = React.ReactElement<any>;
 type IconProp = (style: StyleType, index: number) => IconElement;
@@ -65,6 +64,7 @@ interface CustomContentProps {
 type ComponentProps = (TemplateTitleProps | TemplateDescriptionProps | CustomContentProps) & ListDerivedProps;
 
 export type ListItemProps = StyledComponentProps & TouchableIndexedProps & ComponentProps;
+export type ListItemElement = React.ReactElement<ListItemProps>;
 
 /**
  * ListItem is a support component for List.

src/framework/ui/modal/modal.component.tsx

@@ -44,6 +44,7 @@ interface ComponentProps {
 }
 
 export type ModalProps = ViewProps & ComponentProps & ModalPresentingBased;
+export type ModalElement = React.ReactElement<ModalProps>;
 
 /**
  * Modal component is a wrapper than presents content above an enclosing view.