From 9e402b0b6515250826ae6b11b2bf19a2c91e747e Mon Sep 17 00:00:00 2001
From: Artur Yorsh <artyorsh.me@gmail.com>
Date: Mon, 15 Oct 2018 18:14:31 +0300
Subject: [PATCH] refactor(tab-set): update examples

---
 example/screens/TabSetScreen.js            | 28 -------------
 example/screens/index.js                   |  2 +-
 example/screens/tabset/TabContentScreen.js | 39 +++++++++++++++++
 example/screens/tabset/TabSetScreen.js     | 49 ++++++++++++++++++++++
 index.js                                   |  1 +
 5 files changed, 90 insertions(+), 29 deletions(-)
 delete mode 100644 example/screens/TabSetScreen.js
 create mode 100644 example/screens/tabset/TabContentScreen.js
 create mode 100644 example/screens/tabset/TabSetScreen.js

diff --git a/example/screens/TabSetScreen.js b/example/screens/TabSetScreen.js
deleted file mode 100644
index 6c8e39262..000000000
--- a/example/screens/TabSetScreen.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import {
-  RkTabSet,
-  RkStyleSheet,
-} from 'react-native-ui-kitten';
-
-export class TabSetScreen extends React.Component {
-  static navigationOptions = {
-    title: 'Tab Set',
-  };
-  static propTypes = {};
-
-  render() {
-    return (
-      <View style={styles.container}>
-        <RkTabSet />
-      </View>
-    );
-  }
-}
-
-const styles = RkStyleSheet.create(theme => ({
-  container: {
-    flex: 1,
-    backgroundColor: theme.colors.background,
-  },
-}));
diff --git a/example/screens/index.js b/example/screens/index.js
index e18d3e496..671c0768c 100644
--- a/example/screens/index.js
+++ b/example/screens/index.js
@@ -13,7 +13,7 @@ export * from './ImageScreen';
 export * from './GalleryScreen';
 export * from './InputScreen';
 export * from './TabScreen';
-export * from './TabSetScreen';
+export * from './tabset/TabSetScreen';
 export * from './SettingsScreen';
 export * from './ChoiceCustomizationScreen';
 export * from './PickerScreen';
diff --git a/example/screens/tabset/TabContentScreen.js b/example/screens/tabset/TabContentScreen.js
new file mode 100644
index 000000000..2dddc66f7
--- /dev/null
+++ b/example/screens/tabset/TabContentScreen.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  View,
+  Text,
+  ViewPropTypes,
+} from 'react-native';
+import { RkStyleSheet } from 'react-native-ui-kitten';
+
+export class TabContentScreen extends React.Component {
+  static propTypes = {
+    message: PropTypes.string,
+    ...ViewPropTypes,
+  };
+  static defaultProps = {
+    message: 'I <3 React Native UI Kitten',
+  };
+
+  render() {
+    return (
+      <View style={[styles.container, this.props.style]}>
+        <Text style={styles.text}>{this.props.message}</Text>
+      </View>
+    );
+  }
+}
+
+const styles = RkStyleSheet.create(theme => ({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    color: theme.colors.text.inverse,
+    fontSize: 18,
+    fontWeight: '700',
+  },
+}));
diff --git a/example/screens/tabset/TabSetScreen.js b/example/screens/tabset/TabSetScreen.js
new file mode 100644
index 000000000..62358d1c8
--- /dev/null
+++ b/example/screens/tabset/TabSetScreen.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import { View } from 'react-native';
+import {
+  RkTabSet,
+  RkTabSetItem,
+  RkStyleSheet,
+} from 'react-native-ui-kitten';
+import { TabContentScreen } from './TabContentScreen';
+
+export class TabSetScreen extends React.Component {
+  static navigationOptions = {
+    title: 'Tab Set',
+  };
+  static propTypes = {};
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <RkTabSet>
+          <RkTabSetItem title="Tab #1">
+            <TabContentScreen style={styles.tabContent1} />
+          </RkTabSetItem>
+          <RkTabSetItem title="Tab #2" isSelected={true}>
+            <TabContentScreen style={styles.tabContent2} message='Tab 2 loves React Native UI Kitten' />
+          </RkTabSetItem>
+          <RkTabSetItem title="Tab #3">
+            <TabContentScreen style={styles.tabContent3} />
+          </RkTabSetItem>
+        </RkTabSet>
+      </View>
+    );
+  }
+}
+
+const styles = RkStyleSheet.create(theme => ({
+  container: {
+    flex: 1,
+    backgroundColor: theme.colors.background,
+  },
+  tabContent1: {
+    backgroundColor: 'red',
+  },
+  tabContent2: {
+    backgroundColor: 'green',
+  },
+  tabContent3: {
+    backgroundColor: 'blue',
+  },
+}));
diff --git a/index.js b/index.js
index 11491ad98..090aafac0 100644
--- a/index.js
+++ b/index.js
@@ -9,6 +9,7 @@ export { RkGalleryImage } from './src/components/gallery/rkGalleryImage';
 export { RkCalendar } from './src/components/calendar/rkCalendar.component';
 export { RkTabView } from './src/components/tab/rkTabView';
 export { RkTabSet } from './src/components/tabset/rkTabSet.component';
+export { RkTabSetItem } from './src/components/tabset/rkTabSetItem.component';
 export { RkCard } from './src/components/card/rkCard';
 export { RkAvoidKeyboard } from './src/components/avoidKeyboard/rkAvoidKeyboard';
 export { RkComponent } from './src/components/rkComponent';