├── .babelrc ├── .eslintignore ├── .eslintrc ├── .flowconfig ├── .gitignore ├── App.js ├── ChangeLog.md ├── LICENSE ├── README.md ├── app.json ├── assets ├── loading.png ├── logo-dark.png └── shadow.png ├── babel.config.js ├── flow-typed └── module_vx.x.x.js ├── jsconfig.json ├── package.json ├── src ├── App.js ├── boot │ ├── configureStore.js │ ├── index.js │ └── setup.js ├── container │ ├── BlankPageContainer │ │ └── index.js │ ├── HomeContainer │ │ ├── __tests__ │ │ │ └── reducer.test.js │ │ ├── actions.js │ │ ├── data.json │ │ ├── index.js │ │ └── reducer.js │ ├── LoginContainer │ │ └── index.js │ └── SidebarContainer │ │ └── index.js ├── reducers │ └── index.js ├── stories │ └── screens │ │ ├── BlankPage │ │ ├── __tests__ │ │ │ └── index.test.js │ │ ├── index.js │ │ └── styles.js │ │ ├── Home │ │ ├── __tests__ │ │ │ └── index.test.js │ │ ├── index.js │ │ └── styles.js │ │ ├── Login │ │ ├── __tests__ │ │ │ └── index.test.js │ │ ├── index.js │ │ └── styles.js │ │ └── Sidebar │ │ ├── __tests__ │ │ └── index.test.js │ │ └── index.js └── theme │ ├── components │ ├── Badge.js │ ├── Body.js │ ├── Button.js │ ├── Card.js │ ├── CardItem.js │ ├── CheckBox.js │ ├── Container.js │ ├── Content.js │ ├── Fab.js │ ├── Footer.js │ ├── FooterTab.js │ ├── Form.js │ ├── H1.js │ ├── H2.js │ ├── H3.js │ ├── Header.js │ ├── Icon.js │ ├── Input.js │ ├── InputGroup.js │ ├── Item.js │ ├── Label.js │ ├── Left.js │ ├── ListItem.js │ ├── Picker.android.js │ ├── Picker.ios.js │ ├── Radio.js │ ├── Right.js │ ├── Segment.js │ ├── Separator.js │ ├── Spinner.js │ ├── Subtitle.js │ ├── SwipeRow.js │ ├── Switch.js │ ├── Tab.js │ ├── TabBar.js │ ├── TabContainer.js │ ├── TabHeading.js │ ├── Text.js │ ├── Textarea.js │ ├── Thumbnail.js │ ├── Title.js │ ├── Toast.js │ ├── View.js │ └── index.js │ └── variables │ ├── commonColor.js │ ├── material.js │ └── platform.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["babel-preset-expo"], 3 | "plugins": ["@babel/plugin-proposal-class-properties"] 4 | } 5 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | 4 | "parser": "babel-eslint", 5 | 6 | "env": { 7 | "es6": true, 8 | "node": true, 9 | "jest": true 10 | }, 11 | 12 | "plugins": ["flowtype", "prettier", "react"], 13 | 14 | // Map from global var to bool specifying if it can be redefined 15 | "globals": { 16 | "__DEV__": true, 17 | "__dirname": false, 18 | "__fbBatchedBridgeConfig": false, 19 | "alert": false, 20 | "cancelAnimationFrame": false, 21 | "cancelIdleCallback": false, 22 | "clearImmediate": true, 23 | "clearInterval": false, 24 | "clearTimeout": false, 25 | "console": false, 26 | "document": false, 27 | "escape": false, 28 | "Event": false, 29 | "EventTarget": false, 30 | "exports": false, 31 | "fetch": false, 32 | "FormData": false, 33 | "global": false, 34 | "jest": false, 35 | "Map": true, 36 | "module": false, 37 | "navigator": false, 38 | "process": false, 39 | "Promise": true, 40 | "requestAnimationFrame": true, 41 | "requestIdleCallback": true, 42 | "require": false, 43 | "Set": true, 44 | "setImmediate": true, 45 | "setInterval": false, 46 | "setTimeout": false, 47 | "window": false, 48 | "XMLHttpRequest": false, 49 | "pit": false 50 | }, 51 | 52 | "rules": { 53 | // Flow Plugin 54 | // The following rules are made available via `eslint-plugin-flowtype` 55 | "flowtype/define-flow-type": 1, 56 | "flowtype/use-flow-type": 1, 57 | 58 | // General 59 | 60 | "comma-dangle": 0, // disallow trailing commas in object literals 61 | "no-cond-assign": 1, // disallow assignment in conditional expressions 62 | "no-console": 1, // disallow use of console (off by default in the node environment) 63 | "no-const-assign": 2, // disallow assignment to const-declared variables 64 | "no-constant-condition": 0, // disallow use of constant expressions in conditions 65 | "no-control-regex": 1, // disallow control characters in regular expressions 66 | "no-debugger": 1, // disallow use of debugger 67 | "no-dupe-keys": 1, // disallow duplicate keys when creating object literals 68 | "no-empty": 0, // disallow empty statements 69 | "no-ex-assign": 1, // disallow assigning to the exception in a catch block 70 | "no-extra-boolean-cast": 1, // disallow double-negation boolean casts in a boolean context 71 | "no-extra-parens": 0, // disallow unnecessary parentheses (off by default) 72 | "no-extra-semi": 1, // disallow unnecessary semicolons 73 | "no-func-assign": 1, // disallow overwriting functions written as function declarations 74 | "no-inner-declarations": 0, // disallow function or variable declarations in nested blocks 75 | "no-invalid-regexp": 1, // disallow invalid regular expression strings in the RegExp constructor 76 | "no-negated-in-lhs": 1, // disallow negation of the left operand of an in expression 77 | "no-obj-calls": 1, // disallow the use of object properties of the global object (Math and JSON) as functions 78 | "no-regex-spaces": 1, // disallow multiple spaces in a regular expression literal 79 | "no-reserved-keys": 0, // disallow reserved words being used as object literal keys (off by default) 80 | "no-sparse-arrays": 1, // disallow sparse arrays 81 | "no-unreachable": 1, // disallow unreachable statements after a return, throw, continue, or break statement 82 | "use-isnan": 1, // disallow comparisons with the value NaN 83 | "valid-jsdoc": 0, // Ensure JSDoc comments are valid (off by default) 84 | "valid-typeof": 1, // Ensure that the results of typeof are compared against a valid string 85 | 86 | // Best Practices 87 | // These are rules designed to prevent you from making mistakes. They either prescribe a better way of doing something or help you avoid footguns. 88 | 89 | "block-scoped-var": 0, // treat var statements as if they were block scoped (off by default) 90 | "complexity": 0, // specify the maximum cyclomatic complexity allowed in a program (off by default) 91 | "consistent-return": 0, // require return statements to either always or never specify values 92 | "curly": 1, // specify curly brace conventions for all control statements 93 | "default-case": 0, // require default case in switch statements (off by default) 94 | "dot-notation": 1, // encourages use of dot notation whenever possible 95 | "eqeqeq": [1, "allow-null"], // require the use of === and !== 96 | "guard-for-in": 0, // make sure for-in loops have an if statement (off by default) 97 | "no-alert": 1, // disallow the use of alert, confirm, and prompt 98 | "no-caller": 1, // disallow use of arguments.caller or arguments.callee 99 | "no-div-regex": 1, // disallow division operators explicitly at beginning of regular expression (off by default) 100 | "no-else-return": 0, // disallow else after a return in an if (off by default) 101 | "no-eq-null": 0, // disallow comparisons to null without a type-checking operator (off by default) 102 | "no-eval": 1, // disallow use of eval() 103 | "no-extend-native": 1, // disallow adding to native types 104 | "no-extra-bind": 1, // disallow unnecessary function binding 105 | "no-fallthrough": 1, // disallow fallthrough of case statements 106 | "no-floating-decimal": 1, // disallow the use of leading or trailing decimal points in numeric literals (off by default) 107 | "no-implied-eval": 1, // disallow use of eval()-like methods 108 | "no-labels": 1, // disallow use of labeled statements 109 | "no-iterator": 1, // disallow usage of __iterator__ property 110 | "no-lone-blocks": 1, // disallow unnecessary nested blocks 111 | "no-loop-func": 0, // disallow creation of functions within loops 112 | "no-multi-str": 0, // disallow use of multiline strings 113 | "no-native-reassign": 0, // disallow reassignments of native objects 114 | "no-new": 1, // disallow use of new operator when not part of the assignment or comparison 115 | "no-new-func": 1, // disallow use of new operator for Function object 116 | "no-new-wrappers": 1, // disallows creating new instances of String,Number, and Boolean 117 | "no-octal": 1, // disallow use of octal literals 118 | "no-octal-escape": 1, // disallow use of octal escape sequences in string literals, such as var foo = "Copyright \251"; 119 | "no-proto": 1, // disallow usage of __proto__ property 120 | "no-redeclare": 0, // disallow declaring the same variable more then once 121 | "no-return-assign": 1, // disallow use of assignment in return statement 122 | "no-script-url": 1, // disallow use of javascript: urls. 123 | "no-self-compare": 1, // disallow comparisons where both sides are exactly the same (off by default) 124 | "no-sequences": 1, // disallow use of comma operator 125 | "no-unused-expressions": 0, // disallow usage of expressions in statement position 126 | "no-void": 1, // disallow use of void operator (off by default) 127 | "no-warning-comments": 0, // disallow usage of configurable warning terms in comments": 1, // e.g. TODO or FIXME (off by default) 128 | "no-with": 1, // disallow use of the with statement 129 | "radix": 1, // require use of the second argument for parseInt() (off by default) 130 | "semi-spacing": 1, // require a space after a semi-colon 131 | "vars-on-top": 0, // requires to declare all vars on top of their containing scope (off by default) 132 | "wrap-iife": 0, // require immediate function invocation to be wrapped in parentheses (off by default) 133 | "yoda": 1, // require or disallow Yoda conditions 134 | 135 | // Variables 136 | // These rules have to do with variable declarations. 137 | 138 | "no-catch-shadow": 1, // disallow the catch clause parameter name being the same as a variable in the outer scope (off by default in the node environment) 139 | "no-delete-var": 1, // disallow deletion of variables 140 | "no-label-var": 1, // disallow labels that share a name with a variable 141 | "no-shadow": 1, // disallow declaration of variables already declared in the outer scope 142 | "no-shadow-restricted-names": 1, // disallow shadowing of names such as arguments 143 | "no-undef": 2, // disallow use of undeclared variables unless mentioned in a /*global */ block 144 | "no-undefined": 0, // disallow use of undefined variable (off by default) 145 | "no-undef-init": 1, // disallow use of undefined when initializing variables 146 | "no-unused-vars": [1, { "vars": "all", "args": "none" }], // disallow declaration of variables that are not used in the code 147 | "no-use-before-define": 0, // disallow use of variables before they are defined 148 | 149 | // Node.js 150 | // These rules are specific to JavaScript running on Node.js. 151 | 152 | "handle-callback-err": 1, // enforces error handling in callbacks (off by default) (on by default in the node environment) 153 | "no-mixed-requires": 1, // disallow mixing regular variable and require declarations (off by default) (on by default in the node environment) 154 | "no-new-require": 1, // disallow use of new operator with the require function (off by default) (on by default in the node environment) 155 | "no-path-concat": 1, // disallow string concatenation with __dirname and __filename (off by default) (on by default in the node environment) 156 | "no-process-exit": 0, // disallow process.exit() (on by default in the node environment) 157 | "no-restricted-modules": 1, // restrict usage of specified node modules (off by default) 158 | "no-sync": 0, // disallow use of synchronous methods (off by default) 159 | 160 | // Prettier Plugin 161 | // https://github.com/prettier/eslint-plugin-prettier 162 | "prettier/prettier": [0], 163 | 164 | // Stylistic Issues 165 | // These rules are purely matters of style and are quite subjective. 166 | 167 | "key-spacing": 0, 168 | "keyword-spacing": 1, // enforce spacing before and after keywords 169 | "jsx-quotes": [1, "prefer-double"], 170 | "comma-spacing": 0, 171 | "no-multi-spaces": 0, 172 | "brace-style": 0, // enforce one true brace style (off by default) 173 | "camelcase": 0, // require camel case names 174 | "consistent-this": [1, "self"], // enforces consistent naming when capturing the current execution context (off by default) 175 | "eol-last": 1, // enforce newline at the end of file, with no multiple empty lines 176 | "func-names": 0, // require function expressions to have a name (off by default) 177 | "func-style": 0, // enforces use of function declarations or expressions (off by default) 178 | "new-cap": 0, // require a capital letter for constructors 179 | "new-parens": 1, // disallow the omission of parentheses when invoking a constructor with no arguments 180 | "no-nested-ternary": 0, // disallow nested ternary expressions (off by default) 181 | "no-array-constructor": 1, // disallow use of the Array constructor 182 | "no-lonely-if": 0, // disallow if as the only statement in an else block (off by default) 183 | "no-new-object": 1, // disallow use of the Object constructor 184 | "no-spaced-func": 1, // disallow space between function identifier and application 185 | "no-ternary": 0, // disallow the use of ternary operators (off by default) 186 | "no-trailing-spaces": 1, // disallow trailing whitespace at the end of lines 187 | "no-underscore-dangle": 0, // disallow dangling underscores in identifiers 188 | "no-mixed-spaces-and-tabs": 1, // disallow mixed spaces and tabs for indentation 189 | "quotes": [1, "double", "avoid-escape"], // specify whether double or single quotes should be used 190 | "quote-props": 0, // require quotes around object literal property names (off by default) 191 | "semi": 1, // require or disallow use of semicolons instead of ASI 192 | "sort-vars": 0, // sort variables within the same declaration block (off by default) 193 | "space-in-brackets": 0, // require or disallow spaces inside brackets (off by default) 194 | "space-in-parens": 0, // require or disallow spaces inside parentheses (off by default) 195 | "space-infix-ops": 1, // require spaces around operators 196 | "space-unary-ops": [1, { "words": true, "nonwords": false }], // require or disallow spaces before/after unary operators (words on by default, nonwords off by default) 197 | "max-nested-callbacks": 0, // specify the maximum depth callbacks can be nested (off by default) 198 | "one-var": 0, // allow just one var statement per function (off by default) 199 | "wrap-regex": 0, // require regex literals to be wrapped in parentheses (off by default) 200 | 201 | // Legacy 202 | // The following rules are included for compatibility with JSHint and JSLint. While the names of the rules may not match up with the JSHint/JSLint counterpart, the functionality is the same. 203 | 204 | "max-depth": 0, // specify the maximum depth that blocks can be nested (off by default) 205 | "max-len": 0, // specify the maximum length of a line in your program (off by default) 206 | "max-params": 0, // limits the number of parameters that can be used in the function declaration. (off by default) 207 | "max-statements": 0, // specify the maximum number of statement allowed in a function (off by default) 208 | "no-bitwise": 1, // disallow use of bitwise operators (off by default) 209 | "no-plusplus": 0, // disallow use of unary operators, ++ and -- (off by default) 210 | 211 | // React Plugin 212 | // The following rules are made available via `eslint-plugin-react`. 213 | 214 | "react/display-name": 0, 215 | "react/jsx-boolean-value": 0, 216 | "react/jsx-no-comment-textnodes": 1, 217 | "react/jsx-no-duplicate-props": 2, 218 | "react/jsx-no-undef": 1, 219 | "react/jsx-sort-props": 0, 220 | "react/jsx-uses-react": 1, 221 | "react/jsx-uses-vars": 1, 222 | "react/no-did-mount-set-state": 1, 223 | "react/no-did-update-set-state": 1, 224 | "react/no-multi-comp": 0, 225 | "react/no-string-refs": 1, 226 | "react/no-unknown-property": 0, 227 | "react/prop-types": 0, 228 | "react/react-in-jsx-scope": 1, 229 | "react/self-closing-comp": 1, 230 | "react/wrap-multilines": 0 231 | } 232 | } 233 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | .*/node_modules 3 | 4 | [include] 5 | 6 | [libs] 7 | 8 | [lints] 9 | 10 | [options] -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .expo/ 3 | npm-debug.* 4 | .DS_Store -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import boot from "./src/boot/index"; 3 | 4 | const app = boot(); 5 | 6 | export default app; 7 | -------------------------------------------------------------------------------- /ChangeLog.md: -------------------------------------------------------------------------------- 1 | 2 | # [6.1.0](https://github.com/start-react/native-starter-kit/releases/tag/v6.1.0) 3 | 4 | ### Enhancement Features 5 | 6 | - **Upgrade:** Upgraded versions of React, [React Native](https://facebook.github.io/react-native/), [NativeBase](http://nativebase.io/), [CodePush](https://github.com/Microsoft/react-native-code-push). 7 | 8 | 9 | ### New Features 10 | 11 | - **React Native Router Flux:** Added. 12 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2017 GeekyAnts 2 | 3 | Licensed under the Apache License, Version 2.0 (the "License"); 4 | you may not use this file except in compliance with the License. 5 | You may obtain a copy of the License at 6 | 7 | http://www.apache.org/licenses/LICENSE-2.0 8 | 9 | Unless required by applicable law or agreed to in writing, software 10 | distributed under the License is distributed on an "AS IS" BASIS, 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | See the License for the specific language governing permissions and 13 | limitations under the License. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | ## React Native Seed v1.0.0 3 | 4 | ### A [React Native](https://facebook.github.io/react-native/docs/getting-started.html) Starter Kit with [NativeBase](https://nativebase.io/) + [React Navigation](https://reactnavigation.org/) + [Redux](https://github.com/reactjs/redux) Apps (iOS & Android) 5 | 6 | *Brought to you by [GeekyAnts](https://geekyants.com/)* 7 | 8 | 9 | ## Get Started 10 | 11 | ### 1. System Requirements 12 | 13 | * Globally installed [node](https://nodejs.org/en/) 14 | 15 | * Globally installed [react-native CLI](https://facebook.github.io/react-native/docs/getting-started.html) 16 | 17 | 18 | ### 2. Installation 19 | 20 | On the command prompt run the following commands 21 | 22 | ```sh 23 | $ git clone https://github.com/GeekyAnts/react-native-boilerplate-redux-flow.git 24 | 25 | $ cd react-native-boilerplate-redux-flow/ 26 | 27 | $ npm install 28 | or 29 | yarn 30 | ``` 31 | 32 | ### Run on iOS 33 | 34 | * Opt #1: 35 | * Run `npm start` in your terminal 36 | * Scan the QR code in your Expo app 37 | * Opt #2: 38 | * Run `npm run ios` in your terminal 39 | 40 | ### Run on Android 41 | 42 | * Opt #1: 43 | * Run `npm start` in your terminal 44 | * Scan the QR code in your Expo app 45 | * Opt #2: 46 | * Run `npm run android` in your terminal 47 | 48 | 49 | For apps with more advance designs, please visit **[NativeBase Market](https://market.nativebase.io/)**. 50 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "React-Native-Seed", 4 | "slug": "React-Native-Seed", 5 | "privacy": "public", 6 | "sdkVersion": "31.0.0", 7 | "platforms": ["ios", "android"], 8 | "version": "1.2.0", 9 | "orientation": "portrait", 10 | "icon": "./assets/loading.png", 11 | "primaryColor": "#cccccc", 12 | "packagerOpts": { 13 | "assetExts": ["ttf"] 14 | }, 15 | "androidStatusBarColor": "#334393", 16 | "androidStatusBar": { 17 | "barStyle": "light-content", 18 | "backgroundColor": "#334393" 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /assets/loading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GeekyAnts/react-native-boilerplate-redux-flow/86151efb1fc8251d7e31176232daa4bbe644e3ad/assets/loading.png -------------------------------------------------------------------------------- /assets/logo-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GeekyAnts/react-native-boilerplate-redux-flow/86151efb1fc8251d7e31176232daa4bbe644e3ad/assets/logo-dark.png -------------------------------------------------------------------------------- /assets/shadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GeekyAnts/react-native-boilerplate-redux-flow/86151efb1fc8251d7e31176232daa4bbe644e3ad/assets/shadow.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ["babel-preset-expo"] 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /flow-typed/module_vx.x.x.js: -------------------------------------------------------------------------------- 1 | declare module "react-navigation" { 2 | declare module.exports: any; 3 | } 4 | declare module "native-base" { 5 | declare module.exports: any; 6 | } 7 | declare module "react-native" { 8 | declare module.exports: any; 9 | } 10 | declare module "react-redux" { 11 | declare module.exports: any; 12 | } 13 | declare module "react-redux" { 14 | declare module.exports: any; 15 | } 16 | declare module "redux-form" { 17 | declare module.exports: any; 18 | } 19 | declare module "color" { 20 | declare module.exports: any; 21 | } 22 | declare module "expo" { 23 | declare module.exports: any; 24 | } 25 | declare module "remote-redux-devtools" { 26 | declare module.exports: any; 27 | } 28 | declare module "redux" { 29 | declare module.exports: any; 30 | } 31 | declare module "redux-thunk" { 32 | declare module.exports: any; 33 | } 34 | declare module "redux-persist" { 35 | declare module.exports: any; 36 | } 37 | declare module "react-test-renderer" { 38 | declare module.exports: any; 39 | } 40 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "allowSyntheticDefaultImports": true 5 | }, 6 | "exclude": [ 7 | "node_modules" 8 | ] 9 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ReactNativeSeed", 3 | "version": "1.2.0", 4 | "private": true, 5 | "devDependencies": { 6 | "@babel/core": "^7.2.2", 7 | "@babel/plugin-proposal-class-properties": "^7.2.3", 8 | "babel-core": "^7.0.0-0", 9 | "babel-eslint": "10.0.1", 10 | "babel-jest": "^23.6.0", 11 | "babel-preset-expo": "^5.0.0", 12 | "eslint": "5.11.0", 13 | "eslint-plugin-flowtype": "3.2.0", 14 | "eslint-plugin-import": "2.14.0", 15 | "eslint-plugin-jsx-a11y": "6.1.2", 16 | "eslint-plugin-prettier": "3.0.0", 17 | "eslint-plugin-react": "7.11.1", 18 | "eslint-plugin-react-native": "3.5.0", 19 | "flow-bin": "0.89.0", 20 | "flow-typed": "2.5.1", 21 | "husky": "1.2.1", 22 | "jest-expo": "31.0.0", 23 | "react-test-renderer": "16.5.0" 24 | }, 25 | "main": "node_modules/expo/AppEntry.js", 26 | "scripts": { 27 | "start": "expo start", 28 | "eject": "expo eject", 29 | "android": "expo android", 30 | "ios": "expo ios", 31 | "test": "yarn jest && flow && eslint .", 32 | "jest": "node node_modules/jest/bin/jest.js", 33 | "precommit": "yarn test" 34 | }, 35 | "jest": { 36 | "preset": "jest-expo", 37 | "transformIgnorePatterns": [ 38 | "node_modules/(?!(react-native|expo|expo-react-native-adapter|react-native-iphone-x-helper|expo-font|expo-asset|expo-constants|lottie-react-native|expo|react-native-maps|react-native-svg|react-native-branch|native-base-shoutem-theme|react-native-easy-grid|react-native-drawer|react-native-vector-icons|react-native-keyboard-aware-scroll-view|react-navigation|native-base|@expo|react-native-scrollable-tab-view)/)" 39 | ] 40 | }, 41 | "dependencies": { 42 | "expo": "^31.0.4", 43 | "lodash": "4.17.11", 44 | "native-base": "2.8.2", 45 | "react": "16.5.0", 46 | "react-native": "0.57.0", 47 | "react-navigation": "^2.18.2", 48 | "react-redux": "6.0.0", 49 | "redux": "4.0.1", 50 | "redux-form": "8.0.4", 51 | "redux-persist": "5.10.0", 52 | "redux-thunk": "2.3.0", 53 | "remote-redux-devtools": "0.5.14", 54 | "remote-redux-devtools-on-debugger": "^0.8.3" 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import React from "react"; 3 | import { createStackNavigator, createDrawerNavigator } from "react-navigation"; 4 | import { Root } from "native-base"; 5 | import Login from "./container/LoginContainer"; 6 | import Home from "./container/HomeContainer"; 7 | import BlankPage from "./container/BlankPageContainer"; 8 | import Sidebar from "./container/SidebarContainer"; 9 | 10 | const Drawer = createDrawerNavigator( 11 | { 12 | Home: { screen: Home } 13 | }, 14 | { 15 | initialRouteName: "Home", 16 | contentComponent: props => 17 | } 18 | ); 19 | 20 | const App = createStackNavigator( 21 | { 22 | Login: { screen: Login }, 23 | BlankPage: { screen: BlankPage }, 24 | Drawer: { screen: Drawer } 25 | }, 26 | { 27 | initialRouteName: "Login", 28 | headerMode: "none" 29 | } 30 | ); 31 | 32 | export default () => ( 33 | 34 | 35 | 36 | ); 37 | -------------------------------------------------------------------------------- /src/boot/configureStore.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | // import { AsyncStorage } from "react-native"; 3 | import devTools from "remote-redux-devtools"; 4 | import { createStore, applyMiddleware, compose } from "redux"; 5 | import thunk from "redux-thunk"; 6 | import { persistStore } from "redux-persist"; 7 | import reducer from "../reducers"; 8 | 9 | export default function configureStore(onCompletion: () => void): any { 10 | const enhancer = compose( 11 | applyMiddleware(thunk), 12 | devTools({ 13 | name: "nativestarterkit", 14 | realtime: true 15 | }) 16 | ); 17 | 18 | const store = createStore(reducer, enhancer); 19 | persistStore(store, onCompletion); 20 | 21 | return store; 22 | } 23 | -------------------------------------------------------------------------------- /src/boot/index.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import app from "./setup"; 3 | 4 | export default function() { 5 | return app; 6 | } 7 | -------------------------------------------------------------------------------- /src/boot/setup.js: -------------------------------------------------------------------------------- 1 | import * as Expo from "expo"; 2 | import * as React from "react"; 3 | import { StyleProvider } from "native-base"; 4 | import { Provider } from "react-redux"; 5 | 6 | import configureStore from "./configureStore"; 7 | import App from "../App"; 8 | import getTheme from "../theme/components"; 9 | import variables from "../theme/variables/platform"; 10 | export interface Props {} 11 | export interface State { 12 | store: Object, 13 | isLoading: boolean, 14 | isReady: boolean, 15 | } 16 | export default class Setup extends React.Component { 17 | constructor() { 18 | super(); 19 | this.state = { 20 | isLoading: false, 21 | store: configureStore(() => this.setState({ isLoading: false })), 22 | isReady: false, 23 | }; 24 | } 25 | componentWillMount() { 26 | this.loadFonts(); 27 | } 28 | async loadFonts() { 29 | await Expo.Font.loadAsync({ 30 | Roboto: require("native-base/Fonts/Roboto.ttf"), 31 | Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"), 32 | Ionicons: require("@expo/vector-icons/fonts/Ionicons.ttf"), 33 | }); 34 | 35 | this.setState({ isReady: true }); 36 | } 37 | 38 | render() { 39 | if (!this.state.isReady || this.state.isLoading) { 40 | return ; 41 | } 42 | return ( 43 | 44 | 45 | 46 | 47 | 48 | ); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/container/BlankPageContainer/index.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import * as React from "react"; 3 | import BlankPage from "../../stories/screens/BlankPage"; 4 | export interface Props { 5 | navigation: any, 6 | } 7 | export interface State {} 8 | export default class BlankPageContainer extends React.Component { 9 | render() { 10 | return ; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/container/HomeContainer/__tests__/reducer.test.js: -------------------------------------------------------------------------------- 1 | import reducer from "../reducer"; 2 | 3 | describe("list reducer", () => { 4 | it("should return the initial state", () => { 5 | expect(reducer(undefined, {})).toEqual({ 6 | list: [], 7 | isLoading: true, 8 | }); 9 | }); 10 | 11 | it("should handle FETCH_LIST_SUCCESS", () => { 12 | expect( 13 | reducer([], { 14 | type: "FETCH_LIST_SUCCESS", 15 | list: [ 16 | "React Native Starter Kit", 17 | "React Navigation", 18 | "NativeBase Easy Grid", 19 | "NativeBase", 20 | "CodePush", 21 | "Redux", 22 | ], 23 | }) 24 | ).toEqual({ 25 | list: [ 26 | "React Native Starter Kit", 27 | "React Navigation", 28 | "NativeBase Easy Grid", 29 | "NativeBase", 30 | "CodePush", 31 | "Redux", 32 | ], 33 | }); 34 | }); 35 | it("should handle LIST_IS_LOADING", () => { 36 | expect( 37 | reducer([], { 38 | type: "LIST_IS_LOADING", 39 | isLoading: false, 40 | }) 41 | ).toEqual({ 42 | isLoading: false, 43 | }); 44 | }); 45 | }); 46 | -------------------------------------------------------------------------------- /src/container/HomeContainer/actions.js: -------------------------------------------------------------------------------- 1 | export function listIsLoading(bool: boolean) { 2 | return { 3 | type: "LIST_IS_LOADING", 4 | isLoading: bool, 5 | }; 6 | } 7 | export function fetchListSuccess(list: Object) { 8 | return { 9 | type: "FETCH_LIST_SUCCESS", 10 | list, 11 | }; 12 | } 13 | export function fetchList(url: any) { 14 | return dispatch => { 15 | dispatch(fetchListSuccess((url: any))); 16 | dispatch(listIsLoading(false)); 17 | }; 18 | } 19 | -------------------------------------------------------------------------------- /src/container/HomeContainer/data.json: -------------------------------------------------------------------------------- 1 | ["React Native Starter Kit", "React Navigation", "NativeBase Easy Grid", "NativeBase", "CodePush", "Redux"] 2 | -------------------------------------------------------------------------------- /src/container/HomeContainer/index.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import * as React from "react"; 3 | import { connect } from "react-redux"; 4 | import Home from "../../stories/screens/Home"; 5 | import datas from "./data"; 6 | import { fetchList } from "./actions"; 7 | export interface Props { 8 | navigation: any, 9 | fetchList: Function, 10 | data: Object, 11 | } 12 | export interface State {} 13 | class HomeContainer extends React.Component { 14 | componentDidMount() { 15 | this.props.fetchList(datas); 16 | } 17 | render() { 18 | return ; 19 | } 20 | } 21 | 22 | function bindAction(dispatch) { 23 | return { 24 | fetchList: url => dispatch(fetchList(url)), 25 | }; 26 | } 27 | 28 | const mapStateToProps = state => ({ 29 | data: state.homeReducer.list, 30 | isLoading: state.homeReducer.isLoading, 31 | }); 32 | export default connect(mapStateToProps, bindAction)(HomeContainer); 33 | -------------------------------------------------------------------------------- /src/container/HomeContainer/reducer.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | list: [], 3 | isLoading: true, 4 | }; 5 | 6 | export default function(state: any = initialState, action: Function) { 7 | if (action.type === "FETCH_LIST_SUCCESS") { 8 | return { 9 | ...state, 10 | list: action.list, 11 | }; 12 | } 13 | if (action.type === "LIST_IS_LOADING") { 14 | return { 15 | ...state, 16 | isLoading: action.isLoading, 17 | }; 18 | } 19 | return state; 20 | } 21 | -------------------------------------------------------------------------------- /src/container/LoginContainer/index.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import * as React from "react"; 3 | import { Item, Input, Icon, Toast, Form } from "native-base"; 4 | import { Field, reduxForm } from "redux-form"; 5 | import Login from "../../stories/screens/Login"; 6 | 7 | const required = value => (value ? undefined : "Required"); 8 | const maxLength = max => value => 9 | value && value.length > max ? `Must be ${max} characters or less` : undefined; 10 | const maxLength15 = maxLength(15); 11 | const minLength = min => value => 12 | value && value.length < min ? `Must be ${min} characters or more` : undefined; 13 | const minLength8 = minLength(8); 14 | const email = value => 15 | value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) 16 | ? "Invalid email address" 17 | : undefined; 18 | const alphaNumeric = value => 19 | value && /[^a-zA-Z0-9 ]/i.test(value) 20 | ? "Only alphanumeric characters" 21 | : undefined; 22 | 23 | export interface Props { 24 | navigation: any; 25 | valid: boolean; 26 | } 27 | export interface State {} 28 | class LoginForm extends React.Component { 29 | textInput: any; 30 | 31 | renderInput({ input, label, type, meta: { touched, error, warning } }) { 32 | return ( 33 | 34 | 35 | (this.textInput = c)} 37 | placeholder={input.name === "email" ? "Email" : "Password"} 38 | secureTextEntry={input.name === "password" ? true : false} 39 | {...input} 40 | /> 41 | 42 | ); 43 | } 44 | 45 | login() { 46 | if (this.props.valid) { 47 | this.props.navigation.navigate("Drawer"); 48 | } else { 49 | Toast.show({ 50 | text: "Enter Valid Username & password!", 51 | duration: 2000, 52 | position: "top", 53 | textStyle: { textAlign: "center" } 54 | }); 55 | } 56 | } 57 | 58 | render() { 59 | const form = ( 60 |
61 | 66 | 71 | 72 | ); 73 | return ( 74 | this.login()} 78 | /> 79 | ); 80 | } 81 | } 82 | const LoginContainer = reduxForm({ 83 | form: "login" 84 | })(LoginForm); 85 | export default LoginContainer; 86 | -------------------------------------------------------------------------------- /src/container/SidebarContainer/index.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import * as React from "react"; 3 | import Sidebar from "../../stories/screens/Sidebar"; 4 | export interface Props { 5 | navigation: any, 6 | } 7 | export interface State {} 8 | export default class SidebarContainer extends React.Component { 9 | render() { 10 | return ; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/reducers/index.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from "redux"; 2 | import { reducer as formReducer } from "redux-form"; 3 | 4 | import homeReducer from "../container/HomeContainer/reducer"; 5 | 6 | export default combineReducers({ 7 | form: formReducer, 8 | homeReducer, 9 | }); 10 | -------------------------------------------------------------------------------- /src/stories/screens/BlankPage/__tests__/index.test.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import BlankPage from "../index"; 3 | // Note: test renderer must be required after react-native. 4 | import renderer from "react-test-renderer"; 5 | 6 | const navigation = { state: jest.fn() }; 7 | 8 | it("renders correctly", () => { 9 | const tree = renderer.create().toJSON(); 10 | expect(tree).toMatchSnapshot(); 11 | }); 12 | -------------------------------------------------------------------------------- /src/stories/screens/BlankPage/index.js: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Container, Header, Title, Content, Text, Button, Icon, Left, Right, Body } from "native-base"; 3 | 4 | import styles from "./styles"; 5 | export interface Props { 6 | navigation: any; 7 | } 8 | export interface State {} 9 | class BlankPage extends React.Component { 10 | render() { 11 | const param = this.props.navigation.state.params; 12 | return ( 13 | 14 |
15 | 16 | 19 | 20 | 21 | 22 | {param ? param.name.item : "Blank Page"} 23 | 24 | 25 | 26 |
27 | 28 | 29 | {param !== undefined ? param.name.item : "Create Something Awesome . . ."} 30 | 31 | 32 | ); 33 | } 34 | } 35 | 36 | export default BlankPage; 37 | -------------------------------------------------------------------------------- /src/stories/screens/BlankPage/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from "react-native"; 2 | 3 | const styles: any = StyleSheet.create({ 4 | container: { 5 | backgroundColor: "#FBFAFA", 6 | }, 7 | }); 8 | export default styles; 9 | -------------------------------------------------------------------------------- /src/stories/screens/Home/__tests__/index.test.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Home from "../index"; 3 | // Note: test renderer must be required after react-native. 4 | import renderer from "react-test-renderer"; 5 | 6 | const navigation = { navigate: jest.fn() }; 7 | const list = { map: jest.fn() }; 8 | 9 | it("renders correctly", () => { 10 | const tree = renderer.create().toJSON(); 11 | expect(tree).toMatchSnapshot(); 12 | }); 13 | -------------------------------------------------------------------------------- /src/stories/screens/Home/index.js: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { 3 | Container, 4 | Header, 5 | Title, 6 | Content, 7 | Text, 8 | Button, 9 | Icon, 10 | Left, 11 | Body, 12 | Right, 13 | List, 14 | ListItem 15 | } from "native-base"; 16 | 17 | import styles from "./styles"; 18 | export interface Props { 19 | navigation: any; 20 | list: any; 21 | } 22 | export interface State {} 23 | class Home extends React.Component { 24 | render() { 25 | return ( 26 | 27 |
28 | 29 | 36 | 37 | 38 | Home 39 | 40 | 41 |
42 | 43 | 44 | {this.props.list.map((item, i) => ( 45 | 48 | this.props.navigation.navigate("BlankPage", { 49 | name: { item } 50 | }) 51 | } 52 | > 53 | {item} 54 | 55 | ))} 56 | 57 | 58 | 59 | ); 60 | } 61 | } 62 | 63 | export default Home; 64 | -------------------------------------------------------------------------------- /src/stories/screens/Home/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from "react-native"; 2 | 3 | const styles: any = StyleSheet.create({ 4 | container: { 5 | backgroundColor: "#FBFAFA", 6 | }, 7 | row: { 8 | flex: 1, 9 | alignItems: "center", 10 | }, 11 | text: { 12 | fontSize: 20, 13 | marginBottom: 15, 14 | alignItems: "center", 15 | }, 16 | mt: { 17 | marginTop: 18, 18 | }, 19 | }); 20 | export default styles; 21 | -------------------------------------------------------------------------------- /src/stories/screens/Login/__tests__/index.test.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Login from "../index"; 3 | // Note: test renderer must be required after react-native. 4 | import renderer from "react-test-renderer"; 5 | 6 | const onLogin = jest.fn(); 7 | const loginForm = React.Component; 8 | 9 | it("renders correctly", () => { 10 | const tree = renderer.create().toJSON(); 11 | expect(tree).toMatchSnapshot(); 12 | }); 13 | -------------------------------------------------------------------------------- /src/stories/screens/Login/index.js: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Image, Platform } from "react-native"; 3 | import { Container, Content, Header, Body, Title, Button, Text, View, Icon, Footer } from "native-base"; 4 | //import styles from "./styles"; 5 | export interface Props { 6 | loginForm: any, 7 | onLogin: Function, 8 | } 9 | export interface State {} 10 | class Login extends React.Component { 11 | render() { 12 | return ( 13 | 14 |
15 | 16 | 17 | ReactNativeSeed.com 18 | 19 | 20 | Build Something Amazing 21 | 22 | 23 | 24 |
25 | 26 | {this.props.loginForm} 27 | 28 | 31 | 32 | 33 |
34 | 35 | 36 | Made with love at 37 | 38 | 42 | 43 |
44 | 45 | ); 46 | } 47 | } 48 | 49 | export default Login; 50 | -------------------------------------------------------------------------------- /src/stories/screens/Login/styles.js: -------------------------------------------------------------------------------- 1 | import { Dimensions, StyleSheet } from "react-native"; 2 | 3 | const deviceHeight = Dimensions.get("window").height; 4 | 5 | const styles: any = StyleSheet.create({ 6 | container: { 7 | position: "absolute", 8 | top: 0, 9 | bottom: 0, 10 | left: 0, 11 | right: 0, 12 | backgroundColor: "#FBFAFA", 13 | }, 14 | shadow: { 15 | flex: 1, 16 | width: undefined, 17 | height: undefined, 18 | }, 19 | bg: { 20 | flex: 1, 21 | marginTop: deviceHeight / 1.75, 22 | paddingTop: 20, 23 | paddingLeft: 10, 24 | paddingRight: 10, 25 | paddingBottom: 30, 26 | bottom: 0, 27 | }, 28 | input: { 29 | marginBottom: 20, 30 | }, 31 | btn: { 32 | marginTop: 20, 33 | alignSelf: "center", 34 | }, 35 | }); 36 | export default styles; 37 | -------------------------------------------------------------------------------- /src/stories/screens/Sidebar/__tests__/index.test.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Sidebar from "../index"; 3 | // Note: test renderer must be required after react-native. 4 | import renderer from "react-test-renderer"; 5 | 6 | const navigation = { navigate: jest.fn() }; 7 | 8 | it("renders correctly", () => { 9 | const tree = renderer.create().toJSON(); 10 | expect(tree).toMatchSnapshot(); 11 | }); 12 | -------------------------------------------------------------------------------- /src/stories/screens/Sidebar/index.js: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Text, Container, List, ListItem, Content } from "native-base"; 3 | import { NavigationActions } from "react-navigation"; 4 | 5 | const routes = [ 6 | { 7 | route: "Home", 8 | caption: "Home" 9 | }, 10 | { 11 | route: "BlankPage", 12 | caption: "Blank Page" 13 | }, 14 | { 15 | route: "Login", 16 | caption: "Logout" 17 | } 18 | ]; 19 | 20 | export interface Props { 21 | navigation: any; 22 | } 23 | export interface State {} 24 | const resetAction = NavigationActions.navigate({ routeName: "Login" }); 25 | export default class Sidebar extends React.Component { 26 | render() { 27 | return ( 28 | 29 | 30 | { 34 | return ( 35 | { 38 | data.route === "Login" 39 | ? this.props.navigation.reset([resetAction], 0) 40 | : this.props.navigation.navigate(data.route); 41 | }} 42 | > 43 | {data.caption} 44 | 45 | ); 46 | }} 47 | /> 48 | 49 | 50 | ); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/theme/components/Badge.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const badgeTheme = { 5 | ".primary": { 6 | backgroundColor: variables.btnPrimaryBg, 7 | }, 8 | ".warning": { 9 | backgroundColor: variables.btnWarningBg, 10 | }, 11 | ".info": { 12 | backgroundColor: variables.btnInfoBg, 13 | }, 14 | ".success": { 15 | backgroundColor: variables.btnSuccessBg, 16 | }, 17 | ".danger": { 18 | backgroundColor: variables.btnDangerBg, 19 | }, 20 | "NativeBase.Text": { 21 | color: variables.badgeColor, 22 | fontSize: variables.fontSizeBase, 23 | lineHeight: variables.lineHeight - 1, 24 | textAlign: "center", 25 | paddingHorizontal: 3, 26 | }, 27 | backgroundColor: variables.badgeBg, 28 | padding: variables.badgePadding, 29 | paddingHorizontal: 6, 30 | alignSelf: "flex-start", 31 | borderRadius: 13.5, 32 | height: 27, 33 | }; 34 | return badgeTheme; 35 | }; 36 | -------------------------------------------------------------------------------- /src/theme/components/Body.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const bodyTheme = { 5 | flex: 1, 6 | alignItems: "center", 7 | alignSelf: "center", 8 | }; 9 | 10 | return bodyTheme; 11 | }; 12 | -------------------------------------------------------------------------------- /src/theme/components/Button.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const platformStyle = variables.platformStyle; 5 | const platform = variables.platform; 6 | 7 | const buttonTheme = { 8 | ".disabled": { 9 | backgroundColor: variables.btnDisabledBg, 10 | }, 11 | ".bordered": { 12 | ".dark": { 13 | "NativeBase.Text": { 14 | color: "#000", 15 | }, 16 | "NativeBase.Icon": { 17 | color: "#000", 18 | }, 19 | "NativeBase.IconNB": { 20 | color: "#000", 21 | }, 22 | backgroundColor: "transparent", 23 | borderColor: "#000", 24 | borderWidth: variables.borderWidth * 2, 25 | }, 26 | ".light": { 27 | "NativeBase.Text": { 28 | color: "#f4f4f4", 29 | }, 30 | "NativeBase.Icon": { 31 | color: "#f4f4f4", 32 | }, 33 | "NativeBase.IconNB": { 34 | color: "#f4f4f4", 35 | }, 36 | backgroundColor: "transparent", 37 | borderColor: "#f4f4f4", 38 | borderWidth: variables.borderWidth * 2, 39 | }, 40 | ".primary": { 41 | "NativeBase.Text": { 42 | color: variables.btnPrimaryBg, 43 | }, 44 | "NativeBase.Icon": { 45 | color: variables.btnPrimaryBg, 46 | }, 47 | "NativeBase.IconNB": { 48 | color: variables.btnPrimaryBg, 49 | }, 50 | backgroundColor: "transparent", 51 | borderColor: variables.btnPrimaryBg, 52 | borderWidth: variables.borderWidth * 2, 53 | }, 54 | ".success": { 55 | "NativeBase.Text": { 56 | color: variables.btnSuccessBg, 57 | }, 58 | "NativeBase.Icon": { 59 | color: variables.btnSuccessBg, 60 | }, 61 | "NativeBase.IconNB": { 62 | color: variables.btnSuccessBg, 63 | }, 64 | backgroundColor: "transparent", 65 | borderColor: variables.btnSuccessBg, 66 | borderWidth: variables.borderWidth * 2, 67 | }, 68 | ".info": { 69 | "NativeBase.Text": { 70 | color: variables.btnInfoBg, 71 | }, 72 | "NativeBase.Icon": { 73 | color: variables.btnInfoBg, 74 | }, 75 | "NativeBase.IconNB": { 76 | color: variables.btnInfoBg, 77 | }, 78 | backgroundColor: "transparent", 79 | borderColor: variables.btnInfoBg, 80 | borderWidth: variables.borderWidth * 2, 81 | }, 82 | ".warning": { 83 | "NativeBase.Text": { 84 | color: variables.btnWarningBg, 85 | }, 86 | "NativeBase.Icon": { 87 | color: variables.btnWarningBg, 88 | }, 89 | "NativeBase.IconNB": { 90 | color: variables.btnWarningBg, 91 | }, 92 | backgroundColor: "transparent", 93 | borderColor: variables.btnWarningBg, 94 | borderWidth: variables.borderWidth * 2, 95 | }, 96 | ".danger": { 97 | "NativeBase.Text": { 98 | color: variables.btnDangerBg, 99 | }, 100 | "NativeBase.Icon": { 101 | color: variables.btnDangerBg, 102 | }, 103 | "NativeBase.IconNB": { 104 | color: variables.btnDangerBg, 105 | }, 106 | backgroundColor: "transparent", 107 | borderColor: variables.btnDangerBg, 108 | borderWidth: variables.borderWidth * 2, 109 | }, 110 | ".disabled": { 111 | backgroundColor: null, 112 | borderColor: variables.btnDisabledBg, 113 | borderWidth: variables.borderWidth * 2, 114 | "NativeBase.Text": { 115 | color: variables.btnDisabledBg, 116 | }, 117 | }, 118 | "NativeBase.Text": { 119 | color: variables.btnPrimaryBg, 120 | }, 121 | "NativeBase.Icon": { 122 | color: variables.btnPrimaryBg, 123 | }, 124 | "NativeBase.IconNB": { 125 | color: variables.btnPrimaryBg, 126 | }, 127 | borderWidth: variables.borderWidth * 2, 128 | elevation: null, 129 | shadowColor: null, 130 | shadowOffset: null, 131 | shadowOpacity: null, 132 | shadowRadius: null, 133 | backgroundColor: "transparent", 134 | }, 135 | 136 | ".dark": { 137 | ".bordered": { 138 | "NativeBase.Text": { 139 | color: "#000", 140 | }, 141 | "NativeBase.Icon": { 142 | color: "#000", 143 | }, 144 | "NativeBase.IconNB": { 145 | color: "#000", 146 | }, 147 | }, 148 | backgroundColor: "#000", 149 | }, 150 | ".light": { 151 | ".transparent": { 152 | "NativeBase.Text": { 153 | color: "#f4f4f4", 154 | }, 155 | "NativeBase.Icon": { 156 | color: "#f4f4f4", 157 | }, 158 | "NativeBase.IconNB": { 159 | color: "#f4f4f4", 160 | }, 161 | backgroundColor: null, 162 | }, 163 | ".bordered": { 164 | "NativeBase.Text": { 165 | color: "#f4f4f4", 166 | }, 167 | "NativeBase.Icon": { 168 | color: "#f4f4f4", 169 | }, 170 | "NativeBase.IconNB": { 171 | color: "#f4f4f4", 172 | }, 173 | }, 174 | "NativeBase.Text": { 175 | color: "#000", 176 | }, 177 | "NativeBase.Icon": { 178 | color: "#000", 179 | }, 180 | "NativeBase.IconNB": { 181 | color: "#000", 182 | }, 183 | backgroundColor: "#f4f4f4", 184 | }, 185 | 186 | ".primary": { 187 | ".bordered": { 188 | "NativeBase.Text": { 189 | color: variables.btnPrimaryBg, 190 | }, 191 | "NativeBase.Icon": { 192 | color: variables.btnPrimaryBg, 193 | }, 194 | "NativeBase.IconNB": { 195 | color: variables.btnPrimaryBg, 196 | }, 197 | }, 198 | backgroundColor: variables.btnPrimaryBg, 199 | }, 200 | 201 | ".success": { 202 | ".bordered": { 203 | "NativeBase.Text": { 204 | color: variables.btnSuccessBg, 205 | }, 206 | "NativeBase.Icon": { 207 | color: variables.btnSuccessBg, 208 | }, 209 | "NativeBase.IconNB": { 210 | color: variables.btnSuccessBg, 211 | }, 212 | }, 213 | backgroundColor: variables.btnSuccessBg, 214 | }, 215 | 216 | ".info": { 217 | ".bordered": { 218 | "NativeBase.Text": { 219 | color: variables.btnInfoBg, 220 | }, 221 | "NativeBase.Icon": { 222 | color: variables.btnInfoBg, 223 | }, 224 | "NativeBase.IconNB": { 225 | color: variables.btnInfoBg, 226 | }, 227 | }, 228 | backgroundColor: variables.btnInfoBg, 229 | }, 230 | 231 | ".warning": { 232 | ".bordered": { 233 | "NativeBase.Text": { 234 | color: variables.btnWarningBg, 235 | }, 236 | "NativeBase.Icon": { 237 | color: variables.btnWarningBg, 238 | }, 239 | "NativeBase.IconNB": { 240 | color: variables.btnWarningBg, 241 | }, 242 | }, 243 | backgroundColor: variables.btnWarningBg, 244 | }, 245 | 246 | ".danger": { 247 | ".bordered": { 248 | "NativeBase.Text": { 249 | color: variables.btnDangerBg, 250 | }, 251 | "NativeBase.Icon": { 252 | color: variables.btnDangerBg, 253 | }, 254 | "NativeBase.IconNB": { 255 | color: variables.btnDangerBg, 256 | }, 257 | }, 258 | backgroundColor: variables.btnDangerBg, 259 | }, 260 | 261 | ".block": { 262 | justifyContent: "center", 263 | alignSelf: "stretch", 264 | }, 265 | 266 | ".full": { 267 | justifyContent: "center", 268 | alignSelf: "stretch", 269 | borderRadius: 0, 270 | }, 271 | 272 | ".rounded": { 273 | // paddingHorizontal: variables.buttonPadding + 20, 274 | borderRadius: variables.borderRadiusLarge, 275 | }, 276 | 277 | ".transparent": { 278 | backgroundColor: "transparent", 279 | elevation: 0, 280 | shadowColor: null, 281 | shadowOffset: null, 282 | shadowRadius: null, 283 | shadowOpacity: null, 284 | 285 | "NativeBase.Text": { 286 | color: variables.btnPrimaryBg, 287 | }, 288 | "NativeBase.Icon": { 289 | color: variables.btnPrimaryBg, 290 | }, 291 | "NativeBase.IconNB": { 292 | color: variables.btnPrimaryBg, 293 | }, 294 | ".dark": { 295 | "NativeBase.Text": { 296 | color: "#000", 297 | }, 298 | "NativeBase.IconNB": { 299 | color: "#000", 300 | }, 301 | "NativeBase.Icon": { 302 | color: "#000", 303 | }, 304 | backgroundColor: null, 305 | }, 306 | ".danger": { 307 | "NativeBase.Text": { 308 | color: variables.btnDangerBg, 309 | }, 310 | "NativeBase.IconNB": { 311 | color: variables.btnDangerBg, 312 | }, 313 | "NativeBase.Icon": { 314 | color: variables.btnDangerBg, 315 | }, 316 | backgroundColor: null, 317 | }, 318 | ".warning": { 319 | "NativeBase.Text": { 320 | color: variables.btnWarningBg, 321 | }, 322 | "NativeBase.IconNB": { 323 | color: variables.btnWarningBg, 324 | }, 325 | "NativeBase.Icon": { 326 | color: variables.btnWarningBg, 327 | }, 328 | backgroundColor: null, 329 | }, 330 | ".info": { 331 | "NativeBase.Text": { 332 | color: variables.btnInfoBg, 333 | }, 334 | "NativeBase.IconNB": { 335 | color: variables.btnInfoBg, 336 | }, 337 | "NativeBase.Icon": { 338 | color: variables.btnInfoBg, 339 | }, 340 | backgroundColor: null, 341 | }, 342 | ".primary": { 343 | "NativeBase.Text": { 344 | color: variables.btnPrimaryBg, 345 | }, 346 | "NativeBase.IconNB": { 347 | color: variables.btnPrimaryBg, 348 | }, 349 | "NativeBase.Icon": { 350 | color: variables.btnPrimaryBg, 351 | }, 352 | backgroundColor: null, 353 | }, 354 | ".success": { 355 | "NativeBase.Text": { 356 | color: variables.btnSuccessBg, 357 | }, 358 | "NativeBase.IconNB": { 359 | color: variables.btnSuccessBg, 360 | }, 361 | "NativeBase.Icon": { 362 | color: variables.btnSuccessBg, 363 | }, 364 | backgroundColor: null, 365 | }, 366 | ".light": { 367 | "NativeBase.Text": { 368 | color: "#f4f4f4", 369 | }, 370 | "NativeBase.IconNB": { 371 | color: "#f4f4f4", 372 | }, 373 | "NativeBase.Icon": { 374 | color: "#f4f4f4", 375 | }, 376 | backgroundColor: null, 377 | }, 378 | }, 379 | 380 | ".small": { 381 | height: 30, 382 | "NativeBase.Text": { 383 | fontSize: 14, 384 | }, 385 | }, 386 | 387 | ".large": { 388 | height: 60, 389 | "NativeBase.Text": { 390 | fontSize: 22, 391 | lineHeight: 32, 392 | }, 393 | }, 394 | 395 | ".capitalize": {}, 396 | 397 | ".vertical": { 398 | flexDirection: "column", 399 | height: null, 400 | }, 401 | 402 | "NativeBase.Text": { 403 | fontFamily: variables.btnFontFamily, 404 | marginLeft: 0, 405 | marginRight: 0, 406 | color: variables.inverseTextColor, 407 | fontSize: variables.btnTextSize, 408 | lineHeight: variables.btnLineHeight, 409 | paddingHorizontal: 16, 410 | backgroundColor: "transparent", 411 | // childPosition: 1 412 | }, 413 | 414 | "NativeBase.Icon": { 415 | color: variables.inverseTextColor, 416 | fontSize: 24, 417 | marginHorizontal: 16, 418 | paddingTop: platform === "ios" ? 2 : undefined, 419 | }, 420 | "NativeBase.IconNB": { 421 | color: variables.inverseTextColor, 422 | fontSize: 24, 423 | marginHorizontal: 16, 424 | paddingTop: platform === "ios" ? 2 : undefined, 425 | }, 426 | 427 | ".iconLeft": { 428 | "NativeBase.Text": { 429 | marginLeft: 0, 430 | }, 431 | "NativeBase.IconNB": { 432 | marginRight: 0, 433 | marginLeft: 16, 434 | }, 435 | "NativeBase.Icon": { 436 | marginRight: 0, 437 | marginLeft: 16, 438 | }, 439 | }, 440 | ".iconRight": { 441 | "NativeBase.Text": { 442 | marginRight: 0, 443 | }, 444 | "NativeBase.IconNB": { 445 | marginLeft: 0, 446 | marginRight: 16, 447 | }, 448 | "NativeBase.Icon": { 449 | marginLeft: 0, 450 | marginRight: 16, 451 | }, 452 | }, 453 | ".picker": { 454 | "NativeBase.Text": { 455 | ".note": { 456 | fontSize: 16, 457 | lineHeight: null, 458 | }, 459 | }, 460 | }, 461 | 462 | paddingVertical: variables.buttonPadding, 463 | // paddingHorizontal: variables.buttonPadding + 10, 464 | backgroundColor: variables.btnPrimaryBg, 465 | borderRadius: variables.borderRadiusBase, 466 | borderColor: variables.btnPrimaryBg, 467 | borderWidth: null, 468 | height: 45, 469 | alignSelf: "flex-start", 470 | flexDirection: "row", 471 | elevation: 2, 472 | shadowColor: platformStyle === "material" ? "#000" : undefined, 473 | shadowOffset: platformStyle === "material" ? { width: 0, height: 2 } : undefined, 474 | shadowOpacity: platformStyle === "material" ? 0.2 : undefined, 475 | shadowRadius: platformStyle === "material" ? 1.2 : undefined, 476 | alignItems: "center", 477 | justifyContent: "space-between", 478 | }; 479 | return buttonTheme; 480 | }; 481 | -------------------------------------------------------------------------------- /src/theme/components/Card.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const cardTheme = { 5 | ".transparent": { 6 | shadowColor: null, 7 | shadowOffset: null, 8 | shadowOpacity: null, 9 | shadowRadius: null, 10 | elevation: null, 11 | }, 12 | marginVertical: 5, 13 | marginHorizontal: 2, 14 | flex: 1, 15 | borderWidth: variables.borderWidth, 16 | borderRadius: 2, 17 | borderColor: variables.cardBorderColor, 18 | flexWrap: "wrap", 19 | backgroundColor: variables.cardDefaultBg, 20 | shadowColor: "#000", 21 | shadowOffset: { width: 0, height: 2 }, 22 | shadowOpacity: 0.1, 23 | shadowRadius: 1.5, 24 | elevation: 3, 25 | }; 26 | 27 | return cardTheme; 28 | }; 29 | -------------------------------------------------------------------------------- /src/theme/components/CardItem.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const platform = variables.platform; 5 | 6 | const cardItemTheme = { 7 | "NativeBase.Left": { 8 | "NativeBase.Body": { 9 | "NativeBase.Text": { 10 | ".note": { 11 | color: variables.listNoteColor, 12 | fontWeight: "400", 13 | marginRight: 20, 14 | }, 15 | }, 16 | flex: 1, 17 | marginLeft: 10, 18 | alignItems: null, 19 | }, 20 | "NativeBase.Icon": { 21 | fontSize: variables.iconFontSize, 22 | }, 23 | "NativeBase.IconNB": { 24 | fontSize: variables.iconFontSize, 25 | }, 26 | "NativeBase.Text": { 27 | marginLeft: 10, 28 | alignSelf: "center", 29 | }, 30 | "NativeBase.Button": { 31 | ".transparent": { 32 | "NativeBase.Text": { 33 | fontSize: variables.DefaultFontSize - 4, 34 | color: variables.sTabBarActiveTextColor, 35 | }, 36 | "NativeBase.Icon": { 37 | fontSize: variables.iconFontSize - 10, 38 | color: variables.sTabBarActiveTextColor, 39 | marginHorizontal: null, 40 | }, 41 | "NativeBase.IconNB": { 42 | fontSize: variables.iconFontSize - 10, 43 | color: variables.sTabBarActiveTextColor, 44 | }, 45 | paddingVertical: null, 46 | paddingHorizontal: null, 47 | paddingRight: variables.listItemPadding + 5, 48 | }, 49 | }, 50 | flex: 1, 51 | flexDirection: "row", 52 | alignItems: "center", 53 | }, 54 | 55 | ".content": { 56 | "NativeBase.Text": { 57 | color: platform === "ios" ? "#555" : "#222", 58 | fontSize: variables.DefaultFontSize - 3, 59 | }, 60 | }, 61 | ".cardBody": { 62 | padding: -5, 63 | "NativeBase.Text": { 64 | marginTop: 5, 65 | }, 66 | }, 67 | "NativeBase.Body": { 68 | "NativeBase.Text": { 69 | ".note": { 70 | color: variables.listNoteColor, 71 | fontWeight: "200", 72 | marginRight: 20, 73 | }, 74 | }, 75 | "NativeBase.Button": { 76 | ".transparent": { 77 | "NativeBase.Text": { 78 | fontSize: variables.DefaultFontSize - 4, 79 | color: variables.sTabBarActiveTextColor, 80 | }, 81 | "NativeBase.Icon": { 82 | fontSize: variables.iconFontSize - 10, 83 | color: variables.sTabBarActiveTextColor, 84 | marginHorizontal: null, 85 | }, 86 | "NativeBase.IconNB": { 87 | fontSize: variables.iconFontSize - 10, 88 | color: variables.sTabBarActiveTextColor, 89 | }, 90 | paddingVertical: null, 91 | paddingHorizontal: null, 92 | paddingRight: variables.listItemPadding + 5, 93 | alignSelf: "stretch", 94 | }, 95 | }, 96 | flex: 1, 97 | alignSelf: "stretch", 98 | alignItems: "flex-start", 99 | }, 100 | "NativeBase.Right": { 101 | "NativeBase.Badge": { 102 | alignSelf: null, 103 | }, 104 | "NativeBase.Button": { 105 | ".transparent": { 106 | "NativeBase.Text": { 107 | fontSize: variables.DefaultFontSize - 4, 108 | color: variables.sTabBarActiveTextColor, 109 | }, 110 | "NativeBase.Icon": { 111 | fontSize: variables.iconFontSize - 10, 112 | color: variables.sTabBarActiveTextColor, 113 | marginHorizontal: null, 114 | }, 115 | "NativeBase.IconNB": { 116 | fontSize: variables.iconFontSize - 10, 117 | color: variables.sTabBarActiveTextColor, 118 | }, 119 | paddingVertical: null, 120 | paddingHorizontal: null, 121 | }, 122 | alignSelf: null, 123 | }, 124 | "NativeBase.Icon": { 125 | alignSelf: null, 126 | fontSize: variables.iconFontSize - 8, 127 | color: variables.cardBorderColor, 128 | }, 129 | "NativeBase.IconNB": { 130 | alignSelf: null, 131 | fontSize: variables.iconFontSize - 8, 132 | color: variables.cardBorderColor, 133 | }, 134 | "NativeBase.Text": { 135 | fontSize: variables.DefaultFontSize - 2, 136 | alignSelf: null, 137 | }, 138 | "NativeBase.Thumbnail": { 139 | alignSelf: null, 140 | }, 141 | "NativeBase.Image": { 142 | alignSelf: null, 143 | }, 144 | "NativeBase.Radio": { 145 | alignSelf: null, 146 | }, 147 | "NativeBase.Checkbox": { 148 | alignSelf: null, 149 | }, 150 | "NativeBase.Switch": { 151 | alignSelf: null, 152 | }, 153 | flex: 0.8, 154 | }, 155 | ".header": { 156 | "NativeBase.Text": { 157 | fontSize: 16, 158 | fontWeight: platform === "ios" ? "500" : undefined, 159 | }, 160 | ".bordered": { 161 | "NativeBase.Text": { 162 | color: variables.sTabBarActiveTextColor, 163 | fontWeight: platform === "ios" ? "500" : undefined, 164 | }, 165 | borderBottomWidth: platform === "ios" ? variables.borderWidth : null, 166 | }, 167 | borderBottomWidth: null, 168 | paddingVertical: variables.listItemPadding + 5, 169 | }, 170 | ".footer": { 171 | "NativeBase.Text": { 172 | fontSize: 16, 173 | fontWeight: platform === "ios" ? "500" : undefined, 174 | }, 175 | ".bordered": { 176 | "NativeBase.Text": { 177 | color: variables.activeTab, 178 | fontWeight: "500", 179 | }, 180 | borderTopWidth: platform === "ios" ? variables.borderWidth : null, 181 | }, 182 | borderBottomWidth: null, 183 | }, 184 | "NativeBase.Text": { 185 | ".note": { 186 | color: variables.listNoteColor, 187 | fontWeight: "200", 188 | }, 189 | }, 190 | 191 | "NativeBase.Icon": { 192 | width: variables.iconFontSize + 5, 193 | fontSize: variables.iconFontSize - 2, 194 | }, 195 | "NativeBase.IconNB": { 196 | width: variables.iconFontSize + 5, 197 | fontSize: variables.iconFontSize - 2, 198 | }, 199 | 200 | ".bordered": { 201 | borderBottomWidth: variables.borderWidth, 202 | borderColor: variables.cardBorderColor, 203 | }, 204 | flexDirection: "row", 205 | alignItems: "center", 206 | borderRadius: 2, 207 | padding: variables.listItemPadding + 5, 208 | paddingVertical: variables.listItemPadding, 209 | backgroundColor: variables.cardDefaultBg, 210 | }; 211 | 212 | return cardItemTheme; 213 | }; 214 | -------------------------------------------------------------------------------- /src/theme/components/CheckBox.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const checkBoxTheme = { 5 | ".checked": { 6 | "NativeBase.Icon": { 7 | color: variables.checkboxTickColor, 8 | }, 9 | "NativeBase.IconNB": { 10 | color: variables.checkboxTickColor, 11 | }, 12 | }, 13 | "NativeBase.Icon": { 14 | color: "transparent", 15 | lineHeight: variables.CheckboxIconSize, 16 | marginTop: variables.CheckboxIconMarginTop, 17 | fontSize: variables.CheckboxFontSize, 18 | }, 19 | "NativeBase.IconNB": { 20 | color: "transparent", 21 | lineHeight: variables.CheckboxIconSize, 22 | marginTop: variables.CheckboxIconMarginTop, 23 | fontSize: variables.CheckboxFontSize, 24 | }, 25 | borderRadius: variables.CheckboxRadius, 26 | overflow: "hidden", 27 | width: variables.checkboxSize, 28 | height: variables.checkboxSize, 29 | borderWidth: variables.CheckboxBorderWidth, 30 | paddingLeft: variables.CheckboxPaddingLeft - 1, 31 | paddingBottom: variables.CheckboxPaddingBottom, 32 | left: 10, 33 | }; 34 | 35 | return checkBoxTheme; 36 | }; 37 | -------------------------------------------------------------------------------- /src/theme/components/Container.js: -------------------------------------------------------------------------------- 1 | import { Platform, Dimensions } from "react-native"; 2 | 3 | import variable from "./../variables/platform"; 4 | 5 | const deviceHeight = Dimensions.get("window").height; 6 | export default (variables = variable) => { 7 | const theme = { 8 | flex: 1, 9 | height: Platform.OS === "ios" ? deviceHeight : deviceHeight - 20, 10 | }; 11 | 12 | return theme; 13 | }; 14 | -------------------------------------------------------------------------------- /src/theme/components/Content.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const contentTheme = { 5 | ".padder": { 6 | padding: variables.contentPadding, 7 | }, 8 | flex: 1, 9 | backgroundColor: "transparent", 10 | "NativeBase.Segment": { 11 | borderWidth: 0, 12 | backgroundColor: "transparent", 13 | }, 14 | }; 15 | 16 | return contentTheme; 17 | }; 18 | -------------------------------------------------------------------------------- /src/theme/components/Fab.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const platform = variables.platform; 5 | 6 | const fabTheme = { 7 | "NativeBase.Button": { 8 | alignItems: "center", 9 | padding: null, 10 | justifyContent: "center", 11 | "NativeBase.Icon": { 12 | alignSelf: "center", 13 | }, 14 | "NativeBase.IconNB": { 15 | alignSelf: "center", 16 | fontSize: 20, 17 | lineHeight: platform === "ios" ? 24 : undefined, 18 | }, 19 | }, 20 | }; 21 | 22 | return fabTheme; 23 | }; 24 | -------------------------------------------------------------------------------- /src/theme/components/Footer.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const platformStyle = variables.platformStyle; 5 | const platform = variables.platform; 6 | 7 | const footerTheme = { 8 | "NativeBase.Left": { 9 | "NativeBase.Button": { 10 | ".transparent": { 11 | backgroundColor: "transparent", 12 | borderColor: null, 13 | elevation: 0, 14 | shadowColor: null, 15 | shadowOffset: null, 16 | shadowRadius: null, 17 | shadowOpacity: null, 18 | }, 19 | "NativeBase.Icon": { 20 | color: variables.topTabBarActiveTextColor, 21 | }, 22 | "NativeBase.IconNB": { 23 | color: variables.topTabBarActiveTextColor, 24 | }, 25 | alignSelf: null, 26 | }, 27 | flex: 1, 28 | alignSelf: "center", 29 | alignItems: "flex-start", 30 | }, 31 | "NativeBase.Body": { 32 | flex: 1, 33 | alignItems: "center", 34 | alignSelf: "center", 35 | flexDirection: "row", 36 | "NativeBase.Button": { 37 | alignSelf: "center", 38 | ".transparent": { 39 | backgroundColor: "transparent", 40 | borderColor: null, 41 | elevation: 0, 42 | shadowColor: null, 43 | shadowOffset: null, 44 | shadowRadius: null, 45 | shadowOpacity: null, 46 | }, 47 | ".full": { 48 | height: variables.footerHeight, 49 | flex: 1, 50 | }, 51 | "NativeBase.Icon": { 52 | color: variables.topTabBarActiveTextColor, 53 | }, 54 | "NativeBase.IconNB": { 55 | color: variables.topTabBarActiveTextColor, 56 | }, 57 | }, 58 | }, 59 | "NativeBase.Right": { 60 | "NativeBase.Button": { 61 | ".transparent": { 62 | backgroundColor: "transparent", 63 | borderColor: null, 64 | elevation: 0, 65 | shadowColor: null, 66 | shadowOffset: null, 67 | shadowRadius: null, 68 | shadowOpacity: null, 69 | }, 70 | "NativeBase.Icon": { 71 | color: variables.topTabBarActiveTextColor, 72 | }, 73 | "NativeBase.IconNB": { 74 | color: variables.topTabBarActiveTextColor, 75 | }, 76 | alignSelf: null, 77 | }, 78 | flex: 1, 79 | alignSelf: "center", 80 | alignItems: "flex-end", 81 | }, 82 | backgroundColor: variables.footerDefaultBg, 83 | flexDirection: "row", 84 | justifyContent: "center", 85 | borderTopWidth: platform === "ios" && platformStyle !== "material" ? variables.borderWidth : undefined, 86 | borderColor: platform === "ios" && platformStyle !== "material" ? "#cbcbcb" : undefined, 87 | height: variables.footerHeight, 88 | elevation: 3, 89 | left: 0, 90 | right: 0, 91 | }; 92 | 93 | return footerTheme; 94 | }; 95 | -------------------------------------------------------------------------------- /src/theme/components/FooterTab.js: -------------------------------------------------------------------------------- 1 | import { Platform } from "react-native"; 2 | 3 | import variable from "./../variables/platform"; 4 | 5 | export default (variables = variable) => { 6 | const platform = variables.platform; 7 | 8 | const footerTabTheme = { 9 | "NativeBase.Button": { 10 | ".active": { 11 | "NativeBase.Text": { 12 | color: variables.tabBarActiveTextColor, 13 | fontSize: variables.tabBarTextSize, 14 | lineHeight: 16, 15 | }, 16 | "NativeBase.Icon": { 17 | color: variables.tabBarActiveTextColor, 18 | }, 19 | "NativeBase.IconNB": { 20 | color: variables.tabBarActiveTextColor, 21 | }, 22 | backgroundColor: variables.tabActiveBgColor, 23 | }, 24 | flexDirection: null, 25 | backgroundColor: "transparent", 26 | borderColor: null, 27 | elevation: 0, 28 | shadowColor: null, 29 | shadowOffset: null, 30 | shadowRadius: null, 31 | shadowOpacity: null, 32 | alignSelf: "center", 33 | flex: 1, 34 | height: variables.footerHeight, 35 | justifyContent: "center", 36 | ".badge": { 37 | "NativeBase.Badge": { 38 | "NativeBase.Text": { 39 | fontSize: 11, 40 | fontWeight: platform === "ios" ? "600" : undefined, 41 | lineHeight: 14, 42 | }, 43 | top: -3, 44 | alignSelf: "center", 45 | left: 10, 46 | zIndex: 99, 47 | height: 18, 48 | padding: 1.7, 49 | paddingHorizontal: 3, 50 | }, 51 | "NativeBase.Icon": { 52 | marginTop: -18, 53 | }, 54 | }, 55 | "NativeBase.Icon": { 56 | color: variables.tabBarTextColor, 57 | }, 58 | "NativeBase.IconNB": { 59 | color: variables.tabBarTextColor, 60 | }, 61 | "NativeBase.Text": { 62 | color: variables.tabBarTextColor, 63 | fontSize: variables.tabBarTextSize, 64 | lineHeight: 16, 65 | }, 66 | }, 67 | backgroundColor: Platform.OS === "android" ? variables.tabActiveBgColor : undefined, 68 | flexDirection: "row", 69 | justifyContent: "space-between", 70 | flex: 1, 71 | alignSelf: "stretch", 72 | }; 73 | 74 | return footerTabTheme; 75 | }; 76 | -------------------------------------------------------------------------------- /src/theme/components/Form.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const platform = variables.platform; 5 | 6 | const theme = { 7 | "NativeBase.Item": { 8 | ".fixedLabel": { 9 | "NativeBase.Label": { 10 | paddingLeft: null, 11 | }, 12 | marginLeft: 15, 13 | }, 14 | ".inlineLabel": { 15 | "NativeBase.Label": { 16 | paddingLeft: null, 17 | }, 18 | marginLeft: 15, 19 | }, 20 | ".placeholderLabel": { 21 | "NativeBase.Input": {}, 22 | }, 23 | ".stackedLabel": { 24 | "NativeBase.Label": { 25 | top: 5, 26 | paddingLeft: null, 27 | }, 28 | "NativeBase.Input": { 29 | paddingLeft: null, 30 | marginLeft: platform === "ios" ? undefined : -5, 31 | }, 32 | "NativeBase.Icon": { 33 | marginTop: 36, 34 | }, 35 | marginLeft: 15, 36 | }, 37 | ".floatingLabel": { 38 | "NativeBase.Input": { 39 | paddingLeft: null, 40 | top: 10, 41 | marginLeft: platform === "ios" ? undefined : -5, 42 | }, 43 | "NativeBase.Label": { 44 | left: 0, 45 | top: 8, 46 | }, 47 | "NativeBase.Icon": { 48 | top: 6, 49 | }, 50 | marginTop: 15, 51 | marginLeft: 15, 52 | }, 53 | ".regular": { 54 | "NativeBase.Label": { 55 | left: 0, 56 | }, 57 | marginLeft: 0, 58 | }, 59 | ".rounded": { 60 | "NativeBase.Label": { 61 | left: 0, 62 | }, 63 | marginLeft: 0, 64 | }, 65 | ".underline": { 66 | "NativeBase.Label": { 67 | left: 0, 68 | top: 0, 69 | position: "relative", 70 | }, 71 | "NativeBase.Input": { 72 | left: -15, 73 | }, 74 | marginLeft: 15, 75 | }, 76 | ".last": { 77 | marginLeft: 0, 78 | paddingLeft: 15, 79 | }, 80 | "NativeBase.Label": { 81 | paddingRight: 5, 82 | }, 83 | marginLeft: 15, 84 | }, 85 | }; 86 | 87 | return theme; 88 | }; 89 | -------------------------------------------------------------------------------- /src/theme/components/H1.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const h1Theme = { 5 | color: variables.textColor, 6 | fontSize: variables.fontSizeH1, 7 | lineHeight: variables.lineHeightH1, 8 | }; 9 | 10 | return h1Theme; 11 | }; 12 | -------------------------------------------------------------------------------- /src/theme/components/H2.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const h2Theme = { 5 | color: variables.textColor, 6 | fontSize: variables.fontSizeH2, 7 | lineHeight: variables.lineHeightH2, 8 | }; 9 | 10 | return h2Theme; 11 | }; 12 | -------------------------------------------------------------------------------- /src/theme/components/H3.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const h3Theme = { 5 | color: variables.textColor, 6 | fontSize: variables.fontSizeH3, 7 | lineHeight: variables.lineHeightH3, 8 | }; 9 | 10 | return h3Theme; 11 | }; 12 | -------------------------------------------------------------------------------- /src/theme/components/Header.js: -------------------------------------------------------------------------------- 1 | import { PixelRatio } from "react-native"; 2 | 3 | import variable from "./../variables/platform"; 4 | 5 | export default (variables = variable) => { 6 | const platformStyle = variables.platformStyle; 7 | const platform = variables.platform; 8 | 9 | const headerTheme = { 10 | ".span": { 11 | height: 128, 12 | "NativeBase.Left": { 13 | alignSelf: "flex-start", 14 | }, 15 | "NativeBase.Body": { 16 | alignSelf: "flex-end", 17 | alignItems: "flex-start", 18 | justifyContent: "center", 19 | paddingBottom: 26, 20 | }, 21 | "NativeBase.Right": { 22 | alignSelf: "flex-start", 23 | }, 24 | }, 25 | ".hasSubtitle": { 26 | "NativeBase.Body": { 27 | "NativeBase.Title": { 28 | fontSize: variables.titleFontSize - 2, 29 | fontFamily: variables.titleFontfamily, 30 | textAlign: "center", 31 | }, 32 | "NativeBase.Subtitle": { 33 | fontSize: variables.subTitleFontSize, 34 | fontFamily: variables.titleFontfamily, 35 | color: variables.subtitleColor, 36 | textAlign: "center", 37 | }, 38 | }, 39 | }, 40 | ".noShadow": { 41 | elevation: 0, 42 | shadowColor: null, 43 | shadowOffset: null, 44 | shadowRadius: null, 45 | shadowOpacity: null, 46 | }, 47 | ".hasTabs": { 48 | elevation: 0, 49 | shadowColor: null, 50 | shadowOffset: null, 51 | shadowRadius: null, 52 | shadowOpacity: null, 53 | borderBottomWidth: null, 54 | }, 55 | ".hasSegment": { 56 | elevation: 0, 57 | shadowColor: null, 58 | shadowOffset: null, 59 | shadowRadius: null, 60 | shadowOpacity: null, 61 | borderBottomWidth: null, 62 | }, 63 | "NativeBase.Button": { 64 | justifyContent: "center", 65 | alignSelf: "center", 66 | alignItems: "center", 67 | ".transparent": { 68 | "NativeBase.Text": { 69 | color: variables.toolbarBtnColor, 70 | fontWeight: "600", 71 | }, 72 | "NativeBase.Icon": { 73 | color: variables.toolbarBtnColor, 74 | }, 75 | "NativeBase.IconNB": { 76 | color: variables.toolbarBtnColor, 77 | }, 78 | paddingHorizontal: variables.buttonPadding, 79 | }, 80 | paddingHorizontal: 15, 81 | }, 82 | ".searchBar": { 83 | "NativeBase.Item": { 84 | "NativeBase.Icon": { 85 | backgroundColor: "transparent", 86 | color: variables.dropdownLinkColor, 87 | fontSize: variables.toolbarSearchIconSize, 88 | alignItems: "center", 89 | marginTop: 2, 90 | paddingRight: 10, 91 | paddingLeft: 10, 92 | }, 93 | "NativeBase.IconNB": { 94 | backgroundColor: "transparent", 95 | color: null, 96 | alignSelf: "center", 97 | }, 98 | "NativeBase.Input": { 99 | alignSelf: "center", 100 | lineHeight: 24, 101 | height: variables.searchBarHeight, 102 | }, 103 | alignSelf: "center", 104 | alignItems: "center", 105 | justifyContent: "flex-start", 106 | flex: 1, 107 | height: variables.searchBarHeight, 108 | borderColor: "transparent", 109 | backgroundColor: variables.toolbarInputColor, 110 | }, 111 | "NativeBase.Button": { 112 | ".transparent": { 113 | "NativeBase.Text": { 114 | fontWeight: "500", 115 | }, 116 | paddingHorizontal: null, 117 | paddingLeft: platform === "ios" ? 10 : null, 118 | }, 119 | paddingHorizontal: platform === "ios" ? undefined : null, 120 | width: platform === "ios" ? undefined : 0, 121 | height: platform === "ios" ? undefined : 0, 122 | }, 123 | }, 124 | ".rounded": { 125 | "NativeBase.Item": { 126 | borderRadius: platform === "ios" && platformStyle !== "material" ? 25 : 3, 127 | }, 128 | }, 129 | "NativeBase.Left": { 130 | "NativeBase.Button": { 131 | ".hasText": { 132 | marginLeft: -10, 133 | height: 30, 134 | "NativeBase.Icon": { 135 | color: variables.toolbarBtnColor, 136 | fontSize: variables.iconHeaderSize, 137 | marginTop: 2, 138 | marginRight: 5, 139 | marginLeft: 2, 140 | }, 141 | "NativeBase.Text": { 142 | color: variables.toolbarBtnColor, 143 | fontSize: 17, 144 | marginLeft: 2, 145 | lineHeight: 21, 146 | }, 147 | "NativeBase.IconNB": { 148 | color: variables.toolbarBtnColor, 149 | fontSize: variables.iconHeaderSize, 150 | marginTop: 2, 151 | marginRight: 5, 152 | marginLeft: 2, 153 | }, 154 | }, 155 | ".transparent": { 156 | marginLeft: -3, 157 | "NativeBase.Icon": { 158 | color: variables.toolbarBtnColor, 159 | fontSize: variables.iconHeaderSize, 160 | marginTop: 2, 161 | marginRight: 2, 162 | marginLeft: 2, 163 | }, 164 | "NativeBase.IconNB": { 165 | color: variables.toolbarBtnColor, 166 | fontSize: variables.iconHeaderSize, 167 | marginTop: 2, 168 | marginRight: 2, 169 | marginLeft: 2, 170 | }, 171 | "NativeBase.Text": { 172 | color: variables.toolbarBtnColor, 173 | fontSize: 17, 174 | top: platform === "ios" ? undefined : -1.5, 175 | }, 176 | backgroundColor: "transparent", 177 | borderColor: null, 178 | elevation: 0, 179 | shadowColor: null, 180 | shadowOffset: null, 181 | shadowRadius: null, 182 | shadowOpacity: null, 183 | }, 184 | "NativeBase.Icon": { 185 | color: variables.toolbarBtnColor, 186 | }, 187 | "NativeBase.IconNB": { 188 | color: variables.toolbarBtnColor, 189 | }, 190 | alignSelf: null, 191 | paddingHorizontal: variables.buttonPadding, 192 | }, 193 | flex: platform === "ios" && platformStyle !== "material" ? 1 : 0.5, 194 | alignSelf: "center", 195 | alignItems: "flex-start", 196 | }, 197 | "NativeBase.Body": { 198 | flex: 1, 199 | alignItems: platform === "ios" && platformStyle !== "material" ? "center" : "flex-start", 200 | alignSelf: "center", 201 | "NativeBase.Segment": { 202 | borderWidth: 0, 203 | alignSelf: "flex-end", 204 | marginRight: platform === "ios" ? -40 : -55, 205 | }, 206 | "NativeBase.Button": { 207 | alignSelf: "center", 208 | ".transparent": { 209 | backgroundColor: "transparent", 210 | }, 211 | "NativeBase.Icon": { 212 | color: variables.toolbarBtnColor, 213 | }, 214 | "NativeBase.IconNB": { 215 | color: variables.toolbarBtnColor, 216 | }, 217 | "NativeBase.Text": { 218 | color: variables.inverseTextColor, 219 | backgroundColor: "transparent", 220 | }, 221 | }, 222 | "NativeBase.Icon": { 223 | color: variables.toolbarBtnColor, 224 | }, 225 | "NativeBase.IconNB": { 226 | color: variables.toolbarBtnColor, 227 | }, 228 | }, 229 | "NativeBase.Right": { 230 | "NativeBase.Button": { 231 | ".hasText": { 232 | height: 30, 233 | "NativeBase.Icon": { 234 | color: variables.toolbarBtnColor, 235 | fontSize: variables.iconHeaderSize - 2, 236 | marginTop: 2, 237 | marginRight: 2, 238 | marginLeft: 5, 239 | }, 240 | "NativeBase.Text": { 241 | color: variables.toolbarBtnColor, 242 | fontSize: 17, 243 | lineHeight: 21, 244 | }, 245 | "NativeBase.IconNB": { 246 | color: variables.toolbarBtnColor, 247 | fontSize: variables.iconHeaderSize - 2, 248 | marginTop: 2, 249 | marginRight: 2, 250 | marginLeft: 5, 251 | }, 252 | }, 253 | ".transparent": { 254 | marginRight: -8, 255 | paddingHorizontal: 15, 256 | borderRadius: 50, 257 | "NativeBase.Icon": { 258 | color: variables.toolbarBtnColor, 259 | fontSize: platform === "ios" ? variables.iconHeaderSize - 6 : variables.iconHeaderSize - 2, 260 | marginTop: 2, 261 | marginLeft: 2, 262 | marginRight: 2, 263 | }, 264 | "NativeBase.IconNB": { 265 | color: variables.toolbarBtnColor, 266 | fontSize: platform === "ios" ? variables.iconHeaderSize - 6 : variables.iconHeaderSize - 2, 267 | marginTop: 2, 268 | marginLeft: 2, 269 | marginRight: 2, 270 | }, 271 | "NativeBase.Text": { 272 | color: variables.toolbarBtnColor, 273 | fontSize: 17, 274 | top: platform === "ios" ? undefined : -1.5, 275 | }, 276 | backgroundColor: "transparent", 277 | borderColor: null, 278 | elevation: 0, 279 | shadowColor: null, 280 | shadowOffset: null, 281 | shadowRadius: null, 282 | shadowOpacity: null, 283 | }, 284 | "NativeBase.Icon": { 285 | color: variables.toolbarBtnColor, 286 | }, 287 | "NativeBase.IconNB": { 288 | color: variables.toolbarBtnColor, 289 | }, 290 | alignSelf: null, 291 | paddingHorizontal: variables.buttonPadding, 292 | }, 293 | flex: 1, 294 | alignSelf: "center", 295 | alignItems: "flex-end", 296 | flexDirection: "row", 297 | justifyContent: "flex-end", 298 | }, 299 | backgroundColor: variables.toolbarDefaultBg, 300 | flexDirection: "row", 301 | paddingHorizontal: 10, 302 | justifyContent: "center", 303 | paddingTop: platform === "ios" ? 15 : 0, 304 | borderBottomWidth: platform === "ios" ? 1 / PixelRatio.getPixelSizeForLayoutSize(1) : 0, 305 | borderBottomColor: variables.toolbarDefaultBorder, 306 | height: variables.toolbarHeight, 307 | elevation: 3, 308 | shadowColor: platformStyle === "material" ? "#000" : undefined, 309 | shadowOffset: platformStyle === "material" ? { width: 0, height: 2 } : undefined, 310 | shadowOpacity: platformStyle === "material" ? 0.2 : undefined, 311 | shadowRadius: platformStyle === "material" ? 1.2 : undefined, 312 | top: 0, 313 | left: 0, 314 | right: 0, 315 | }; 316 | 317 | return headerTheme; 318 | }; 319 | -------------------------------------------------------------------------------- /src/theme/components/Icon.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const iconTheme = { 5 | fontSize: variables.iconFontSize, 6 | color: "#000", 7 | }; 8 | 9 | return iconTheme; 10 | }; 11 | -------------------------------------------------------------------------------- /src/theme/components/Input.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const inputTheme = { 5 | ".multiline": { 6 | height: null, 7 | }, 8 | height: variables.inputHeightBase, 9 | color: "#000", 10 | paddingLeft: 5, 11 | paddingRight: 5, 12 | flex: 1, 13 | fontSize: variables.inputFontSize, 14 | lineHeight: variables.inputLineHeight, 15 | }; 16 | 17 | return inputTheme; 18 | }; 19 | -------------------------------------------------------------------------------- /src/theme/components/InputGroup.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const inputGroupTheme = { 5 | "NativeBase.Icon": { 6 | fontSize: 24, 7 | color: variables.sTabBarActiveTextColor, 8 | paddingHorizontal: 5, 9 | }, 10 | "NativeBase.IconNB": { 11 | fontSize: 24, 12 | color: variables.sTabBarActiveTextColor, 13 | paddingHorizontal: 5, 14 | }, 15 | "NativeBase.Input": { 16 | height: variables.inputHeightBase, 17 | color: variables.inputColor, 18 | paddingLeft: 5, 19 | paddingRight: 5, 20 | flex: 1, 21 | fontSize: variables.inputFontSize, 22 | lineHeight: variables.inputLineHeight, 23 | }, 24 | ".underline": { 25 | ".success": { 26 | borderColor: variables.inputSuccessBorderColor, 27 | }, 28 | ".error": { 29 | borderColor: variables.inputErrorBorderColor, 30 | }, 31 | paddingLeft: 5, 32 | borderWidth: variables.borderWidth, 33 | borderTopWidth: 0, 34 | borderRightWidth: 0, 35 | borderLeftWidth: 0, 36 | borderColor: variables.inputBorderColor, 37 | }, 38 | ".regular": { 39 | ".success": { 40 | borderColor: variables.inputSuccessBorderColor, 41 | }, 42 | ".error": { 43 | borderColor: variables.inputErrorBorderColor, 44 | }, 45 | paddingLeft: 5, 46 | borderWidth: variables.borderWidth, 47 | borderColor: variables.inputBorderColor, 48 | }, 49 | ".rounded": { 50 | ".success": { 51 | borderColor: variables.inputSuccessBorderColor, 52 | }, 53 | ".error": { 54 | borderColor: variables.inputErrorBorderColor, 55 | }, 56 | paddingLeft: 5, 57 | borderWidth: variables.borderWidth, 58 | borderRadius: variables.inputGroupRoundedBorderRadius, 59 | borderColor: variables.inputBorderColor, 60 | }, 61 | 62 | ".success": { 63 | "NativeBase.Icon": { 64 | color: variables.inputSuccessBorderColor, 65 | }, 66 | "NativeBase.IconNB": { 67 | color: variables.inputSuccessBorderColor, 68 | }, 69 | ".rounded": { 70 | borderRadius: 30, 71 | borderColor: variables.inputSuccessBorderColor, 72 | }, 73 | ".regular": { 74 | borderColor: variables.inputSuccessBorderColor, 75 | }, 76 | ".underline": { 77 | borderWidth: variables.borderWidth, 78 | borderTopWidth: 0, 79 | borderRightWidth: 0, 80 | borderLeftWidth: 0, 81 | borderColor: variables.inputSuccessBorderColor, 82 | }, 83 | borderColor: variables.inputSuccessBorderColor, 84 | }, 85 | 86 | ".error": { 87 | "NativeBase.Icon": { 88 | color: variables.inputErrorBorderColor, 89 | }, 90 | "NativeBase.IconNB": { 91 | color: variables.inputErrorBorderColor, 92 | }, 93 | ".rounded": { 94 | borderRadius: 30, 95 | borderColor: variables.inputErrorBorderColor, 96 | }, 97 | ".regular": { 98 | borderColor: variables.inputErrorBorderColor, 99 | }, 100 | ".underline": { 101 | borderWidth: variables.borderWidth, 102 | borderTopWidth: 0, 103 | borderRightWidth: 0, 104 | borderLeftWidth: 0, 105 | borderColor: variables.inputErrorBorderColor, 106 | }, 107 | borderColor: variables.inputErrorBorderColor, 108 | }, 109 | ".disabled": { 110 | "NativeBase.Icon": { 111 | color: "#384850", 112 | }, 113 | "NativeBase.IconNB": { 114 | color: "#384850", 115 | }, 116 | }, 117 | 118 | paddingLeft: 5, 119 | borderWidth: variables.borderWidth, 120 | borderTopWidth: 0, 121 | borderRightWidth: 0, 122 | borderLeftWidth: 0, 123 | borderColor: variables.inputBorderColor, 124 | backgroundColor: "transparent", 125 | flexDirection: "row", 126 | alignItems: "center", 127 | }; 128 | 129 | return inputGroupTheme; 130 | }; 131 | -------------------------------------------------------------------------------- /src/theme/components/Item.js: -------------------------------------------------------------------------------- 1 | import { Platform } from "react-native"; 2 | 3 | import variable from "./../variables/platform"; 4 | 5 | export default (variables = variable) => { 6 | const itemTheme = { 7 | ".floatingLabel": { 8 | "NativeBase.Input": { 9 | height: 60, 10 | top: 8, 11 | }, 12 | "NativeBase.Label": { 13 | top: 8, 14 | }, 15 | "NativeBase.Icon": { 16 | top: 6, 17 | }, 18 | }, 19 | ".fixedLabel": { 20 | "NativeBase.Label": { 21 | position: null, 22 | top: null, 23 | left: null, 24 | right: null, 25 | flex: 1, 26 | height: null, 27 | width: null, 28 | fontSize: variables.inputFontSize, 29 | }, 30 | "NativeBase.Input": { 31 | flex: 2, 32 | fontSize: variables.inputFontSize, 33 | }, 34 | }, 35 | ".stackedLabel": { 36 | "NativeBase.Label": { 37 | position: null, 38 | top: null, 39 | left: null, 40 | right: null, 41 | paddingTop: 5, 42 | alignSelf: "flex-start", 43 | fontSize: variables.inputFontSize - 2, 44 | }, 45 | "NativeBase.Icon": { 46 | marginTop: 36, 47 | }, 48 | "NativeBase.Input": { 49 | alignSelf: Platform.OS === "ios" ? "stretch" : "flex-start", 50 | flex: 1, 51 | width: Platform.OS === "ios" ? null : variables.deviceWidth - 25, 52 | fontSize: variables.inputFontSize, 53 | }, 54 | flexDirection: null, 55 | }, 56 | ".inlineLabel": { 57 | "NativeBase.Label": { 58 | position: null, 59 | top: null, 60 | left: null, 61 | right: null, 62 | paddingRight: 20, 63 | height: null, 64 | width: null, 65 | fontSize: variables.inputFontSize, 66 | }, 67 | "NativeBase.Input": { 68 | paddingLeft: 5, 69 | fontSize: variables.inputFontSize, 70 | }, 71 | flexDirection: "row", 72 | }, 73 | "NativeBase.Label": { 74 | fontSize: variables.inputFontSize, 75 | color: variables.inputColorPlaceholder, 76 | paddingRight: 5, 77 | }, 78 | "NativeBase.Icon": { 79 | fontSize: 24, 80 | paddingRight: 8, 81 | }, 82 | "NativeBase.IconNB": { 83 | fontSize: 24, 84 | paddingRight: 8, 85 | }, 86 | "NativeBase.Input": { 87 | ".multiline": { 88 | height: null, 89 | }, 90 | height: variables.inputHeightBase, 91 | color: variables.inputColor, 92 | flex: 1, 93 | top: Platform.OS === "ios" ? 1.5 : undefined, 94 | fontSize: variables.inputFontSize, 95 | lineHeight: variables.inputLineHeight, 96 | }, 97 | ".underline": { 98 | "NativeBase.Input": { 99 | paddingLeft: 15, 100 | }, 101 | ".success": { 102 | borderColor: variables.inputSuccessBorderColor, 103 | }, 104 | ".error": { 105 | borderColor: variables.inputErrorBorderColor, 106 | }, 107 | borderWidth: variables.borderWidth * 2, 108 | borderTopWidth: 0, 109 | borderRightWidth: 0, 110 | borderLeftWidth: 0, 111 | borderColor: variables.inputBorderColor, 112 | }, 113 | ".regular": { 114 | "NativeBase.Input": { 115 | paddingLeft: 8, 116 | }, 117 | "NativeBase.Icon": { 118 | paddingLeft: 10, 119 | }, 120 | ".success": { 121 | borderColor: variables.inputSuccessBorderColor, 122 | }, 123 | ".error": { 124 | borderColor: variables.inputErrorBorderColor, 125 | }, 126 | borderWidth: variables.borderWidth * 2, 127 | borderColor: variables.inputBorderColor, 128 | }, 129 | ".rounded": { 130 | "NativeBase.Input": { 131 | paddingLeft: 8, 132 | }, 133 | "NativeBase.Icon": { 134 | paddingLeft: 10, 135 | }, 136 | ".success": { 137 | borderColor: variables.inputSuccessBorderColor, 138 | }, 139 | ".error": { 140 | borderColor: variables.inputErrorBorderColor, 141 | }, 142 | borderWidth: variables.borderWidth * 2, 143 | borderRadius: 30, 144 | borderColor: variables.inputBorderColor, 145 | }, 146 | 147 | ".success": { 148 | "NativeBase.Icon": { 149 | color: variables.inputSuccessBorderColor, 150 | }, 151 | "NativeBase.IconNB": { 152 | color: variables.inputSuccessBorderColor, 153 | }, 154 | ".rounded": { 155 | borderRadius: 30, 156 | borderColor: variables.inputSuccessBorderColor, 157 | }, 158 | ".regular": { 159 | borderColor: variables.inputSuccessBorderColor, 160 | }, 161 | ".underline": { 162 | borderWidth: variables.borderWidth * 2, 163 | borderTopWidth: 0, 164 | borderRightWidth: 0, 165 | borderLeftWidth: 0, 166 | borderColor: variables.inputSuccessBorderColor, 167 | }, 168 | borderColor: variables.inputSuccessBorderColor, 169 | }, 170 | 171 | ".error": { 172 | "NativeBase.Icon": { 173 | color: variables.inputErrorBorderColor, 174 | }, 175 | "NativeBase.IconNB": { 176 | color: variables.inputErrorBorderColor, 177 | }, 178 | ".rounded": { 179 | borderRadius: 30, 180 | borderColor: variables.inputErrorBorderColor, 181 | }, 182 | ".regular": { 183 | borderColor: variables.inputErrorBorderColor, 184 | }, 185 | ".underline": { 186 | borderWidth: variables.borderWidth * 2, 187 | borderTopWidth: 0, 188 | borderRightWidth: 0, 189 | borderLeftWidth: 0, 190 | borderColor: variables.inputErrorBorderColor, 191 | }, 192 | borderColor: variables.inputErrorBorderColor, 193 | }, 194 | ".disabled": { 195 | "NativeBase.Icon": { 196 | color: "#384850", 197 | }, 198 | "NativeBase.IconNB": { 199 | color: "#384850", 200 | }, 201 | }, 202 | 203 | borderWidth: variables.borderWidth * 2, 204 | borderTopWidth: 0, 205 | borderRightWidth: 0, 206 | borderLeftWidth: 0, 207 | borderColor: variables.inputBorderColor, 208 | backgroundColor: "transparent", 209 | flexDirection: "row", 210 | alignItems: "center", 211 | marginLeft: 2, 212 | }; 213 | 214 | return itemTheme; 215 | }; 216 | -------------------------------------------------------------------------------- /src/theme/components/Label.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const labelTheme = { 5 | ".focused": { 6 | width: 0, 7 | }, 8 | fontSize: 17, 9 | }; 10 | 11 | return labelTheme; 12 | }; 13 | -------------------------------------------------------------------------------- /src/theme/components/Left.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const leftTheme = { 5 | flex: 1, 6 | alignSelf: "center", 7 | alignItems: "flex-start", 8 | }; 9 | 10 | return leftTheme; 11 | }; 12 | -------------------------------------------------------------------------------- /src/theme/components/ListItem.js: -------------------------------------------------------------------------------- 1 | import { Platform, PixelRatio } from "react-native"; 2 | 3 | import pickerTheme from "./Picker"; 4 | import variable from "./../variables/platform"; 5 | 6 | export default (variables = variable) => { 7 | const platform = variables.platform; 8 | 9 | const listItemTheme = { 10 | "NativeBase.InputGroup": { 11 | "NativeBase.Icon": { 12 | paddingRight: 5, 13 | }, 14 | "NativeBase.IconNB": { 15 | paddingRight: 5, 16 | }, 17 | "NativeBase.Input": { 18 | paddingHorizontal: 5, 19 | }, 20 | flex: 1, 21 | borderWidth: null, 22 | margin: -10, 23 | borderBottomColor: "transparent", 24 | }, 25 | ".searchBar": { 26 | "NativeBase.Item": { 27 | "NativeBase.Icon": { 28 | backgroundColor: "transparent", 29 | color: variables.dropdownLinkColor, 30 | fontSize: platform === "ios" ? variables.iconFontSize - 10 : variables.iconFontSize - 5, 31 | alignItems: "center", 32 | marginTop: 2, 33 | paddingRight: 8, 34 | }, 35 | "NativeBase.IconNB": { 36 | backgroundColor: "transparent", 37 | color: null, 38 | alignSelf: "center", 39 | }, 40 | "NativeBase.Input": { 41 | alignSelf: "center", 42 | }, 43 | alignSelf: "center", 44 | alignItems: "center", 45 | justifyContent: "flex-start", 46 | flex: 1, 47 | height: platform === "ios" ? 30 : 40, 48 | borderColor: "transparent", 49 | backgroundColor: "#fff", 50 | borderRadius: 5, 51 | }, 52 | "NativeBase.Button": { 53 | ".transparent": { 54 | "NativeBase.Text": { 55 | fontWeight: "500", 56 | }, 57 | paddingHorizontal: null, 58 | paddingLeft: platform === "ios" ? 10 : null, 59 | }, 60 | paddingHorizontal: platform === "ios" ? undefined : null, 61 | width: platform === "ios" ? undefined : 0, 62 | height: platform === "ios" ? undefined : 0, 63 | }, 64 | backgroundColor: variables.toolbarInputColor, 65 | padding: 10, 66 | marginLeft: null, 67 | }, 68 | "NativeBase.CheckBox": { 69 | marginLeft: -10, 70 | marginRight: 10, 71 | }, 72 | ".first": { 73 | ".itemHeader": { 74 | paddingTop: variables.listItemPadding + 3, 75 | }, 76 | }, 77 | ".itemHeader": { 78 | ".first": { 79 | paddingTop: variables.listItemPadding + 3, 80 | }, 81 | borderBottomWidth: platform === "ios" ? variables.borderWidth : null, 82 | marginLeft: null, 83 | padding: variables.listItemPadding, 84 | paddingLeft: variables.listItemPadding + 5, 85 | paddingTop: platform === "ios" ? variables.listItemPadding + 25 : undefined, 86 | paddingBottom: platform === "android" ? variables.listItemPadding + 20 : undefined, 87 | flexDirection: "row", 88 | borderColor: variables.listBorderColor, 89 | "NativeBase.Text": { 90 | fontSize: 14, 91 | color: platform === "ios" ? undefined : variables.listNoteColor, 92 | }, 93 | }, 94 | ".itemDivider": { 95 | borderBottomWidth: null, 96 | marginLeft: null, 97 | padding: variables.listItemPadding, 98 | paddingLeft: variables.listItemPadding + 5, 99 | backgroundColor: variables.listDividerBg, 100 | flexDirection: "row", 101 | borderColor: variables.listBorderColor, 102 | }, 103 | ".selected": { 104 | "NativeBase.Left": { 105 | "NativeBase.Text": { 106 | color: variables.brandPrimary, 107 | }, 108 | }, 109 | "NativeBase.Text": { 110 | color: variables.brandPrimary, 111 | }, 112 | }, 113 | "NativeBase.Left": { 114 | "NativeBase.Body": { 115 | "NativeBase.Text": { 116 | ".note": { 117 | color: variables.listNoteColor, 118 | fontWeight: "200", 119 | }, 120 | fontWeight: "600", 121 | }, 122 | marginLeft: 10, 123 | alignItems: null, 124 | alignSelf: null, 125 | }, 126 | "NativeBase.Icon": { 127 | width: variables.iconFontSize - 10, 128 | fontSize: variables.iconFontSize - 10, 129 | }, 130 | "NativeBase.IconNB": { 131 | width: variables.iconFontSize - 10, 132 | fontSize: variables.iconFontSize - 10, 133 | }, 134 | "NativeBase.Text": { 135 | marginLeft: 10, 136 | alignSelf: "center", 137 | }, 138 | flexDirection: "row", 139 | }, 140 | "NativeBase.Body": { 141 | "NativeBase.Text": { 142 | marginHorizontal: variables.listItemPadding, 143 | ".note": { 144 | color: variables.listNoteColor, 145 | fontWeight: "200", 146 | }, 147 | }, 148 | alignSelf: null, 149 | alignItems: null, 150 | }, 151 | "NativeBase.Right": { 152 | "NativeBase.Badge": { 153 | alignSelf: null, 154 | }, 155 | "NativeBase.PickerNB": { 156 | "NativeBase.Button": { 157 | marginRight: -15, 158 | "NativeBase.Text": { 159 | color: variables.topTabBarActiveTextColor, 160 | }, 161 | }, 162 | }, 163 | "NativeBase.Button": { 164 | alignSelf: null, 165 | ".transparent": { 166 | "NativeBase.Text": { 167 | color: variables.topTabBarActiveTextColor, 168 | }, 169 | }, 170 | }, 171 | "NativeBase.Icon": { 172 | alignSelf: null, 173 | fontSize: variables.iconFontSize - 8, 174 | color: "#c9c8cd", 175 | }, 176 | "NativeBase.IconNB": { 177 | alignSelf: null, 178 | fontSize: variables.iconFontSize - 8, 179 | color: "#c9c8cd", 180 | }, 181 | "NativeBase.Text": { 182 | ".note": { 183 | color: variables.listNoteColor, 184 | fontWeight: "200", 185 | }, 186 | alignSelf: null, 187 | }, 188 | "NativeBase.Thumbnail": { 189 | alignSelf: null, 190 | }, 191 | "NativeBase.Image": { 192 | alignSelf: null, 193 | }, 194 | "NativeBase.Radio": { 195 | alignSelf: null, 196 | }, 197 | "NativeBase.Checkbox": { 198 | alignSelf: null, 199 | }, 200 | "NativeBase.Switch": { 201 | alignSelf: null, 202 | }, 203 | padding: null, 204 | flex: 0.28, 205 | }, 206 | "NativeBase.Text": { 207 | ".note": { 208 | color: variables.listNoteColor, 209 | fontWeight: "200", 210 | }, 211 | alignSelf: "center", 212 | }, 213 | 214 | ".last": { 215 | marginLeft: -(variables.listItemPadding + 5), 216 | paddingLeft: (variables.listItemPadding + 5) * 2, 217 | top: 1, 218 | }, 219 | 220 | ".avatar": { 221 | "NativeBase.Left": { 222 | flex: 0, 223 | }, 224 | "NativeBase.Body": { 225 | "NativeBase.Text": { 226 | marginLeft: null, 227 | }, 228 | flex: 1, 229 | paddingVertical: variables.listItemPadding, 230 | borderBottomWidth: variables.borderWidth, 231 | borderColor: variables.listBorderColor, 232 | marginLeft: variables.listItemPadding + 5, 233 | }, 234 | "NativeBase.Right": { 235 | "NativeBase.Text": { 236 | ".note": { 237 | fontSize: variables.noteFontSize - 2, 238 | }, 239 | }, 240 | flex: 0, 241 | paddingRight: variables.listItemPadding + 5, 242 | alignSelf: "stretch", 243 | paddingVertical: variables.listItemPadding, 244 | borderBottomWidth: variables.borderWidth, 245 | borderColor: variables.listBorderColor, 246 | }, 247 | borderBottomWidth: null, 248 | paddingVertical: null, 249 | paddingRight: null, 250 | }, 251 | 252 | ".thumbnail": { 253 | "NativeBase.Left": { 254 | flex: 0, 255 | }, 256 | "NativeBase.Body": { 257 | "NativeBase.Text": { 258 | marginLeft: null, 259 | }, 260 | flex: 1, 261 | paddingVertical: variables.listItemPadding + 5, 262 | borderBottomWidth: variables.borderWidth, 263 | borderColor: variables.listBorderColor, 264 | marginLeft: variables.listItemPadding + 5, 265 | }, 266 | "NativeBase.Right": { 267 | "NativeBase.Button": { 268 | ".transparent": { 269 | "NativeBase.Text": { 270 | fontSize: variables.listNoteSize, 271 | color: variables.sTabBarActiveTextColor, 272 | }, 273 | }, 274 | height: null, 275 | }, 276 | flex: 0, 277 | justifyContent: "center", 278 | alignSelf: "stretch", 279 | paddingRight: variables.listItemPadding + 5, 280 | paddingVertical: variables.listItemPadding + 5, 281 | borderBottomWidth: variables.borderWidth, 282 | borderColor: variables.listBorderColor, 283 | }, 284 | borderBottomWidth: null, 285 | paddingVertical: null, 286 | paddingRight: null, 287 | }, 288 | 289 | ".icon": { 290 | ".last": { 291 | "NativeBase.Body": { 292 | borderBottomWidth: null, 293 | }, 294 | "NativeBase.Right": { 295 | borderBottomWidth: null, 296 | }, 297 | borderBottomWidth: variables.borderWidth, 298 | borderColor: variables.listBorderColor, 299 | }, 300 | "NativeBase.Left": { 301 | "NativeBase.Button": { 302 | "NativeBase.IconNB": { 303 | marginHorizontal: null, 304 | fontSize: variables.iconFontSize - 5, 305 | }, 306 | "NativeBase.Icon": { 307 | marginHorizontal: null, 308 | fontSize: variables.iconFontSize - 8, 309 | }, 310 | alignSelf: "center", 311 | height: 29, 312 | width: 29, 313 | borderRadius: 6, 314 | paddingVertical: null, 315 | paddingHorizontal: null, 316 | alignItems: "center", 317 | justifyContent: "center", 318 | }, 319 | "NativeBase.Icon": { 320 | width: variables.iconFontSize - 5, 321 | fontSize: variables.iconFontSize - 2, 322 | }, 323 | "NativeBase.IconNB": { 324 | width: variables.iconFontSize - 5, 325 | fontSize: variables.iconFontSize - 2, 326 | }, 327 | paddingRight: variables.listItemPadding + 5, 328 | flex: 0, 329 | height: 44, 330 | justifyContent: "center", 331 | alignItems: "center", 332 | }, 333 | "NativeBase.Body": { 334 | "NativeBase.Text": { 335 | marginLeft: null, 336 | fontSize: 17, 337 | }, 338 | flex: 1, 339 | height: 44, 340 | justifyContent: "center", 341 | borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), 342 | borderColor: variables.listBorderColor, 343 | }, 344 | "NativeBase.Right": { 345 | "NativeBase.Text": { 346 | textAlign: "center", 347 | color: "#8F8E95", 348 | fontSize: 17, 349 | }, 350 | "NativeBase.IconNB": { 351 | color: "#C8C7CC", 352 | fontSize: variables.iconFontSize - 10, 353 | alignSelf: "center", 354 | paddingLeft: 10, 355 | paddingTop: 3, 356 | }, 357 | "NativeBase.Icon": { 358 | color: "#C8C7CC", 359 | fontSize: variables.iconFontSize - 10, 360 | alignSelf: "center", 361 | paddingLeft: 10, 362 | paddingTop: 3, 363 | }, 364 | "NativeBase.Switch": { 365 | marginRight: Platform.OS === "ios" ? undefined : -5, 366 | alignSelf: null, 367 | }, 368 | "NativeBase.PickerNB": { 369 | ...pickerTheme(), 370 | }, 371 | flexDirection: "row", 372 | alignItems: "center", 373 | flex: 0, 374 | alignSelf: "stretch", 375 | height: 44, 376 | justifyContent: "flex-end", 377 | borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), 378 | borderColor: variables.listBorderColor, 379 | paddingRight: variables.listItemPadding + 5, 380 | }, 381 | borderBottomWidth: null, 382 | paddingVertical: null, 383 | paddingRight: null, 384 | height: 44, 385 | justifyContent: "center", 386 | }, 387 | ".noBorder": { 388 | borderBottomWidth: null, 389 | }, 390 | alignItems: "center", 391 | flexDirection: "row", 392 | paddingRight: variables.listItemPadding + 5, 393 | paddingVertical: variables.listItemPadding + 3, 394 | marginLeft: variables.listItemPadding + 5, 395 | borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), 396 | backgroundColor: variables.listBg, 397 | borderColor: variables.listBorderColor, 398 | }; 399 | 400 | return listItemTheme; 401 | }; 402 | -------------------------------------------------------------------------------- /src/theme/components/Picker.android.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const pickerTheme = { 5 | ".note": { 6 | color: "#8F8E95", 7 | }, 8 | width: 90, 9 | marginRight: -4, 10 | }; 11 | 12 | return pickerTheme; 13 | }; 14 | -------------------------------------------------------------------------------- /src/theme/components/Picker.ios.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const pickerTheme = {}; 5 | 6 | return pickerTheme; 7 | }; 8 | -------------------------------------------------------------------------------- /src/theme/components/Radio.js: -------------------------------------------------------------------------------- 1 | import { Platform } from "react-native"; 2 | 3 | import variable from "./../variables/platform"; 4 | 5 | export default (variables = variable) => { 6 | const radioTheme = { 7 | ".selected": { 8 | "NativeBase.IconNB": { 9 | color: Platform.OS === "ios" ? variables.brandPrimary : variables.radioSelectedColorAndroid, 10 | lineHeight: Platform.OS === "ios" ? 25 : variables.radioBtnLineHeight, 11 | height: Platform.OS === "ios" ? 20 : undefined, 12 | }, 13 | }, 14 | "NativeBase.IconNB": { 15 | color: Platform.OS === "ios" ? "transparent" : undefined, 16 | lineHeight: Platform.OS === "ios" ? undefined : variables.radioBtnLineHeight, 17 | fontSize: Platform.OS === "ios" ? undefined : variables.radioBtnSize, 18 | }, 19 | }; 20 | 21 | return radioTheme; 22 | }; 23 | -------------------------------------------------------------------------------- /src/theme/components/Right.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const rightTheme = { 5 | "NativeBase.Button": { 6 | alignSelf: null, 7 | }, 8 | flex: 1, 9 | alignSelf: "center", 10 | alignItems: "flex-end", 11 | }; 12 | 13 | return rightTheme; 14 | }; 15 | -------------------------------------------------------------------------------- /src/theme/components/Segment.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const platform = variables.platform; 5 | 6 | const segmentTheme = { 7 | height: 45, 8 | borderColor: variables.segmentBorderColorMain, 9 | flexDirection: "row", 10 | justifyContent: "center", 11 | backgroundColor: variables.segmentBackgroundColor, 12 | "NativeBase.Button": { 13 | alignSelf: "center", 14 | borderRadius: 0, 15 | paddingHorizontal: 20, 16 | height: 30, 17 | backgroundColor: "transparent", 18 | borderWidth: 1, 19 | borderLeftWidth: 0, 20 | borderColor: variables.segmentBorderColor, 21 | elevation: 0, 22 | ".active": { 23 | backgroundColor: variables.segmentActiveBackgroundColor, 24 | "NativeBase.Text": { 25 | color: variables.segmentActiveTextColor, 26 | }, 27 | }, 28 | ".first": { 29 | borderTopLeftRadius: platform === "ios" ? 5 : undefined, 30 | borderBottomLeftRadius: platform === "ios" ? 5 : undefined, 31 | borderLeftWidth: 1, 32 | }, 33 | ".last": { 34 | borderTopRightRadius: platform === "ios" ? 5 : undefined, 35 | borderBottomRightRadius: platform === "ios" ? 5 : undefined, 36 | }, 37 | "NativeBase.Text": { 38 | color: variables.segmentTextColor, 39 | fontSize: 14, 40 | }, 41 | }, 42 | }; 43 | 44 | return segmentTheme; 45 | }; 46 | -------------------------------------------------------------------------------- /src/theme/components/Separator.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const theme = { 5 | ".group": { 6 | height: 50, 7 | paddingVertical: variables.listItemPadding - 8, 8 | paddingTop: variables.listItemPadding + 12, 9 | ".bordered": { 10 | height: 50, 11 | paddingVertical: variables.listItemPadding - 8, 12 | paddingTop: variables.listItemPadding + 12, 13 | }, 14 | }, 15 | ".bordered": { 16 | ".noTopBorder": { 17 | borderTopWidth: 0, 18 | }, 19 | ".noBottomBorder": { 20 | borderBottomWidth: 0, 21 | }, 22 | height: 35, 23 | paddingTop: variables.listItemPadding + 2, 24 | paddingBottom: variables.listItemPadding, 25 | borderBottomWidth: variables.borderWidth, 26 | borderTopWidth: variables.borderWidth, 27 | borderColor: variables.listBorderColor, 28 | }, 29 | "NativeBase.Text": { 30 | fontSize: variables.tabBarTextSize - 2, 31 | color: "#777", 32 | }, 33 | ".noTopBorder": { 34 | borderTopWidth: 0, 35 | }, 36 | ".noBottomBorder": { 37 | borderBottomWidth: 0, 38 | }, 39 | height: 38, 40 | backgroundColor: "#F0EFF5", 41 | flex: 1, 42 | justifyContent: "center", 43 | paddingLeft: variables.listItemPadding + 5, 44 | }; 45 | 46 | return theme; 47 | }; 48 | -------------------------------------------------------------------------------- /src/theme/components/Spinner.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const spinnerTheme = { 5 | height: 80, 6 | }; 7 | 8 | return spinnerTheme; 9 | }; 10 | -------------------------------------------------------------------------------- /src/theme/components/Subtitle.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const subtitleTheme = { 5 | fontSize: variables.subTitleFontSize, 6 | fontFamily: variables.titleFontfamily, 7 | color: variables.subtitleColor, 8 | textAlign: "center", 9 | }; 10 | 11 | return subtitleTheme; 12 | }; 13 | -------------------------------------------------------------------------------- /src/theme/components/SwipeRow.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const swipeRowTheme = { 5 | "NativeBase.ListItem": { 6 | ".list": { 7 | backgroundColor: "#FFF", 8 | }, 9 | marginLeft: 0, 10 | }, 11 | "NativeBase.Left": { 12 | flex: 0, 13 | alignSelf: null, 14 | alignItems: null, 15 | "NativeBase.Button": { 16 | flex: 1, 17 | alignItems: "center", 18 | justifyContent: "center", 19 | alignSelf: "stretch", 20 | borderRadius: 0, 21 | }, 22 | }, 23 | "NativeBase.Right": { 24 | flex: 0, 25 | alignSelf: null, 26 | alignItems: null, 27 | "NativeBase.Button": { 28 | flex: 1, 29 | alignItems: "center", 30 | justifyContent: "center", 31 | alignSelf: "stretch", 32 | borderRadius: 0, 33 | }, 34 | }, 35 | "NativeBase.Button": { 36 | flex: 1, 37 | height: null, 38 | alignItems: "center", 39 | justifyContent: "center", 40 | alignSelf: "stretch", 41 | borderRadius: 0, 42 | }, 43 | }; 44 | 45 | return swipeRowTheme; 46 | }; 47 | -------------------------------------------------------------------------------- /src/theme/components/Switch.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const switchTheme = { 5 | marginVertical: -5, 6 | }; 7 | 8 | return switchTheme; 9 | }; 10 | -------------------------------------------------------------------------------- /src/theme/components/Tab.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const tabTheme = { 5 | flex: 1, 6 | backgroundColor: "#FFF", 7 | }; 8 | 9 | return tabTheme; 10 | }; 11 | -------------------------------------------------------------------------------- /src/theme/components/TabBar.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const tabBarTheme = { 5 | ".tabIcon": { 6 | height: undefined, 7 | }, 8 | ".vertical": { 9 | height: 60, 10 | }, 11 | "NativeBase.Button": { 12 | ".transparent": { 13 | "NativeBase.Text": { 14 | fontSize: variables.tabFontSize, 15 | color: variables.sTabBarActiveTextColor, 16 | fontWeight: "400", 17 | }, 18 | "NativeBase.IconNB": { 19 | color: variables.sTabBarActiveTextColor, 20 | }, 21 | }, 22 | "NativeBase.IconNB": { 23 | color: variables.sTabBarActiveTextColor, 24 | }, 25 | "NativeBase.Text": { 26 | fontSize: variables.tabFontSize, 27 | color: variables.sTabBarActiveTextColor, 28 | fontWeight: "400", 29 | }, 30 | ".isTabActive": { 31 | "NativeBase.Text": { 32 | fontWeight: "900", 33 | }, 34 | }, 35 | flex: 1, 36 | alignSelf: "stretch", 37 | alignItems: "center", 38 | justifyContent: "center", 39 | borderRadius: null, 40 | borderBottomColor: "transparent", 41 | backgroundColor: variables.tabBgColor, 42 | }, 43 | height: 45, 44 | flexDirection: "row", 45 | justifyContent: "space-around", 46 | borderWidth: 1, 47 | borderTopWidth: 0, 48 | borderLeftWidth: 0, 49 | borderRightWidth: 0, 50 | borderBottomColor: "#ccc", 51 | backgroundColor: variables.tabBgColor, 52 | }; 53 | 54 | return tabBarTheme; 55 | }; 56 | -------------------------------------------------------------------------------- /src/theme/components/TabContainer.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | import { Platform } from "react-native"; 3 | 4 | export default (variables = variable) => { 5 | const platformStyle = variables.platformStyle; 6 | 7 | const tabContainerTheme = { 8 | elevation: 3, 9 | height: 50, 10 | flexDirection: "row", 11 | shadowColor: platformStyle === "material" ? "#000" : undefined, 12 | shadowOffset: platformStyle === "material" ? { width: 0, height: 2 } : undefined, 13 | shadowOpacity: platformStyle === "material" ? 0.2 : undefined, 14 | shadowRadius: platformStyle === "material" ? 1.2 : undefined, 15 | justifyContent: "space-around", 16 | borderBottomWidth: Platform.OS === "ios" ? variables.borderWidth : 0, 17 | borderColor: variables.topTabBarBorderColor, 18 | }; 19 | 20 | return tabContainerTheme; 21 | }; 22 | -------------------------------------------------------------------------------- /src/theme/components/TabHeading.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const platform = variables.platform; 5 | 6 | const tabHeadingTheme = { 7 | flexDirection: "row", 8 | backgroundColor: variables.tabDefaultBg, 9 | flex: 1, 10 | alignItems: "center", 11 | justifyContent: "center", 12 | ".scrollable": { 13 | paddingHorizontal: 20, 14 | flex: platform === "android" ? 0 : 1, 15 | minWidth: platform === "android" ? undefined : 60, 16 | }, 17 | "NativeBase.Text": { 18 | color: variables.topTabBarTextColor, 19 | marginHorizontal: 7, 20 | }, 21 | "NativeBase.Icon": { 22 | color: variables.topTabBarTextColor, 23 | fontSize: platform === "ios" ? 26 : undefined, 24 | }, 25 | ".active": { 26 | "NativeBase.Text": { 27 | color: variables.topTabBarActiveTextColor, 28 | fontWeight: "600", 29 | }, 30 | "NativeBase.Icon": { 31 | color: variables.topTabBarActiveTextColor, 32 | }, 33 | }, 34 | }; 35 | 36 | return tabHeadingTheme; 37 | }; 38 | -------------------------------------------------------------------------------- /src/theme/components/Text.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const textTheme = { 5 | fontSize: variables.DefaultFontSize - 1, 6 | fontFamily: variables.fontFamily, 7 | color: variables.textColor, 8 | ".note": { 9 | color: "#a7a7a7", 10 | fontSize: variables.noteFontSize, 11 | }, 12 | }; 13 | 14 | return textTheme; 15 | }; 16 | -------------------------------------------------------------------------------- /src/theme/components/Textarea.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const textAreaTheme = { 5 | ".underline": { 6 | borderBottomWidth: variables.borderWidth, 7 | marginTop: 5, 8 | borderColor: variables.inputBorderColor, 9 | }, 10 | ".bordered": { 11 | borderWidth: 1, 12 | marginTop: 5, 13 | borderColor: variables.inputBorderColor, 14 | }, 15 | color: variables.textColor, 16 | paddingLeft: 10, 17 | paddingRight: 5, 18 | fontSize: 15, 19 | textAlignVertical: "top", 20 | }; 21 | 22 | return textAreaTheme; 23 | }; 24 | -------------------------------------------------------------------------------- /src/theme/components/Thumbnail.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const thumbnailTheme = { 5 | ".square": { 6 | borderRadius: 0, 7 | ".small": { 8 | width: 36, 9 | height: 36, 10 | borderRadius: 0, 11 | }, 12 | ".large": { 13 | width: 80, 14 | height: 80, 15 | borderRadius: 0, 16 | }, 17 | }, 18 | ".small": { 19 | width: 36, 20 | height: 36, 21 | borderRadius: 18, 22 | ".square": { 23 | borderRadius: 0, 24 | }, 25 | }, 26 | ".large": { 27 | width: 80, 28 | height: 80, 29 | borderRadius: 40, 30 | ".square": { 31 | borderRadius: 0, 32 | }, 33 | }, 34 | width: 56, 35 | height: 56, 36 | borderRadius: 28, 37 | }; 38 | 39 | return thumbnailTheme; 40 | }; 41 | -------------------------------------------------------------------------------- /src/theme/components/Title.js: -------------------------------------------------------------------------------- 1 | import { Platform } from "react-native"; 2 | 3 | import variable from "./../variables/platform"; 4 | 5 | export default (variables = variable) => { 6 | const titleTheme = { 7 | fontSize: variables.titleFontSize, 8 | fontFamily: variables.titleFontfamily, 9 | color: variables.titleFontColor, 10 | fontWeight: Platform.OS === "ios" ? "600" : undefined, 11 | textAlign: "center", 12 | }; 13 | 14 | return titleTheme; 15 | }; 16 | -------------------------------------------------------------------------------- /src/theme/components/Toast.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const platform = variables.platform; 5 | 6 | const toastTheme = { 7 | ".danger": { 8 | backgroundColor: variables.brandDanger, 9 | }, 10 | ".warning": { 11 | backgroundColor: variables.brandWarning, 12 | }, 13 | ".success": { 14 | backgroundColor: variables.brandSuccess, 15 | }, 16 | backgroundColor: "rgba(0,0,0,0.8)", 17 | borderRadius: platform === "ios" ? 5 : 0, 18 | flexDirection: "row", 19 | justifyContent: "space-between", 20 | alignItems: "center", 21 | padding: 10, 22 | minHeight: 50, 23 | "NativeBase.Text": { 24 | color: "#fff", 25 | flex: 1, 26 | }, 27 | "NativeBase.Button": { 28 | backgroundColor: "transparent", 29 | height: 30, 30 | elevation: 0, 31 | "NativeBase.Text": { 32 | fontSize: 14, 33 | }, 34 | }, 35 | }; 36 | 37 | return toastTheme; 38 | }; 39 | -------------------------------------------------------------------------------- /src/theme/components/View.js: -------------------------------------------------------------------------------- 1 | import variable from "./../variables/platform"; 2 | 3 | export default (variables = variable) => { 4 | const viewTheme = { 5 | ".padder": { 6 | padding: variables.contentPadding, 7 | }, 8 | }; 9 | 10 | return viewTheme; 11 | }; 12 | -------------------------------------------------------------------------------- /src/theme/components/index.js: -------------------------------------------------------------------------------- 1 | import _ from "lodash"; 2 | import bodyTheme from "./Body"; 3 | import leftTheme from "./Left"; 4 | import rightTheme from "./Right"; 5 | import headerTheme from "./Header"; 6 | import switchTheme from "./Switch"; 7 | import thumbnailTheme from "./Thumbnail"; 8 | import containerTheme from "./Container"; 9 | import contentTheme from "./Content"; 10 | import buttonTheme from "./Button"; 11 | import titleTheme from "./Title"; 12 | import subtitleTheme from "./Subtitle"; 13 | import inputGroupTheme from "./InputGroup"; 14 | import badgeTheme from "./Badge"; 15 | import checkBoxTheme from "./CheckBox"; 16 | import cardTheme from "./Card"; 17 | import radioTheme from "./Radio"; 18 | import h3Theme from "./H3"; 19 | import h2Theme from "./H2"; 20 | import h1Theme from "./H1"; 21 | import footerTheme from "./Footer"; 22 | import footerTabTheme from "./FooterTab"; 23 | import fabTheme from "./Fab"; 24 | import itemTheme from "./Item"; 25 | import labelTheme from "./Label"; 26 | import textAreaTheme from "./Textarea"; 27 | import textTheme from "./Text"; 28 | import toastTheme from "./Toast"; 29 | import tabTheme from "./Tab"; 30 | import tabBarTheme from "./TabBar"; 31 | import tabContainerTheme from "./TabContainer"; 32 | import viewTheme from "./View"; 33 | import tabHeadingTheme from "./TabHeading"; 34 | import iconTheme from "./Icon"; 35 | import inputTheme from "./Input"; 36 | import swipeRowTheme from "./SwipeRow"; 37 | import segmentTheme from "./Segment"; 38 | import spinnerTheme from "./Spinner"; 39 | import cardItemTheme from "./CardItem"; 40 | import listItemTheme from "./ListItem"; 41 | import formTheme from "./Form"; 42 | import separatorTheme from "./Separator"; 43 | import variable from "./../variables/platform"; 44 | 45 | export default (variables = variable) => { 46 | const theme = { 47 | variables, 48 | "NativeBase.Left": { 49 | ...leftTheme(variables), 50 | }, 51 | "NativeBase.Right": { 52 | ...rightTheme(variables), 53 | }, 54 | "NativeBase.Body": { 55 | ...bodyTheme(variables), 56 | }, 57 | 58 | "NativeBase.Header": { 59 | ...headerTheme(variables), 60 | }, 61 | 62 | "NativeBase.Button": { 63 | ...buttonTheme(variables), 64 | }, 65 | 66 | "NativeBase.Title": { 67 | ...titleTheme(variables), 68 | }, 69 | "NativeBase.Subtitle": { 70 | ...subtitleTheme(variables), 71 | }, 72 | 73 | "NativeBase.InputGroup": { 74 | ...inputGroupTheme(variables), 75 | }, 76 | 77 | "NativeBase.Input": { 78 | ...inputTheme(variables), 79 | }, 80 | 81 | "NativeBase.Badge": { 82 | ...badgeTheme(variables), 83 | }, 84 | 85 | "NativeBase.CheckBox": { 86 | ...checkBoxTheme(variables), 87 | }, 88 | 89 | "NativeBase.Radio": { 90 | ...radioTheme(variables), 91 | }, 92 | 93 | "NativeBase.Card": { 94 | ...cardTheme(), 95 | }, 96 | 97 | "NativeBase.CardItem": { 98 | ...cardItemTheme(variables), 99 | }, 100 | 101 | "NativeBase.Toast": { 102 | ...toastTheme(variables), 103 | }, 104 | 105 | "NativeBase.H1": { 106 | ...h1Theme(variables), 107 | }, 108 | "NativeBase.H2": { 109 | ...h2Theme(variables), 110 | }, 111 | "NativeBase.H3": { 112 | ...h3Theme(variables), 113 | }, 114 | "NativeBase.Form": { 115 | ...formTheme(variables), 116 | }, 117 | 118 | "NativeBase.Container": { 119 | ...containerTheme(variables), 120 | }, 121 | "NativeBase.Content": { 122 | ...contentTheme(variables), 123 | }, 124 | 125 | "NativeBase.Footer": { 126 | ...footerTheme(variables), 127 | }, 128 | 129 | "NativeBase.Tabs": { 130 | flex: 1, 131 | }, 132 | 133 | "NativeBase.FooterTab": { 134 | ...footerTabTheme(variables), 135 | }, 136 | 137 | "NativeBase.ListItem": { 138 | ...listItemTheme(variables), 139 | }, 140 | 141 | "NativeBase.ListItem1": { 142 | ...listItemTheme(variables), 143 | }, 144 | 145 | "NativeBase.Icon": { 146 | ...iconTheme(variables), 147 | }, 148 | "NativeBase.IconNB": { 149 | ...iconTheme(variables), 150 | }, 151 | "NativeBase.Text": { 152 | ...textTheme(variables), 153 | }, 154 | "NativeBase.Spinner": { 155 | ...spinnerTheme(variables), 156 | }, 157 | 158 | "NativeBase.Fab": { 159 | ...fabTheme(variables), 160 | }, 161 | 162 | "NativeBase.Item": { 163 | ...itemTheme(variables), 164 | }, 165 | 166 | "NativeBase.Label": { 167 | ...labelTheme(variables), 168 | }, 169 | 170 | "NativeBase.Textarea": { 171 | ...textAreaTheme(variables), 172 | }, 173 | 174 | "NativeBase.PickerNB": { 175 | "NativeBase.Button": { 176 | "NativeBase.Text": {}, 177 | }, 178 | }, 179 | 180 | "NativeBase.Tab": { 181 | ...tabTheme(variables), 182 | }, 183 | 184 | "NativeBase.Segment": { 185 | ...segmentTheme(variables), 186 | }, 187 | 188 | "NativeBase.TabBar": { 189 | ...tabBarTheme(variables), 190 | }, 191 | "NativeBase.ViewNB": { 192 | ...viewTheme(variables), 193 | }, 194 | "NativeBase.TabHeading": { 195 | ...tabHeadingTheme(variables), 196 | }, 197 | "NativeBase.TabContainer": { 198 | ...tabContainerTheme(variables), 199 | }, 200 | "NativeBase.Switch": { 201 | ...switchTheme(variables), 202 | }, 203 | "NativeBase.Separator": { 204 | ...separatorTheme(variables), 205 | }, 206 | "NativeBase.SwipeRow": { 207 | ...swipeRowTheme(variables), 208 | }, 209 | "NativeBase.Thumbnail": { 210 | ...thumbnailTheme(variables), 211 | }, 212 | }; 213 | 214 | const cssifyTheme = (grandparent, parent, parentKey) => { 215 | _.forEach(parent, (style, styleName) => { 216 | // console.log('styleName', styleName); 217 | // console.log('parentKey', parentKey); 218 | if (styleName.indexOf(".") === 0 && parentKey && parentKey.indexOf(".") === 0) { 219 | if (grandparent) { 220 | if (!grandparent[styleName]) { 221 | grandparent[styleName] = {}; 222 | } else { 223 | grandparent[styleName][parentKey] = style; 224 | } 225 | } 226 | } 227 | if (style && typeof style === "object") { 228 | cssifyTheme(parent, style, styleName); 229 | } 230 | }); 231 | }; 232 | 233 | cssifyTheme(null, theme, null); 234 | 235 | return theme; 236 | }; 237 | -------------------------------------------------------------------------------- /src/theme/variables/commonColor.js: -------------------------------------------------------------------------------- 1 | import color from "color"; 2 | 3 | import { Platform, Dimensions, PixelRatio } from "react-native"; 4 | 5 | const deviceHeight = Dimensions.get("window").height; 6 | const deviceWidth = Dimensions.get("window").width; 7 | const platform = Platform.OS; 8 | const platformStyle = undefined; 9 | 10 | export default { 11 | platformStyle, 12 | platform, 13 | // AndroidRipple 14 | androidRipple: true, 15 | androidRippleColor: "rgba(256, 256, 256, 0.3)", 16 | androidRippleColorDark: "rgba(0, 0, 0, 0.15)", 17 | 18 | // Badge 19 | badgeBg: "#ED1727", 20 | badgeColor: "#fff", 21 | // New Variable 22 | badgePadding: platform === "ios" ? 3 : 0, 23 | 24 | // Button 25 | btnFontFamily: platform === "ios" ? "System" : "Roboto_medium", 26 | btnDisabledBg: "#b5b5b5", 27 | btnDisabledClr: "#f1f1f1", 28 | 29 | // CheckBox 30 | CheckboxRadius: platform === "ios" ? 13 : 0, 31 | CheckboxBorderWidth: platform === "ios" ? 1 : 2, 32 | CheckboxPaddingLeft: platform === "ios" ? 4 : 2, 33 | CheckboxPaddingBottom: platform === "ios" ? 0 : 5, 34 | CheckboxIconSize: platform === "ios" ? 21 : 14, 35 | CheckboxIconMarginTop: platform === "ios" ? undefined : 1, 36 | CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 18, 37 | DefaultFontSize: 17, 38 | checkboxBgColor: "#039BE5", 39 | checkboxSize: 20, 40 | checkboxTickColor: "#fff", 41 | 42 | // Segment 43 | segmentBackgroundColor: "#3F51B5", 44 | segmentActiveBackgroundColor: "#fff", 45 | segmentTextColor: "#fff", 46 | segmentActiveTextColor: "#3F51B5", 47 | segmentBorderColor: "#fff", 48 | segmentBorderColorMain: "#3F51B5", 49 | 50 | // New Variable 51 | get defaultTextColor() { 52 | return this.textColor; 53 | }, 54 | 55 | get btnPrimaryBg() { 56 | return this.brandPrimary; 57 | }, 58 | get btnPrimaryColor() { 59 | return this.inverseTextColor; 60 | }, 61 | get btnInfoBg() { 62 | return this.brandInfo; 63 | }, 64 | get btnInfoColor() { 65 | return this.inverseTextColor; 66 | }, 67 | get btnSuccessBg() { 68 | return this.brandSuccess; 69 | }, 70 | get btnSuccessColor() { 71 | return this.inverseTextColor; 72 | }, 73 | get btnDangerBg() { 74 | return this.brandDanger; 75 | }, 76 | get btnDangerColor() { 77 | return this.inverseTextColor; 78 | }, 79 | get btnWarningBg() { 80 | return this.brandWarning; 81 | }, 82 | get btnWarningColor() { 83 | return this.inverseTextColor; 84 | }, 85 | get btnTextSize() { 86 | return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1; 87 | }, 88 | get btnTextSizeLarge() { 89 | return this.fontSizeBase * 1.5; 90 | }, 91 | get btnTextSizeSmall() { 92 | return this.fontSizeBase * 0.8; 93 | }, 94 | get borderRadiusLarge() { 95 | return this.fontSizeBase * 3.8; 96 | }, 97 | 98 | buttonPadding: 6, 99 | 100 | get iconSizeLarge() { 101 | return this.iconFontSize * 1.5; 102 | }, 103 | get iconSizeSmall() { 104 | return this.iconFontSize * 0.6; 105 | }, 106 | 107 | // Card 108 | cardDefaultBg: "#fff", 109 | 110 | // Color 111 | brandPrimary: "#2874F0", 112 | brandInfo: "#62B1F6", 113 | brandSuccess: "#5cb85c", 114 | brandDanger: "#d9534f", 115 | brandWarning: "#f0ad4e", 116 | brandSidebar: "#252932", 117 | 118 | // Font 119 | fontFamily: platform === "ios" ? "System" : "Roboto", 120 | fontSizeBase: 15, 121 | 122 | get fontSizeH1() { 123 | return this.fontSizeBase * 1.8; 124 | }, 125 | get fontSizeH2() { 126 | return this.fontSizeBase * 1.6; 127 | }, 128 | get fontSizeH3() { 129 | return this.fontSizeBase * 1.4; 130 | }, 131 | 132 | // Footer 133 | footerHeight: 55, 134 | footerDefaultBg: "#2874F0", 135 | 136 | // FooterTab 137 | tabBarTextColor: "#8bb3f4", 138 | tabBarTextSize: platform === "ios" ? 14 : 11, 139 | activeTab: platform === "ios" ? "#007aff" : "#fff", 140 | sTabBarActiveTextColor: "#007aff", 141 | tabBarActiveTextColor: "#fff", 142 | tabActiveBgColor: platform === "ios" ? "#1569f4" : undefined, 143 | 144 | // Tab 145 | tabDefaultBg: "#2874F0", 146 | topTabBarTextColor: "#b3c7f9", 147 | topTabBarActiveTextColor: "#fff", 148 | topTabActiveBgColor: platform === "ios" ? "#1569f4" : undefined, 149 | topTabBarBorderColor: "#fff", 150 | topTabBarActiveBorderColor: "#fff", 151 | 152 | // Header 153 | toolbarBtnColor: "#fff", 154 | toolbarDefaultBg: "#2874F0", 155 | toolbarHeight: platform === "ios" ? 64 : 56, 156 | toolbarIconSize: platform === "ios" ? 20 : 22, 157 | toolbarSearchIconSize: platform === "ios" ? 20 : 23, 158 | toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff", 159 | searchBarHeight: platform === "ios" ? 30 : 40, 160 | toolbarInverseBg: "#222", 161 | toolbarTextColor: "#fff", 162 | iosStatusbar: "light-content", 163 | toolbarDefaultBorder: "#2874F0", 164 | get statusBarColor() { 165 | return color(this.toolbarDefaultBg) 166 | .darken(0.2) 167 | .hex(); 168 | }, 169 | 170 | // Icon 171 | iconFamily: "Ionicons", 172 | iconFontSize: platform === "ios" ? 30 : 28, 173 | iconMargin: 7, 174 | iconHeaderSize: platform === "ios" ? 33 : 24, 175 | 176 | // InputGroup 177 | inputFontSize: 17, 178 | inputBorderColor: "#D9D5DC", 179 | inputSuccessBorderColor: "#2b8339", 180 | inputErrorBorderColor: "#ed2f2f", 181 | 182 | get inputColor() { 183 | return this.textColor; 184 | }, 185 | get inputColorPlaceholder() { 186 | return "#575757"; 187 | }, 188 | 189 | inputGroupMarginBottom: 10, 190 | inputHeightBase: 50, 191 | inputPaddingLeft: 5, 192 | 193 | get inputPaddingLeftIcon() { 194 | return this.inputPaddingLeft * 8; 195 | }, 196 | 197 | // Line Height 198 | btnLineHeight: 19, 199 | lineHeightH1: 32, 200 | lineHeightH2: 27, 201 | lineHeightH3: 22, 202 | iconLineHeight: platform === "ios" ? 37 : 30, 203 | lineHeight: platform === "ios" ? 20 : 24, 204 | 205 | // List 206 | listBorderColor: "#c9c9c9", 207 | listDividerBg: "#f4f4f4", 208 | listItemHeight: 45, 209 | listBtnUnderlayColor: "#DDD", 210 | 211 | // Card 212 | cardBorderColor: "#ccc", 213 | 214 | // Changed Variable 215 | listItemPadding: platform === "ios" ? 10 : 12, 216 | 217 | listNoteColor: "#808080", 218 | listNoteSize: 13, 219 | 220 | // Progress Bar 221 | defaultProgressColor: "#E4202D", 222 | inverseProgressColor: "#1A191B", 223 | 224 | // Radio Button 225 | radioBtnSize: platform === "ios" ? 25 : 23, 226 | radioSelectedColorAndroid: "#5067FF", 227 | 228 | // New Variable 229 | radioBtnLineHeight: platform === "ios" ? 29 : 24, 230 | 231 | radioColor: "#7e7e7e", 232 | 233 | get radioSelectedColor() { 234 | return color(this.radioColor) 235 | .darken(0.2) 236 | .hex(); 237 | }, 238 | 239 | // Spinner 240 | defaultSpinnerColor: "#45D56E", 241 | inverseSpinnerColor: "#1A191B", 242 | 243 | // Tabs 244 | tabBgColor: "#F8F8F8", 245 | tabFontSize: 15, 246 | tabTextColor: "#222222", 247 | 248 | // Text 249 | textColor: "#000", 250 | inverseTextColor: "#fff", 251 | noteFontSize: 14, 252 | 253 | // Title 254 | titleFontfamily: platform === "ios" ? "System" : "Roboto_medium", 255 | titleFontSize: platform === "ios" ? 17 : 19, 256 | subTitleFontSize: platform === "ios" ? 12 : 14, 257 | subtitleColor: "#FFF", 258 | 259 | // New Variable 260 | titleFontColor: "#FFF", 261 | 262 | // Other 263 | borderRadiusBase: platform === "ios" ? 5 : 2, 264 | borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), 265 | contentPadding: 10, 266 | 267 | get darkenHeader() { 268 | return color(this.tabBgColor) 269 | .darken(0.03) 270 | .hex(); 271 | }, 272 | 273 | dropdownBg: "#000", 274 | dropdownLinkColor: "#414142", 275 | inputLineHeight: 24, 276 | jumbotronBg: "#C9C9CE", 277 | jumbotronPadding: 30, 278 | deviceWidth, 279 | deviceHeight, 280 | 281 | // New Variable 282 | inputGroupRoundedBorderRadius: 30, 283 | }; 284 | -------------------------------------------------------------------------------- /src/theme/variables/material.js: -------------------------------------------------------------------------------- 1 | import color from "color"; 2 | 3 | import { Platform, Dimensions, PixelRatio } from "react-native"; 4 | 5 | const deviceHeight = Dimensions.get("window").height; 6 | const deviceWidth = Dimensions.get("window").width; 7 | const platform = Platform.OS; 8 | const platformStyle = "material"; 9 | 10 | export default { 11 | platformStyle, 12 | platform, 13 | // AndroidRipple 14 | androidRipple: true, 15 | androidRippleColor: "rgba(256, 256, 256, 0.3)", 16 | androidRippleColorDark: "rgba(0, 0, 0, 0.15)", 17 | 18 | // Badge 19 | badgeBg: "#ED1727", 20 | badgeColor: "#fff", 21 | // New Variable 22 | badgePadding: platform === "ios" ? 3 : 0, 23 | 24 | // Button 25 | btnFontFamily: platform === "ios" ? "Roboto" : "Roboto_medium", 26 | btnDisabledBg: "#b5b5b5", 27 | btnDisabledClr: "#f1f1f1", 28 | 29 | // CheckBox 30 | CheckboxRadius: 0, 31 | CheckboxBorderWidth: 2, 32 | CheckboxPaddingLeft: 2, 33 | CheckboxPaddingBottom: platform === "ios" ? 0 : 5, 34 | CheckboxIconSize: platform === "ios" ? 18 : 14, 35 | CheckboxIconMarginTop: platform === "ios" ? undefined : 1, 36 | CheckboxFontSize: platform === "ios" ? 21 : 18, 37 | DefaultFontSize: 17, 38 | checkboxBgColor: "#039BE5", 39 | checkboxSize: 20, 40 | checkboxTickColor: "#fff", 41 | 42 | // Segment 43 | segmentBackgroundColor: "#3F51B5", 44 | segmentActiveBackgroundColor: "#fff", 45 | segmentTextColor: "#fff", 46 | segmentActiveTextColor: "#3F51B5", 47 | segmentBorderColor: "#fff", 48 | segmentBorderColorMain: "#3F51B5", 49 | 50 | // New Variable 51 | get defaultTextColor() { 52 | return this.textColor; 53 | }, 54 | 55 | get btnPrimaryBg() { 56 | return this.brandPrimary; 57 | }, 58 | get btnPrimaryColor() { 59 | return this.inverseTextColor; 60 | }, 61 | get btnInfoBg() { 62 | return this.brandInfo; 63 | }, 64 | get btnInfoColor() { 65 | return this.inverseTextColor; 66 | }, 67 | get btnSuccessBg() { 68 | return this.brandSuccess; 69 | }, 70 | get btnSuccessColor() { 71 | return this.inverseTextColor; 72 | }, 73 | get btnDangerBg() { 74 | return this.brandDanger; 75 | }, 76 | get btnDangerColor() { 77 | return this.inverseTextColor; 78 | }, 79 | get btnWarningBg() { 80 | return this.brandWarning; 81 | }, 82 | get btnWarningColor() { 83 | return this.inverseTextColor; 84 | }, 85 | get btnTextSize() { 86 | return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1; 87 | }, 88 | get btnTextSizeLarge() { 89 | return this.fontSizeBase * 1.5; 90 | }, 91 | get btnTextSizeSmall() { 92 | return this.fontSizeBase * 0.8; 93 | }, 94 | get borderRadiusLarge() { 95 | return this.fontSizeBase * 3.8; 96 | }, 97 | 98 | buttonPadding: 6, 99 | 100 | get iconSizeLarge() { 101 | return this.iconFontSize * 1.5; 102 | }, 103 | get iconSizeSmall() { 104 | return this.iconFontSize * 0.6; 105 | }, 106 | 107 | // Card 108 | cardDefaultBg: "#fff", 109 | 110 | // Color 111 | brandPrimary: "#3F51B5", 112 | brandInfo: "#3F57D3", 113 | brandSuccess: "#5cb85c", 114 | brandDanger: "#d9534f", 115 | brandWarning: "#f0ad4e", 116 | brandSidebar: "#252932", 117 | 118 | // Font 119 | fontFamily: "Roboto", 120 | fontSizeBase: 15, 121 | 122 | get fontSizeH1() { 123 | return this.fontSizeBase * 1.8; 124 | }, 125 | get fontSizeH2() { 126 | return this.fontSizeBase * 1.6; 127 | }, 128 | get fontSizeH3() { 129 | return this.fontSizeBase * 1.4; 130 | }, 131 | 132 | // Footer 133 | footerHeight: 55, 134 | footerDefaultBg: "#3F51B5", 135 | 136 | // FooterTab 137 | tabBarTextColor: "#b3c7f9", 138 | tabBarTextSize: platform === "ios" ? 14 : 11, 139 | activeTab: "#fff", 140 | sTabBarActiveTextColor: "#007aff", 141 | tabBarActiveTextColor: "#fff", 142 | tabActiveBgColor: undefined, 143 | 144 | // Tab 145 | tabDefaultBg: "#3F51B5", 146 | topTabBarTextColor: "#b3c7f9", 147 | topTabBarActiveTextColor: "#fff", 148 | topTabActiveBgColor: undefined, 149 | topTabBarBorderColor: "#fff", 150 | topTabBarActiveBorderColor: "#fff", 151 | 152 | // Header 153 | toolbarBtnColor: "#fff", 154 | toolbarDefaultBg: "#3F51B5", 155 | toolbarHeight: platform === "ios" ? 76 : 56, 156 | toolbarIconSize: platform === "ios" ? 20 : 22, 157 | toolbarSearchIconSize: platform === "ios" ? 20 : 23, 158 | toolbarInputColor: "#fff", 159 | searchBarHeight: platform === "ios" ? 30 : 40, 160 | toolbarInverseBg: "#222", 161 | toolbarTextColor: "#fff", 162 | toolbarDefaultBorder: "#3F51B5", 163 | iosStatusbar: "light-content", 164 | get statusBarColor() { 165 | return color(this.toolbarDefaultBg) 166 | .darken(0.2) 167 | .hex(); 168 | }, 169 | 170 | // Icon 171 | iconFamily: "Ionicons", 172 | iconFontSize: platform === "ios" ? 30 : 28, 173 | iconMargin: 7, 174 | iconHeaderSize: platform === "ios" ? 29 : 24, 175 | 176 | // InputGroup 177 | inputFontSize: 17, 178 | inputBorderColor: "#D9D5DC", 179 | inputSuccessBorderColor: "#2b8339", 180 | inputErrorBorderColor: "#ed2f2f", 181 | 182 | get inputColor() { 183 | return this.textColor; 184 | }, 185 | get inputColorPlaceholder() { 186 | return "#575757"; 187 | }, 188 | 189 | inputGroupMarginBottom: 10, 190 | inputHeightBase: 50, 191 | inputPaddingLeft: 5, 192 | 193 | get inputPaddingLeftIcon() { 194 | return this.inputPaddingLeft * 8; 195 | }, 196 | 197 | // Line Height 198 | btnLineHeight: 19, 199 | lineHeightH1: 32, 200 | lineHeightH2: 27, 201 | lineHeightH3: 22, 202 | iconLineHeight: platform === "ios" ? 37 : 30, 203 | lineHeight: platform === "ios" ? 20 : 24, 204 | 205 | // List 206 | listBorderColor: "#c9c9c9", 207 | listDividerBg: "#f4f4f4", 208 | listItemHeight: 45, 209 | listBtnUnderlayColor: "#DDD", 210 | 211 | // Card 212 | cardBorderColor: "#ccc", 213 | 214 | // Changed Variable 215 | listItemPadding: platform === "ios" ? 10 : 12, 216 | 217 | listNoteColor: "#808080", 218 | listNoteSize: 13, 219 | 220 | // Progress Bar 221 | defaultProgressColor: "#E4202D", 222 | inverseProgressColor: "#1A191B", 223 | 224 | // Radio Button 225 | radioBtnSize: platform === "ios" ? 25 : 23, 226 | radioSelectedColorAndroid: "#5067FF", 227 | 228 | // New Variable 229 | radioBtnLineHeight: platform === "ios" ? 29 : 24, 230 | 231 | radioColor: "#7e7e7e", 232 | 233 | get radioSelectedColor() { 234 | return color(this.radioColor) 235 | .darken(0.2) 236 | .hex(); 237 | }, 238 | 239 | // Spinner 240 | defaultSpinnerColor: "#45D56E", 241 | inverseSpinnerColor: "#1A191B", 242 | 243 | // Tabs 244 | tabBgColor: "#F8F8F8", 245 | tabFontSize: 15, 246 | tabTextColor: "#222222", 247 | 248 | // Text 249 | textColor: "#000", 250 | inverseTextColor: "#fff", 251 | noteFontSize: 14, 252 | 253 | // Title 254 | titleFontfamily: platform === "ios" ? "Roboto" : "Roboto_medium", 255 | titleFontSize: 19, 256 | subTitleFontSize: 14, 257 | subtitleColor: "#FFF", 258 | 259 | // New Variable 260 | titleFontColor: "#FFF", 261 | 262 | // Other 263 | borderRadiusBase: 2, 264 | borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), 265 | contentPadding: 10, 266 | 267 | get darkenHeader() { 268 | return color(this.tabBgColor) 269 | .darken(0.03) 270 | .hex(); 271 | }, 272 | 273 | dropdownBg: "#000", 274 | dropdownLinkColor: "#414142", 275 | inputLineHeight: 24, 276 | jumbotronBg: "#C9C9CE", 277 | jumbotronPadding: 30, 278 | deviceWidth, 279 | deviceHeight, 280 | 281 | // New Variable 282 | inputGroupRoundedBorderRadius: 30, 283 | }; 284 | -------------------------------------------------------------------------------- /src/theme/variables/platform.js: -------------------------------------------------------------------------------- 1 | import color from "color"; 2 | 3 | import { Platform, Dimensions, PixelRatio } from "react-native"; 4 | 5 | const deviceHeight = Dimensions.get("window").height; 6 | const deviceWidth = Dimensions.get("window").width; 7 | const platform = Platform.OS; 8 | const platformStyle = undefined; 9 | 10 | export default { 11 | platformStyle, 12 | platform, 13 | // AndroidRipple 14 | androidRipple: true, 15 | androidRippleColor: "rgba(256, 256, 256, 0.3)", 16 | androidRippleColorDark: "rgba(0, 0, 0, 0.15)", 17 | 18 | // Badge 19 | badgeBg: "#ED1727", 20 | badgeColor: "#fff", 21 | // New Variable 22 | badgePadding: platform === "ios" ? 3 : 0, 23 | 24 | // Button 25 | btnFontFamily: platform === "ios" ? "System" : "Roboto_medium", 26 | btnDisabledBg: "#b5b5b5", 27 | btnDisabledClr: "#f1f1f1", 28 | 29 | // CheckBox 30 | CheckboxRadius: platform === "ios" ? 13 : 0, 31 | CheckboxBorderWidth: platform === "ios" ? 1 : 2, 32 | CheckboxPaddingLeft: platform === "ios" ? 4 : 2, 33 | CheckboxPaddingBottom: platform === "ios" ? 0 : 5, 34 | CheckboxIconSize: platform === "ios" ? 21 : 14, 35 | CheckboxIconMarginTop: platform === "ios" ? undefined : 1, 36 | CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 18, 37 | DefaultFontSize: 17, 38 | checkboxBgColor: "#039BE5", 39 | checkboxSize: 20, 40 | checkboxTickColor: "#fff", 41 | 42 | // Segment 43 | segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5", 44 | segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff", 45 | segmentTextColor: platform === "ios" ? "#007aff" : "#fff", 46 | segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5", 47 | segmentBorderColor: platform === "ios" ? "#007aff" : "#fff", 48 | segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5", 49 | 50 | // New Variable 51 | get defaultTextColor() { 52 | return this.textColor; 53 | }, 54 | 55 | get btnPrimaryBg() { 56 | return this.brandPrimary; 57 | }, 58 | get btnPrimaryColor() { 59 | return this.inverseTextColor; 60 | }, 61 | get btnInfoBg() { 62 | return this.brandInfo; 63 | }, 64 | get btnInfoColor() { 65 | return this.inverseTextColor; 66 | }, 67 | get btnSuccessBg() { 68 | return this.brandSuccess; 69 | }, 70 | get btnSuccessColor() { 71 | return this.inverseTextColor; 72 | }, 73 | get btnDangerBg() { 74 | return this.brandDanger; 75 | }, 76 | get btnDangerColor() { 77 | return this.inverseTextColor; 78 | }, 79 | get btnWarningBg() { 80 | return this.brandWarning; 81 | }, 82 | get btnWarningColor() { 83 | return this.inverseTextColor; 84 | }, 85 | get btnTextSize() { 86 | return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1; 87 | }, 88 | get btnTextSizeLarge() { 89 | return this.fontSizeBase * 1.5; 90 | }, 91 | get btnTextSizeSmall() { 92 | return this.fontSizeBase * 0.8; 93 | }, 94 | get borderRadiusLarge() { 95 | return this.fontSizeBase * 3.8; 96 | }, 97 | 98 | buttonPadding: 6, 99 | 100 | get iconSizeLarge() { 101 | return this.iconFontSize * 1.5; 102 | }, 103 | get iconSizeSmall() { 104 | return this.iconFontSize * 0.6; 105 | }, 106 | 107 | // Card 108 | cardDefaultBg: "#fff", 109 | 110 | // Color 111 | brandPrimary: platform === "ios" ? "#007aff" : "#3F51B5", 112 | brandInfo: "#62B1F6", 113 | brandSuccess: "#5cb85c", 114 | brandDanger: "#d9534f", 115 | brandWarning: "#f0ad4e", 116 | brandSidebar: "#252932", 117 | 118 | // Font 119 | fontFamily: platform === "ios" ? "System" : "Roboto", 120 | fontSizeBase: 15, 121 | 122 | get fontSizeH1() { 123 | return this.fontSizeBase * 1.8; 124 | }, 125 | get fontSizeH2() { 126 | return this.fontSizeBase * 1.6; 127 | }, 128 | get fontSizeH3() { 129 | return this.fontSizeBase * 1.4; 130 | }, 131 | 132 | // Footer 133 | footerHeight: 55, 134 | footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5", 135 | 136 | // FooterTab 137 | tabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9", 138 | tabBarTextSize: platform === "ios" ? 14 : 11, 139 | activeTab: platform === "ios" ? "#007aff" : "#fff", 140 | sTabBarActiveTextColor: "#007aff", 141 | tabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff", 142 | tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5", 143 | 144 | // Tab 145 | tabDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5", 146 | topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9", 147 | topTabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff", 148 | topTabActiveBgColor: platform === "ios" ? "#cde1f9" : undefined, 149 | topTabBarBorderColor: platform === "ios" ? "#a7a6ab" : "#fff", 150 | topTabBarActiveBorderColor: platform === "ios" ? "#007aff" : "#fff", 151 | 152 | // Header 153 | toolbarBtnColor: platform === "ios" ? "#007aff" : "#fff", 154 | toolbarDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5", 155 | toolbarHeight: platform === "ios" ? 64 : 56, 156 | toolbarIconSize: platform === "ios" ? 20 : 22, 157 | toolbarSearchIconSize: platform === "ios" ? 20 : 23, 158 | toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff", 159 | searchBarHeight: platform === "ios" ? 30 : 40, 160 | toolbarInverseBg: "#222", 161 | toolbarTextColor: platform === "ios" ? "#000" : "#fff", 162 | toolbarDefaultBorder: platform === "ios" ? "#a7a6ab" : "#3F51B5", 163 | iosStatusbar: platform === "ios" ? "dark-content" : "light-content", 164 | get statusBarColor() { 165 | return color(this.toolbarDefaultBg) 166 | .darken(0.2) 167 | .hex(); 168 | }, 169 | 170 | // Icon 171 | iconFamily: "Ionicons", 172 | iconFontSize: platform === "ios" ? 30 : 28, 173 | iconMargin: 7, 174 | iconHeaderSize: platform === "ios" ? 33 : 24, 175 | 176 | // InputGroup 177 | inputFontSize: 17, 178 | inputBorderColor: "#D9D5DC", 179 | inputSuccessBorderColor: "#2b8339", 180 | inputErrorBorderColor: "#ed2f2f", 181 | 182 | get inputColor() { 183 | return this.textColor; 184 | }, 185 | get inputColorPlaceholder() { 186 | return "#575757"; 187 | }, 188 | 189 | inputGroupMarginBottom: 10, 190 | inputHeightBase: 50, 191 | inputPaddingLeft: 5, 192 | 193 | get inputPaddingLeftIcon() { 194 | return this.inputPaddingLeft * 8; 195 | }, 196 | 197 | // Line Height 198 | btnLineHeight: 19, 199 | lineHeightH1: 32, 200 | lineHeightH2: 27, 201 | lineHeightH3: 22, 202 | iconLineHeight: platform === "ios" ? 37 : 30, 203 | lineHeight: platform === "ios" ? 20 : 24, 204 | 205 | // List 206 | listBorderColor: "#c9c9c9", 207 | listDividerBg: "#f4f4f4", 208 | listItemHeight: 45, 209 | listBtnUnderlayColor: "#DDD", 210 | 211 | // Card 212 | cardBorderColor: "#ccc", 213 | 214 | // Changed Variable 215 | listItemPadding: platform === "ios" ? 10 : 12, 216 | 217 | listNoteColor: "#808080", 218 | listNoteSize: 13, 219 | 220 | // Progress Bar 221 | defaultProgressColor: "#E4202D", 222 | inverseProgressColor: "#1A191B", 223 | 224 | // Radio Button 225 | radioBtnSize: platform === "ios" ? 25 : 23, 226 | radioSelectedColorAndroid: "#3F51B5", 227 | 228 | // New Variable 229 | radioBtnLineHeight: platform === "ios" ? 29 : 24, 230 | 231 | radioColor: "#7e7e7e", 232 | 233 | get radioSelectedColor() { 234 | return color(this.radioColor) 235 | .darken(0.2) 236 | .hex(); 237 | }, 238 | 239 | // Spinner 240 | defaultSpinnerColor: "#45D56E", 241 | inverseSpinnerColor: "#1A191B", 242 | 243 | // Tabs 244 | tabBgColor: "#F8F8F8", 245 | tabFontSize: 15, 246 | tabTextColor: "#222222", 247 | 248 | // Text 249 | textColor: "#000", 250 | inverseTextColor: "#fff", 251 | noteFontSize: 14, 252 | 253 | // Title 254 | titleFontfamily: platform === "ios" ? "System" : "Roboto_medium", 255 | titleFontSize: platform === "ios" ? 17 : 19, 256 | subTitleFontSize: platform === "ios" ? 12 : 14, 257 | subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF", 258 | 259 | // New Variable 260 | titleFontColor: platform === "ios" ? "#000" : "#FFF", 261 | 262 | // Other 263 | borderRadiusBase: platform === "ios" ? 5 : 2, 264 | borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), 265 | contentPadding: 10, 266 | 267 | get darkenHeader() { 268 | return color(this.tabBgColor) 269 | .darken(0.03) 270 | .hex(); 271 | }, 272 | 273 | dropdownBg: "#000", 274 | dropdownLinkColor: "#414142", 275 | inputLineHeight: 24, 276 | jumbotronBg: "#C9C9CE", 277 | jumbotronPadding: 30, 278 | deviceWidth, 279 | deviceHeight, 280 | 281 | // New Variable 282 | inputGroupRoundedBorderRadius: 30, 283 | }; 284 | --------------------------------------------------------------------------------