refactor(tab-set): rename rkTabView component to rkTabSet & docs update

docs/structure.ts

@@ -53,6 +53,33 @@ export const STRUCTURE = [
     type: 'section',
     name: 'UI Components',
     children: [
+      {
+        type: 'page',
+        name: 'RkBadge',
+        demogif: 'badge.gif',
+        children: [
+          {
+            type: 'block',
+            block: 'rk-description',
+            klass: 'RkBadge',
+          },
+          {
+            type: 'block',
+            block: 'rk-examples',
+            klass: 'RkBadge',
+          },
+          {
+            type: 'block',
+            block: 'rk-props',
+            klass: 'RkBadge',
+          },
+          {
+            type: 'block',
+            block: 'rk-styles',
+            klass: 'RkBadge',
+          }
+        ]
+      },
       {
         type: 'page',
         name: 'RkButton',
@@ -317,6 +344,38 @@ export const STRUCTURE = [
           }
         ]
       },
+      {
+        type: 'page',
+        name: 'RkTabSet',
+        demogif: 'tab-view.gif',
+        children: [
+          {
+            type: 'block',
+            block: 'rk-description',
+            klass: 'RkTabSet',
+          },
+          {
+            type: 'block',
+            block: 'rk-examples',
+            klass: 'RkTabSet',
+          },
+          {
+            type: 'block',
+            block: 'rk-props',
+            klass: 'RkTabSet',
+          },
+          {
+            type: 'block',
+            block: 'rk-props',
+            klass: 'RkTab',
+          },
+          {
+            type: 'block',
+            block: 'rk-styles',
+            klass: 'RkTabSet',
+          }
+        ]
+      },
       {
         type: 'page',
         name: 'RkText',

example/App.js

@@ -26,10 +26,10 @@ const ExplorerApp = StackNavigator({
   HorizontalCalendar: { screen: Screens.HorizontalCalendarScreen },
   Switch: { screen: Screens.SwitchScreen },
   Choice: { screen: Screens.ChoiceScreen },
-  TabView: { screen: Screens.TabsScreen },
-  BaseTabs: { screen: Screens.BaseTabViewScreen },
-  BadgeTabs: { screen: Screens.BadgeTabViewScreen },
-  IconTabs: { screen: Screens.IconTabsScreen },
+  TabSet: { screen: Screens.TabsScreen },
+  BaseTabs: { screen: Screens.BaseTabScreen },
+  BadgeTabs: { screen: Screens.BadgeTabScreen },
+  IconTabs: { screen: Screens.IconTabScreen },
   Card: { screen: Screens.CardScreen },
   Avatar: { screen: Screens.AvatarScreen },
   Input: { screen: Screens.InputScreen },

example/screens/ComponentsScreen.js

@@ -49,8 +49,8 @@ export class ComponentsScreen extends React.Component {
       title: 'Gallery',
       route: 'Gallery',
     }, {
-      title: 'Tab View',
-      route: 'TabView',
+      title: 'Tab Set',
+      route: 'TabSet',
     }, {
       title: 'Custom Control View',
       route: 'Avatar',

example/screens/index.js

@@ -12,10 +12,10 @@ export * from './ComponentsScreen';
 export * from './ImageScreen';
 export * from './GalleryScreen';
 export * from './InputScreen';
-export * from './tabview/TabScreen';
-export * from './tabview/BaseTabViewScreen';
-export * from './tabview/BadgeTabViewScreen';
-export * from './tabview/IconTabsScreen';
+export * from './tabset/TabsScreen';
+export * from './tabset/BaseTabScreen';
+export * from './tabset/BadgeTabScreen';
+export * from './tabset/IconTabScreen';
 export * from './SettingsScreen';
 export * from './ChoiceCustomizationScreen';
 export * from './PickerScreen';

example/screens/tabview/BadgeTabViewScreen.js → example/screens/tabset/BadgeTabScreen.js

@@ -1,21 +1,21 @@
 import React from 'react';
 import { View } from 'react-native';
 import {
-  RkTabView,
+  RkTabSet,
   RkTab,
   RkStyleSheet,
 } from 'react-native-ui-kitten';
 import { TabContentScreen } from './TabContentScreen';
 
-export class BadgeTabViewScreen extends React.Component {
+export class BadgeTabScreen extends React.Component {
   static navigationOptions = {
     title: 'Badge Tabs',
   };
 
   render() {
     return (
       <View style={styles.container}>
-        <RkTabView style={styles.container}>
+        <RkTabSet style={styles.container}>
           <RkTab title='Calls'>
             <TabContentScreen style={styles.tabContent1} />
           </RkTab>
@@ -30,7 +30,7 @@ export class BadgeTabViewScreen extends React.Component {
               message='Tab 2 loves React Native UI Kitten'
             />
           </RkTab>
-        </RkTabView>
+        </RkTabSet>
       </View>
     );
   }

example/screens/tabview/BaseTabViewScreen.js → example/screens/tabset/BaseTabScreen.js

@@ -1,28 +1,28 @@
 import React from 'react';
 import { View } from 'react-native';
 import {
-  RkTabView,
+  RkTabSet,
   RkTab,
   RkStyleSheet,
 } from 'react-native-ui-kitten';
 import { TabContentScreen } from './TabContentScreen';
 
-export class BaseTabViewScreen extends React.Component {
+export class BaseTabScreen extends React.Component {
   static navigationOptions = {
     title: 'Base Tabs',
   };
 
   render() {
     return (
       <View style={styles.container}>
-        <RkTabView style={styles.container}>
+        <RkTabSet style={styles.container}>
           <RkTab title='Calls'>
             <TabContentScreen style={styles.tabContent1} />
           </RkTab>
           <RkTab title='Contacts'>
             <TabContentScreen style={styles.tabContent2} />
           </RkTab>
-        </RkTabView>
+        </RkTabSet>
       </View>
     );
   }

example/screens/tabview/IconTabsScreen.js → example/screens/tabset/IconTabScreen.js

@@ -1,21 +1,21 @@
 import React from 'react';
 import { View } from 'react-native';
 import {
-  RkTabView,
+  RkTabSet,
   RkTab,
   RkStyleSheet,
 } from 'react-native-ui-kitten';
 import { TabContentScreen } from './TabContentScreen';
 
-export class IconTabsScreen extends React.Component {
+export class IconTabScreen extends React.Component {
   static navigationOptions = {
     title: 'Icon Tabs',
   };
 
   render() {
     return (
       <View style={styles.container}>
-        <RkTabView style={styles.container}>
+        <RkTabSet style={styles.container}>
           <RkTab
             title='Calls'
             icon={require('../../img/icons/phone.png')}>
@@ -35,7 +35,7 @@ export class IconTabsScreen extends React.Component {
               message='Tab 2 loves React Native UI Kitten'
             />
           </RkTab>
-        </RkTabView>
+        </RkTabSet>
       </View>
     );
   }

index.js

@@ -8,7 +8,8 @@ export { RkModalImg } from './src/components/image/rkModalImg';
 export { RkGallery } from './src/components/gallery/rkGallery';
 export { RkGalleryImage } from './src/components/gallery/rkGalleryImage';
 export { RkCalendar } from './src/components/calendar/rkCalendar.component';
-export { RkTabView } from './src/components/tabset/rkTabView.component';
+export { RkTabView } from './src/components/tab/rkTabView';
+export { RkTabSet } from './src/components/tabset/rkTabSet.component';
 export { RkTab } from './src/components/tabset/rkTab.component';
 export { RkCard } from './src/components/card/rkCard';
 export { RkAvoidKeyboard } from './src/components/avoidKeyboard/rkAvoidKeyboard';

src/components/tabset/rkTab.component.js

@@ -12,14 +12,14 @@ import { RkComponent } from '../rkComponent';
 /**
  * @extends React.Component
  *
- * @property {string} title - tab title.
- * @property {React.ReactNode} icon - tab icon.
- * @property {string} badgeTitle - tab badge title.
- * @property {string} badgePosition - tab badge position. Should be one of:
+ * @property {string} title - Tab title.
+ * @property {React.ReactNode} icon - Tab icon.
+ * @property {string} badgeTitle - Tab badge title.
+ * @property {string} badgePosition - Tab badge position. Should be one of:
  * `top left`, `top right`, `bottom left`, `bottom right`.
  * Default is `top right`.
- * @property {boolean} isSelected - defines if tab is selected.
- * @property {boolean} isLazyLoad - defines if tab should use content lazy loading.
+ * @property {boolean} isSelected - Defines if tab is selected.
+ * @property {boolean} isLazyLoad - Defines if tab should use content lazy loading.
  * Default is `true`.
  */
 export class RkTab extends RkComponent {

src/components/tabset/rkTabBar.component.js

@@ -9,7 +9,17 @@ import {
 import { RkComponent } from '../rkComponent';
 
 /**
+ * `RkTabBar` is a component that manages `RkTab`s.
+ *
  * @extends React.Component
+ *
+ * @property {React.ReactNode} children - `RkTab` components with it's contents.
+ * @property {number} selectedIndex - Selected RkTab index.
+ * @property {bool} isScrollable - Defines if container should be scrollable.
+ * For cases with lots of tabs.
+ * @property {function} onSelect - Fires when `RkTab` is selected.
+ * @property {number} componentWidth - width of `RkTabBar`.
+ * Needed for `RkTab` equal distribution.
  */
 export class RkTabBar extends RkComponent {
   static propTypes = {
@@ -45,24 +55,30 @@ export class RkTabBar extends RkComponent {
   };
 
   /**
-   * @param params - object: { offset: number, animated: boolean }
+   * scrolls container to passed index
+   *
+   * @param params - object: { index: number, animated: boolean }
    */
-  scrollToIndex = (params) => {
+  scrollToIndex(params) {
     const offset = (this.props.componentWidth / this.props.children.length) * params.index;
     this.scrollToOffset({ offset });
   };
 
   /**
+   * scrolls container to passed offset
+   *
    * @param params - object: { offset: number, animated: boolean }
    */
-  scrollToOffset = (params) => {
+  scrollToOffset(params) {
     this.containerRef.scrollTo({ x: params.offset, ...params });
   };
 
   /**
+   * scrolls container to end
+   *
    * @param params - object: { animated: boolean }
    */
-  scrollToEnd = (params) => {
+  scrollToEnd(params) {
     this.containerRef.scrollToEnd(params);
   };
 

src/components/tabset/rkTabBarIndicator.component.js

@@ -8,8 +8,15 @@ import { RkComponent } from '../rkComponent';
 
 const defaultAnimationDuration = 200;
 
+
 /**
+ * `RkTabBarIndicator` is a component that indicates `RkTabBar` current selection.
+ *
  * @extends React.Component
+ *
+ * @property {string} rkType - `RkTabBarIndicator` type.
+ * Should be one of: `` or `rounded`.
+ * @property {number} componentWidth - width of `RkTabBar`.
  */
 export class RkTabBarIndicator extends RkComponent {
   static propTypes = {
@@ -30,6 +37,8 @@ export class RkTabBarIndicator extends RkComponent {
   contentOffset = new Animated.Value(0);
 
   /**
+   * scrolls indicator to passed index
+   *
    * @param params - object: { index: number, animated: boolean }
    */
   scrollToIndex(params) {
@@ -40,6 +49,8 @@ export class RkTabBarIndicator extends RkComponent {
   }
 
   /**
+   * scrolls indicator by passed offset
+   *
    * @param params - object: { offset: number, animated: boolean }
    */
   scrollByOffset(params) {
@@ -50,6 +61,8 @@ export class RkTabBarIndicator extends RkComponent {
   }
 
   /**
+   * scrolls indicator to passed offset
+   *
    * @param params - object: { offset: number, animated: boolean }
    */
   scrollToOffset(params) {