Added lessons schedule, improved stability, updated theme

app.json

@@ -1,7 +1,7 @@
 {
   "expo": {
-    "name": "Diary",
-    "slug": "Diary",
+    "name": "Pocket Diary",
+    "slug": "https://git.kansk-tc.ru/the_Exi1e/diary-app",
     "privacy": "public",
     "sdkVersion": "36.0.0",
     "platforms": [
@@ -18,11 +18,11 @@
     },
     "version": "1.0.0",
     "orientation": "portrait",
-    "icon": "./assets/icon.png",
+    "icon": "./assets/logo.png",
     "splash": {
       "image": "./assets/logo.png",
       "resizeMode": "contain",
-      "backgroundColor": "#673AB7"
+      "backgroundColor": "#fff"
     },
     "updates": {
       "fallbackToCacheTimeout": 0
@@ -33,6 +33,10 @@
     "ios": {
       "supportsTablet": true
     },
+    "android": {
+      "package": "com.the_exile.pocket_diary",
+      "versionCode": 1
+    },
     "packagerOpts": {
       "config": "metro.config.js",
       "sourceExts": [

native-base-theme/components/Badge.js

@@ -0,0 +1,39 @@
+// @flow
+
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
+
+export default (variables /* : * */ = variable) => {
+  const badgeTheme = {
+    '.primary': {
+      backgroundColor: variables.buttonPrimaryBg
+    },
+    '.warning': {
+      backgroundColor: variables.buttonWarningBg
+    },
+    '.info': {
+      backgroundColor: variables.buttonInfoBg
+    },
+    '.success': {
+      backgroundColor: variables.buttonSuccessBg
+    },
+    '.danger': {
+      backgroundColor: variables.buttonDangerBg
+    },
+    'NativeBase.Text': {
+      color: variables.badgeColor,
+      fontSize: variables.fontSizeBase,
+      lineHeight: variables.lineHeight - 1,
+      textAlign: 'center',
+      paddingHorizontal: 3
+    },
+    backgroundColor: variables.badgeBg,
+    padding: variables.badgePadding,
+    paddingHorizontal: 6,
+    alignSelf: 'flex-start',
+    justifyContent: variables.platform === PLATFORM.IOS ? 'center' : undefined,
+    borderRadius: 13.5,
+    height: 27
+  };
+  return badgeTheme;
+};

native-base-theme/components/Body.js

@@ -0,0 +1,11 @@
+// @flow
+
+export default () => {
+  const bodyTheme = {
+    flex: 1,
+    alignItems: 'center',
+    alignSelf: 'center'
+  };
+
+  return bodyTheme;
+};

native-base-theme/components/Button.js

@@ -0,0 +1,386 @@
+// @flow
+
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
+
+export default (variables /* : * */ = variable) => {
+  const platformStyle = variables.platformStyle;
+  const platform = variables.platform;
+  const darkCommon = {
+    'NativeBase.Text': {
+      color: variables.brandDark
+    },
+    'NativeBase.Icon': {
+      color: variables.brandDark
+    },
+    'NativeBase.IconNB': {
+      color: variables.brandDark
+    }
+  };
+  const lightCommon = {
+    'NativeBase.Text': {
+      color: variables.brandLight
+    },
+    'NativeBase.Icon': {
+      color: variables.brandLight
+    },
+    'NativeBase.IconNB': {
+      color: variables.brandLight
+    }
+  };
+  const primaryCommon = {
+    'NativeBase.Text': {
+      color: variables.buttonPrimaryBg
+    },
+    'NativeBase.Icon': {
+      color: variables.buttonPrimaryBg
+    },
+    'NativeBase.IconNB': {
+      color: variables.buttonPrimaryBg
+    }
+  };
+  const successCommon = {
+    'NativeBase.Text': {
+      color: variables.buttonSuccessBg
+    },
+    'NativeBase.Icon': {
+      color: variables.buttonSuccessBg
+    },
+    'NativeBase.IconNB': {
+      color: variables.buttonSuccessBg
+    }
+  };
+  const infoCommon = {
+    'NativeBase.Text': {
+      color: variables.buttonInfoBg
+    },
+    'NativeBase.Icon': {
+      color: variables.buttonInfoBg
+    },
+    'NativeBase.IconNB': {
+      color: variables.buttonInfoBg
+    }
+  };
+  const warningCommon = {
+    'NativeBase.Text': {
+      color: variables.buttonWarningBg
+    },
+    'NativeBase.Icon': {
+      color: variables.buttonWarningBg
+    },
+    'NativeBase.IconNB': {
+      color: variables.buttonWarningBg
+    }
+  };
+  const dangerCommon = {
+    'NativeBase.Text': {
+      color: variables.buttonDangerBg
+    },
+    'NativeBase.Icon': {
+      color: variables.buttonDangerBg
+    },
+    'NativeBase.IconNB': {
+      color: variables.buttonDangerBg
+    }
+  };
+  const buttonTheme = {
+    '.disabled': {
+      '.transparent': {
+        backgroundColor: 'transparent',
+        'NativeBase.Text': {
+          color: variables.buttonDisabledBg
+        },
+        'NativeBase.Icon': {
+          color: variables.buttonDisabledBg
+        },
+        'NativeBase.IconNB': {
+          color: variables.buttonDisabledBg
+        }
+      },
+      'NativeBase.Icon': {
+        color: variables.brandLight
+      },
+      'NativeBase.IconNB': {
+        color: variables.brandLight
+      },
+      backgroundColor: variables.buttonDisabledBg
+    },
+    '.bordered': {
+      '.dark': {
+        ...darkCommon,
+        backgroundColor: 'transparent',
+        borderColor: variables.brandDark,
+        borderWidth: variables.borderWidth * 2
+      },
+      '.light': {
+        ...lightCommon,
+        backgroundColor: 'transparent',
+        borderColor: variables.brandLight,
+        borderWidth: variables.borderWidth * 2
+      },
+      '.primary': {
+        ...primaryCommon,
+        backgroundColor: 'transparent',
+        borderColor: variables.buttonPrimaryBg,
+        borderWidth: variables.borderWidth * 2
+      },
+      '.success': {
+        ...successCommon,
+        backgroundColor: 'transparent',
+        borderColor: variables.buttonSuccessBg,
+        borderWidth: variables.borderWidth * 2
+      },
+      '.info': {
+        ...infoCommon,
+        backgroundColor: 'transparent',
+        borderColor: variables.buttonInfoBg,
+        borderWidth: variables.borderWidth * 2
+      },
+      '.warning': {
+        ...warningCommon,
+        backgroundColor: 'transparent',
+        borderColor: variables.buttonWarningBg,
+        borderWidth: variables.borderWidth * 2
+      },
+      '.danger': {
+        ...dangerCommon,
+        backgroundColor: 'transparent',
+        borderColor: variables.buttonDangerBg,
+        borderWidth: variables.borderWidth * 2
+      },
+      '.disabled': {
+        backgroundColor: 'transparent',
+        borderColor: variables.buttonDisabledBg,
+        borderWidth: variables.borderWidth * 2,
+        'NativeBase.Text': {
+          color: variables.buttonDisabledBg
+        }
+      },
+      ...primaryCommon,
+      borderWidth: variables.borderWidth * 2,
+      elevation: null,
+      shadowColor: null,
+      shadowOffset: null,
+      shadowOpacity: null,
+      shadowRadius: null,
+      backgroundColor: 'transparent'
+    },
+
+    '.dark': {
+      '.bordered': {
+        ...darkCommon
+      },
+      backgroundColor: variables.brandDark
+    },
+    '.light': {
+      '.transparent': {
+        ...lightCommon,
+        backgroundColor: 'transparent'
+      },
+      '.bordered': {
+        ...lightCommon
+      },
+      ...darkCommon,
+      backgroundColor: variables.brandLight
+    },
+
+    '.primary': {
+      '.bordered': {
+        ...primaryCommon
+      },
+      backgroundColor: variables.buttonPrimaryBg
+    },
+
+    '.success': {
+      '.bordered': {
+        ...successCommon
+      },
+      backgroundColor: variables.buttonSuccessBg
+    },
+
+    '.info': {
+      '.bordered': {
+        ...infoCommon
+      },
+      backgroundColor: variables.buttonInfoBg
+    },
+
+    '.warning': {
+      '.bordered': {
+        ...warningCommon
+      },
+      backgroundColor: variables.buttonWarningBg
+    },
+
+    '.danger': {
+      '.bordered': {
+        ...dangerCommon
+      },
+      backgroundColor: variables.buttonDangerBg
+    },
+
+    '.block': {
+      justifyContent: 'center',
+      alignSelf: 'stretch'
+    },
+
+    '.full': {
+      justifyContent: 'center',
+      alignSelf: 'stretch',
+      borderRadius: 0
+    },
+
+    '.rounded': {
+      borderRadius: variables.borderRadiusLarge
+    },
+
+    '.transparent': {
+      backgroundColor: 'transparent',
+      elevation: 0,
+      shadowColor: null,
+      shadowOffset: null,
+      shadowRadius: null,
+      shadowOpacity: null,
+      ...primaryCommon,
+      '.dark': {
+        ...darkCommon,
+      },
+      '.danger': {
+        ...dangerCommon,
+      },
+      '.warning': {
+        ...warningCommon,
+      },
+      '.info': {
+        ...infoCommon,
+      },
+      '.primary': {
+        ...primaryCommon,
+      },
+      '.success': {
+        ...successCommon,
+      },
+      '.light': {
+        ...lightCommon,
+      },
+      '.disabled': {
+        backgroundColor: 'transparent',
+        borderColor: variables.buttonDisabledBg,
+        borderWidth: variables.borderWidth * 2,
+        'NativeBase.Text': {
+          color: variables.buttonDisabledBg
+        },
+        'NativeBase.Icon': {
+          color: variables.buttonDisabledBg
+        },
+        'NativeBase.IconNB': {
+          color: variables.buttonDisabledBg
+        }
+      }
+    },
+
+    '.small': {
+      height: 30,
+      'NativeBase.Text': {
+        fontSize: 14
+      },
+      'NativeBase.Icon': {
+        fontSize: 20,
+        paddingTop: 0
+      },
+      'NativeBase.IconNB': {
+        fontSize: 20,
+        paddingTop: 0
+      }
+    },
+
+    '.large': {
+      height: 60,
+      'NativeBase.Text': {
+        fontSize: 22
+      }
+    },
+
+    '.capitalize': {},
+
+    '.vertical': {
+      flexDirection: 'column',
+      height: null
+    },
+
+    'NativeBase.Text': {
+      fontFamily: variables.buttonFontFamily,
+      marginLeft: 0,
+      marginRight: 0,
+      color: variables.inverseTextColor,
+      fontSize: variables.buttonTextSize,
+      paddingHorizontal: 16,
+      backgroundColor: 'transparent'
+    },
+
+    'NativeBase.Icon': {
+      color: variables.inverseTextColor,
+      fontSize: 24,
+      marginHorizontal: 16,
+      paddingTop: platform === PLATFORM.IOS ? 2 : undefined
+    },
+    'NativeBase.IconNB': {
+      color: variables.inverseTextColor,
+      fontSize: 24,
+      marginHorizontal: 16,
+      paddingTop: platform === PLATFORM.IOS ? 2 : undefined
+    },
+
+    '.iconLeft': {
+      'NativeBase.Text': {
+        marginLeft: 0
+      },
+      'NativeBase.IconNB': {
+        marginRight: 0,
+        marginLeft: 16
+      },
+      'NativeBase.Icon': {
+        marginRight: 0,
+        marginLeft: 16
+      }
+    },
+    '.iconRight': {
+      'NativeBase.Text': {
+        marginRight: 0
+      },
+      'NativeBase.IconNB': {
+        marginLeft: 0,
+        marginRight: 16
+      },
+      'NativeBase.Icon': {
+        marginLeft: 0,
+        marginRight: 16
+      }
+    },
+    '.picker': {
+      'NativeBase.Text': {
+        '.note': {
+          fontSize: 16,
+          lineHeight: null
+        }
+      }
+    },
+    paddingVertical: variables.buttonPadding,
+    backgroundColor: variables.buttonPrimaryBg,
+    borderRadius: variables.borderRadiusBase,
+    borderColor: variables.buttonPrimaryBg,
+    borderWidth: null,
+    height: 45,
+    flexDirection: 'row',
+    elevation: 2,
+    shadowColor:
+      platformStyle === PLATFORM.MATERIAL ? variables.brandDark : undefined,
+    shadowOffset:
+      platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined,
+    shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined,
+    shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined,
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  };
+  return buttonTheme;
+};

native-base-theme/components/Card.js

@@ -0,0 +1,37 @@
+// @flow
+
+import variable from './../variables/platform';
+
+export default (variables /* : * */ = variable) => {
+  const cardTheme = {
+    '.transparent': {
+      shadowColor: null,
+      shadowOffset: null,
+      shadowOpacity: null,
+      shadowRadius: null,
+      elevation: null,
+      backgroundColor: 'transparent',
+      borderWidth: 0
+    },
+    '.noShadow': {
+      shadowColor: null,
+      shadowOffset: null,
+      shadowOpacity: null,
+      elevation: null
+    },
+    marginVertical: 5,
+    marginHorizontal: 2,
+    borderWidth: variables.borderWidth,
+    borderRadius: variables.cardBorderRadius,
+    borderColor: variables.cardBorderColor,
+    flexWrap: 'nowrap',
+    backgroundColor: variables.cardDefaultBg,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 1.5,
+    elevation: 3
+  };
+
+  return cardTheme;
+};

native-base-theme/components/CardItem.js

@@ -0,0 +1,198 @@
+// @flow
+
+import { StyleSheet } from 'react-native';
+
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
+
+export default (variables /* : * */ = variable) => {
+  const platform = variables.platform;
+  const transparentBtnCommon = {
+    'NativeBase.Text': {
+      fontSize: variables.DefaultFontSize - 3,
+      color: variables.sTabBarActiveTextColor
+    },
+    'NativeBase.Icon': {
+      fontSize: variables.iconFontSize - 10,
+      color: variables.sTabBarActiveTextColor,
+      marginHorizontal: null
+    },
+    'NativeBase.IconNB': {
+      fontSize: variables.iconFontSize - 10,
+      color: variables.sTabBarActiveTextColor
+    },
+    paddingVertical: null,
+    paddingHorizontal: null
+  };
+
+  const cardItemTheme = {
+    'NativeBase.Left': {
+      'NativeBase.Body': {
+        'NativeBase.Text': {
+          '.note': {
+            color: variables.listNoteColor,
+            fontWeight: '400',
+            marginRight: 20
+          }
+        },
+        flex: 1,
+        marginLeft: 10,
+        alignItems: null
+      },
+      'NativeBase.Icon': {
+        fontSize: variables.iconFontSize
+      },
+      'NativeBase.IconNB': {
+        fontSize: variables.iconFontSize
+      },
+      'NativeBase.Text': {
+        marginLeft: 10,
+        alignSelf: 'center'
+      },
+      'NativeBase.Button': {
+        '.transparent': {
+          ...transparentBtnCommon,
+          paddingRight: variables.cardItemPadding + 5
+        }
+      },
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    '.content': {
+      'NativeBase.Text': {
+        color: platform === PLATFORM.IOS ? '#555' : '#222',
+        fontSize: variables.DefaultFontSize - 2
+      }
+    },
+    '.cardBody': {
+      padding: -5,
+      'NativeBase.Text': {
+        marginTop: 5
+      }
+    },
+    'NativeBase.Body': {
+      'NativeBase.Text': {
+        '.note': {
+          color: variables.listNoteColor,
+          fontWeight: '200',
+          marginRight: 20
+        }
+      },
+      'NativeBase.Button': {
+        '.transparent': {
+          ...transparentBtnCommon,
+          paddingRight: variables.cardItemPadding + 5,
+          alignSelf: 'stretch'
+        }
+      },
+      flex: 1,
+      alignSelf: 'stretch',
+      alignItems: 'flex-start'
+    },
+    'NativeBase.Right': {
+      'NativeBase.Badge': {
+        alignSelf: null
+      },
+      'NativeBase.Button': {
+        '.transparent': {
+          ...transparentBtnCommon
+        },
+        alignSelf: null
+      },
+      'NativeBase.Icon': {
+        alignSelf: null,
+        fontSize: variables.iconFontSize - 8,
+        color: variables.cardBorderColor
+      },
+      'NativeBase.IconNB': {
+        alignSelf: null,
+        fontSize: variables.iconFontSize - 8,
+        color: variables.cardBorderColor
+      },
+      'NativeBase.Text': {
+        fontSize: variables.DefaultFontSize - 1,
+        alignSelf: null
+      },
+      'NativeBase.Thumbnail': {
+        alignSelf: null
+      },
+      'NativeBase.Image': {
+        alignSelf: null
+      },
+      'NativeBase.Radio': {
+        alignSelf: null
+      },
+      'NativeBase.Checkbox': {
+        alignSelf: null
+      },
+      'NativeBase.Switch': {
+        alignSelf: null
+      },
+      flex: 0.8
+    },
+    '.header': {
+      'NativeBase.Text': {
+        fontSize: 16,
+        fontWeight: platform === PLATFORM.IOS ? '600' : '500'
+      },
+      '.bordered': {
+        'NativeBase.Text': {
+          color: variables.brandPrimary,
+          fontWeight: platform === PLATFORM.IOS ? '600' : '500'
+        },
+        borderBottomWidth: variables.borderWidth
+      },
+      borderBottomWidth: null,
+      paddingVertical: variables.cardItemPadding + 5
+    },
+    '.footer': {
+      'NativeBase.Text': {
+        fontSize: 16,
+        fontWeight: platform === PLATFORM.IOS ? '600' : '500'
+      },
+      '.bordered': {
+        'NativeBase.Text': {
+          color: variables.brandPrimary,
+          fontWeight: platform === PLATFORM.IOS ? '600' : '500'
+        },
+        borderTopWidth: variables.borderWidth
+      },
+      borderBottomWidth: null
+    },
+    'NativeBase.Text': {
+      '.note': {
+        color: variables.listNoteColor,
+        fontWeight: '200'
+      }
+    },
+    'NativeBase.Icon': {
+      width: variables.iconFontSize + 5,
+      fontSize: variables.iconFontSize - 2
+    },
+    'NativeBase.IconNB': {
+      width: variables.iconFontSize + 5,
+      fontSize: variables.iconFontSize - 2
+    },
+    '.bordered': {
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderColor: variables.cardBorderColor
+    },
+    '.first': {
+      borderTopLeftRadius: variables.cardBorderRadius,
+      borderTopRightRadius: variables.cardBorderRadius
+    },
+    '.last': {
+      borderBottomLeftRadius: variables.cardBorderRadius,
+      borderBottomRightRadius: variables.cardBorderRadius
+    },
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: variables.cardBorderRadius,
+    padding: variables.cardItemPadding + 5,
+    paddingVertical: variables.cardItemPadding,
+    backgroundColor: variables.cardDefaultBg
+  };
+
+  return cardItemTheme;
+};

native-base-theme/components/CheckBox.js

@@ -0,0 +1,38 @@
+// @flow
+
+import variable from './../variables/platform';
+
+export default (variables /* : * */ = variable) => {
+  const checkBoxTheme = {
+    '.checked': {
+      'NativeBase.Icon': {
+        color: variables.checkboxTickColor
+      },
+      'NativeBase.IconNB': {
+        color: variables.checkboxTickColor
+      }
+    },
+    'NativeBase.Icon': {
+      color: 'transparent',
+      lineHeight: variables.CheckboxIconSize,
+      marginTop: variables.CheckboxIconMarginTop,
+      fontSize: variables.CheckboxFontSize
+    },
+    'NativeBase.IconNB': {
+      color: 'transparent',
+      lineHeight: variables.CheckboxIconSize,
+      marginTop: variables.CheckboxIconMarginTop,
+      fontSize: variables.CheckboxFontSize
+    },
+    borderRadius: variables.CheckboxRadius,
+    overflow: 'hidden',
+    width: variables.checkboxSize,
+    height: variables.checkboxSize,
+    borderWidth: variables.CheckboxBorderWidth,
+    paddingLeft: variables.CheckboxPaddingLeft - 1,
+    paddingBottom: variables.CheckboxPaddingBottom,
+    left: 10
+  };
+
+  return checkBoxTheme;
+};

native-base-theme/components/Container.js

@@ -0,0 +1,17 @@
+// @flow
+
+import { Platform, Dimensions } from 'react-native';
+
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
+
+const deviceHeight = Dimensions.get('window').height;
+export default (variables /* : * */ = variable) => {
+  const theme = {
+    flex: 1,
+    height: Platform.OS === PLATFORM.IOS ? deviceHeight : deviceHeight - 20,
+    backgroundColor: variables.containerBgColor
+  };
+
+  return theme;
+};

native-base-theme/components/Content.js

@@ -0,0 +1,14 @@
+// @flow
+
+export default () => {
+  const contentTheme = {
+    flex: 1,
+    backgroundColor: 'transparent',
+    'NativeBase.Segment': {
+      borderWidth: 0,
+      backgroundColor: 'transparent'
+    }
+  };
+
+  return contentTheme;
+};

native-base-theme/components/Fab.js

@@ -0,0 +1,25 @@
+// @flow
+
+export default () => {
+  const fabTheme = {
+    'NativeBase.Button': {
+      alignItems: 'center',
+      padding: null,
+      justifyContent: 'center',
+      'NativeBase.Icon': {
+        alignSelf: 'center',
+        fontSize: 20,
+        marginLeft: 0,
+        marginRight: 0
+      },
+      'NativeBase.IconNB': {
+        alignSelf: 'center',
+        fontSize: 20,
+        marginLeft: 0,
+        marginRight: 0
+      }
+    }
+  };
+
+  return fabTheme;
+};

native-base-theme/components/Footer.js

@@ -0,0 +1,119 @@
+// @flow
+
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
+
+export default (variables /* : * */ = variable) => {
+  const platformStyle = variables.platformStyle;
+  const platform = variables.platform;
+
+  const iconCommon = {
+    'NativeBase.Icon': {
+      color: variables.tabBarActiveTextColor
+    }
+  };
+  const iconNBCommon = {
+    'NativeBase.IconNB': {
+      color: variables.tabBarActiveTextColor
+    }
+  };
+  const textCommon = {
+    'NativeBase.Text': {
+      color: variables.tabBarActiveTextColor
+    }
+  };
+  const footerTheme = {
+    'NativeBase.Left': {
+      'NativeBase.Button': {
+        '.transparent': {
+          backgroundColor: 'transparent',
+          borderColor: null,
+          elevation: 0,
+          shadowColor: null,
+          shadowOffset: null,
+          shadowRadius: null,
+          shadowOpacity: null,
+          ...iconCommon,
+          ...iconNBCommon,
+          ...textCommon
+        },
+        alignSelf: null,
+        ...iconCommon,
+        ...iconNBCommon
+        // ...textCommon
+      },
+      flex: 1,
+      alignSelf: 'center',
+      alignItems: 'flex-start'
+    },
+    'NativeBase.Body': {
+      flex: 1,
+      alignItems: 'center',
+      alignSelf: 'center',
+      flexDirection: 'row',
+      'NativeBase.Button': {
+        alignSelf: 'center',
+        '.transparent': {
+          backgroundColor: 'transparent',
+          borderColor: null,
+          elevation: 0,
+          shadowColor: null,
+          shadowOffset: null,
+          shadowRadius: null,
+          shadowOpacity: null,
+          ...iconCommon,
+          ...iconNBCommon,
+          ...textCommon
+        },
+        '.full': {
+          height: variables.footerHeight,
+          paddingBottom: variables.footerPaddingBottom,
+          flex: 1
+        },
+        ...iconCommon,
+        ...iconNBCommon
+        // ...textCommon
+      }
+    },
+    'NativeBase.Right': {
+      'NativeBase.Button': {
+        '.transparent': {
+          backgroundColor: 'transparent',
+          borderColor: null,
+          elevation: 0,
+          shadowColor: null,
+          shadowOffset: null,
+          shadowRadius: null,
+          shadowOpacity: null,
+          ...iconCommon,
+          ...iconNBCommon,
+          ...textCommon
+        },
+        alignSelf: null,
+        ...iconCommon,
+        ...iconNBCommon
+        // ...textCommon
+      },
+      flex: 1,
+      alignSelf: 'center',
+      alignItems: 'flex-end'
+    },
+    backgroundColor: variables.footerDefaultBg,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    borderTopWidth:
+      platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
+        ? variables.borderWidth
+        : undefined,
+    borderColor:
+      platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
+        ? '#cbcbcb'
+        : undefined,
+    height: variables.footerHeight,
+    paddingBottom: variables.footerPaddingBottom,
+    elevation: 3,
+    left: 0,
+    right: 0
+  };
+  return footerTheme;
+};

native-base-theme/components/FooterTab.js

@@ -0,0 +1,79 @@
+// @flow
+
+import { Platform } from 'react-native';
+
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
+
+export default (variables /* : * */ = variable) => {
+  const platform = variables.platform;
+
+  const footerTabTheme = {
+    'NativeBase.Button': {
+      '.active': {
+        'NativeBase.Text': {
+          color: variables.tabBarActiveTextColor,
+          fontSize: variables.tabBarTextSize,
+          lineHeight: 16
+        },
+        'NativeBase.Icon': {
+          color: variables.tabBarActiveTextColor
+        },
+        'NativeBase.IconNB': {
+          color: variables.tabBarActiveTextColor
+        },
+        backgroundColor: variables.tabActiveBgColor
+      },
+      flexDirection: null,
+      backgroundColor: 'transparent',
+      borderColor: null,
+      elevation: 0,
+      shadowColor: null,
+      shadowOffset: null,
+      shadowRadius: null,
+      shadowOpacity: null,
+      alignSelf: 'center',
+      flex: 1,
+      height: variables.footerHeight,
+      justifyContent: 'center',
+      '.badge': {
+        'NativeBase.Badge': {
+          'NativeBase.Text': {
+            fontSize: 11,
+            fontWeight: platform === PLATFORM.IOS ? '600' : undefined,
+            lineHeight: 14
+          },
+          top: -3,
+          alignSelf: 'center',
+          left: 10,
+          zIndex: 99,
+          height: 18,
+          padding: 1.7,
+          paddingHorizontal: 3
+        },
+        'NativeBase.Icon': {
+          marginTop: -18
+        }
+      },
+      'NativeBase.Icon': {
+        color: variables.tabBarTextColor
+      },
+      'NativeBase.IconNB': {
+        color: variables.tabBarTextColor
+      },
+      'NativeBase.Text': {
+        color: variables.tabBarTextColor,
+        fontSize: variables.tabBarTextSize,
+        lineHeight: 16
+      }
+    },
+    backgroundColor:
+      Platform.OS === PLATFORM.ANDROID ? variables.footerDefaultBg : undefined,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    flex: 1,
+    alignSelf: 'stretch'
+  };
+
+  return footerTabTheme;
+};

native-base-theme/components/Form.js

@@ -0,0 +1,86 @@
+// @flow
+
+export default () => {
+  const theme = {
+    'NativeBase.Item': {
+      '.fixedLabel': {
+        'NativeBase.Label': {
+          paddingLeft: null
+        },
+        marginLeft: 15
+      },
+      '.inlineLabel': {
+        'NativeBase.Label': {
+          paddingLeft: null
+        },
+        marginLeft: 15
+      },
+      '.placeholderLabel': {
+        'NativeBase.Input': {}
+      },
+      '.stackedLabel': {
+        'NativeBase.Label': {
+          top: 5,
+          paddingLeft: null
+        },
+        'NativeBase.Input': {
+          paddingLeft: null,
+          marginLeft: null
+        },
+        'NativeBase.Icon': {
+          marginTop: 36
+        },
+        marginLeft: 15
+      },
+      '.floatingLabel': {
+        'NativeBase.Input': {
+          paddingLeft: null,
+          top: 10,
+          marginLeft: null
+        },
+        'NativeBase.Label': {
+          left: 0,
+          top: 6
+        },
+        'NativeBase.Icon': {
+          top: 6
+        },
+        marginTop: 15,
+        marginLeft: 15
+      },
+      '.regular': {
+        'NativeBase.Label': {
+          left: 0
+        },
+        marginLeft: 0
+      },
+      '.rounded': {
+        'NativeBase.Label': {
+          left: 0
+        },
+        marginLeft: 0
+      },
+      '.underline': {
+        'NativeBase.Label': {
+          left: 0,
+          top: 0,
+          position: 'relative'
+        },
+        'NativeBase.Input': {
+          left: -15
+        },
+        marginLeft: 15
+      },
+      '.last': {
+        marginLeft: 0,
+        paddingLeft: 15
+      },
+      'NativeBase.Label': {
+        paddingRight: 5
+      },
+      marginLeft: 15
+    }
+  };
+
+  return theme;
+};

native-base-theme/components/H1.js

@@ -0,0 +1,13 @@
+// @flow
+
+import variable from './../variables/platform';
+
+export default (variables /* : * */ = variable) => {
+  const h1Theme = {
+    color: variables.textColor,
+    fontSize: variables.fontSizeH1,
+    lineHeight: variables.lineHeightH1
+  };
+
+  return h1Theme;
+};

native-base-theme/components/H2.js

@@ -0,0 +1,13 @@
+// @flow
+
+import variable from './../variables/platform';
+
+export default (variables /* : * */ = variable) => {
+  const h2Theme = {
+    color: variables.textColor,
+    fontSize: variables.fontSizeH2,
+    lineHeight: variables.lineHeightH2
+  };
+
+  return h2Theme;
+};

native-base-theme/components/H3.js

@@ -0,0 +1,13 @@
+// @flow
+
+import variable from './../variables/platform';
+
+export default (variables /* : * */ = variable) => {
+  const h3Theme = {
+    color: variables.textColor,
+    fontSize: variables.fontSizeH3,
+    lineHeight: variables.lineHeightH3
+  };
+
+  return h3Theme;
+};

native-base-theme/components/Header.js

@@ -0,0 +1,419 @@
+// @flow
+
+import { PixelRatio, StatusBar } from 'react-native';
+
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
+
+export default (variables /* : * */ = variable) => {
+  const platformStyle = variables.platformStyle;
+  const platform = variables.platform;
+
+  const headerTheme = {
+    '.span': {
+      height: 128,
+      'NativeBase.Left': {
+        alignSelf: 'flex-start'
+      },
+      'NativeBase.Body': {
+        alignSelf: 'flex-end',
+        alignItems: 'flex-start',
+        justifyContent: 'center',
+        paddingBottom: 26
+      },
+      'NativeBase.Right': {
+        alignSelf: 'flex-start'
+      }
+    },
+    '.hasSubtitle': {
+      'NativeBase.Body': {
+        'NativeBase.Title': {
+          fontSize: variables.titleFontSize - 2,
+          fontFamily: variables.titleFontfamily,
+          textAlign: 'center',
+          fontWeight: '500',
+          paddingBottom: 3
+        },
+        'NativeBase.Subtitle': {
+          fontSize: variables.subTitleFontSize,
+          fontFamily: variables.titleFontfamily,
+          color: variables.subtitleColor,
+          textAlign: 'center'
+        }
+      }
+    },
+    '.transparent': {
+      backgroundColor: 'transparent',
+      borderBottomColor: 'transparent',
+      elevation: 0,
+      shadowColor: null,
+      shadowOffset: null,
+      shadowRadius: null,
+      shadowOpacity: null,
+      paddingTop:
+        platform === PLATFORM.ANDROID ? StatusBar.currentHeight : undefined,
+      height:
+        platform === PLATFORM.ANDROID
+          ? variables.toolbarHeight + StatusBar.currentHeight
+          : variables.toolbarHeight
+    },
+    '.noShadow': {
+      elevation: 0,
+      shadowColor: null,
+      shadowOffset: null,
+      shadowRadius: null,
+      shadowOpacity: null
+    },
+    '.hasTabs': {
+      elevation: 0,
+      shadowColor: null,
+      shadowOffset: null,
+      shadowRadius: null,
+      shadowOpacity: null,
+      borderBottomWidth: null
+    },
+    '.hasSegment': {
+      elevation: 0,
+      shadowColor: null,
+      shadowOffset: null,
+      shadowRadius: null,
+      shadowOpacity: null,
+      borderBottomWidth: null,
+      'NativeBase.Left': {
+        flex: 0.3
+      },
+      'NativeBase.Right': {
+        flex: 0.3
+      },
+      'NativeBase.Body': {
+        flex: 1,
+        'NativeBase.Segment': {
+          marginRight: 0,
+          alignSelf: 'center',
+          'NativeBase.Button': {
+            paddingLeft: 0,
+            paddingRight: 0
+          }
+        }
+      }
+    },
+    '.noLeft': {
+      'NativeBase.Left': {
+        width: platform === PLATFORM.IOS ? undefined : 0,
+        flex: platform === PLATFORM.IOS ? 1 : 0
+      },
+      'NativeBase.Body': {
+        'NativeBase.Title': {
+          paddingLeft: platform === PLATFORM.IOS ? undefined : 10
+        },
+        'NativeBase.Subtitle': {
+          paddingLeft: platform === PLATFORM.IOS ? undefined : 10
+        }
+      }
+    },
+    'NativeBase.Button': {
+      justifyContent: 'center',
+      alignSelf: 'center',
+      alignItems: 'center',
+      '.transparent': {
+        'NativeBase.Text': {
+          color: variables.toolbarBtnTextColor,
+          fontWeight: '600'
+        },
+        'NativeBase.Icon': {
+          color: variables.toolbarBtnColor
+        },
+        'NativeBase.IconNB': {
+          color: variables.toolbarBtnColor
+        },
+        paddingHorizontal: variables.buttonPadding
+      },
+      paddingHorizontal: 15
+    },
+    '.searchBar': {
+      'NativeBase.Item': {
+        'NativeBase.Icon': {
+          backgroundColor: 'transparent',
+          color: variables.dropdownLinkColor,
+          fontSize: variables.toolbarSearchIconSize,
+          alignItems: 'center',
+          marginTop: 2,
+          paddingRight: 10,
+          paddingLeft: 10
+        },
+        'NativeBase.IconNB': {
+          backgroundColor: 'transparent',
+          color: null,
+          alignSelf: 'center'
+        },
+        'NativeBase.Input': {
+          alignSelf: 'center',
+          lineHeight: null,
+          height: variables.searchBarInputHeight
+        },
+        alignSelf: 'center',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        flex: 1,
+        height: variables.searchBarHeight,
+        borderColor: 'transparent',
+        backgroundColor: variables.toolbarInputColor
+      },
+      'NativeBase.Button': {
+        '.transparent': {
+          'NativeBase.Text': {
+            fontWeight: '500'
+          },
+          paddingHorizontal: null,
+          paddingLeft: platform === PLATFORM.IOS ? 10 : null
+        },
+        paddingHorizontal: platform === PLATFORM.IOS ? undefined : null,
+        width: platform === PLATFORM.IOS ? undefined : 0,
+        height: platform === PLATFORM.IOS ? undefined : 0
+      }
+    },
+    '.rounded': {
+      'NativeBase.Item': {
+        borderRadius:
+          platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
+            ? 25
+            : 3
+      }
+    },
+    'NativeBase.Left': {
+      'NativeBase.Button': {
+        '.hasText': {
+          marginLeft: -10,
+          height: 30,
+          'NativeBase.Icon': {
+            color: variables.toolbarBtnColor,
+            fontSize: variables.iconHeaderSize,
+            marginTop: 2,
+            marginRight: 5,
+            marginLeft: 2
+          },
+          'NativeBase.Text': {
+            color: variables.toolbarBtnTextColor,
+            fontSize: platform === PLATFORM.IOS ? 17 : 0,
+            marginLeft: 7,
+            lineHeight: 19.5
+          },
+          'NativeBase.IconNB': {
+            color: variables.toolbarBtnColor,
+            fontSize: variables.iconHeaderSize,
+            marginTop: 2,
+            marginRight: 5,
+            marginLeft: 2
+          }
+        },
+        '.transparent': {
+          marginLeft:
+            platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
+              ? -3
+              : 0,
+          'NativeBase.Icon': {
+            color: variables.toolbarBtnColor,
+            fontSize:
+              platform === PLATFORM.IOS &&
+              variables.platformStyle !== PLATFORM.MATERIAL
+                ? variables.iconHeaderSize + 1
+                : variables.iconHeaderSize,
+            marginTop: 0,
+            marginRight: 2,
+            marginLeft: 1,
+            paddingTop: 1
+          },
+          'NativeBase.IconNB': {
+            color: variables.toolbarBtnColor,
+            fontSize:
+              platform === PLATFORM.IOS &&
+              variables.platformStyle !== PLATFORM.MATERIAL
+                ? variables.iconHeaderSize + 1
+                : variables.iconHeaderSize - 2,
+            marginTop: 0,
+            marginRight: 2,
+            marginLeft: 1,
+            paddingTop: 1
+          },
+          'NativeBase.Text': {
+            color: variables.toolbarBtnTextColor,
+            fontSize: platform === PLATFORM.IOS ? 17 : 0,
+            top: platform === PLATFORM.IOS ? 1 : -1.5,
+            paddingLeft:
+              platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
+                ? 2
+                : 5,
+            paddingRight:
+              platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
+                ? undefined
+                : 10
+          },
+          backgroundColor: 'transparent',
+          borderColor: null,
+          elevation: 0,
+          shadowColor: null,
+          shadowOffset: null,
+          shadowRadius: null,
+          shadowOpacity: null
+        },
+        'NativeBase.Icon': {
+          color: variables.toolbarBtnColor
+        },
+        'NativeBase.IconNB': {
+          color: variables.toolbarBtnColor
+        },
+        alignSelf: null,
+        paddingRight: variables.buttonPadding,
+        paddingLeft:
+          platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
+            ? 4
+            : 8
+      },
+      flex:
+        platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
+          ? 1
+          : 0.4,
+      alignSelf: 'center',
+      alignItems: 'flex-start'
+    },
+    'NativeBase.Body': {
+      flex: 1,
+      alignItems:
+        platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
+          ? 'center'
+          : 'flex-start',
+      alignSelf: 'center',
+      'NativeBase.Segment': {
+        borderWidth: 0,
+        alignSelf: 'flex-end',
+        marginRight: platform === PLATFORM.IOS ? -40 : -55
+      },
+      'NativeBase.Button': {
+        alignSelf: 'center',
+        '.transparent': {
+          backgroundColor: 'transparent'
+        },
+        'NativeBase.Icon': {
+          color: variables.toolbarBtnColor
+        },
+        'NativeBase.IconNB': {
+          color: variables.toolbarBtnColor
+        },
+        'NativeBase.Text': {
+          color: variables.inverseTextColor,
+          backgroundColor: 'transparent'
+        }
+      }
+    },
+    'NativeBase.Right': {
+      'NativeBase.Button': {
+        '.hasText': {
+          height: 30,
+          'NativeBase.Icon': {
+            color: variables.toolbarBtnColor,
+            fontSize: variables.iconHeaderSize - 2,
+            marginTop: 2,
+            marginRight: 2,
+            marginLeft: 5
+          },
+          'NativeBase.Text': {
+            color: variables.toolbarBtnTextColor,
+            fontSize: platform === PLATFORM.IOS ? 17 : 14,
+            lineHeight: 19.5
+          },
+          'NativeBase.IconNB': {
+            color: variables.toolbarBtnColor,
+            fontSize: variables.iconHeaderSize - 2,
+            marginTop: 2,
+            marginRight: 2,
+            marginLeft: 5
+          }
+        },
+        '.transparent': {
+          marginRight: platform === PLATFORM.IOS ? -9 : -5,
+          paddingLeft: 15,
+          paddingRight: 12,
+          paddingHorizontal: 15,
+          borderRadius: 50,
+          'NativeBase.Icon': {
+            color: variables.toolbarBtnColor,
+            fontSize: variables.iconHeaderSize - 2,
+            marginTop: 0,
+            marginLeft: 2,
+            marginRight: 0
+            // paddingTop: 0
+          },
+          'NativeBase.IconNB': {
+            color: variables.toolbarBtnColor,
+            fontSize: variables.iconHeaderSize - 2,
+            marginTop: 0,
+            marginLeft: 2,
+            marginRight: 0
+            // paddingTop: 0
+          },
+          'NativeBase.Text': {
+            color: variables.toolbarBtnTextColor,
+            fontSize: platform === PLATFORM.IOS ? 17 : 14,
+            top: platform === PLATFORM.IOS ? 1 : -1.5,
+            paddingRight:
+              platform === PLATFORM.IOS &&
+              variables.platformStyle !== PLATFORM.MATERIAL
+                ? 0
+                : undefined
+          },
+          backgroundColor: 'transparent',
+          borderColor: null,
+          elevation: 0,
+          shadowColor: null,
+          shadowOffset: null,
+          shadowRadius: null,
+          shadowOpacity: null
+        },
+        'NativeBase.Icon': {
+          color: variables.toolbarBtnColor
+        },
+        'NativeBase.IconNB': {
+          color: variables.toolbarBtnColor
+        },
+        alignSelf: null,
+        paddingHorizontal: variables.buttonPadding
+      },
+      flex: 1,
+      alignSelf: 'center',
+      alignItems: 'flex-end',
+      flexDirection: 'row',
+      justifyContent: 'flex-end'
+    },
+    backgroundColor: variables.toolbarDefaultBg,
+    flexDirection: 'row',
+    // paddingHorizontal: 10,
+    paddingLeft:
+      platform === PLATFORM.IOS && variables.platformStyle !== PLATFORM.MATERIAL
+        ? 6
+        : 10,
+    paddingRight: 10,
+    justifyContent: 'center',
+    paddingTop: platform === PLATFORM.IOS ? 18 : 0,
+    borderBottomWidth:
+      platform === PLATFORM.IOS
+        ? 1 / PixelRatio.getPixelSizeForLayoutSize(1)
+        : 0,
+    borderBottomColor: variables.toolbarDefaultBorder,
+    height:
+      variables.platform === PLATFORM.IOS &&
+      variables.platformStyle === PLATFORM.MATERIAL
+        ? variables.toolbarHeight + 10
+        : variables.toolbarHeight,
+    elevation: 3,
+    shadowColor: platformStyle === PLATFORM.MATERIAL ? '#000' : undefined,
+    shadowOffset:
+      platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined,
+    shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined,
+    shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined,
+    top: 0,
+    left: 0,
+    right: 0
+  };
+
+  return headerTheme;
+};

native-base-theme/components/Icon.js

@@ -0,0 +1,12 @@
+// @flow
+
+import variable from './../variables/platform';
+
+export default (variables /* : * */ = variable) => {
+  const iconTheme = {
+    fontSize: variables.iconFontSize,
+    color: variable.textColor
+  };
+
+  return iconTheme;
+};

native-base-theme/components/Input.js

@@ -0,0 +1,19 @@
+// @flow
+
+import variable from './../variables/platform';
+
+export default (variables /* : * */ = variable) => {
+  const inputTheme = {
+    '.multiline': {
+      height: null
+    },
+    height: variables.inputHeightBase,
+    color: variables.inputColor,
+    paddingLeft: 5,
+    paddingRight: 5,
+    flex: 1,
+    fontSize: variables.inputFontSize
+  };
+
+  return inputTheme;
+};

native-base-theme/components/InputGroup.js

@@ -0,0 +1,132 @@
+// @flow
+
+import variable from './../variables/platform';
+
+export default (variables /* : * */ = variable) => {
+  const inputGroupTheme = {
+    'NativeBase.Icon': {
+      fontSize: 24,
+      color: variables.sTabBarActiveTextColor,
+      paddingHorizontal: 5
+    },
+    'NativeBase.IconNB': {
+      fontSize: 24,
+      color: variables.sTabBarActiveTextColor,
+      paddingHorizontal: 5
+    },
+    'NativeBase.Input': {
+      height: variables.inputHeightBase,
+      color: variables.inputColor,
+      paddingLeft: 5,
+      paddingRight: 5,
+      flex: 1,
+      fontSize: variables.inputFontSize,
+      lineHeight: variables.inputLineHeight
+    },
+    '.underline': {
+      '.success': {
+        borderColor: variables.inputSuccessBorderColor
+      },
+      '.error': {
+        borderColor: variables.inputErrorBorderColor
+      },
+      paddingLeft: 5,
+      borderWidth: variables.borderWidth,
+      borderTopWidth: 0,
+      borderRightWidth: 0,
+      borderLeftWidth: 0,
+      borderColor: variables.inputBorderColor
+    },
+    '.regular': {
+      '.success': {
+        borderColor: variables.inputSuccessBorderColor
+      },
+      '.error': {
+        borderColor: variables.inputErrorBorderColor
+      },
+      paddingLeft: 5,
+      borderWidth: variables.borderWidth,
+      borderColor: variables.inputBorderColor
+    },
+    '.rounded': {
+      '.success': {
+        borderColor: variables.inputSuccessBorderColor
+      },
+      '.error': {
+        borderColor: variables.inputErrorBorderColor
+      },
+      paddingLeft: 5,
+      borderWidth: variables.borderWidth,
+      borderRadius: variables.inputGroupRoundedBorderRadius,
+      borderColor: variables.inputBorderColor
+    },
+
+    '.success': {
+      'NativeBase.Icon': {
+        color: variables.inputSuccessBorderColor
+      },
+      'NativeBase.IconNB': {
+        color: variables.inputSuccessBorderColor
+      },
+      '.rounded': {
+        borderRadius: 30,
+        borderColor: variables.inputSuccessBorderColor
+      },
+      '.regular': {
+        borderColor: variables.inputSuccessBorderColor
+      },
+      '.underline': {
+        borderWidth: variables.borderWidth,
+        borderTopWidth: 0,
+        borderRightWidth: 0,
+        borderLeftWidth: 0,
+        borderColor: variables.inputSuccessBorderColor
+      },
+      borderColor: variables.inputSuccessBorderColor
+    },
+
+    '.error': {
+      'NativeBase.Icon': {
+        color: variables.inputErrorBorderColor
+      },
+      'NativeBase.IconNB': {
+        color: variables.inputErrorBorderColor
+      },
+      '.rounded': {
+        borderRadius: 30,
+        borderColor: variables.inputErrorBorderColor
+      },
+      '.regular': {
+        borderColor: variables.inputErrorBorderColor
+      },
+      '.underline': {
+        borderWidth: variables.borderWidth,
+        borderTopWidth: 0,
+        borderRightWidth: 0,
+        borderLeftWidth: 0,
+        borderColor: variables.inputErrorBorderColor
+      },
+      borderColor: variables.inputErrorBorderColor
+    },
+    '.disabled': {
+      'NativeBase.Icon': {
+        color: '#384850'
+      },
+      'NativeBase.IconNB': {
+        color: '#384850'
+      }
+    },
+
+    paddingLeft: 5,
+    borderWidth: variables.borderWidth,
+    borderTopWidth: 0,
+    borderRightWidth: 0,
+    borderLeftWidth: 0,
+    borderColor: variables.inputBorderColor,
+    backgroundColor: 'transparent',
+    flexDirection: 'row',
+    alignItems: 'center'
+  };
+
+  return inputGroupTheme;
+};

native-base-theme/components/Item.js

@@ -0,0 +1,241 @@
+// @flow
+
+import { Platform } from 'react-native';
+
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
+
+export default (variables /* : * */ = variable) => {
+  const itemTheme = {
+    '.floatingLabel': {
+      'NativeBase.Input': {
+        height: 50,
+        top: 8,
+        paddingTop: 3,
+        paddingBottom: 7,
+        '.multiline': {
+          minHeight: variables.inputHeightBase,
+          paddingTop: Platform.OS === PLATFORM.IOS ? 10 : 3,
+          paddingBottom: Platform.OS === PLATFORM.IOS ? 14 : 10
+        }
+      },
+      'NativeBase.Label': {
+        paddingTop: 5
+      },
+      'NativeBase.Icon': {
+        top: 6,
+        paddingTop: 8
+      },
+      'NativeBase.IconNB': {
+        top: 6,
+        paddingTop: 8
+      }
+    },
+    '.fixedLabel': {
+      'NativeBase.Label': {
+        position: null,
+        top: null,
+        left: null,
+        right: null,
+        flex: 1,
+        height: null,
+        width: null,
+        fontSize: variables.inputFontSize
+      },
+      'NativeBase.Input': {
+        flex: 2,
+        fontSize: variables.inputFontSize
+      }
+    },
+    '.stackedLabel': {
+      'NativeBase.Label': {
+        position: null,
+        top: null,
+        left: null,
+        right: null,
+        paddingTop: 5,
+        alignSelf: 'flex-start',
+        fontSize: variables.inputFontSize - 2
+      },
+      'NativeBase.Icon': {
+        marginTop: 36
+      },
+      'NativeBase.Input': {
+        alignSelf: Platform.OS === PLATFORM.IOS ? 'stretch' : 'flex-start',
+        flex: 1,
+        width: Platform.OS === PLATFORM.IOS ? null : variables.deviceWidth - 25,
+        fontSize: variables.inputFontSize,
+        lineHeight: variables.inputLineHeight - 6,
+        '.secureTextEntry': {
+          fontSize: variables.inputFontSize
+        },
+        '.multiline': {
+          paddingTop: Platform.OS === PLATFORM.IOS ? 9 : undefined,
+          paddingBottom: Platform.OS === PLATFORM.IOS ? 9 : undefined
+        }
+      },
+      flexDirection: null,
+      minHeight: variables.inputHeightBase + 15
+    },
+    '.inlineLabel': {
+      'NativeBase.Label': {
+        position: null,
+        top: null,
+        left: null,
+        right: null,
+        paddingRight: 20,
+        height: null,
+        width: null,
+        fontSize: variables.inputFontSize
+      },
+      'NativeBase.Input': {
+        paddingLeft: 5,
+        fontSize: variables.inputFontSize
+      },
+      flexDirection: 'row'
+    },
+    'NativeBase.Label': {
+      fontSize: variables.inputFontSize,
+      color: variables.inputColorPlaceholder,
+      paddingRight: 5
+    },
+    'NativeBase.Icon': {
+      fontSize: 24,
+      paddingRight: 8
+    },
+    'NativeBase.IconNB': {
+      fontSize: 24,
+      paddingRight: 8
+    },
+    'NativeBase.Input': {
+      '.multiline': {
+        height: null
+      },
+      height: variables.inputHeightBase,
+      color: variables.inputColor,
+      flex: 1,
+      top: Platform.OS === PLATFORM.IOS ? 1.5 : undefined,
+      fontSize: variables.inputFontSize
+    },
+    '.underline': {
+      'NativeBase.Input': {
+        paddingLeft: 15
+      },
+      '.success': {
+        borderColor: variables.inputSuccessBorderColor
+      },
+      '.error': {
+        borderColor: variables.inputErrorBorderColor
+      },
+      borderWidth: variables.borderWidth * 2,
+      borderTopWidth: 0,
+      borderRightWidth: 0,
+      borderLeftWidth: 0,
+      borderColor: variables.inputBorderColor
+    },
+    '.regular': {
+      'NativeBase.Input': {
+        paddingLeft: 8
+      },
+      'NativeBase.Icon': {
+        paddingLeft: 10
+      },
+      '.success': {
+        borderColor: variables.inputSuccessBorderColor
+      },
+      '.error': {
+        borderColor: variables.inputErrorBorderColor
+      },
+      borderWidth: variables.borderWidth * 2,
+      borderColor: variables.inputBorderColor
+    },
+    '.rounded': {
+      'NativeBase.Input': {
+        paddingLeft: 8
+      },
+      'NativeBase.Icon': {
+        paddingLeft: 10
+      },
+      '.success': {
+        borderColor: variables.inputSuccessBorderColor
+      },
+      '.error': {
+        borderColor: variables.inputErrorBorderColor
+      },
+      borderWidth: variables.borderWidth * 2,
+      borderRadius: 30,
+      borderColor: variables.inputBorderColor
+    },
+
+    '.success': {
+      'NativeBase.Icon': {
+        color: variables.inputSuccessBorderColor
+      },
+      'NativeBase.IconNB': {
+        color: variables.inputSuccessBorderColor
+      },
+      '.rounded': {
+        borderRadius: 30,
+        borderColor: variables.inputSuccessBorderColor
+      },
+      '.regular': {
+        borderColor: variables.inputSuccessBorderColor
+      },
+      '.underline': {
+        borderWidth: variables.borderWidth * 2,
+        borderTopWidth: 0,
+        borderRightWidth: 0,
+        borderLeftWidth: 0,
+        borderColor: variables.inputSuccessBorderColor
+      },
+      borderColor: variables.inputSuccessBorderColor
+    },
+
+    '.error': {
+      'NativeBase.Icon': {
+        color: variables.inputErrorBorderColor
+      },
+      'NativeBase.IconNB': {
+        color: variables.inputErrorBorderColor
+      },
+      '.rounded': {
+        borderRadius: 30,
+        borderColor: variables.inputErrorBorderColor
+      },
+      '.regular': {
+        borderColor: variables.inputErrorBorderColor
+      },
+      '.underline': {
+        borderWidth: variables.borderWidth * 2,
+        borderTopWidth: 0,
+        borderRightWidth: 0,
+        borderLeftWidth: 0,
+        borderColor: variables.inputErrorBorderColor
+      },
+      borderColor: variables.inputErrorBorderColor
+    },
+    '.disabled': {
+      'NativeBase.Icon': {
+        color: '#384850'
+      },
+      'NativeBase.IconNB': {
+        color: '#384850'
+      }
+    },
+    '.picker': {
+      marginLeft: 0
+    },
+
+    borderWidth: variables.borderWidth * 2,
+    borderTopWidth: 0,
+    borderRightWidth: 0,
+    borderLeftWidth: 0,
+    borderColor: variables.inputBorderColor,
+    backgroundColor: 'transparent',
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginLeft: 2
+  };
+
+  return itemTheme;
+};

native-base-theme/components/Label.js

@@ -0,0 +1,12 @@
+// @flow
+
+export default () => {
+  const labelTheme = {
+    '.focused': {
+      width: 0
+    },
+    fontSize: 17
+  };
+
+  return labelTheme;
+};

native-base-theme/components/Left.js

@@ -0,0 +1,11 @@
+// @flow
+
+export default () => {
+  const leftTheme = {
+    flex: 1,
+    alignSelf: 'center',
+    alignItems: 'flex-start'
+  };
+
+  return leftTheme;
+};

native-base-theme/components/ListItem.js

@@ -0,0 +1,446 @@
+// @flow
+
+import { Platform, PixelRatio } from 'react-native';
+
+import pickerTheme from './Picker';
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
+
+export default (variables /* : * */ = variable) => {
+  const platform = variables.platform;
+  const selectedStyle = {
+    'NativeBase.Text': {
+      color: variables.listItemSelected
+    },
+    'NativeBase.Icon': {
+      color: variables.listItemSelected
+    }
+  };
+
+  const listItemTheme = {
+    'NativeBase.InputGroup': {
+      'NativeBase.Icon': {
+        paddingRight: 5
+      },
+      'NativeBase.IconNB': {
+        paddingRight: 5
+      },
+      'NativeBase.Input': {
+        paddingHorizontal: 5
+      },
+      flex: 1,
+      borderWidth: null,
+      margin: -10,
+      borderBottomColor: 'transparent'
+    },
+    '.searchBar': {
+      'NativeBase.Item': {
+        'NativeBase.Icon': {
+          backgroundColor: 'transparent',
+          color: variables.dropdownLinkColor,
+          fontSize:
+            platform === PLATFORM.IOS
+              ? variables.iconFontSize - 10
+              : variables.iconFontSize - 5,
+          alignItems: 'center',
+          marginTop: 2,
+          paddingRight: 8
+        },
+        'NativeBase.IconNB': {
+          backgroundColor: 'transparent',
+          color: null,
+          alignSelf: 'center'
+        },
+        'NativeBase.Input': {
+          alignSelf: 'center'
+        },
+        alignSelf: 'center',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        flex: 1,
+        height: platform === PLATFORM.IOS ? 30 : 40,
+        borderColor: 'transparent',
+        backgroundColor: '#fff',
+        borderRadius: 5
+      },
+      'NativeBase.Button': {
+        '.transparent': {
+          'NativeBase.Text': {
+            fontWeight: '500'
+          },
+          paddingHorizontal: null,
+          paddingLeft: platform === PLATFORM.IOS ? 10 : null
+        },
+        paddingHorizontal: platform === PLATFORM.IOS ? undefined : null,
+        width: platform === PLATFORM.IOS ? undefined : 0,
+        height: platform === PLATFORM.IOS ? undefined : 0
+      },
+      backgroundColor: variables.toolbarInputColor,
+      padding: 10,
+      marginLeft: null
+    },
+    'NativeBase.CheckBox': {
+      marginLeft: -10,
+      marginRight: 10
+    },
+    '.first': {
+      '.itemHeader': {
+        paddingTop: variables.listItemPadding + 3
+      }
+    },
+    '.itemHeader': {
+      '.first': {
+        paddingTop: variables.listItemPadding + 3
+      },
+      borderBottomWidth:
+        platform === PLATFORM.IOS ? variables.borderWidth : null,
+      marginLeft: null,
+      padding: variables.listItemPadding,
+      paddingLeft: variables.listItemPadding + 5,
+      paddingTop:
+        platform === PLATFORM.IOS ? variables.listItemPadding + 25 : undefined,
+      paddingBottom:
+        platform === PLATFORM.ANDROID ? variables.listItemPadding + 20 : undefined,
+      flexDirection: 'row',
+      borderColor: variables.listBorderColor,
+      'NativeBase.Text': {
+        fontSize: 14,
+        color: platform === PLATFORM.IOS ? undefined : variables.listNoteColor
+      }
+    },
+    '.itemDivider': {
+      borderBottomWidth: null,
+      marginLeft: null,
+      padding: variables.listItemPadding,
+      paddingLeft: variables.listItemPadding + 5,
+      backgroundColor: variables.listDividerBg,
+      flexDirection: 'row',
+      borderColor: variables.listBorderColor
+    },
+    '.selected': {
+      'NativeBase.Left': {
+        ...selectedStyle
+      },
+      'NativeBase.Body': {
+        ...selectedStyle
+      },
+      'NativeBase.Right': {
+        ...selectedStyle
+      },
+      ...selectedStyle
+    },
+    'NativeBase.Left': {
+      'NativeBase.Body': {
+        'NativeBase.Text': {
+          '.note': {
+            color: variables.listNoteColor,
+            fontWeight: '200'
+          },
+          fontWeight: '600'
+        },
+        marginLeft: 10,
+        alignItems: null,
+        alignSelf: null
+      },
+      'NativeBase.Icon': {
+        width: variables.iconFontSize - 10,
+        fontSize: variables.iconFontSize - 10
+      },
+      'NativeBase.IconNB': {
+        width: variables.iconFontSize - 10,
+        fontSize: variables.iconFontSize - 10
+      },
+      'NativeBase.Text': {
+        alignSelf: 'center'
+      },
+      flexDirection: 'row'
+    },
+    'NativeBase.Body': {
+      'NativeBase.Text': {
+        marginHorizontal: variables.listItemPadding,
+        '.note': {
+          color: variables.listNoteColor,
+          fontWeight: '200'
+        }
+      },
+      alignSelf: null,
+      alignItems: null
+    },
+    'NativeBase.Right': {
+      'NativeBase.Badge': {
+        alignSelf: null
+      },
+      'NativeBase.PickerNB': {
+        'NativeBase.Button': {
+          marginRight: -15,
+          'NativeBase.Text': {
+            color: variables.topTabBarActiveTextColor
+          }
+        }
+      },
+      'NativeBase.Button': {
+        alignSelf: null,
+        '.transparent': {
+          'NativeBase.Text': {
+            color: variables.topTabBarActiveTextColor
+          }
+        }
+      },
+      'NativeBase.Icon': {
+        alignSelf: null,
+        fontSize: variables.iconFontSize - 8,
+        color: '#c9c8cd'
+      },
+      'NativeBase.IconNB': {
+        alignSelf: null,
+        fontSize: variables.iconFontSize - 8,
+        color: '#c9c8cd'
+      },
+      'NativeBase.Text': {
+        '.note': {
+          color: variables.listNoteColor,
+          fontWeight: '200'
+        },
+        alignSelf: null
+      },
+      'NativeBase.Thumbnail': {
+        alignSelf: null
+      },
+      'NativeBase.Image': {
+        alignSelf: null
+      },
+      'NativeBase.Radio': {
+        alignSelf: null
+      },
+      'NativeBase.Checkbox': {
+        alignSelf: null
+      },
+      'NativeBase.Switch': {
+        alignSelf: null
+      },
+      padding: null,
+      flex: 0.28
+    },
+    'NativeBase.Text': {
+      '.note': {
+        color: variables.listNoteColor,
+        fontWeight: '200'
+      },
+      alignSelf: 'center'
+    },
+    '.last': {
+      marginLeft: -(variables.listItemPadding + 5),
+      paddingLeft: (variables.listItemPadding + 5) * 2,
+      top: 1
+    },
+    '.avatar': {
+      'NativeBase.Left': {
+        flex: 0,
+        alignSelf: 'flex-start',
+        paddingTop: 14
+      },
+      'NativeBase.Body': {
+        'NativeBase.Text': {
+          marginLeft: null
+        },
+        flex: 1,
+        paddingVertical: variables.listItemPadding,
+        borderBottomWidth: variables.borderWidth,
+        borderColor: variables.listBorderColor,
+        marginLeft: variables.listItemPadding + 5
+      },
+      'NativeBase.Right': {
+        'NativeBase.Text': {
+          '.note': {
+            fontSize: variables.noteFontSize - 2
+          }
+        },
+        flex: 0,
+        paddingRight: variables.listItemPadding + 5,
+        alignSelf: 'stretch',
+        paddingVertical: variables.listItemPadding,
+        borderBottomWidth: variables.borderWidth,
+        borderColor: variables.listBorderColor
+      },
+      '.noBorder': {
+        'NativeBase.Body': {
+          borderBottomWidth: null
+        },
+        'NativeBase.Right': {
+          borderBottomWidth: null
+        }
+      },
+      borderBottomWidth: null,
+      paddingVertical: null,
+      paddingRight: null
+    },
+    '.thumbnail': {
+      'NativeBase.Left': {
+        flex: 0
+      },
+      'NativeBase.Body': {
+        'NativeBase.Text': {
+          marginLeft: null
+        },
+        flex: 1,
+        paddingVertical: variables.listItemPadding + 8,
+        borderBottomWidth: variables.borderWidth,
+        borderColor: variables.listBorderColor,
+        marginLeft: variables.listItemPadding + 5
+      },
+      'NativeBase.Right': {
+        'NativeBase.Button': {
+          '.transparent': {
+            'NativeBase.Text': {
+              fontSize: variables.listNoteSize,
+              color: variables.sTabBarActiveTextColor
+            }
+          },
+          height: null
+        },
+        flex: 0,
+        justifyContent: 'center',
+        alignSelf: 'stretch',
+        paddingRight: variables.listItemPadding + 5,
+        paddingVertical: variables.listItemPadding + 5,
+        borderBottomWidth: variables.borderWidth,
+        borderColor: variables.listBorderColor
+      },
+      '.noBorder': {
+        'NativeBase.Body': {
+          borderBottomWidth: null
+        },
+        'NativeBase.Right': {
+          borderBottomWidth: null
+        }
+      },
+      borderBottomWidth: null,
+      paddingVertical: null,
+      paddingRight: null
+    },
+    '.icon': {
+      '.last': {
+        'NativeBase.Body': {
+          borderBottomWidth: null
+        },
+        'NativeBase.Right': {
+          borderBottomWidth: null
+        },
+        borderBottomWidth: variables.borderWidth,
+        borderColor: variables.listBorderColor
+      },
+      'NativeBase.Left': {
+        'NativeBase.Button': {
+          'NativeBase.IconNB': {
+            marginHorizontal: null,
+            fontSize: variables.iconFontSize - 5
+          },
+          'NativeBase.Icon': {
+            marginHorizontal: null,
+            fontSize: variables.iconFontSize - 8
+          },
+          alignSelf: 'center',
+          height: 29,
+          width: 29,
+          borderRadius: 6,
+          paddingVertical: null,
+          paddingHorizontal: null,
+          alignItems: 'center',
+          justifyContent: 'center'
+        },
+        'NativeBase.Icon': {
+          width: variables.iconFontSize - 5,
+          fontSize: variables.iconFontSize - 2
+        },
+        'NativeBase.IconNB': {
+          width: variables.iconFontSize - 5,
+          fontSize: variables.iconFontSize - 2
+        },
+        paddingRight: variables.listItemPadding + 5,
+        flex: 0,
+        height: 44,
+        justifyContent: 'center',
+        alignItems: 'center'
+      },
+      'NativeBase.Body': {
+        'NativeBase.Text': {
+          marginLeft: null,
+          fontSize: 17
+        },
+        flex: 1,
+        height: 44,
+        justifyContent: 'center',
+        borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
+        borderColor: variables.listBorderColor
+      },
+      'NativeBase.Right': {
+        'NativeBase.Text': {
+          textAlign: 'center',
+          color: '#8F8E95',
+          fontSize: 17
+        },
+        'NativeBase.IconNB': {
+          color: '#C8C7CC',
+          fontSize: variables.iconFontSize - 10,
+          alignSelf: 'center',
+          paddingLeft: 10,
+          paddingTop: 3
+        },
+        'NativeBase.Icon': {
+          color: '#C8C7CC',
+          fontSize: variables.iconFontSize - 10,
+          alignSelf: 'center',
+          paddingLeft: 10,
+          paddingTop: 3
+        },
+        'NativeBase.Switch': {
+          marginRight: Platform.OS === PLATFORM.IOS ? undefined : -5,
+          alignSelf: null
+        },
+        'NativeBase.PickerNB': {
+          ...pickerTheme()
+        },
+        flexDirection: 'row',
+        alignItems: 'center',
+        flex: 0,
+        alignSelf: 'stretch',
+        height: 44,
+        justifyContent: 'flex-end',
+        borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
+        borderColor: variables.listBorderColor,
+        paddingRight: variables.listItemPadding + 5
+      },
+      '.noBorder': {
+        'NativeBase.Body': {
+          borderBottomWidth: null
+        },
+        'NativeBase.Right': {
+          borderBottomWidth: null
+        }
+      },
+      borderBottomWidth: null,
+      paddingVertical: null,
+      paddingRight: null,
+      height: 44,
+      justifyContent: 'center'
+    },
+    '.noBorder': {
+      borderBottomWidth: null
+    },
+    '.noIndent': {
+      marginLeft: null,
+      padding: variables.listItemPadding,
+      paddingLeft: variables.listItemPadding + 6
+    },
+    alignItems: 'center',
+    flexDirection: 'row',
+    paddingRight: variables.listItemPadding + 6,
+    paddingVertical: variables.listItemPadding + 3,
+    marginLeft: variables.listItemPadding + 6,
+    borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
+    backgroundColor: variables.listBg,
+    borderColor: variables.listBorderColor
+  };
+
+  return listItemTheme;
+};

native-base-theme/components/Picker.android.js

@@ -0,0 +1,14 @@
+// @flow
+
+export default () => {
+  const pickerTheme = {
+    '.note': {
+      color: '#8F8E95'
+    },
+    // width: 90,
+    marginRight: -4,
+    flexGrow: 1
+  };
+
+  return pickerTheme;
+};

native-base-theme/components/Picker.ios.js

@@ -0,0 +1,7 @@
+// @flow
+
+export default () => {
+  const pickerTheme = {};
+
+  return pickerTheme;
+};

native-base-theme/components/Picker.js

@@ -0,0 +1,14 @@
+// @flow
+
+export default () => {
+  const pickerTheme = {
+    '.note': {
+      color: '#8F8E95'
+    },
+    // width: 90,
+    marginRight: -4,
+    flexGrow: 1
+  };
+
+  return pickerTheme;
+};

native-base-theme/components/Radio.js

@@ -0,0 +1,31 @@
+// @flow
+
+import { Platform } from 'react-native';
+
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
+
+export default (variables /* : * */ = variable) => {
+  const radioTheme = {
+    '.selected': {
+      'NativeBase.IconNB': {
+        color:
+          Platform.OS === PLATFORM.IOS
+            ? variables.radioColor
+            : variables.radioSelectedColorAndroid,
+        lineHeight:
+          Platform.OS === PLATFORM.IOS ? 25 : variables.radioBtnLineHeight,
+        height: Platform.OS === PLATFORM.IOS ? 20 : undefined
+      }
+    },
+    'NativeBase.IconNB': {
+      color: Platform.OS === PLATFORM.IOS ? 'transparent' : undefined,
+      lineHeight:
+        Platform.OS === PLATFORM.IOS ? undefined : variables.radioBtnLineHeight,
+      fontSize:
+        Platform.OS === PLATFORM.IOS ? undefined : variables.radioBtnSize
+    }
+  };
+
+  return radioTheme;
+};

native-base-theme/components/Right.js

@@ -0,0 +1,14 @@
+// @flow
+
+export default () => {
+  const rightTheme = {
+    'NativeBase.Button': {
+      alignSelf: null
+    },
+    flex: 1,
+    alignSelf: 'center',
+    alignItems: 'flex-end'
+  };
+
+  return rightTheme;
+};

native-base-theme/components/Segment.js

@@ -0,0 +1,57 @@
+// @flow
+
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
+
+export default (variables /* : * */ = variable) => {
+  const platform = variables.platform;
+
+  const segmentTheme = {
+    height: 45,
+    borderColor: variables.segmentBorderColorMain,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    backgroundColor: variables.segmentBackgroundColor,
+    'NativeBase.Button': {
+      alignSelf: 'center',
+      borderRadius: 0,
+      paddingTop: 3,
+      paddingBottom: 3,
+      height: 30,
+      backgroundColor: 'transparent',
+      borderWidth: 1,
+      borderLeftWidth: 0,
+      borderColor: variables.segmentBorderColor,
+      elevation: 0,
+      '.active': {
+        backgroundColor: variables.segmentActiveBackgroundColor,
+        'NativeBase.Text': {
+          color: variables.segmentActiveTextColor
+        },
+        'NativeBase.Icon': {
+          color: variables.segmentActiveTextColor
+        }
+      },
+      '.first': {
+        borderTopLeftRadius: platform === PLATFORM.IOS ? 5 : undefined,
+        borderBottomLeftRadius: platform === PLATFORM.IOS ? 5 : undefined,
+        borderLeftWidth: 1
+      },
+      '.last': {
+        borderTopRightRadius: platform === PLATFORM.IOS ? 5 : undefined,
+        borderBottomRightRadius: platform === PLATFORM.IOS ? 5 : undefined
+      },
+      'NativeBase.Text': {
+        color: variables.segmentTextColor,
+        fontSize: 14
+      },
+      'NativeBase.Icon': {
+        fontSize: 22,
+        paddingTop: 0,
+        color: variables.segmentTextColor
+      }
+    }
+  };
+
+  return segmentTheme;
+};

native-base-theme/components/Separator.js

@@ -0,0 +1,49 @@
+// @flow
+
+import variable from './../variables/platform';
+
+export default (variables /* : * */ = variable) => {
+  const theme = {
+    '.group': {
+      height: 50,
+      paddingVertical: variables.listItemPadding - 8,
+      paddingTop: variables.listItemPadding + 12,
+      '.bordered': {
+        height: 50,
+        paddingVertical: variables.listItemPadding - 8,
+        paddingTop: variables.listItemPadding + 12
+      }
+    },
+    '.bordered': {
+      '.noTopBorder': {
+        borderTopWidth: 0
+      },
+      '.noBottomBorder': {
+        borderBottomWidth: 0
+      },
+      height: 35,
+      paddingTop: variables.listItemPadding + 2,
+      paddingBottom: variables.listItemPadding,
+      borderBottomWidth: variables.borderWidth,
+      borderTopWidth: variables.borderWidth,
+      borderColor: variables.listBorderColor
+    },
+    'NativeBase.Text': {
+      fontSize: variables.tabBarTextSize - 2,
+      color: '#777'
+    },
+    '.noTopBorder': {
+      borderTopWidth: 0
+    },
+    '.noBottomBorder': {
+      borderBottomWidth: 0
+    },
+    height: 38,
+    backgroundColor: '#F0EFF5',
+    flex: 1,
+    justifyContent: 'center',
+    paddingLeft: variables.listItemPadding + 5
+  };
+
+  return theme;
+};

native-base-theme/components/Spinner.js

@@ -0,0 +1,9 @@
+// @flow
+
+export default () => {
+  const spinnerTheme = {
+    height: 80
+  };
+
+  return spinnerTheme;
+};

native-base-theme/components/Subtitle.js

@@ -0,0 +1,19 @@
+// @flow
+
+import { Platform } from 'react-native';
+
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
+
+export default (variables /* : * */ = variable) => {
+  const subtitleTheme = {
+    fontSize: variables.subTitleFontSize,
+    fontFamily: variables.titleFontfamily,
+    color: variables.subtitleColor,
+    textAlign: 'center',
+    paddingLeft: Platform.OS === PLATFORM.IOS ? 4 : 0,
+    marginLeft: Platform.OS === PLATFORM.IOS ? undefined : -3
+  };
+
+  return subtitleTheme;
+};

native-base-theme/components/SwipeRow.js

@@ -0,0 +1,46 @@
+// @flow
+
+export default () => {
+  const swipeRowTheme = {
+    'NativeBase.ListItem': {
+      '.list': {
+        backgroundColor: '#FFF'
+      },
+      marginLeft: 0
+    },
+    'NativeBase.Left': {
+      flex: 0,
+      alignSelf: null,
+      alignItems: null,
+      'NativeBase.Button': {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        alignSelf: 'stretch',
+        borderRadius: 0
+      }
+    },
+    'NativeBase.Right': {
+      flex: 0,
+      alignSelf: null,
+      alignItems: null,
+      'NativeBase.Button': {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        alignSelf: 'stretch',
+        borderRadius: 0
+      }
+    },
+    'NativeBase.Button': {
+      flex: 1,
+      height: null,
+      alignItems: 'center',
+      justifyContent: 'center',
+      alignSelf: 'stretch',
+      borderRadius: 0
+    }
+  };
+
+  return swipeRowTheme;
+};

native-base-theme/components/Switch.js

@@ -0,0 +1,9 @@
+// @flow
+
+export default () => {
+  const switchTheme = {
+    marginVertical: -5
+  };
+
+  return switchTheme;
+};

native-base-theme/components/Tab.js

@@ -0,0 +1,10 @@
+// @flow
+
+export default () => {
+  const tabTheme = {
+    flex: 1,
+    backgroundColor: '#FFF'
+  };
+
+  return tabTheme;
+};

native-base-theme/components/TabBar.js

@@ -0,0 +1,57 @@
+// @flow
+
+import variable from './../variables/platform';
+
+export default (variables /* : * */ = variable) => {
+  const tabBarTheme = {
+    '.tabIcon': {
+      height: undefined
+    },
+    '.vertical': {
+      height: 60
+    },
+    'NativeBase.Button': {
+      '.transparent': {
+        'NativeBase.Text': {
+          fontSize: variables.tabFontSize,
+          color: variables.sTabBarActiveTextColor,
+          fontWeight: '400'
+        },
+        'NativeBase.IconNB': {
+          color: variables.sTabBarActiveTextColor
+        }
+      },
+      'NativeBase.IconNB': {
+        color: variables.sTabBarActiveTextColor
+      },
+      'NativeBase.Text': {
+        fontSize: variables.tabFontSize,
+        color: variables.sTabBarActiveTextColor,
+        fontWeight: '400'
+      },
+      '.isTabActive': {
+        'NativeBase.Text': {
+          fontWeight: '900'
+        }
+      },
+      flex: 1,
+      alignSelf: 'stretch',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: null,
+      borderBottomColor: 'transparent',
+      backgroundColor: variables.tabBgColor
+    },
+    height: 45,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    borderWidth: 1,
+    borderTopWidth: 0,
+    borderLeftWidth: 0,
+    borderRightWidth: 0,
+    borderBottomColor: '#ccc',
+    backgroundColor: variables.tabBgColor
+  };
+
+  return tabBarTheme;
+};

native-base-theme/components/TabContainer.js

@@ -0,0 +1,26 @@
+// @flow
+
+import { Platform } from 'react-native';
+
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
+
+export default (variables /* : * */ = variable) => {
+  const platformStyle = variables.platformStyle;
+
+  const tabContainerTheme = {
+    elevation: 3,
+    height: 50,
+    flexDirection: 'row',
+    shadowColor: platformStyle === PLATFORM.MATERIAL ? '#000' : undefined,
+    shadowOffset:
+      platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined,
+    shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined,
+    shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined,
+    justifyContent: 'space-around',
+    borderBottomWidth: Platform.OS === PLATFORM.IOS ? variables.borderWidth : 0,
+    borderColor: variables.topTabBarBorderColor
+  };
+
+  return tabContainerTheme;
+};

native-base-theme/components/TabHeading.js

@@ -0,0 +1,40 @@
+// @flow
+
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
+
+export default (variables /* : * */ = variable) => {
+  const platform = variables.platform;
+
+  const tabHeadingTheme = {
+    flexDirection: 'row',
+    backgroundColor: variables.tabDefaultBg,
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    '.scrollable': {
+      paddingHorizontal: 20,
+      flex: platform === PLATFORM.ANDROID ? 0 : 1,
+      minWidth: platform === PLATFORM.ANDROID ? undefined : 60
+    },
+    'NativeBase.Text': {
+      color: variables.topTabBarTextColor,
+      marginHorizontal: 7
+    },
+    'NativeBase.Icon': {
+      color: variables.topTabBarTextColor,
+      fontSize: platform === PLATFORM.IOS ? 26 : undefined
+    },
+    '.active': {
+      'NativeBase.Text': {
+        color: variables.topTabBarActiveTextColor,
+        fontWeight: '600'
+      },
+      'NativeBase.Icon': {
+        color: variables.topTabBarActiveTextColor
+      }
+    }
+  };
+
+  return tabHeadingTheme;
+};

native-base-theme/components/Text.js

@@ -0,0 +1,17 @@
+// @flow
+
+import variable from './../variables/platform';
+
+export default (variables /* : * */ = variable) => {
+  const textTheme = {
+    fontSize: variables.DefaultFontSize,
+    fontFamily: variables.fontFamily,
+    color: variables.textColor,
+    '.note': {
+      color: '#a7a7a7',
+      fontSize: variables.noteFontSize
+    }
+  };
+
+  return textTheme;
+};

native-base-theme/components/Textarea.js

@@ -0,0 +1,25 @@
+// @flow
+
+import variable from './../variables/platform';
+
+export default (variables /* : * */ = variable) => {
+  const textAreaTheme = {
+    '.underline': {
+      borderBottomWidth: variables.borderWidth,
+      marginTop: 5,
+      borderColor: variables.inputBorderColor
+    },
+    '.bordered': {
+      borderWidth: 1,
+      marginTop: 5,
+      borderColor: variables.inputBorderColor
+    },
+    color: variables.textColor,
+    paddingLeft: 10,
+    paddingRight: 5,
+    fontSize: 15,
+    textAlignVertical: 'top'
+  };
+
+  return textAreaTheme;
+};

native-base-theme/components/Thumbnail.js

@@ -0,0 +1,40 @@
+// @flow
+
+export default () => {
+  const thumbnailTheme = {
+    '.square': {
+      borderRadius: 0,
+      '.small': {
+        width: 36,
+        height: 36,
+        borderRadius: 0
+      },
+      '.large': {
+        width: 80,
+        height: 80,
+        borderRadius: 0
+      }
+    },
+    '.small': {
+      width: 36,
+      height: 36,
+      borderRadius: 18,
+      '.square': {
+        borderRadius: 0
+      }
+    },
+    '.large': {
+      width: 80,
+      height: 80,
+      borderRadius: 40,
+      '.square': {
+        borderRadius: 0
+      }
+    },
+    width: 56,
+    height: 56,
+    borderRadius: 28
+  };
+
+  return thumbnailTheme;
+};

native-base-theme/components/Title.js

@@ -0,0 +1,21 @@
+// @flow
+
+import { Platform } from 'react-native';
+
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
+
+export default (variables /* : * */ = variable) => {
+  const titleTheme = {
+    fontSize: variables.titleFontSize,
+    fontFamily: variables.titleFontfamily,
+    color: variables.titleFontColor,
+    fontWeight: Platform.OS === PLATFORM.IOS ? '700' : undefined,
+    textAlign: 'center',
+    paddingLeft: Platform.OS === PLATFORM.IOS ? 4 : 0,
+    marginLeft: Platform.OS === PLATFORM.IOS ? undefined : -3,
+    paddingTop: 1
+  };
+
+  return titleTheme;
+};

native-base-theme/components/Toast.js

@@ -0,0 +1,41 @@
+// @flow
+
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
+
+export default (variables /* : * */ = variable) => {
+  const platform = variables.platform;
+
+  const toastTheme = {
+    '.danger': {
+      backgroundColor: variables.brandDanger
+    },
+    '.warning': {
+      backgroundColor: variables.brandWarning
+    },
+    '.success': {
+      backgroundColor: variables.brandSuccess
+    },
+    backgroundColor: 'rgba(0,0,0,0.8)',
+    borderRadius: platform === PLATFORM.IOS ? 5 : 0,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 10,
+    minHeight: 50,
+    'NativeBase.Text': {
+      color: '#fff',
+      flex: 1
+    },
+    'NativeBase.Button': {
+      backgroundColor: 'transparent',
+      height: 30,
+      elevation: 0,
+      'NativeBase.Text': {
+        fontSize: 14
+      }
+    }
+  };
+
+  return toastTheme;
+};

native-base-theme/components/View.js

@@ -0,0 +1,13 @@
+// @flow
+
+import variable from './../variables/platform';
+
+export default (variables /* : * */ = variable) => {
+  const viewTheme = {
+    '.padder': {
+      padding: variables.contentPadding
+    }
+  };
+
+  return viewTheme;
+};

native-base-theme/components/index.js

@@ -0,0 +1,249 @@
+/* eslint-disable no-param-reassign */
+// @flow
+
+import _ from 'lodash';
+
+import bodyTheme from './Body';
+import leftTheme from './Left';
+import rightTheme from './Right';
+import headerTheme from './Header';
+import switchTheme from './Switch';
+import thumbnailTheme from './Thumbnail';
+import containerTheme from './Container';
+import contentTheme from './Content';
+import buttonTheme from './Button';
+import titleTheme from './Title';
+import subtitleTheme from './Subtitle';
+import inputGroupTheme from './InputGroup';
+import badgeTheme from './Badge';
+import checkBoxTheme from './CheckBox';
+import cardTheme from './Card';
+import radioTheme from './Radio';
+import h3Theme from './H3';
+import h2Theme from './H2';
+import h1Theme from './H1';
+import footerTheme from './Footer';
+import footerTabTheme from './FooterTab';
+import fabTheme from './Fab';
+import itemTheme from './Item';
+import labelTheme from './Label';
+import textAreaTheme from './Textarea';
+import textTheme from './Text';
+import toastTheme from './Toast';
+import tabTheme from './Tab';
+import tabBarTheme from './TabBar';
+import tabContainerTheme from './TabContainer';
+import viewTheme from './View';
+import tabHeadingTheme from './TabHeading';
+import iconTheme from './Icon';
+import inputTheme from './Input';
+import swipeRowTheme from './SwipeRow';
+import segmentTheme from './Segment';
+import spinnerTheme from './Spinner';
+import cardItemTheme from './CardItem';
+import listItemTheme from './ListItem';
+import formTheme from './Form';
+import separatorTheme from './Separator';
+import pickerTheme from './Picker';
+import variable from './../variables/platform';
+
+export default (variables /* : * */ = variable) => {
+  const theme = {
+    variables,
+    'NativeBase.Left': {
+      ...leftTheme(variables)
+    },
+    'NativeBase.Right': {
+      ...rightTheme(variables)
+    },
+    'NativeBase.Body': {
+      ...bodyTheme(variables)
+    },
+
+    'NativeBase.Header': {
+      ...headerTheme(variables)
+    },
+
+    'NativeBase.Button': {
+      ...buttonTheme(variables)
+    },
+
+    'NativeBase.Title': {
+      ...titleTheme(variables)
+    },
+    'NativeBase.Subtitle': {
+      ...subtitleTheme(variables)
+    },
+
+    'NativeBase.InputGroup': {
+      ...inputGroupTheme(variables)
+    },
+
+    'NativeBase.Input': {
+      ...inputTheme(variables)
+    },
+
+    'NativeBase.Badge': {
+      ...badgeTheme(variables)
+    },
+
+    'NativeBase.CheckBox': {
+      ...checkBoxTheme(variables)
+    },
+
+    'NativeBase.Radio': {
+      ...radioTheme(variables)
+    },
+
+    'NativeBase.Card': {
+      ...cardTheme(variables)
+    },
+
+    'NativeBase.CardItem': {
+      ...cardItemTheme(variables)
+    },
+
+    'NativeBase.Toast': {
+      ...toastTheme(variables)
+    },
+
+    'NativeBase.H1': {
+      ...h1Theme(variables)
+    },
+    'NativeBase.H2': {
+      ...h2Theme(variables)
+    },
+    'NativeBase.H3': {
+      ...h3Theme(variables)
+    },
+    'NativeBase.Form': {
+      ...formTheme(variables)
+    },
+
+    'NativeBase.Container': {
+      ...containerTheme(variables)
+    },
+    'NativeBase.Content': {
+      ...contentTheme(variables)
+    },
+
+    'NativeBase.Footer': {
+      ...footerTheme(variables)
+    },
+
+    'NativeBase.Tabs': {
+      flex: 1
+    },
+
+    'NativeBase.FooterTab': {
+      ...footerTabTheme(variables)
+    },
+
+    'NativeBase.ListItem': {
+      ...listItemTheme(variables)
+    },
+
+    'NativeBase.ListItem1': {
+      ...listItemTheme(variables)
+    },
+
+    'NativeBase.Icon': {
+      ...iconTheme(variables)
+    },
+    'NativeBase.IconNB': {
+      ...iconTheme(variables)
+    },
+    'NativeBase.Text': {
+      ...textTheme(variables)
+    },
+    'NativeBase.Spinner': {
+      ...spinnerTheme(variables)
+    },
+
+    'NativeBase.Fab': {
+      ...fabTheme(variables)
+    },
+
+    'NativeBase.Item': {
+      ...itemTheme(variables)
+    },
+
+    'NativeBase.Label': {
+      ...labelTheme(variables)
+    },
+
+    'NativeBase.Textarea': {
+      ...textAreaTheme(variables)
+    },
+
+    'NativeBase.PickerNB': {
+      ...pickerTheme(variables),
+      'NativeBase.Button': {
+        'NativeBase.Text': {}
+      }
+    },
+
+    'NativeBase.Tab': {
+      ...tabTheme(variables)
+    },
+
+    'NativeBase.Segment': {
+      ...segmentTheme(variables)
+    },
+
+    'NativeBase.TabBar': {
+      ...tabBarTheme(variables)
+    },
+    'NativeBase.ViewNB': {
+      ...viewTheme(variables)
+    },
+    'NativeBase.TabHeading': {
+      ...tabHeadingTheme(variables)
+    },
+    'NativeBase.TabContainer': {
+      ...tabContainerTheme(variables)
+    },
+    'NativeBase.Switch': {
+      ...switchTheme(variables)
+    },
+    'NativeBase.Separator': {
+      ...separatorTheme(variables)
+    },
+    'NativeBase.SwipeRow': {
+      ...swipeRowTheme(variables)
+    },
+    'NativeBase.Thumbnail': {
+      ...thumbnailTheme(variables)
+    }
+  };
+
+  const cssifyTheme = (grandparent, parent, parentKey) => {
+    _.forEach(parent, (style, styleName) => {
+      if (
+        styleName.indexOf('.') === 0 &&
+        parentKey &&
+        parentKey.indexOf('.') === 0
+      ) {
+        if (grandparent) {
+          if (!grandparent[styleName]) {
+            grandparent[styleName] = {};
+          } else {
+            grandparent[styleName][parentKey] = style;
+          }
+        }
+      }
+      if (
+        style &&
+        typeof style === 'object' &&
+        styleName !== 'fontVariant' &&
+        styleName !== 'transform'
+      ) {
+        cssifyTheme(parent, style, styleName);
+      }
+    });
+  };
+
+  cssifyTheme(null, theme, null);
+
+  return theme;
+};

native-base-theme/variables/commonColor.js

@@ -0,0 +1,311 @@
+// @flow
+
+import color from 'color';
+import { Platform, Dimensions, PixelRatio } from 'react-native';
+
+export const PLATFORM = {
+  ANDROID: 'android',
+  IOS: 'ios',
+  MATERIAL: 'material',
+  WEB: 'web'
+};
+
+const deviceHeight = Dimensions.get('window').height;
+const deviceWidth = Dimensions.get('window').width;
+const platform = Platform.OS;
+const platformStyle = undefined;
+const isIphoneX =
+  platform === PLATFORM.IOS &&
+  (deviceHeight === 812 ||
+    deviceWidth === 812 ||
+    deviceHeight === 896 ||
+    deviceWidth === 896);
+
+export default {
+  platformStyle,
+  platform,
+
+  // Accordion
+  headerStyle: '#edebed',
+  iconStyle: '#000',
+  contentStyle: '#f5f4f5',
+  expandedIconStyle: '#000',
+  accordionBorderColor: '#d3d3d3',
+
+  // ActionSheet
+  elevation: 4,
+  containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)',
+  innerTouchableBackgroundColor: '#fff',
+  listItemHeight: 50,
+  listItemBorderColor: 'transparent',
+  marginHorizontal: -15,
+  marginLeft: 14,
+  marginTop: 15,
+  minHeight: 56,
+  padding: 15,
+  touchableTextColor: '#757575',
+
+  // Android
+  androidRipple: true,
+  androidRippleColor: 'rgba(256, 256, 256, 0.3)',
+  androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
+  buttonUppercaseAndroidText: true,
+
+  // Badge
+  badgeBg: '#ED1727',
+  badgeColor: '#fff',
+  badgePadding: platform === PLATFORM.IOS ? 3 : 0,
+
+  // Button
+  buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
+  buttonDisabledBg: '#b5b5b5',
+  buttonPadding: 6,
+  get buttonPrimaryBg() {
+    return this.brandPrimary;
+  },
+  get buttonPrimaryColor() {
+    return this.inverseTextColor;
+  },
+  get buttonInfoBg() {
+    return this.brandInfo;
+  },
+  get buttonInfoColor() {
+    return this.inverseTextColor;
+  },
+  get buttonSuccessBg() {
+    return this.brandSuccess;
+  },
+  get buttonSuccessColor() {
+    return this.inverseTextColor;
+  },
+  get buttonDangerBg() {
+    return this.brandDanger;
+  },
+  get buttonDangerColor() {
+    return this.inverseTextColor;
+  },
+  get buttonWarningBg() {
+    return this.brandWarning;
+  },
+  get buttonWarningColor() {
+    return this.inverseTextColor;
+  },
+  get buttonTextSize() {
+    return platform === PLATFORM.IOS
+      ? this.fontSizeBase * 1.1
+      : this.fontSizeBase - 1;
+  },
+  get buttonTextSizeLarge() {
+    return this.fontSizeBase * 1.5;
+  },
+  get buttonTextSizeSmall() {
+    return this.fontSizeBase * 0.8;
+  },
+  get borderRadiusLarge() {
+    return this.fontSizeBase * 3.8;
+  },
+  get iconSizeLarge() {
+    return this.iconFontSize * 1.5;
+  },
+  get iconSizeSmall() {
+    return this.iconFontSize * 0.6;
+  },
+
+  // Card
+  cardDefaultBg: '#fff',
+  cardBorderColor: '#ccc',
+  cardBorderRadius: 2,
+  cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
+
+  // CheckBox
+  CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0,
+  CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2,
+  CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2,
+  CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5,
+  CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16,
+  CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1,
+  CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17,
+  checkboxBgColor: '#039BE5',
+  checkboxSize: 20,
+  checkboxTickColor: '#fff',
+
+  // Color
+  brandPrimary: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5',
+  brandInfo: '#62B1F6',
+  brandSuccess: '#5cb85c',
+  brandDanger: '#d9534f',
+  brandWarning: '#f0ad4e',
+  brandDark: '#000',
+  brandLight: '#f4f4f4',
+
+  // Container
+  containerBgColor: '#fff',
+
+  // Date Picker
+  datePickerTextColor: '#000',
+  datePickerBg: 'transparent',
+
+  // FAB
+  fabWidth: 56,
+
+  // Font
+  DefaultFontSize: 16,
+  fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto',
+  fontSizeBase: 15,
+  get fontSizeH1() {
+    return this.fontSizeBase * 1.8;
+  },
+  get fontSizeH2() {
+    return this.fontSizeBase * 1.6;
+  },
+  get fontSizeH3() {
+    return this.fontSizeBase * 1.4;
+  },
+
+  // Footer
+  footerHeight: 55,
+  footerDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
+  footerPaddingBottom: 0,
+
+  // FooterTab
+  tabBarTextColor: platform === PLATFORM.IOS ? '#737373' : '#bfc6ea',
+  tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11,
+  activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+  sTabBarActiveTextColor: '#007aff',
+  tabBarActiveTextColor: platform === PLATFORM.IOS ? '#2874F0' : '#fff',
+  tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5',
+
+  // Header
+  toolbarBtnColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+  toolbarDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
+  toolbarHeight: platform === PLATFORM.IOS ? 64 : 56,
+  toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23,
+  toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff',
+  searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
+  searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50,
+  toolbarBtnTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+  iosStatusbar: 'dark-content',
+  toolbarDefaultBorder: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
+  get statusBarColor() {
+    return color(this.toolbarDefaultBg)
+      .darken(0.2)
+      .hex();
+  },
+  get darkenHeader() {
+    return color(this.tabBgColor)
+      .darken(0.03)
+      .hex();
+  },
+
+  // Icon
+  iconFamily: 'Ionicons',
+  iconFontSize: platform === PLATFORM.IOS ? 30 : 28,
+  iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24,
+
+  // InputGroup
+  inputFontSize: 17,
+  inputBorderColor: '#D9D5DC',
+  inputSuccessBorderColor: '#2b8339',
+  inputErrorBorderColor: '#ed2f2f',
+  inputHeightBase: 50,
+  get inputColor() {
+    return this.textColor;
+  },
+  get inputColorPlaceholder() {
+    return '#575757';
+  },
+
+  // Line Height
+  buttonLineHeight: 19,
+  lineHeightH1: 32,
+  lineHeightH2: 27,
+  lineHeightH3: 22,
+  lineHeight: platform === PLATFORM.IOS ? 20 : 24,
+
+  // List
+  listBg: 'transparent',
+  listBorderColor: '#c9c9c9',
+  listDividerBg: '#f4f4f4',
+  listBtnUnderlayColor: '#DDD',
+  listItemPadding: platform === PLATFORM.IOS ? 10 : 12,
+  listNoteColor: '#808080',
+  listNoteSize: 13,
+  listItemSelected: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5',
+
+  // Progress Bar
+  defaultProgressColor: '#E4202D',
+  inverseProgressColor: '#1A191B',
+
+  // Radio Button
+  radioBtnSize: platform === PLATFORM.IOS ? 25 : 23,
+  radioSelectedColorAndroid: '#3F51B5',
+  radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24,
+  get radioColor() {
+    return this.brandPrimary;
+  },
+
+  // Segment
+  segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
+  segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+  segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+  segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5',
+  segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+  segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
+
+  // Spinner
+  defaultSpinnerColor: '#45D56E',
+  inverseSpinnerColor: '#1A191B',
+
+  // Tab
+  tabDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
+  topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
+  topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+  topTabBarBorderColor: platform === PLATFORM.IOS ? '#a7a6ab' : '#fff',
+  topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+
+  // Tabs
+  tabBgColor: '#F8F8F8',
+  tabFontSize: 15,
+
+  // Text
+  textColor: '#000',
+  inverseTextColor: '#fff',
+  noteFontSize: 14,
+  get defaultTextColor() {
+    return this.textColor;
+  },
+
+  // Title
+  titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
+  titleFontSize: platform === PLATFORM.IOS ? 17 : 19,
+  subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14,
+  subtitleColor: platform === PLATFORM.IOS ? '#000' : '#fff',
+  titleFontColor: platform === PLATFORM.IOS ? '#000' : '#fff',
+
+  // Other
+  borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2,
+  borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
+  contentPadding: 10,
+  dropdownLinkColor: '#414142',
+  inputLineHeight: 24,
+  deviceWidth,
+  deviceHeight,
+  isIphoneX,
+  inputGroupRoundedBorderRadius: 30,
+
+  // iPhoneX SafeArea
+  Inset: {
+    portrait: {
+      topInset: 24,
+      leftInset: 0,
+      rightInset: 0,
+      bottomInset: 34
+    },
+    landscape: {
+      topInset: 0,
+      leftInset: 44,
+      rightInset: 44,
+      bottomInset: 21
+    }
+  }
+};

native-base-theme/variables/material.js

@@ -0,0 +1,304 @@
+// @flow
+
+import color from 'color';
+import { Platform, Dimensions, PixelRatio } from 'react-native';
+
+import { PLATFORM } from './commonColor';
+
+const deviceHeight = Dimensions.get('window').height;
+const deviceWidth = Dimensions.get('window').width;
+const platform = Platform.OS;
+const platformStyle = PLATFORM.MATERIAL;
+const isIphoneX =
+  platform === PLATFORM.IOS &&
+  (deviceHeight === 812 ||
+    deviceWidth === 812 ||
+    deviceHeight === 896 ||
+    deviceWidth === 896);
+
+export default {
+  platformStyle,
+  platform,
+
+  // Accordion
+  headerStyle: '#edebed',
+  iconStyle: '#000',
+  contentStyle: '#f5f4f5',
+  expandedIconStyle: '#000',
+  accordionBorderColor: '#d3d3d3',
+
+  // ActionSheet
+  elevation: 4,
+  containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)',
+  innerTouchableBackgroundColor: '#fff',
+  listItemHeight: 50,
+  listItemBorderColor: 'transparent',
+  marginHorizontal: -15,
+  marginLeft: 14,
+  marginTop: 15,
+  minHeight: 56,
+  padding: 15,
+  touchableTextColor: '#757575',
+
+  // Android
+  androidRipple: true,
+  androidRippleColor: 'rgba(256, 256, 256, 0.3)',
+  androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
+  buttonUppercaseAndroidText: true,
+
+  // Badge
+  badgeBg: '#ED1727',
+  badgeColor: '#fff',
+  badgePadding: 0,
+
+  // Button
+  buttonFontFamily: 'Roboto',
+  buttonDisabledBg: '#b5b5b5',
+  buttonPadding: 6,
+  get buttonPrimaryBg() {
+    return this.brandPrimary;
+  },
+  get buttonPrimaryColor() {
+    return this.inverseTextColor;
+  },
+  get buttonInfoBg() {
+    return this.brandInfo;
+  },
+  get buttonInfoColor() {
+    return this.inverseTextColor;
+  },
+  get buttonSuccessBg() {
+    return this.brandSuccess;
+  },
+  get buttonSuccessColor() {
+    return this.inverseTextColor;
+  },
+  get buttonDangerBg() {
+    return this.brandDanger;
+  },
+  get buttonDangerColor() {
+    return this.inverseTextColor;
+  },
+  get buttonWarningBg() {
+    return this.brandWarning;
+  },
+  get buttonWarningColor() {
+    return this.inverseTextColor;
+  },
+  get buttonTextSize() {
+    return this.fontSizeBase - 1;
+  },
+  get buttonTextSizeLarge() {
+    return this.fontSizeBase * 1.5;
+  },
+  get buttonTextSizeSmall() {
+    return this.fontSizeBase * 0.8;
+  },
+  get borderRadiusLarge() {
+    return this.fontSizeBase * 3.8;
+  },
+  get iconSizeLarge() {
+    return this.iconFontSize * 1.5;
+  },
+  get iconSizeSmall() {
+    return this.iconFontSize * 0.6;
+  },
+
+  // Card
+  cardDefaultBg: '#fff',
+  cardBorderColor: '#ccc',
+  cardBorderRadius: 2,
+  cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
+
+  // CheckBox
+  CheckboxRadius: 0,
+  CheckboxBorderWidth: 2,
+  CheckboxPaddingLeft: 2,
+  CheckboxPaddingBottom: 5,
+  CheckboxIconSize: 16,
+  CheckboxIconMarginTop: 1,
+  CheckboxFontSize: 17,
+  checkboxBgColor: '#039BE5',
+  checkboxSize: 20,
+  checkboxTickColor: '#fff',
+
+  // Color
+  brandPrimary: '#3F51B5',
+  brandInfo: '#62B1F6',
+  brandSuccess: '#5cb85c',
+  brandDanger: '#d9534f',
+  brandWarning: '#f0ad4e',
+  brandDark: '#000',
+  brandLight: '#f4f4f4',
+
+  // Container
+  containerBgColor: '#fff',
+
+  // Date Picker
+  datePickerTextColor: '#000',
+  datePickerBg: 'transparent',
+
+  // FAB
+  fabWidth: 56,
+
+  // Font
+  DefaultFontSize: 16,
+  fontFamily: 'Roboto',
+  fontSizeBase: 15,
+  get fontSizeH1() {
+    return this.fontSizeBase * 1.8;
+  },
+  get fontSizeH2() {
+    return this.fontSizeBase * 1.6;
+  },
+  get fontSizeH3() {
+    return this.fontSizeBase * 1.4;
+  },
+
+  // Footer
+  footerHeight: 55,
+  footerDefaultBg: '#3F51B5',
+  footerPaddingBottom: 0,
+
+  // FooterTab
+  tabBarTextColor: '#bfc6ea',
+  tabBarTextSize: 11,
+  activeTab: '#fff',
+  sTabBarActiveTextColor: '#007aff',
+  tabBarActiveTextColor: '#fff',
+  tabActiveBgColor: '#3F51B5',
+
+  // Header
+  toolbarBtnColor: '#fff',
+  toolbarDefaultBg: '#3F51B5',
+  toolbarHeight: 56,
+  toolbarSearchIconSize: 23,
+  toolbarInputColor: '#fff',
+  searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
+  searchBarInputHeight: platform === PLATFORM.IOS ? 40 : 50,
+  toolbarBtnTextColor: '#fff',
+  toolbarDefaultBorder: '#3F51B5',
+  iosStatusbar: 'light-content',
+  get statusBarColor() {
+    return color(this.toolbarDefaultBg)
+      .darken(0.2)
+      .hex();
+  },
+  get darkenHeader() {
+    return color(this.tabBgColor)
+      .darken(0.03)
+      .hex();
+  },
+
+  // Icon
+  iconFamily: 'Ionicons',
+  iconFontSize: 28,
+  iconHeaderSize: 24,
+
+  // InputGroup
+  inputFontSize: 17,
+  inputBorderColor: '#D9D5DC',
+  inputSuccessBorderColor: '#2b8339',
+  inputErrorBorderColor: '#ed2f2f',
+  inputHeightBase: 50,
+  get inputColor() {
+    return this.textColor;
+  },
+  get inputColorPlaceholder() {
+    return '#575757';
+  },
+
+  // Line Height
+  buttonLineHeight: 19,
+  lineHeightH1: 32,
+  lineHeightH2: 27,
+  lineHeightH3: 22,
+  lineHeight: 24,
+
+  // List
+  listBg: 'transparent',
+  listBorderColor: '#c9c9c9',
+  listDividerBg: '#f4f4f4',
+  listBtnUnderlayColor: '#DDD',
+  listItemPadding: 12,
+  listNoteColor: '#808080',
+  listNoteSize: 13,
+  listItemSelected: '#3F51B5',
+
+  // Progress Bar
+  defaultProgressColor: '#E4202D',
+  inverseProgressColor: '#1A191B',
+
+  // Radio Button
+  radioBtnSize: 23,
+  radioSelectedColorAndroid: '#3F51B5',
+  radioBtnLineHeight: 24,
+  get radioColor() {
+    return this.brandPrimary;
+  },
+
+  // Segment
+  segmentBackgroundColor: '#3F51B5',
+  segmentActiveBackgroundColor: '#fff',
+  segmentTextColor: '#fff',
+  segmentActiveTextColor: '#3F51B5',
+  segmentBorderColor: '#fff',
+  segmentBorderColorMain: '#3F51B5',
+
+  // Spinner
+  defaultSpinnerColor: '#45D56E',
+  inverseSpinnerColor: '#1A191B',
+
+  // Tab
+  tabDefaultBg: '#3F51B5',
+  topTabBarTextColor: '#b3c7f9',
+  topTabBarActiveTextColor: '#fff',
+  topTabBarBorderColor: '#fff',
+  topTabBarActiveBorderColor: '#fff',
+
+  // Tabs
+  tabBgColor: '#F8F8F8',
+  tabFontSize: 15,
+
+  // Text
+  textColor: '#000',
+  inverseTextColor: '#fff',
+  noteFontSize: 14,
+  get defaultTextColor() {
+    return this.textColor;
+  },
+
+  // Title
+  titleFontfamily: 'Roboto',
+  titleFontSize: 19,
+  subTitleFontSize: 14,
+  subtitleColor: '#FFF',
+  titleFontColor: '#FFF',
+
+  // Other
+  borderRadiusBase: 2,
+  borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
+  contentPadding: 10,
+  dropdownLinkColor: '#414142',
+  inputLineHeight: 24,
+  deviceWidth,
+  deviceHeight,
+  isIphoneX,
+  inputGroupRoundedBorderRadius: 30,
+
+  // iPhoneX SafeArea
+  Inset: {
+    portrait: {
+      topInset: 24,
+      leftInset: 0,
+      rightInset: 0,
+      bottomInset: 34
+    },
+    landscape: {
+      topInset: 0,
+      leftInset: 44,
+      rightInset: 44,
+      bottomInset: 21
+    }
+  }
+};

native-base-theme/variables/platform.js

@@ -0,0 +1,333 @@
+// @flow
+
+import color from 'color';
+import { Platform, Dimensions, PixelRatio } from 'react-native';
+
+import { PLATFORM } from './commonColor';
+
+const deviceHeight = Dimensions.get('window').height;
+const deviceWidth = Dimensions.get('window').width;
+const platform = Platform.OS;
+const platformStyle = undefined;
+const isIphoneX =
+  platform === PLATFORM.IOS &&
+  (deviceHeight === 812 ||
+    deviceWidth === 812 ||
+    deviceHeight === 896 ||
+    deviceWidth === 896);
+
+export default {
+  platformStyle,
+  platform,
+
+  // Accordion
+  accordionBorderColor: '#d3d3d3',
+  accordionContentPadding: 10,
+  accordionIconFontSize: 18,
+  contentStyle: '#f5f4f5',
+  expandedIconStyle: '#000',
+  headerStyle: '#edebed',
+  iconStyle: '#000',
+
+  // ActionSheet
+  elevation: 4,
+  containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)',
+  innerTouchableBackgroundColor: '#fff',
+  listItemHeight: 50,
+  listItemBorderColor: 'transparent',
+  marginHorizontal: -15,
+  marginLeft: 14,
+  marginTop: 15,
+  minHeight: 56,
+  padding: 15,
+  touchableTextColor: '#757575',
+
+  // Android
+  androidRipple: true,
+  androidRippleColor: 'rgba(256, 256, 256, 0.3)',
+  androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
+  buttonUppercaseAndroidText: true,
+
+  // Badge
+  badgeBg: '#ED1727',
+  badgeColor: '#fff',
+  badgePadding: platform === PLATFORM.IOS ? 3 : 0,
+
+  // Button
+  buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
+  buttonDisabledBg: '#b5b5b5',
+  buttonPadding: 6,
+  buttonDefaultActiveOpacity: 0.5,
+  buttonDefaultFlex: 1,
+  buttonDefaultBorderRadius: 2,
+  buttonDefaultBorderWidth: 1,
+  get buttonPrimaryBg() {
+    return this.brandPrimary;
+  },
+  get buttonPrimaryColor() {
+    return this.inverseTextColor;
+  },
+  get buttonInfoBg() {
+    return this.brandInfo;
+  },
+  get buttonInfoColor() {
+    return this.inverseTextColor;
+  },
+  get buttonSuccessBg() {
+    return this.brandSuccess;
+  },
+  get buttonSuccessColor() {
+    return this.inverseTextColor;
+  },
+  get buttonDangerBg() {
+    return this.brandDanger;
+  },
+  get buttonDangerColor() {
+    return this.inverseTextColor;
+  },
+  get buttonWarningBg() {
+    return this.brandWarning;
+  },
+  get buttonWarningColor() {
+    return this.inverseTextColor;
+  },
+  get buttonTextSize() {
+    return platform === PLATFORM.IOS
+      ? this.fontSizeBase * 1.1
+      : this.fontSizeBase - 1;
+  },
+  get buttonTextSizeLarge() {
+    return this.fontSizeBase * 1.5;
+  },
+  get buttonTextSizeSmall() {
+    return this.fontSizeBase * 0.8;
+  },
+  get borderRadiusLarge() {
+    return this.fontSizeBase * 3.8;
+  },
+  get iconSizeLarge() {
+    return this.iconFontSize * 1.5;
+  },
+  get iconSizeSmall() {
+    return this.iconFontSize * 0.6;
+  },
+
+  // Card
+  cardDefaultBg: '#fff',
+  cardBorderColor: '#ccc',
+  cardBorderRadius: 2,
+  cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
+
+  // CheckBox
+  CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0,
+  CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2,
+  CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2,
+  CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5,
+  CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16,
+  CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1,
+  CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17,
+  checkboxBgColor: '#039BE5',
+  checkboxSize: 20,
+  checkboxTickColor: '#fff',
+  checkboxDefaultColor: 'transparent',
+  checkboxTextShadowRadius: 0,
+
+  // Color
+  brandPrimary: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5',
+  brandInfo: '#62B1F6',
+  brandSuccess: '#5cb85c',
+  brandDanger: '#d9534f',
+  brandWarning: '#f0ad4e',
+  brandDark: '#000',
+  brandLight: '#f4f4f4',
+
+  // Container
+  containerBgColor: '#fff',
+
+  // Date Picker
+  datePickerFlex: 1,
+  datePickerPadding: 10,
+  datePickerTextColor: '#000',
+  datePickerBg: 'transparent',
+
+  // FAB
+  fabBackgroundColor: 'blue',
+  fabBorderRadius: 28,
+  fabBottom: 0,
+  fabButtonBorderRadius: 20,
+  fabButtonHeight: 40,
+  fabButtonLeft: 7,
+  fabButtonMarginBottom: 10,
+  fabContainerBottom: 20,
+  fabDefaultPosition: 20,
+  fabElevation: 4,
+  fabIconColor: '#fff',
+  fabIconSize: 24,
+  fabShadowColor: '#000',
+  fabShadowOffsetHeight: 2,
+  fabShadowOffsetWidth: 0,
+  fabShadowOpacity: 0.4,
+  fabShadowRadius: 2,
+  fabWidth: 56,
+
+  // Font
+  DefaultFontSize: 16,
+  fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto',
+  fontSizeBase: 15,
+  get fontSizeH1() {
+    return this.fontSizeBase * 1.8;
+  },
+  get fontSizeH2() {
+    return this.fontSizeBase * 1.6;
+  },
+  get fontSizeH3() {
+    return this.fontSizeBase * 1.4;
+  },
+
+  // Footer
+  footerHeight: 55,
+  footerDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
+  footerPaddingBottom: 0,
+
+  // FooterTab
+  tabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
+  tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11,
+  activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+  sTabBarActiveTextColor: '#007aff',
+  tabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+  tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5',
+
+  // Header
+  toolbarBtnColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+  toolbarDefaultBg: platform === PLATFORM.IOS ? '#673AB7' : '#673AB7',
+  toolbarHeight: platform === PLATFORM.IOS ? 64 : 56,
+  toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23,
+  toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff',
+  searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
+  searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50,
+  toolbarBtnTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+  toolbarDefaultBorder: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
+  iosStatusbar: platform === PLATFORM.IOS ? 'dark-content' : 'light-content',
+  get statusBarColor() {
+    return color(this.toolbarDefaultBg)
+      .hex();
+  },
+  get darkenHeader() {
+    return color(this.tabBgColor)
+      .darken(0.03)
+      .hex();
+  },
+
+  // Icon
+  iconFamily: 'Ionicons',
+  iconFontSize: platform === PLATFORM.IOS ? 30 : 28,
+  iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24,
+
+  // InputGroup
+  inputFontSize: 17,
+  inputBorderColor: '#D9D5DC',
+  inputSuccessBorderColor: '#2b8339',
+  inputErrorBorderColor: '#ed2f2f',
+  inputHeightBase: 50,
+  get inputColor() {
+    return this.textColor;
+  },
+  get inputColorPlaceholder() {
+    return '#575757';
+  },
+
+  // Line Height
+  buttonLineHeight: 19,
+  lineHeightH1: 32,
+  lineHeightH2: 27,
+  lineHeightH3: 22,
+  lineHeight: platform === PLATFORM.IOS ? 20 : 24,
+  listItemSelected: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5',
+
+  // List
+  listBg: 'transparent',
+  listBorderColor: '#c9c9c9',
+  listDividerBg: '#f4f4f4',
+  listBtnUnderlayColor: '#DDD',
+  listItemPadding: platform === PLATFORM.IOS ? 10 : 12,
+  listNoteColor: '#808080',
+  listNoteSize: 13,
+
+  // Progress Bar
+  defaultProgressColor: '#E4202D',
+  inverseProgressColor: '#1A191B',
+
+  // Radio Button
+  radioBtnSize: platform === PLATFORM.IOS ? 25 : 23,
+  radioSelectedColorAndroid: '#3F51B5',
+  radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24,
+  get radioColor() {
+    return this.brandPrimary;
+  },
+
+  // Segment
+  segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
+  segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+  segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+  segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5',
+  segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+  segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
+
+  // Spinner
+  defaultSpinnerColor: '#45D56E',
+  inverseSpinnerColor: '#1A191B',
+
+  // Tab
+  tabBarDisabledTextColor: '#BDBDBD',
+  tabDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
+  topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
+  topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+  topTabBarBorderColor: platform === PLATFORM.IOS ? '#a7a6ab' : '#fff',
+  topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+
+  // Tabs
+  tabBgColor: '#F8F8F8',
+  tabFontSize: 15,
+
+  // Text
+  textColor: '#000',
+  inverseTextColor: '#fff',
+  noteFontSize: 14,
+  get defaultTextColor() {
+    return this.textColor;
+  },
+
+  // Title
+  titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
+  titleFontSize: platform === PLATFORM.IOS ? 17 : 19,
+  subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14,
+  subtitleColor: platform === PLATFORM.IOS ? '#8e8e93' : '#FFF',
+  titleFontColor: platform === PLATFORM.IOS ? '#000' : '#FFF',
+
+  // Other
+  borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2,
+  borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
+  contentPadding: 10,
+  dropdownLinkColor: '#414142',
+  inputLineHeight: 24,
+  deviceWidth,
+  deviceHeight,
+  isIphoneX,
+  inputGroupRoundedBorderRadius: 30,
+
+  // iPhoneX SafeArea
+  Inset: {
+    portrait: {
+      topInset: 24,
+      leftInset: 0,
+      rightInset: 0,
+      bottomInset: 34
+    },
+    landscape: {
+      topInset: 0,
+      leftInset: 44,
+      rightInset: 44,
+      bottomInset: 21
+    }
+  }
+};

package-lock.json

@@ -1130,14 +1130,6 @@
         "@types/yargs": "^13.0.0"
       }
     },
-    "@react-native-community/async-storage": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/async-storage/-/async-storage-1.9.0.tgz",
-      "integrity": "sha512-TlGMr02JcmY4huH1P7Mt7p6wJecosPpW+09+CwCFLn875IhpRqU2XiVA+BQppZOYfQdHUfUzIKyCBeXOlCEbEg==",
-      "requires": {
-        "deep-assign": "^3.0.0"
-      }
-    },
     "@react-native-community/cli-debugger-ui": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-3.0.0.tgz",
@@ -6513,16 +6505,6 @@
         "debounce": "^1.2.0"
       }
     },
-    "react-native-status-bar-height": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/react-native-status-bar-height/-/react-native-status-bar-height-2.5.0.tgz",
-      "integrity": "sha512-sYBCPYA/NapBSHkdm/IVL4ID3LLlIuLqINi2FBDyMkc2BU9pfSGOtkz9yfxoK39mYJuTrlTOQ7mManARUsYDSA=="
-    },
-    "react-native-swipe-list-view": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/react-native-swipe-list-view/-/react-native-swipe-list-view-2.3.0.tgz",
-      "integrity": "sha512-6y9HPlw3BKaxPPdL6UVG1xNsES9YmMZFdyc+az2JrnpWPifd786Kr54kcILtobupFOjFqLyut7etCis8pStTOQ=="
-    },
     "react-native-tab-view": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-1.4.1.tgz",
@@ -7221,11 +7203,6 @@
       "resolved": "https://registry.npmjs.org/shellwords/-/shellwords-0.1.1.tgz",
       "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww=="
     },
-    "shvl": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shvl/-/shvl-2.0.0.tgz",
-      "integrity": "sha512-WbpzSvI5XgVGJ3A4ySGe8hBxj0JgJktfnoLhhJmvITDdK21WPVWwgG8GPlYEh4xqdti3Ff7PJ5G0QrRAjNS0Ig=="
-    },
     "sigmund": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
@@ -8076,22 +8053,6 @@
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.2.tgz",
       "integrity": "sha512-ha3jNLJqNhhrAemDXcmMJMKf1Zu4sybMPr9KxJIuOpVcsDQlTBYLLladav2U+g1AvdYDG5Gs0xBTb0M5pXXYFQ=="
     },
-    "vuex-persistedstate": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/vuex-persistedstate/-/vuex-persistedstate-3.0.1.tgz",
-      "integrity": "sha512-2dH77+fIecAXO8GeJEXiYnC++gx48PFGUayB5d7rWrN3fblRCOHQoVnmu/VV9DXbHHJcJth/0W/ofl8vw12j1A==",
-      "requires": {
-        "deepmerge": "^4.2.2",
-        "shvl": "^2.0.0"
-      },
-      "dependencies": {
-        "deepmerge": {
-          "version": "4.2.2",
-          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
-          "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
-        }
-      }
-    },
     "walker": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.7.tgz",

package.json

@@ -8,6 +8,7 @@
     "eject": "expo eject"
   },
   "dependencies": {
+    "color": "^3.1.2",
     "expo": "~36.0.0",
     "expo-font": "~8.0.0",
     "expo-image-picker": "~8.0.1",
@@ -15,6 +16,7 @@
     "expo-permissions": "~8.0.0",
     "expo-secure-store": "~8.0.0",
     "expo-sqlite": "~8.0.0",
+    "lodash": "^4.17.15",
     "native-base": "^2.13.8",
     "prop-types": "^15.7.2",
     "react": "~16.9.0",

src/App.vue

@@ -1,7 +1,9 @@
 <template>
-    <root>
-        <app-navigator></app-navigator>
-    </root>
+    <style-wrapper>
+        <root>
+            <app-navigator></app-navigator>
+        </root>
+    </style-wrapper>
 </template>
 
 <script>
@@ -13,10 +15,13 @@
         createAppContainer,
     } from 'vue-native-router';
 
-    import { Root } from 'native-base';
+    import { Root, StyleProvider } from 'native-base';
+
+    import StyleWrapper from "./theme/styleWrapper";
 
     import Lessons from "./screens/lessons/LessonsScreen";
     import AddLessonScreen from "./screens/lessons/AddLessonScreen";
+    import EditLessonScreen from "./screens/lessons/EditLessonScreen";
     import Settings from "./screens/SettingsScreen";
 
     import Login from "./screens/auth/LoginScreen";
@@ -45,6 +50,7 @@
             Drawer: { screen: Drawer },
             Lessons: { screen: Lessons },
             AddLesson: { screen: AddLessonScreen },
+            EditLesson: { screen: EditLessonScreen },
             Settings: { screen: Settings },
 
             Login: { screen: Login },
@@ -63,7 +69,13 @@
     export default {
         components: {
             Root,
-            AppNavigator
+            AppNavigator,
+            StyleWrapper
+        },
+        data() {
+            return {
+
+            }
         }
     }
 </script>

src/components/DailySchedule.vue

@@ -0,0 +1,55 @@
+<template>
+    <nb-content class="schedule">
+        <nb-spinner v-if="loading" color="#673AB7"></nb-spinner>
+
+        <nb-list v-if="!loading" v-for="object in data">
+            <schedule-item
+                :type="type"
+                :data="object"
+                :item-number="Array.prototype.indexOf.call(data, object) + 1"
+                :navigation="navigation"
+            />
+        </nb-list>
+
+        <nb-text
+            v-if="data.length === 0"
+            class="hint-text"
+        >
+            Как-то тут пустовато... Совсем скоро здесь появятся учебные предметы, нужно только подождать!
+        </nb-text>
+    </nb-content>
+</template>
+
+<script>
+    import { React } from 'react';
+
+    import ScheduleItem from "./ScheduleItem";
+
+    import store from "../store";
+
+    export default {
+        name: 'DailySchedule',
+        components: {
+            ScheduleItem
+        },
+        props: {
+            navigation: Object,
+            type: String,
+            data: Array
+        },
+        computed: {
+            loading() {
+                return store.state.loading;
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .hint-text {
+        margin-top: 50%;
+        font-size: 18px;
+        color: #4f4f4f;
+        text-align: center;
+    }
+</style>

src/components/Form/ImagePicker.vue

@@ -1,29 +0,0 @@
-<template>
-
-</template>
-
-<script>
-    import * as ImagePicker from "expo-image-picker";
-
-    import { Toast } from "native-base";
-
-    export default {
-        name: "imagePicker",
-        props: {
-            title: { type: String },
-            description: { type: String }
-        },
-        data() {
-            return {
-                image: null
-            }
-        },
-        methods: {
-
-        }
-    }
-</script>
-
-<style>
-
-</style>

src/components/Header.vue

@@ -16,19 +16,27 @@
 
         <nb-right>
             <nb-button
-                transparent
-                v-if="rightButton.show"
-                :onPress="rightButton.action"
+                    transparent
+                    v-if="rightButton.show"
+                    :onPress="rightButton.action"
             >
                 <nb-icon :name="rightButton.icon"/>
 
                 <nb-badge
-                    v-if="week.show"
-                    class="badge"
+                        v-if="week.show"
+                        class="badge"
                 >
                     <nb-text class="badge__text">{{ week.type }}</nb-text>
                 </nb-badge>
             </nb-button>
+
+            <nb-button
+                    transparent
+                    v-if="rightSecondButton.show"
+                    :onPress="rightSecondButton.action"
+            >
+                <nb-icon :name="rightSecondButton.icon"/>
+            </nb-button>
         </nb-right>
     </nb-header>
 </template>
@@ -46,14 +54,7 @@
             navigation: { type: Object },
             leftButton: { type: Object },
             rightButton: { type: Object },
-        },
-        data() {
-            return {
-
-            }
-        },
-        methods: {
-
+            rightSecondButton: { type: Object },
         }
     }
 </script>
@@ -65,7 +66,7 @@
     }
 
     .badge__text {
-        font-size: 14px;
+        font-size: 13px;
         font-weight: 700;
         line-height: 25px;
     }

src/components/Logo.vue

@@ -7,15 +7,6 @@
 
     export default {
         name: "Logo",
-        props: {
-            width: {
-                type: [String, Number]
-            },
-            height: {
-                type: [String, Number]
-            },
-            iconColor: String
-        },
         data() {
             return {
                 logo
@@ -25,7 +16,5 @@
 </script>
 
 <style scoped>
-    .logo {
 
-    }
 </style>

src/components/ScheduleItem.vue

@@ -0,0 +1,115 @@
+import {Toast} from "native-base";
+<template>
+    <nb-list-item thumbnail>
+        <nb-left>
+            <nb-text class="schedule-item-number">{{ itemNumber }}.</nb-text>
+        </nb-left>
+
+        <nb-body v-if="type === 'lesson'">
+            <nb-text>{{ data.name }}</nb-Text>
+            <nb-text v-if="data.audience !== null" note :numberOfLines="1">Аудитория: {{ data.audience }}</nb-text>
+            <nb-text v-if="data.audience === null" note :numberOfLines="1">Можно спать :)</nb-text>
+        </nb-body>
+
+        <nb-body v-if="type === 'call'">
+            <nb-text>{{ data.beginning }} - {{ data.ending }}</nb-Text>
+            <nb-text note :numberOfLines="1">Перемена: {{ data.break }} минут</nb-text>
+        </nb-body>
+
+        <nb-right
+                v-if="userGroup === 'moder' ||
+                      userGroup === 'admin'"
+        >
+            <nb-button transparent :onPress="openMenu">
+                <nb-icon name="more"/>
+            </nb-button>
+        </nb-right>
+    </nb-list-item>
+</template>
+
+<script>
+    import { Alert } from "react-native";
+    import { ActionSheet, Toast } from "native-base";
+
+    import store from "../store";
+
+    export default {
+        name: "ScheduleItem",
+        props: {
+            navigation: Object,
+            type: String,
+            data: Object,
+            itemNumber: Number
+        },
+        data() {
+            return {
+                btnOptions: [
+                    { text: "Изменить", icon: "create", iconColor: "#673AB7", action: () => this.navigation.navigate('EditLesson', { editableLesson: this.data }) },
+                    { text: "Удалить", icon: "trash", iconColor: "#fa213b", action: () => this.openDeleteDialog() },
+                    { text: "Отмена", icon: "close", iconColor: "#673AB7", action: () => console.log('Canceled') }
+                ],
+                clicked: 0,
+                optionCancelIndex: 2,
+                optionDestructiveIndex: 1,
+                userGroup: store.state.userGroup
+            }
+        },
+        methods: {
+            openMenu() {
+                ActionSheet.show(
+                    {
+                        options: this.btnOptions,
+                        cancelButtonIndex: this.optionCancelIndex,
+                        destructiveButtonIndex: this.optionDestructiveIndex,
+                        title: "Выберите действие"
+                    },
+                    buttonIndex => {
+                        this.clicked = this.btnOptions[buttonIndex];
+
+                        this.clicked.action();
+                    }
+                );
+            },
+            openDeleteDialog() {
+                Alert.alert(
+                    'Подтвердите действие',
+                    'Вы действительно хотите удалить данный элемент из расписания?',
+                    [
+                        { text: 'Да', onPress: () => this.deleteItem() },
+                        { text: 'Отмена', onPress: () => console.log('Canceled') },
+                    ]
+                )
+            },
+            async deleteItem() {
+                let response = await this.$plugins.f(
+                    `${this.type}/${this.data.id}`,
+                    'DELETE',
+                    store.state.userObj.api_token
+                );
+
+                if (response.body.status) {
+                    Toast.show({
+                        text: `${(this.type === 'lesson') ? 'Предмет' : 'Звонок'} успешно удален`,
+                        buttonText: "ОК",
+                        type: "success",
+                        duration: 2000
+                    });
+                } else {
+                    Toast.show({
+                        text: "Произошла непредвиденная ошибка",
+                        buttonText: "Закрыть",
+                        type: "danger",
+                        duration: 3000
+                    });
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+    .schedule-item-number {
+        font-size: 18px;
+        line-height: 40px;
+    }
+</style>

src/components/SideBar.vue

@@ -30,9 +30,10 @@
                 />
             </nb-content>
 
-            <nb-list>
+            <nb-list class="sidebar-menu">
                 <nb-list-item
                     v-for="data in datas"
+                    class="list-item-active"
                     :key="data.route"
                     button
                     noBorder
@@ -42,10 +43,14 @@
                         <nb-icon
                             active
                             :name="data.icon"
-                            :style="{ color: '#777', fontSize: 26, width: 30 }"
+                            class="list-item-icon"
+                            :style="{ color: (isActiveRoute(data.route)) ? '#512DA8' : '#777' }"
                         />
 
-                        <nb-text>
+                        <nb-text :style="{
+                            color: (isActiveRoute(data.route)) ? '#512DA8' : '#000',
+                            marginLeft: 10
+                        }">
                             {{ data.name }}
                         </nb-text>
                     </nb-left>
@@ -108,23 +113,23 @@
                         route: "Lessons",
                         icon: "school",
                     },
-                    {
-                        name: "Звонки",
-                        route: "Calls",
-                        icon: "notifications",
-                    },
-                    {
-                        name: "Домашка",
-                        route: "Homework",
-                        icon: "home"
-                    },
-                    {
-                        name: "Долги по учебе",
-                        route: "Homework",
-                        icon: "home",
-                        bg: "#477EEA",
-                        types: "5 долгов"
-                    },
+                    // {
+                    //     name: "Звонки",
+                    //     route: "Calls",
+                    //     icon: "notifications",
+                    // },
+                    // {
+                    //     name: "Домашка",
+                    //     route: "Homework",
+                    //     icon: "home"
+                    // },
+                    // {
+                    //     name: "Долги по учебе",
+                    //     route: "Debts",
+                    //     icon: "happy",
+                    //     bg: "#477EEA",
+                    //     types: "0 долгов"
+                    // },
                     {
                         name: "Настройки",
                         route: "Settings",
@@ -132,6 +137,7 @@
                     },
                 ],
                 user: Object,
+                activeRoute: null
             };
         },
         mounted() {
@@ -145,7 +151,6 @@
             setDrawerCover() {
                 let currentDate = new Date(),
                     hours = currentDate.getHours();
-                console.log(hours);
 
                 if (hours >= 6 && hours <= 10) {
                     this.drawerCover = drawer_cover_morning
@@ -165,6 +170,11 @@
                     index: 0,
                     actions: [this.$props.navigation.navigate('Login')]
                 });
+            },
+            isActiveRoute(route) {
+                let childNavigation = this.navigation._childrenNavigation;
+
+                return childNavigation[route].isFocused();
             }
         }
     };
@@ -176,6 +186,15 @@
         background-color: #fff;
     }
 
+    .sidebar-menu {
+        padding-top: 5px;
+    }
+
+    .list-item-icon {
+        width: 30px;
+        font-size: 26px;
+    }
+
     .list-item-badge-container {
         border-radius: 3px;
         height: 25px;

src/plugins/helpers.js

@@ -1,23 +1,29 @@
 export default {
-    async f(url, method, data = null, json = false) {
+    async f(url, method, token = null, data = null, json = false) {
         const API = 'http://yarik.protasevich.fun/api/';
 
         let options = {
             method: method.toUpperCase(),
             mode: 'cors',
             headers: {
-
+                'Authorization': `Bearer ${token}`
             }
         };
 
         if (json) options.headers["Content-Type"] = "application/json";
 
-        if (method === "POST") {
+        if (
+            method === "POST" ||
+            method === "PATCH"
+        ) {
             options.body = data;
         }
 
         let response = await fetch(`${API}${url}`, options);
 
-        return await response.json();
+        return {
+            body: await response.json(),
+            code: response.status
+        };
     }
 }

src/screens/Greetings.vue

@@ -1,11 +1,14 @@
+import {Toast} from "native-base";
 <template>
     <nb-container class="container">
         <image-background class="splash-image" :source="splashImage" />
 
         <nb-content class="logo-wrapper">
-            <nb-text class="logo">место для лого</nb-text>
+            <logo class="logo"/>
         </nb-content>
 
+        <nb-text class="app-name">Pocket Diary</nb-text>
+
         <nb-content class="greetings-wrapper">
             <nb-h1 class="greetings-text">{{ greetingsText }}, {{ userObj.name }}!</nb-h1>
         </nb-content>
@@ -17,7 +20,10 @@
 </template>
 
 <script>
-    import { Animated, Easing, StatusBar } from "react-native";
+    import { StatusBar } from "react-native";
+    import { Toast } from "native-base";
+
+    import Logo from "../components/Logo"
 
     import greetings_morning from "../../assets/greetings-splashes/greetings-morning.jpg";
     import greetings_day from "../../assets/greetings-splashes/greetings-day.jpg";
@@ -28,38 +34,28 @@
 
     export default {
         name: "Greetings",
+        components: {
+            Logo
+        },
         props: {
             navigation: { type: Object }
         },
-        computed: {
-            loggingIn() {
-                return store.state.logging_in;
+        data() {
+            return {
+                splashImage: null,
+                greetingsText: "",
+                userObj: Object,
+                action: String,
             }
         },
-        created() {
-            this.animation.opacity = new Animated.Value(0);
-        },
         mounted(animation) {
             StatusBar.setHidden(true, animation);
-
-            this.animate();
-
             this.sayHello();
             this.userObj = this.navigation.getParam('userObj');
             this.action = this.navigation.getParam('action');
+            this.getUserGroup();
             (this.action === 'set_user') ? this.setUser() : this.authenticate();
         },
-        data() {
-            return {
-                splashImage: null,
-                greetingsText: "",
-                userObj: Object,
-                action: String,
-                animation: {
-                    opacity: 0
-                }
-            }
-        },
         methods: {
             sayHello() {
                 let currentDate = new Date(),
@@ -82,27 +78,37 @@
 
                 console.log(this.greetings)
             },
+            getUserGroup() {
+                if (this.userObj.group === 1) {
+                    this.userGroup = 'user';
+                } else if (this.userObj.group === 2) {
+                    this.userGroup = 'moder';
+                } else {
+                    this.userGroup = 'admin';
+                }
+            },
             setUser() {
-                store.dispatch('SET_USER', { userObj: this.userObj }).then(() => this.navigation.navigate('Drawer'))
+                store.dispatch('SET_USER', { userObj: this.userObj, userGroup: this.userGroup }).then(() => this.loadLessons())
             },
             authenticate() {
                 store.dispatch('LOGIN', {
                     userObj: this.userObj,
+                    userGroup: this.userGroup,
                     navigate: this.navigation.navigate
-                }).then(() => this.navigation.navigate('Drawer'));
+                }).then(() => this.loadLessons());
             },
-            animate() {
-                this.animation.opacity.setValue(0);
-
-                Animated.timing(this.animation.opacity, {
-                    toValue: 1,
-                    duration: 1000,
-                    easing: Easing.linear
-                }).start()
-
-                this.animation.opacity.interpolate({
-                    inputRange: [0, 0.5, 1],
-                    outputRange: [1, 0, 1]
+            loadLessons() {
+                this.$plugins.f('lesson', 'GET', store.state.userObj.api_token).then(response => {
+                    if (response.body.status) {
+                        store.dispatch('SET_LESSONS', { lessons: response.body.schedule }).then(() => this.navigation.navigate('Drawer'));
+                    } else {
+                        Toast.show({
+                            text: "Произошла непредвиденная ошибка при загрузке",
+                            buttonText: "Закрыть",
+                            type: "danger",
+                            duration: 5000
+                        });
+                    }
                 });
             }
         }
@@ -116,20 +122,37 @@
 
     .logo-wrapper {
         position: absolute;
-        z-index: 1;
-        top: 50px;
-        left: 0;
-        width: 100%;
+        bottom: 50px;
+        width: 85px;
+        height: 110px;
+        align-self: center;
+        padding: 5px;
+        background-color: #fff;
+        border-top-left-radius: 2px;
+        border-top-right-radius: 10px;
+        border-bottom-left-radius: 2px;
+        border-bottom-right-radius: 10px;
     }
 
     .logo {
+        width: 75px;
+        height: 100px;
+        align-self: center;
+    }
+
+    .app-name {
+        position: absolute;
+        bottom: 175px;
+        left: 0;
+        width: 100%;
+        font-size: 26px;
         color: #fff;
         text-align: center;
     }
 
     .greetings-wrapper {
         position: absolute;
-        top: 200px;
+        top: 150px;
         left: 0;
         width: 100%;
         z-index: 1;
@@ -142,7 +165,7 @@
 
     .spinner-wrapper {
         position: absolute;
-        bottom: 150px;
+        top: 50%;
         width: 100%;
     }
 

src/screens/SettingsScreen.vue

@@ -11,6 +11,9 @@
             :right-button="{
                 show: false,
             }"
+            :right-second-button="{
+                show: false
+            }"
         />
 
         <nb-content>

src/screens/auth/LoginScreen.vue

@@ -2,9 +2,13 @@
     <nb-container class="container">
         <gradient-background class="bg" :gradient="['#512DA8', '#673AB7']"></gradient-background>
 
-        <logo class="logo" width="20" height="20" icon-name="logo" icon-color="#fff"/>
+        <nb-content class="logo-wrapper">
+            <logo class="logo"/>
+        </nb-content>
 
         <nb-content class="content">
+            <nb-text class="app-name">Pocket Diary</nb-text>
+
             <nb-form>
                 <nb-content padder>
                     <nb-item>
@@ -112,11 +116,11 @@
                 this.logging_in = true;
                 this.login_error = false;
 
-                let response = await this.$plugins.f('login', 'POST', JSON.stringify(this.userData), true);
+                let response = await this.$plugins.f('login', 'POST', null, JSON.stringify(this.userData), true);
 
                 console.log(response);
 
-                if (response.status) {
+                if (response.body.status) {
                     await this.navigation.navigate('Greetings', {
                         userObj: response.user,
                         action: 'authenticate'
@@ -196,11 +200,29 @@
         margin-top: 50%;
     }
 
-    .logo {
+    .logo-wrapper {
         position: absolute;
         top: 50px;
+        width: 85px;
+        height: 110px;
+        align-self: center;
+        padding: 5px;
+        background-color: #fff;
+        border-top-left-radius: 2px;
+        border-top-right-radius: 10px;
+        border-bottom-left-radius: 2px;
+        border-bottom-right-radius: 10px;
+    }
+
+    .logo {
         width: 75px;
         height: 100px;
         align-self: center;
     }
+
+    .app-name {
+        font-size: 26px;
+        color: #fff;
+        text-align: center;
+    }
 </style>

src/screens/auth/RegisterScreen.vue

@@ -167,6 +167,8 @@
             async register() {
                 this.loading = true;
 
+                console.log(this.userData.avatar);
+
                 let formData = new FormData();
                 formData.append('name', this.userData.name);
                 formData.append('login', this.userData.login);
@@ -174,9 +176,9 @@
                 formData.append('password_confirmation', this.userData.password_confirmation);
                 formData.append('avatar', this.userData.avatar);
 
-                let response = await this.$plugins.f('register', 'POST', formData);
+                let response = await this.$plugins.f('register', 'POST', null, formData);
 
-                if (response.status) {
+                if (response.body.status) {
                     Toast.show({
                         text: "Регистрация успешно завершена",
                         buttonText: "ОК",

src/screens/lessons/AddLessonScreen.vue

@@ -3,12 +3,15 @@
         <Header
             title="Добавить"
             :navigation="this.props.navigation"
-            :leftButton="{
+            :left-button="{
                 show: true,
                 icon: 'md-arrow-back',
                 action: () => this.props.navigation.goBack()
             }"
-            :rightButton="{
+            :right-button="{
+                show: false
+            }"
+            :right-second-button="{
                 show: false
             }"
         />
@@ -19,20 +22,24 @@
                     <nb-text>Информация о предмете</nb-text>
                 </nb-separator>
 
-                <nb-item stackedLabel>
-                    <nb-label>Название предмета</nb-label>
-                    <nb-input />
-                </nb-item>
+                <nb-content padder>
+                    <nb-item stackedLabel :disabled="setNull">
+                        <nb-label>Название предмета</nb-label>
+                        <nb-input :disabled="setNull" v-model="lesson.name" />
+                    </nb-item>
+                </nb-content>
 
-                <nb-item stackedLabel>
-                    <nb-label>Номер аудитории</nb-label>
-                    <nb-input />
-                </nb-item>
+                <nb-content padder>
+                    <nb-item stackedLabel :disabled="setNull">
+                        <nb-label>Номер аудитории</nb-label>
+                        <nb-input :disabled="setNull" v-model="lesson.audience" />
+                    </nb-item>
+                </nb-content>
 
                 <nb-list-item
                     class="checkbox-wrapper"
                     last
-                    :onPress="() => lesson.nullable = !lesson.nullable"
+                    :onPress="toggleNullableLesson"
                 >
                     <nb-left>
                         <nb-text>Нет занятия</nb-text>
@@ -41,8 +48,8 @@
                     <nb-right>
                         <nb-checkbox
                             class="checkbox"
-                            :checked="lesson.nullable"
-                            color="#3f51b5"
+                            :checked="setNull"
+                            :onPress="toggleNullableLesson"
                         />
                     </nb-right>
                 </nb-list-item>
@@ -59,7 +66,7 @@
                         placeholderStyle="{ color: '#bfc6ea' }"
                         placeholderIconColor="#007aff"
                         :iosIcon="getIosIcon()"
-                        :selectedValue="day"
+                        :selectedValue="lesson.day"
                         :onValueChange="selectDay"
                     >
                         <item label="Понедельник" value="monday" />
@@ -76,28 +83,30 @@
                 </nb-separator>
 
                 <nb-list-item
-                    :selected="week === 'uneven'"
-                    :onPress="() => week = 'uneven'"
+                        :selected="lesson.week_type === 1"
+                        :onPress="() => lesson.week_type = 1"
+                        last
                 >
                     <nb-left>
                         <nb-text>Нечетная неделя</nb-text>
                     </nb-left>
 
                     <nb-right>
-                        <nb-radio :selected="week === 'uneven'" />
+                        <nb-radio :selected="lesson.week_type === 1" />
                     </nb-right>
                 </nb-list-item>
 
                 <nb-list-item
-                    :selected="week === 'even'"
-                    :onPress="() => week = 'even'"
+                    :selected="lesson.week_type === 2"
+                    :onPress="() => lesson.week_type = 2"
+                    last
                 >
                     <nb-left>
                         <nb-text>Четная неделя</nb-text>
                     </nb-left>
 
                     <nb-right>
-                        <nb-radio :selected="week === 'even'"/>
+                        <nb-radio :selected="lesson.week_type === 2"/>
                     </nb-right>
                 </nb-list-item>
             </nb-form>
@@ -107,9 +116,10 @@
                     class="button"
                     block
                     primary
-                    :onPress="validate"
+                    :onPress="addLesson"
                 >
-                    <nb-text>Добавить</nb-text>
+                    <nb-spinner v-if="loading" color="#fff"></nb-spinner>
+                    <nb-text v-if="!loading">Добавить</nb-text>
                 </nb-button>
             </nb-content>
         </nb-content>
@@ -118,11 +128,12 @@
 
 <script>
     import React from "react";
-    import * as SQLite from 'expo-sqlite';
     import { Picker, Icon, Toast } from "native-base";
 
     import Header from "../../components/Header";
 
+    import store from "../../store";
+
     export default {
         name: 'AddLesson',
         components: {
@@ -131,69 +142,62 @@
         },
         data() {
             return {
-                day: "",
-                week: "uneven",
                 lesson: {
                     name: "",
                     audience: "",
-                    nullable: false
-                }
+                    day: "monday",
+                    week_type: 1,
+                },
+                validationError: {
+                    name: false,
+                    audience: false
+                },
+                setNull: false,
+                loading: false
             }
         },
         methods: {
             selectDay(value) {
-                this.day = value;
+                this.lesson.day = value;
+            },
+            toggleNullableLesson() {
+                this.setNull = !this.setNull;
+
+                this.lesson.name = (this.setNull) ? 'Нет занятия' : '';
+                this.lesson.audience = '';
             },
             getIosIcon() {
                 return <Icon name="ios-arrow-down-outline" />;
             },
-            validate() {
-                if (
-                    (
-                        this.lesson.name === "" ||
-                        this.lesson.audience === ""
-                    ) &&
-                    (
-                        this.lesson.nullable === false
-                    )
-
-                ) {
+            async addLesson() {
+                this.loading = true;
+
+                let response = await this.$plugins.f(
+                    'lesson',
+                    'POST',
+                    store.state.userObj.api_token,
+                    JSON.stringify(this.lesson),
+                    true
+                );
+
+                if (response.body.status) {
+                    Toast.show({
+                        text: "Предмет успешно добавлен",
+                        buttonText: "ОК",
+                        type: "success",
+                        duration: 3000
+                    });
+                } else {
                     Toast.show({
-                        text: "Все поля должны быть заполнены!",
+                        text: "Произошла ошибка, проверьте правильность заполнения полей!",
                         buttonText: "Закрыть",
                         type: "danger",
                         duration: 3000
                     });
-                } else this.addLesson();
-            },
-            addLesson() {
-                let db = SQLite.openDatabase("database.db");
-
-                db.transaction((tx) => {
-                    tx.executeSql(
-                        `create table if not exists lessons_${this.day}_${this.week} (id integer primary key not null, name real, audience real nullable)`
-                    );
-                });
-
-                if (this.lesson.nullable) {
-                    db.transaction((tx) => {
-                        tx.executeSql(
-                            `insert into lessons_${this.day}_${this.week} (name, audience) values (?, ?)`,
-                            [
-                                "Пустая пара",
-                                null
-                            ],
-                            this.test(data)
-                        );
-                    },
-                    null,
-                    console.log(db)
-                    );
                 }
+
+                this.loading = false;
             },
-            test(data) {
-                console.log(data)
-            }
         }
     }
 </script>
@@ -204,7 +208,7 @@
     }
 
     .checkbox {
-        margin-right: 10px;
+        margin-right: 2px;
     }
 
     .button {

src/screens/lessons/DailyScheduleScreen.vue

@@ -1,77 +0,0 @@
-<template>
-    <nb-content>
-        <nb-spinner v-if="!ready" color="blue"/>
-
-        <nb-list v-if="ready">
-            <nb-list-item thumbnail v-for="lesson in lessons">
-                <nb-left class="lesson-number-wrap">
-                    <nb-text class="lesson-number">{{ Array.prototype.indexOf.call(lessons, lesson) + 1}}.</nb-text>
-                </nb-left>
-
-                <nb-body>
-                    <nb-text>{{ lesson.name }}</nb-Text>
-                    <nb-text note :numberOfLines="1">Аудитория: {{ lesson.audience }}</nb-Text>
-                </nb-body>
-
-                <nb-right>
-                    <nb-button transparent :onPress="openMenu">
-                        <nb-icon name="more"/>
-                    </nb-button>
-                </nb-right>
-            </nb-list-item>
-        </nb-list>
-    </nb-content>
-</template>
-
-<script>
-    import { React } from 'react';
-
-    import { ActionSheet } from 'native-base';
-
-    export default {
-        name: 'DailySchedule',
-        data() {
-            return {
-                lessons: [
-                    { name: 'История', audience: '2.9' },
-                    { name: 'Математика', audience: '1.2' },
-                    { name: 'Физкультура', audience: 'Спортивный зал' },
-                ],
-                btnOptions: [
-                    { text: "Редактировать", icon: "create", iconColor: "#3f51b5" },
-                    { text: "Удалить", icon: "trash", iconColor: "#fa213b" },
-                    { text: "Отмена", icon: "close", iconColor: "#3f51b5" }
-                ],
-                optionCancelIndex: 4,
-                optionDestructiveIndex: 3,
-                clicked: 0,
-                ready: true
-            }
-        },
-        mounted() {
-
-        },
-        methods: {
-            openMenu() {
-                ActionSheet.show(
-                    {
-                        options: this.btnOptions,
-                        cancelButtonIndex: this.optionCancelIndex,
-                        destructiveButtonIndex: this.optionDestructiveIndex,
-                        title: "Выберите действие"
-                    },
-                    buttonIndex => {
-                        this.clicked = this.btnOptions[buttonIndex];
-                    }
-                );
-            }
-        }
-    }
-</script>
-
-<style>
-    .lesson-number {
-        font-size: 18px;
-        line-height: 40px;
-    }
-</style>

src/screens/lessons/EditLessonScreen.vue

@@ -0,0 +1,150 @@
+<template>
+    <nb-container>
+        <Header
+            title="Редактировать"
+            :navigation="this.props.navigation"
+            :left-button="{
+                show: true,
+                icon: 'md-arrow-back',
+                action: () => this.props.navigation.goBack()
+            }"
+            :right-button="{
+                show: false
+            }"
+            :right-second-button="{
+                show: false
+            }"
+        />
+
+        <nb-content>
+            <nb-form>
+                <nb-separator bordered>
+                    <nb-text>Информация о предмете</nb-text>
+                </nb-separator>
+
+                <nb-content padder>
+                    <nb-item :disabled="setNull" stackedLabel>
+                        <nb-label>Название предмета</nb-label>
+                        <nb-input :disabled="setNull" v-model="lesson.name" />
+                    </nb-item>
+                </nb-content>
+
+                <nb-content padder>
+                    <nb-item :disabled="setNull" stackedLabel>
+                        <nb-label>Номер аудитории</nb-label>
+                        <nb-input :disabled="setNull" v-model="lesson.audience" />
+                    </nb-item>
+                </nb-content>
+
+                <nb-list-item
+                    class="checkbox-wrapper"
+                    last
+                    :onPress="() => setNull = !setNull"
+                >
+                    <nb-left>
+                        <nb-text>Нет занятия</nb-text>
+                    </nb-left>
+
+                    <nb-right>
+                        <nb-checkbox
+                            class="checkbox"
+                            :checked="setNull"
+                        />
+                    </nb-right>
+                </nb-list-item>
+            </nb-form>
+
+            <nb-content padder>
+                <nb-button
+                        class="button"
+                        block
+                        primary
+                        :onPress="editLesson"
+                >
+                    <nb-spinner v-if="loading" color="#fff"></nb-spinner>
+                    <nb-text v-if="!loading">Сохранить</nb-text>
+                </nb-button>
+            </nb-content>
+        </nb-content>
+    </nb-container>
+</template>
+
+<script>
+    import { Toast } from "native-base";
+
+    import Header from "../../components/Header";
+
+    import store from "../../store";
+
+    export default {
+        name: "EditLesson",
+        components: {
+            Header
+        },
+        props: {
+            navigation: Object,
+        },
+        data() {
+            return {
+                lesson: {
+                    name: '',
+                    audience: ''
+                },
+                editableLesson: Object,
+                setNull: false,
+                loading: false
+            }
+        },
+        mounted() {
+            this.editableLesson = this.navigation.getParam('editableLesson')
+
+            this.lesson.name = this.editableLesson.name;
+            this.lesson.audience = this.editableLesson.audience;
+
+            if (this.editableLesson.name === 'Нет занятия') this.setNull = true;
+        },
+        methods: {
+            toggleNullableLesson() {
+                this.setNull = !this.setNull;
+
+                this.lesson.name = (this.setNull) ? 'Нет занятия' : '';
+                this.lesson.audience = '';
+            },
+            async editLesson() {
+                this.loading = false;
+
+                let response = await this.$plugins.f(
+                    `lesson/${this.editableLesson.id}`,
+                    'PATCH',
+                    store.state.userObj.api_token,
+                    JSON.stringify(this.lesson),
+                    true
+                );
+
+                console.log(response)
+
+                if (response.body.status) {
+                    Toast.show({
+                        text: "Предмет успешно изменен",
+                        buttonText: "ОК",
+                        type: "success",
+                        duration: 3000
+                    });
+                } else {
+                    Toast.show({
+                        text: "Произошла ошибка, проверьте правильность заполнения полей!",
+                        buttonText: "Закрыть",
+                        type: "danger",
+                        duration: 3000
+                    });
+                }
+
+                this.loading = false;
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/screens/lessons/LessonsScreen.vue

@@ -10,41 +10,73 @@
             }"
             :right-button="{
                 show: true,
-                icon: 'md-swap'
+                icon: 'swap',
+                action: swapWeek
+            }"
+            :right-second-button="{
+                show: true,
+                icon: 'refresh',
+                action: updateLessons
             }"
             :week="{
                 show: true,
-                type: (this.currentWeek === 'even') ? 'Ч' : 'Н'
+                type: (currentWeek === 'even') ? 'Ч' : 'Н'
             }"
         />
 
         <nb-tabs :initialPage="day" :renderTabBar="renderTabs">
             <nb-tab heading="ПН">
-                <daily-schedule></daily-schedule>
+                <daily-schedule
+                    type="lesson"
+                    :data="lessons[`${currentWeek}_week`].monday"
+                    :navigation="navigation"
+                />
             </nb-tab>
 
             <nb-tab heading="ВТ">
-                <daily-schedule></daily-schedule>
+                <daily-schedule
+                    type="lesson"
+                    :data="lessons[`${currentWeek}_week`].tuesday"
+                    :navigation="navigation"
+                />
             </nb-tab>
 
             <nb-tab heading="СР">
-
+                <daily-schedule
+                    type="lesson"
+                    :data="lessons[`${currentWeek}_week`].wednesday"
+                    :navigation="navigation"
+                />
             </nb-tab>
 
             <nb-tab heading="ЧТ">
-
+                <daily-schedule
+                    type="lesson"
+                    :data="lessons[`${currentWeek}_week`].thursday"
+                    :navigation="navigation"
+                />
             </nb-tab>
 
             <nb-tab heading="ПТ">
-
+                <daily-schedule
+                    type="lesson"
+                    :data="lessons[`${currentWeek}_week`].friday"
+                    :navigation="navigation"
+                />
             </nb-tab>
 
             <nb-tab heading="СБ">
-
+                <daily-schedule
+                    type="lesson"
+                    :data="lessons[`${currentWeek}_week`].saturday"
+                    :navigation="navigation"
+                />
             </nb-tab>
         </nb-tabs>
 
         <nb-fab
+            v-if="userGroup === 'moder' || userGroup === 'admin'"
+            class="fab"
             direction="up"
             position="bottomRight"
             :onPress="() => navigation.navigate('AddLesson')"
@@ -56,12 +88,14 @@
 
 <script>
     import React from "react";
-    import { ScrollableTab } from "native-base";
+    import { ScrollableTab, Toast } from "native-base";
     import { StatusBar } from "react-native";
 
     import Header from "../../components/Header";
 
-    import DailySchedule from "./DailyScheduleScreen";
+    import DailySchedule from "../../components/DailySchedule";
+
+    import store from "../../store";
 
     export default {
         name: 'Lessons',
@@ -74,22 +108,63 @@
         },
         data() {
             return {
-                stylesObj: {
-                    fabContainer: {
-                        position: "bottomRight"
-                    }
-                },
-                day: new Date().getDay() - 1,
-                currentWeek: 'even'
+                day: Number,
+                currentWeek: 'even',
+                userGroup: store.state.userGroup,
             }
         },
+        computed: {
+            lessons() {
+                return store.state.lessons;
+            }
+        },
+        created() {
+            this.setDay();
+        },
         mounted(hidden, animation) {
-            StatusBar.setHidden(false, animation)
+            StatusBar.setHidden(false, animation);
         },
         methods: {
             renderTabs() {
                 return <ScrollableTab />;
+            },
+            setDay() {
+                this.day = new Date().getDay() - 1;
+                this.day = (this.day === 6) ? 0 : this.day;
+                console.log(this.day)
+            },
+            swapWeek() {
+                this.currentWeek = (this.currentWeek === 'even') ? 'uneven' : 'even';
+            },
+            updateLessons() {
+                store.commit('FETCHING_DATA');
+
+                this.$plugins.f('lesson', 'GET', store.state.userObj.api_token).then(response => {
+                    if (response.body.status) {
+                        store.dispatch('SET_LESSONS', { lessons: response.body.schedule }).then(() => {
+                            Toast.show({
+                                text: "Расписание успешно обновлено",
+                                buttonText: "ОК",
+                                type: "success",
+                                duration: 2000
+                            });
+                        });
+                    } else {
+                        Toast.show({
+                            text: "Произошла непредвиденная ошибка при обновлении",
+                            buttonText: "Закрыть",
+                            type: "danger",
+                            duration: 5000
+                        });
+                    }
+                });
             }
         }
     }
-</script>
+</script>
+
+<style scoped>
+    .fab {
+        background-color: #673AB7;
+    }
+</style>

src/store/actions.js

@@ -1,25 +1,31 @@
 import * as SecureStore from 'expo-secure-store';
 import {LOGGING_IN} from "./mutations";
 
-export async function LOGIN({ commit, state }, { userObj, navigate }) {
+export async function LOGIN({ commit, state }, { userObj, userGroup, navigate }) {
     commit('LOGGING_IN', true);
 
     userObj = JSON.stringify(userObj);
 
     return new Promise((resolve, reject) => {
-        commit('LOGIN_SUCCESSFUL', { userObj });
+        commit('LOGIN_SUCCESSFUL', { userObj, userGroup });
         setTimeout(() => {
             SecureStore.setItemAsync('user', userObj).then(() => {
-                navigate('Drawer');
-                resolve();
+                SecureStore.setItemAsync('userGroup', userGroup).then(() => {
+                    navigate('Drawer');
+                    resolve();
+                });
             });
         }, 1000)
     });
 }
 
-export function SET_USER({ commit, state }, { userObj }) {
-    userObj = JSON.stringify(userObj)
-    return commit('LOGIN_SUCCESSFUL', { userObj });
+export function SET_USER({ commit, state }, { userObj, userGroup }) {
+    userObj = JSON.stringify(userObj);
+    return commit('LOGIN_SUCCESSFUL', { userObj , userGroup });
+}
+
+export function SET_LESSONS({ commit, state }, { lessons }) {
+    return commit('LOADED_LESSONS', { lessons });
 }
 
 export function LOGOUT({ commit, state }, callback) {

src/store/index.js

@@ -12,7 +12,11 @@ const store = new Vuex.Store({
 
     state: {
         userObj: Object,
-        logging_in: false
+        userGroup: String,
+        lessons: [],
+        calls: [],
+        logging_in: false,
+        loading: false
     }
 });
 

src/store/mutations.js

@@ -2,9 +2,19 @@ export function LOGGING_IN(state, status) {
     state.logging_in = status;
 }
 
-export function LOGIN_SUCCESSFUL(state, { userObj }) {
+export function LOGIN_SUCCESSFUL(state, { userObj, userGroup }) {
     userObj = JSON.parse(userObj);
 
     state.userObj = userObj;
+    state.userGroup = userGroup;
     state.logging_in = false;
 }
+
+export function LOADED_LESSONS(state, { lessons }) {
+    state.lessons = lessons;
+    state.loading = false;
+}
+
+export function FETCHING_DATA(state) {
+    state.loading = true;
+}

src/theme/customMaterial.js

@@ -0,0 +1,55 @@
+import material from "../../native-base-theme/variables/material";
+import { Platform } from "react-native";
+import color from "color";
+
+const platform = Platform.OS;
+const customMaterial = {
+    ...material,
+
+    // Header
+    toolbarDefaultBg: "#673AB7",
+    toolbarDefaultBorder: "#673AB7",
+    get statusBarColor() {
+        return color(this.toolbarDefaultBg).hex()
+    },
+
+    // Button
+    get buttonPrimaryBg() {
+        return this.brandPrimary;
+    },
+
+    // Card
+    cardBorderRadius: 10,
+
+    // Checkbox
+    CheckboxRadius: 1,
+    checkboxBgColor: "#512DA8",
+    CheckboxIconSize: 20,
+    checkboxSize: 25,
+    CheckboxPaddingLeft: 5,
+
+    // Color
+    brandPrimary: "#673AB7",
+
+    // Fab
+    fabBackgroundColor: "#512DA8",
+    fabBorderRadius: 10,
+
+    // Footer
+    footerDefaultBg: "#673AB7",
+
+    // List
+    listItemSelected: "#512DA8",
+
+    // Radio
+    radioSelectedColorAndroid: "#512DA8",
+
+    // Tab
+    tabDefaultBg: "#673AB7",
+    topTabBarTextColor: "#cba8ff",
+
+    // Other
+    borderRadiusBase: 10
+};
+
+export default customMaterial;

src/theme/styleWrapper.js

@@ -0,0 +1,15 @@
+import {StyleProvider} from "native-base";
+import React, { Component } from "react";
+
+import getTheme from "../../native-base-theme/components";
+import customMaterial from "./customMaterial";
+
+export default class StyleWrapper extends Component {
+    render() {
+        return (
+            <StyleProvider style={getTheme(customMaterial)}>
+                {this.props.children}
+            </StyleProvider>
+        )
+    }
+}