feat(rkSwitch): component implementation with examples. Closes #72 (#123

)

* feat(rkSwitch): component implementation + examples

* build(common): update npm scripts (lint/watch-lib)

* refactor(rkSwitch): propTypes implementation

* refactor(example/switch): component row style

.eslintrc

@@ -12,5 +12,16 @@
         "render"
       ]
     }]
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [
+          ".js",
+          ".android.js",
+          ".ios.js"
+        ]
+      }
+    }
   }
 }

docs/structure.ts

@@ -311,6 +311,33 @@ export const STRUCTURE = [
           }
         ]
       },
+      {
+        type: 'page',
+        name: 'RkSwitch',
+        demogif: 'switch.gif',
+        children: [
+          {
+            type: 'block',
+            block: 'rk-description',
+            klass: 'RkSwitch',
+          },
+          {
+            type: 'block',
+            block: 'rk-examples',
+            klass: 'RkSwitch',
+          },
+          {
+            type: 'block',
+            block: 'rk-props',
+            klass: 'RkSwitch',
+          },
+          {
+            type: 'block',
+            block: 'rk-styles',
+            klass: 'RkSwitch',
+          }
+        ]
+      },
     ],
   },
   {

example/App.js

@@ -1,31 +1,32 @@
 import React from 'react';
+import { AppLoading, Font } from 'expo';
+import { StackNavigator } from 'react-navigation';
+import { StatusBar, View, Platform } from 'react-native';
 import * as Screens from './screens';
-import {StackNavigator} from 'react-navigation';
-import {bootstrap} from './style/themeBootstrapper'
-import {StatusBar, View, Platform} from 'react-native';
-import {AppLoading, Font} from 'expo';
+import { bootstrap } from './style/themeBootstrapper';
 
 bootstrap();
 
 const ExplorerApp = StackNavigator({
-  Home: {screen: Screens.ComponentsScreen},
-  Picker: {screen: Screens.PickerScreen},
-  Button: {screen: Screens.ButtonScreen},
-  Choice: {screen: Screens.ChoiceScreen},
-  Tab: {screen: Screens.TabScreen},
-  Card: {screen: Screens.CardScreen},
-  Avatar: {screen: Screens.AvatarScreen},
-  Input: {screen: Screens.InputScreen},
-  Image: {screen: Screens.ImageScreen},
-  Settings: {screen: Screens.SettingsScreen},
-  ChoiceCustomization: {screen: Screens.ChoiceCustomizationScreen}
+  Home: { screen: Screens.ComponentsScreen },
+  Picker: { screen: Screens.PickerScreen },
+  Button: { screen: Screens.ButtonScreen },
+  Switch: { screen: Screens.SwitchScreen },
+  Choice: { screen: Screens.ChoiceScreen },
+  Tab: { screen: Screens.TabScreen },
+  Card: { screen: Screens.CardScreen },
+  Avatar: { screen: Screens.AvatarScreen },
+  Input: { screen: Screens.InputScreen },
+  Image: { screen: Screens.ImageScreen },
+  Settings: { screen: Screens.SettingsScreen },
+  ChoiceCustomization: { screen: Screens.ChoiceCustomizationScreen },
 }, {
   navigationOptions: {
     headerStyle: {
       backgroundColor: 'white',
-      marginTop: (Platform.OS === 'ios') ? 0 : Expo.Constants.statusBarHeight
-    }
-  }
+      marginTop: (Platform.OS === 'ios') ? 0 : Expo.Constants.statusBarHeight,
+    },
+  },
 });
 
 export default class App extends React.Component {
@@ -43,23 +44,22 @@ export default class App extends React.Component {
       'Roboto-Medium': require('./fonts/Roboto-Medium.ttf'),
       Borg: require('./fonts/Borg.ttf'),
       Curely: require('./fonts/Curely.ttf'),
-      'FontAwesome': require('./fonts/FontAwesome.ttf'),
+      FontAwesome: require('./fonts/FontAwesome.ttf'),
     });
 
-    this.setState({loaded: true});
+    this.setState({ loaded: true });
   };
 
   render() {
     if (!this.state.loaded) {
-      return <AppLoading/>;
+      return <AppLoading />;
     }
 
     return (
-      <View style={{flex: 1}}>
-        <ExplorerApp/>
-        <StatusBar barStyle="default"/>
+      <View style={{ flex: 1 }}>
+        <ExplorerApp />
+        <StatusBar barStyle="default" />
       </View>
     );
   }
-
 }

example/gulpfile.js

@@ -1,12 +1,16 @@
-var gulp = require('gulp');
-var watch = require('gulp-watch');
+const gulp = require('gulp');
+const watch = require('gulp-watch');
 
-var source = '../src';
-var destination = './node_modules/react-native-ui-kitten/src';
+const source = '..';
+const destination = './node_modules/react-native-ui-kitten';
 
-gulp.task('watch-lib', function () {
-  gulp.src(source + '/**/*', {base: source})
-    .pipe(watch(source, {base: source}))
-    .pipe(gulp.dest(destination));
+gulp.task('watch-lib', () => {
+  gulp.src(`${source}/src/**/*`, { base: `${source}/src` })
+    .pipe(watch(`${source}/src`, { base: `${source}/src` }))
+    .pipe(gulp.dest(`${destination}/src`));
+
+  gulp.src(`${source}/index.js`, { base: `${source}/index.js` })
+    .pipe(watch(source, { base: `${source}/index.js` }))
+    .pipe(gulp.dest(`${destination}/index.js`));
 });
 

example/screens/ComponentsScreen.js

@@ -1,19 +1,19 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
 import {
   StyleSheet,
   ListView,
   View,
-  TouchableOpacity
+  TouchableOpacity,
 } from 'react-native';
 
-import {RkText, RkTheme, RkStyleSheet} from 'react-native-ui-kitten';
+import { RkText, RkTheme, RkStyleSheet } from 'react-native-ui-kitten';
 
 
 export class ComponentsScreen extends Component {
   static navigationOptions = {
-    title: 'UI KIT'
+    title: 'UI KIT',
   };
 
 
@@ -28,36 +28,40 @@ export class ComponentsScreen extends Component {
         title: 'Buttons',
         route: 'Button',
       },
+      {
+        title: 'Switches',
+        route: 'Switch',
+      },
       {
         title: 'Selectable Components',
-        route: 'Choice'
+        route: 'Choice',
       },
       {
         title: 'Inputs',
-        route: 'Input'
+        route: 'Input',
       },
       {
         title: 'Cards',
-        route: 'Card'
+        route: 'Card',
       },
       {
         title: 'Image Viewer',
-        route: 'Image'
+        route: 'Image',
       },
       {
         title: 'Tab View',
-        route: 'Tab'
+        route: 'Tab',
       },
       {
         title: 'Custom Control View',
-        route: 'Avatar'
-      }
+        route: 'Avatar',
+      },
     ];
     this.state = {
       dataSource: new ListView.DataSource({
-        rowHasChanged: (r1, r2) => r1 !== r2
+        rowHasChanged: (r1, r2) => r1 !== r2,
       }).cloneWithRows(this.data),
-      theme: _.cloneDeep(RkTheme.current)
+      theme: _.cloneDeep(RkTheme.current),
     };
   }
 
@@ -83,32 +87,35 @@ export class ComponentsScreen extends Component {
   }
 
   selectComponent(componentDefinition) {
-    const {navigate} = this.props.navigation;
+    const { navigate } = this.props.navigation;
     navigate(componentDefinition.route);
   }
 
-  renderSeparator(sectionID,
-                  rowID,
-                  adjacentRowHighlighted) {
-    var style = styles.rowSeparator;
+  renderSeparator(
+    sectionID,
+    rowID,
+    adjacentRowHighlighted,
+  ) {
+    let style = styles.rowSeparator;
     if (adjacentRowHighlighted) {
       style = [style, styles.rowSeparatorHide];
     }
     return (
-      <View key={'SEP_' + sectionID + '_' + rowID} style={style}/>
+      <View key={`SEP_${sectionID}_${rowID}`} style={style} />
     );
   }
 
   render() {
     return (
-      <ListView style={styles.container}
-                dataSource={this.state.dataSource}
-                renderRow={(...params) => this.renderComponent(...params)}
-                renderSeparator={this.renderSeparator}
-                automaticallyAdjustContentInsets={true}
-                keyboardDismissMode="on-drag"
-                keyboardShouldPersistTaps='always'
-                showsVerticalScrollIndicator={false}
+      <ListView
+        style={styles.container}
+        dataSource={this.state.dataSource}
+        renderRow={(...params) => this.renderComponent(...params)}
+        renderSeparator={this.renderSeparator}
+        automaticallyAdjustContentInsets
+        keyboardDismissMode="on-drag"
+        keyboardShouldPersistTaps='always'
+        showsVerticalScrollIndicator={false}
       />
     );
   }
@@ -118,14 +125,14 @@ const
   styles = RkStyleSheet.create(theme => ({
     container: {
       flex: 1,
-      backgroundColor: theme.colors.screen.base
+      backgroundColor: theme.colors.screen.base,
     },
     componentRow: {
       paddingHorizontal: 24,
       paddingVertical: 18,
       flexDirection: 'row',
       justifyContent: 'space-between',
-      alignItems: 'center'
+      alignItems: 'center',
     },
     rowSeparator: {
       backgroundColor: 'rgba(0, 0, 0, 0.1)',