From 421467e0bac2c0880c3a414fabc7403f745751b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andre=CC=81=20Kovac?= Date: Wed, 26 Aug 2020 15:58:31 +0200 Subject: [PATCH 1/3] Install native-base, react-native-easy-grid and lodash - also include Roboto font --- package.json | 3 + src/hooks/useCachedResources.ts | 2 + tsconfig.json | 6 +- yarn.lock | 185 ++++++++++++++++++++++++++++++-- 4 files changed, 188 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index bb91c37..c380fbf 100644 --- a/package.json +++ b/package.json @@ -25,9 +25,11 @@ "expo-splash-screen": "~0.3.1", "expo-status-bar": "^1.0.2", "expo-web-browser": "~8.3.1", + "native-base": "^2.13.14", "react": "~16.11.0", "react-dom": "~16.11.0", "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz", + "react-native-easy-grid": "^0.2.2", "react-native-gesture-handler": "~1.6.0", "react-native-safe-area-context": "~3.0.7", "react-native-screens": "~2.9.0", @@ -41,6 +43,7 @@ "@types/styled-components": "^5.1.2", "babel-preset-expo": "~8.1.0", "jest-expo": "~38.0.0", + "lodash": "^4.17.20", "typescript": "~3.9.5" }, "private": true diff --git a/src/hooks/useCachedResources.ts b/src/hooks/useCachedResources.ts index 9b624e4..ec38f53 100644 --- a/src/hooks/useCachedResources.ts +++ b/src/hooks/useCachedResources.ts @@ -14,6 +14,8 @@ export default function useCachedResources() { // Load fonts await Font.loadAsync({ + Roboto: require('native-base/Fonts/Roboto.ttf'), + Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'), ...Ionicons.font, 'space-mono': require('../../assets/fonts/SpaceMono-Regular.ttf'), }); diff --git a/tsconfig.json b/tsconfig.json index 3c78a19..cc5ea35 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,5 +8,9 @@ "skipLibCheck": true, "resolveJsonModule": true, "strict": true - } + }, + "exclude": [ + "node_modules", + "native-base-theme" + ] } diff --git a/yarn.lock b/yarn.lock index 823bed1..a5b005e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1009,6 +1009,13 @@ exec-sh "^0.3.2" minimist "^1.2.0" +"@codler/react-native-keyboard-aware-scroll-view@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@codler/react-native-keyboard-aware-scroll-view/-/react-native-keyboard-aware-scroll-view-1.0.0.tgz#7ca45d9a06aa118e7acfbddc33dd5e2fb9c9bb4b" + integrity sha512-syLIolsZEe9quJ9RUF+PaswA+TLXCHkbIJVe54E4fuVu3mrL+9B1fjcX0Grq0hbu/s5EE+mVPIXvFY/3cADpqg== + dependencies: + react-native-iphone-x-helper "^1.0.3" + "@egjs/hammerjs@^2.0.17": version "2.0.17" resolved "https://registry.yarnpkg.com/@egjs/hammerjs/-/hammerjs-2.0.17.tgz#5dc02af75a6a06e4c2db0202cae38c9263895124" @@ -1844,6 +1851,11 @@ ansi-red@^0.1.1: dependencies: ansi-wrap "0.1.0" +ansi-regex@^2.0.0: + version "2.1.1" + resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df" + integrity sha1-w7M6te42DYbg5ijwRorn7yfWVN8= + ansi-regex@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998" @@ -1859,6 +1871,11 @@ ansi-regex@^5.0.0: resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75" integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg== +ansi-styles@^2.1.0: + version "2.2.1" + resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe" + integrity sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4= + ansi-styles@^3.2.0, ansi-styles@^3.2.1: version "3.2.1" resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d" @@ -2245,7 +2262,7 @@ bindings@^1.5.0: dependencies: file-uri-to-path "1.0.0" -blueimp-md5@^2.10.0: +blueimp-md5@^2.10.0, blueimp-md5@^2.5.0: version "2.17.0" resolved "https://registry.yarnpkg.com/blueimp-md5/-/blueimp-md5-2.17.0.tgz#f4fcac088b115f7b4045f19f5da59e9d01b1bb96" integrity sha512-x5PKJHY5rHQYaADj6NwPUR2QRCUVSggPzrUKkeENpj871o9l9IefJbO2jkT5UvYykeOK9dx0VmkIo6dZ+vThYw== @@ -2423,6 +2440,17 @@ caseless@~0.12.0: resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc" integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw= +chalk@1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.1.tgz#509afb67066e7499f7eb3535c77445772ae2d019" + integrity sha1-UJr7ZwZudJn36zU1x3RFdyri0Bk= + dependencies: + ansi-styles "^2.1.0" + escape-string-regexp "^1.0.2" + has-ansi "^2.0.0" + strip-ansi "^3.0.0" + supports-color "^2.0.0" + chalk@^2.0.0, chalk@^2.0.1, chalk@^2.4.1, chalk@^2.4.2: version "2.4.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" @@ -2450,6 +2478,11 @@ ci-info@^2.0.0: resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46" integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ== +clamp@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/clamp/-/clamp-1.0.1.tgz#66a0e64011816e37196828fdc8c8c147312c8634" + integrity sha1-ZqDmQBGBbjcZaCj9yMjBRzEshjQ= + class-utils@^0.3.5: version "0.3.6" resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463" @@ -2555,7 +2588,7 @@ color-support@^1.1.3: resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2" integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg== -color@^3.1.2: +color@^3.1.2, color@~3.1.2: version "3.1.2" resolved "https://registry.yarnpkg.com/color/-/color-3.1.2.tgz#68148e7f85d41ad7649c5fa8c8106f098d229e10" integrity sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg== @@ -3093,7 +3126,7 @@ escape-html@~1.0.3: resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988" integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg= -escape-string-regexp@^1.0.5: +escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ= @@ -3115,6 +3148,13 @@ escodegen@^1.11.1: optionalDependencies: source-map "~0.6.1" +eslint-config-prettier@^6.0.0: + version "6.11.0" + resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.11.0.tgz#f6d2238c1290d01c859a8b5c1f7d352a0b0da8b1" + integrity sha512-oB8cpLWSAjOVFEJhhyMZh6NOEOtBVziaqdDQ86+qhDHFbZXoRTM7pNSvFRfW/W/L/LrQ38C99J5CGuRBBzBsdA== + dependencies: + get-stdin "^6.0.0" + eslint-plugin-relay@1.4.1: version "1.4.1" resolved "https://registry.yarnpkg.com/eslint-plugin-relay/-/eslint-plugin-relay-1.4.1.tgz#5af2ac13e24bd01ad17b6a4014204918d65021cd" @@ -3659,6 +3699,14 @@ fs-extra@^1.0.0: jsonfile "^2.1.0" klaw "^1.0.0" +fs-extra@^2.0.0: + version "2.1.2" + resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-2.1.2.tgz#046c70163cef9aad46b0e4a7fa467fb22d71de35" + integrity sha1-BGxwFjzvmq1GsOSn+kZ/si1x3jU= + dependencies: + graceful-fs "^4.1.2" + jsonfile "^2.1.0" + fs-extra@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0" @@ -3716,6 +3764,11 @@ get-package-type@^0.1.0: resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a" integrity sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q== +get-stdin@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-6.0.0.tgz#9e09bf712b360ab9225e812048f71fde9c89657b" + integrity sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g== + get-stream@^4.0.0: version "4.1.0" resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5" @@ -3789,6 +3842,13 @@ har-validator@~5.1.3: ajv "^6.12.3" har-schema "^2.0.0" +has-ansi@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91" + integrity sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE= + dependencies: + ansi-regex "^2.0.0" + has-flag@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd" @@ -3847,6 +3907,11 @@ hermes-engine@0.0.0: resolved "https://registry.yarnpkg.com/hermes-engine/-/hermes-engine-0.0.0.tgz#6a65954646b5e32c87aa998dee16152c0c904cd6" integrity sha512-q5DP4aUe6LnfMaLsxFP1cCY5qA0Ca5Qm2JQ/OgKi3sTfPpXth79AQ7vViXh/RRML53EpokDewMLJmI31RioBAA== +hoist-non-react-statics@^1.0.5: + version "1.2.0" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb" + integrity sha1-qkSM8JhtVcxAdzsXF0t90GbLfPs= + hoist-non-react-statics@^2.3.1: version "2.5.5" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47" @@ -4596,6 +4661,11 @@ jest-pnp-resolver@^1.2.1: resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz#b704ac0ae028a89108a4d040b3f919dfddc8e33c" integrity sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w== +jest-react-native@^18.0.0: + version "18.0.0" + resolved "https://registry.yarnpkg.com/jest-react-native/-/jest-react-native-18.0.0.tgz#77dd909f069324599f227c58c61c2e62168726ba" + integrity sha1-d92QnwaTJFmfInxYxhwuYhaHJro= + jest-regex-util@^25.2.1, jest-regex-util@^25.2.6: version "25.2.6" resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-25.2.6.tgz#d847d38ba15d2118d3b06390056028d0f2fd3964" @@ -5080,7 +5150,7 @@ lodash.throttle@^4.1.1: resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4" integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ= -lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.4, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.6.0: +lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.4, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.6.0: version "4.17.20" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52" integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA== @@ -5583,6 +5653,39 @@ nanomatch@^1.2.9: snapdragon "^0.8.1" to-regex "^3.0.1" +native-base-shoutem-theme@0.3.1: + version "0.3.1" + resolved "https://registry.yarnpkg.com/native-base-shoutem-theme/-/native-base-shoutem-theme-0.3.1.tgz#f15cbd4ca74ca1c8b6a636d297b9164a5f2b3662" + integrity sha512-uwEGhg6gwDuJTHuhNXRKbHtNjni1UI9qfAsVchIqfK7mQAHSNPVU1QRs9Hw6O2K/qLZaP/aJmNoZGc2h2EGSwA== + dependencies: + hoist-non-react-statics "^1.0.5" + lodash "^4.17.14" + prop-types "^15.5.10" + +native-base@^2.13.14: + version "2.13.14" + resolved "https://registry.yarnpkg.com/native-base/-/native-base-2.13.14.tgz#57a71d871bb1df96122bf13af6298b8c22f48536" + integrity sha512-k9E1FX6kgLjp6Du7jOA/p6viKrmMrG1BelN4ui15hZBObBd+s0ExI5oh8U/Wa9U++hBHuKeHhzDF9OVqOo4t2w== + dependencies: + "@codler/react-native-keyboard-aware-scroll-view" "1.0.0" + blueimp-md5 "^2.5.0" + clamp "^1.0.1" + color "~3.1.2" + create-react-class "^15.6.3" + eslint-config-prettier "^6.0.0" + fs-extra "^2.0.0" + jest-react-native "^18.0.0" + lodash "^4.17.14" + native-base-shoutem-theme "0.3.1" + opencollective-postinstall "^2.0.2" + print-message "^2.1.0" + prop-types "^15.5.10" + react-native-drawer "2.5.1" + react-native-easy-grid "0.2.2" + react-native-vector-icons "^7.0.0" + react-tween-state "^0.1.5" + tween-functions "^1.0.1" + natural-compare@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7" @@ -5813,6 +5916,11 @@ open@^6.2.0: dependencies: is-wsl "^1.1.0" +opencollective-postinstall@^2.0.2: + version "2.0.3" + resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz#7a0fff978f6dbfa4d006238fbac98ed4198c3259" + integrity sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q== + optionator@^0.8.1: version "0.8.3" resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495" @@ -6106,6 +6214,13 @@ pretty-format@^25.1.0, pretty-format@^25.2.0, pretty-format@^25.5.0: ansi-styles "^4.0.0" react-is "^16.12.0" +print-message@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/print-message/-/print-message-2.1.0.tgz#b5588ed08b0e1bf77ac7bcb5cb78004afaf9a891" + integrity sha1-tViO0IsOG/d6x7y1y3gASvr5qJE= + dependencies: + chalk "1.1.1" + process-nextick-args@~2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2" @@ -6126,7 +6241,7 @@ prompts@^2.0.1, prompts@^2.2.1: kleur "^3.0.3" sisteransi "^1.0.4" -prop-types@15.7.2, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@15.7.2, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -6191,6 +6306,13 @@ querystringify@^2.1.1: resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6" integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ== +raf@^3.1.0: + version "3.4.1" + resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39" + integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA== + dependencies: + performance-now "^2.1.0" + range-parser@~1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031" @@ -6228,6 +6350,21 @@ react-native-appearance@~0.3.3: invariant "^2.2.4" use-subscription "^1.0.0" +react-native-drawer@2.5.1: + version "2.5.1" + resolved "https://registry.yarnpkg.com/react-native-drawer/-/react-native-drawer-2.5.1.tgz#08b9314184f48c724f1b467f8859797369798654" + integrity sha512-cxcQNbSWy5sbGi7anSVp6EDr6JarOBMY9lbFOeLFeVYbONiudoqRKbgEsSDgSw3/LFCLvUXK5zdjXCOedeytxQ== + dependencies: + prop-types "^15.5.8" + tween-functions "^1.0.1" + +react-native-easy-grid@0.2.2, react-native-easy-grid@^0.2.2: + version "0.2.2" + resolved "https://registry.yarnpkg.com/react-native-easy-grid/-/react-native-easy-grid-0.2.2.tgz#f0be33620be1ebe2d2295918eb58b0a27e8272ab" + integrity sha512-MlYrNIldnEMKn6TVatQN1P64GoVlwGIuz+8ncdfJ0Wq/xtzUkQwlil8Uksyp7MhKfENE09MQnGNcba6Mx3oSAA== + dependencies: + lodash "^4.17.15" + react-native-gesture-handler@~1.6.0: version "1.6.1" resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.6.1.tgz#678e2dce250ed66e93af409759be22cd6375dd17" @@ -6238,7 +6375,7 @@ react-native-gesture-handler@~1.6.0: invariant "^2.2.4" prop-types "^15.7.2" -react-native-iphone-x-helper@^1.2.1: +react-native-iphone-x-helper@^1.0.3, react-native-iphone-x-helper@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.1.tgz#645e2ffbbb49e80844bb4cbbe34a126fda1e6772" integrity sha512-/VbpIEp8tSNNHIvstuA3Swx610whci1Zpc9mqNkqn14DkMbw+ORviln2u0XyHG1kPvvwTNGZY6QpeFwxYaSdbQ== @@ -6253,6 +6390,15 @@ react-native-screens@~2.9.0: resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.9.0.tgz#ead2843107ba00fee259aa377582e457c74f1f3b" integrity sha512-5MaiUD6HA3nzY3JbVI8l3V7pKedtxQF3d8qktTVI0WmWXTI4QzqOU8r8fPVvfKo3MhOXwhWBjr+kQ7DZaIQQeg== +react-native-vector-icons@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-7.0.0.tgz#5b92ed363c867645daad48c559e1f99efcfbb813" + integrity sha512-Ku8+dTUAnR9pexRPQqsUcQEZlxEpFZsIy8iOFqVL/3mrUyncZJHtqJyx2cUOmltZIC6W2GI4IkD3EYzPerXV5g== + dependencies: + lodash "^4.17.15" + prop-types "^15.7.2" + yargs "^15.0.2" + react-native-web@~0.11.7: version "0.11.7" resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.11.7.tgz#d173d5a9b58db23b6d442c4bc4c81e9939adac23" @@ -6324,6 +6470,14 @@ react-timer-mixin@^0.13.4: resolved "https://registry.yarnpkg.com/react-timer-mixin/-/react-timer-mixin-0.13.4.tgz#75a00c3c94c13abe29b43d63b4c65a88fc8264d3" integrity sha512-4+ow23tp/Tv7hBM5Az5/Be/eKKF7DIvJ09voz5LyHGQaqqz9WV8YMs31eFvcYQs7d451LSg7kDJV70XYN/Ug/Q== +react-tween-state@^0.1.5: + version "0.1.5" + resolved "https://registry.yarnpkg.com/react-tween-state/-/react-tween-state-0.1.5.tgz#e98b066551efb93cb92dd1be14995c2e3deae339" + integrity sha1-6YsGZVHvuTy5LdG+FJlcLj3q4zk= + dependencies: + raf "^3.1.0" + tween-functions "^1.0.1" + react@~16.11.0: version "16.11.0" resolved "https://registry.yarnpkg.com/react/-/react-16.11.0.tgz#d294545fe62299ccee83363599bf904e4a07fdbb" @@ -7090,6 +7244,13 @@ string_decoder@~1.1.1: dependencies: safe-buffer "~5.1.0" +strip-ansi@^3.0.0: + version "3.0.1" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf" + integrity sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8= + dependencies: + ansi-regex "^2.0.0" + strip-ansi@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f" @@ -7147,6 +7308,11 @@ sudo-prompt@^9.0.0: resolved "https://registry.yarnpkg.com/sudo-prompt/-/sudo-prompt-9.2.1.tgz#77efb84309c9ca489527a4e749f287e6bdd52afd" integrity sha512-Mu7R0g4ig9TUuGSxJavny5Rv0egCEtpZRNMrZaYS1vxkiIxGiGUwoezU3LazIQ+KE04hTrTfNPgxU5gzi7F5Pw== +supports-color@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7" + integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc= + supports-color@^5.3.0, supports-color@^5.5.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" @@ -7329,6 +7495,11 @@ tunnel-agent@^0.6.0: dependencies: safe-buffer "^5.0.1" +tween-functions@^1.0.1: + version "1.2.0" + resolved "https://registry.yarnpkg.com/tween-functions/-/tween-functions-1.2.0.tgz#1ae3a50e7c60bb3def774eac707acbca73bbc3ff" + integrity sha1-GuOlDnxguz3vd06scHrLynO7w/8= + tweetnacl@^0.14.3, tweetnacl@~0.14.0: version "0.14.5" resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64" @@ -7908,7 +8079,7 @@ yargs@^14.2.0: y18n "^4.0.0" yargs-parser "^15.0.1" -yargs@^15.1.0, yargs@^15.3.1: +yargs@^15.0.2, yargs@^15.1.0, yargs@^15.3.1: version "15.4.1" resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.4.1.tgz#0d87a16de01aee9d8bec2bfbf74f67851730f4f8" integrity sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A== From 99d0db959a100d354972138ca67209902717d0da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andre=CC=81=20Kovac?= Date: Wed, 26 Aug 2020 15:58:54 +0200 Subject: [PATCH 2/3] Eject native base theme --- src/native-base-theme/components/Badge.js | 38 ++ src/native-base-theme/components/Body.js | 11 + src/native-base-theme/components/Button.js | 387 +++++++++++++++ src/native-base-theme/components/Card.js | 37 ++ src/native-base-theme/components/CardItem.js | 198 ++++++++ src/native-base-theme/components/CheckBox.js | 38 ++ src/native-base-theme/components/Container.js | 17 + src/native-base-theme/components/Content.js | 14 + src/native-base-theme/components/Fab.js | 25 + src/native-base-theme/components/Footer.js | 119 +++++ src/native-base-theme/components/FooterTab.js | 79 ++++ src/native-base-theme/components/Form.js | 86 ++++ src/native-base-theme/components/H1.js | 13 + src/native-base-theme/components/H2.js | 13 + src/native-base-theme/components/H3.js | 13 + src/native-base-theme/components/Header.js | 419 ++++++++++++++++ src/native-base-theme/components/Icon.js | 12 + src/native-base-theme/components/Input.js | 19 + .../components/InputGroup.js | 132 ++++++ src/native-base-theme/components/Item.js | 242 ++++++++++ src/native-base-theme/components/Label.js | 12 + src/native-base-theme/components/Left.js | 11 + src/native-base-theme/components/ListItem.js | 446 ++++++++++++++++++ .../components/Picker.android.js | 14 + .../components/Picker.ios.js | 7 + src/native-base-theme/components/Picker.js | 14 + src/native-base-theme/components/Radio.js | 31 ++ src/native-base-theme/components/Right.js | 14 + src/native-base-theme/components/Segment.js | 57 +++ src/native-base-theme/components/Separator.js | 49 ++ src/native-base-theme/components/Spinner.js | 9 + src/native-base-theme/components/Subtitle.js | 19 + src/native-base-theme/components/SwipeRow.js | 46 ++ src/native-base-theme/components/Switch.js | 9 + src/native-base-theme/components/Tab.js | 10 + src/native-base-theme/components/TabBar.js | 57 +++ .../components/TabContainer.js | 26 + .../components/TabHeading.js | 40 ++ src/native-base-theme/components/Text.js | 17 + src/native-base-theme/components/Textarea.js | 25 + src/native-base-theme/components/Thumbnail.js | 40 ++ src/native-base-theme/components/Title.js | 21 + src/native-base-theme/components/Toast.js | 41 ++ src/native-base-theme/components/View.js | 13 + src/native-base-theme/components/index.js | 249 ++++++++++ .../variables/commonColor.js | 311 ++++++++++++ src/native-base-theme/variables/material.js | 304 ++++++++++++ src/native-base-theme/variables/platform.js | 334 +++++++++++++ 48 files changed, 4138 insertions(+) create mode 100644 src/native-base-theme/components/Badge.js create mode 100644 src/native-base-theme/components/Body.js create mode 100644 src/native-base-theme/components/Button.js create mode 100644 src/native-base-theme/components/Card.js create mode 100644 src/native-base-theme/components/CardItem.js create mode 100644 src/native-base-theme/components/CheckBox.js create mode 100644 src/native-base-theme/components/Container.js create mode 100644 src/native-base-theme/components/Content.js create mode 100644 src/native-base-theme/components/Fab.js create mode 100644 src/native-base-theme/components/Footer.js create mode 100644 src/native-base-theme/components/FooterTab.js create mode 100644 src/native-base-theme/components/Form.js create mode 100644 src/native-base-theme/components/H1.js create mode 100644 src/native-base-theme/components/H2.js create mode 100644 src/native-base-theme/components/H3.js create mode 100644 src/native-base-theme/components/Header.js create mode 100644 src/native-base-theme/components/Icon.js create mode 100644 src/native-base-theme/components/Input.js create mode 100644 src/native-base-theme/components/InputGroup.js create mode 100644 src/native-base-theme/components/Item.js create mode 100644 src/native-base-theme/components/Label.js create mode 100644 src/native-base-theme/components/Left.js create mode 100644 src/native-base-theme/components/ListItem.js create mode 100644 src/native-base-theme/components/Picker.android.js create mode 100644 src/native-base-theme/components/Picker.ios.js create mode 100644 src/native-base-theme/components/Picker.js create mode 100644 src/native-base-theme/components/Radio.js create mode 100644 src/native-base-theme/components/Right.js create mode 100644 src/native-base-theme/components/Segment.js create mode 100644 src/native-base-theme/components/Separator.js create mode 100644 src/native-base-theme/components/Spinner.js create mode 100644 src/native-base-theme/components/Subtitle.js create mode 100644 src/native-base-theme/components/SwipeRow.js create mode 100644 src/native-base-theme/components/Switch.js create mode 100644 src/native-base-theme/components/Tab.js create mode 100644 src/native-base-theme/components/TabBar.js create mode 100644 src/native-base-theme/components/TabContainer.js create mode 100644 src/native-base-theme/components/TabHeading.js create mode 100644 src/native-base-theme/components/Text.js create mode 100644 src/native-base-theme/components/Textarea.js create mode 100644 src/native-base-theme/components/Thumbnail.js create mode 100644 src/native-base-theme/components/Title.js create mode 100644 src/native-base-theme/components/Toast.js create mode 100644 src/native-base-theme/components/View.js create mode 100644 src/native-base-theme/components/index.js create mode 100644 src/native-base-theme/variables/commonColor.js create mode 100644 src/native-base-theme/variables/material.js create mode 100644 src/native-base-theme/variables/platform.js diff --git a/src/native-base-theme/components/Badge.js b/src/native-base-theme/components/Badge.js new file mode 100644 index 0000000..98623bb --- /dev/null +++ b/src/native-base-theme/components/Badge.js @@ -0,0 +1,38 @@ +// @flow + +import variable from './../variables/platform'; + +export default (variables /* : * */ = variable) => { + const badgeTheme = { + '.primary': { + backgroundColor: variables.buttonPrimaryBg + }, + '.warning': { + backgroundColor: variables.buttonWarningBg + }, + '.info': { + backgroundColor: variables.buttonInfoBg + }, + '.success': { + backgroundColor: variables.buttonSuccessBg + }, + '.danger': { + backgroundColor: variables.buttonDangerBg + }, + 'NativeBase.Text': { + color: variables.badgeColor, + fontSize: variables.fontSizeBase, + lineHeight: variables.lineHeight - 1, + textAlign: 'center', + paddingHorizontal: 3 + }, + backgroundColor: variables.badgeBg, + padding: variables.badgePadding, + paddingHorizontal: 6, + alignSelf: 'flex-start', + justifyContent: 'center', + borderRadius: 13.5, + height: 27 + }; + return badgeTheme; +}; diff --git a/src/native-base-theme/components/Body.js b/src/native-base-theme/components/Body.js new file mode 100644 index 0000000..6de0c88 --- /dev/null +++ b/src/native-base-theme/components/Body.js @@ -0,0 +1,11 @@ +// @flow + +export default () => { + const bodyTheme = { + flex: 1, + alignItems: 'center', + alignSelf: 'center' + }; + + return bodyTheme; +}; diff --git a/src/native-base-theme/components/Button.js b/src/native-base-theme/components/Button.js new file mode 100644 index 0000000..b913c3c --- /dev/null +++ b/src/native-base-theme/components/Button.js @@ -0,0 +1,387 @@ +// @flow + +import variable from './../variables/platform'; +import { PLATFORM } from './../variables/commonColor'; + +export default (variables /* : * */ = variable) => { + const platformStyle = variables.platformStyle; + const platform = variables.platform; + const darkCommon = { + 'NativeBase.Text': { + color: variables.brandDark + }, + 'NativeBase.Icon': { + color: variables.brandDark + }, + 'NativeBase.IconNB': { + color: variables.brandDark + } + }; + const lightCommon = { + 'NativeBase.Text': { + color: variables.brandLight + }, + 'NativeBase.Icon': { + color: variables.brandLight + }, + 'NativeBase.IconNB': { + color: variables.brandLight + } + }; + const primaryCommon = { + 'NativeBase.Text': { + color: variables.buttonPrimaryBg + }, + 'NativeBase.Icon': { + color: variables.buttonPrimaryBg + }, + 'NativeBase.IconNB': { + color: variables.buttonPrimaryBg + } + }; + const successCommon = { + 'NativeBase.Text': { + color: variables.buttonSuccessBg + }, + 'NativeBase.Icon': { + color: variables.buttonSuccessBg + }, + 'NativeBase.IconNB': { + color: variables.buttonSuccessBg + } + }; + const infoCommon = { + 'NativeBase.Text': { + color: variables.buttonInfoBg + }, + 'NativeBase.Icon': { + color: variables.buttonInfoBg + }, + 'NativeBase.IconNB': { + color: variables.buttonInfoBg + } + }; + const warningCommon = { + 'NativeBase.Text': { + color: variables.buttonWarningBg + }, + 'NativeBase.Icon': { + color: variables.buttonWarningBg + }, + 'NativeBase.IconNB': { + color: variables.buttonWarningBg + } + }; + const dangerCommon = { + 'NativeBase.Text': { + color: variables.buttonDangerBg + }, + 'NativeBase.Icon': { + color: variables.buttonDangerBg + }, + 'NativeBase.IconNB': { + color: variables.buttonDangerBg + } + }; + const buttonTheme = { + '.disabled': { + '.transparent': { + backgroundColor: 'transparent', + 'NativeBase.Text': { + color: variables.buttonDisabledBg + }, + 'NativeBase.Icon': { + color: variables.buttonDisabledBg + }, + 'NativeBase.IconNB': { + color: variables.buttonDisabledBg + } + }, + 'NativeBase.Icon': { + color: variables.brandLight + }, + 'NativeBase.IconNB': { + color: variables.brandLight + }, + backgroundColor: variables.buttonDisabledBg + }, + '.bordered': { + '.dark': { + ...darkCommon, + backgroundColor: 'transparent', + borderColor: variables.brandDark, + borderWidth: variables.borderWidth * 2 + }, + '.light': { + ...lightCommon, + backgroundColor: 'transparent', + borderColor: variables.brandLight, + borderWidth: variables.borderWidth * 2 + }, + '.primary': { + ...primaryCommon, + backgroundColor: 'transparent', + borderColor: variables.buttonPrimaryBg, + borderWidth: variables.borderWidth * 2 + }, + '.success': { + ...successCommon, + backgroundColor: 'transparent', + borderColor: variables.buttonSuccessBg, + borderWidth: variables.borderWidth * 2 + }, + '.info': { + ...infoCommon, + backgroundColor: 'transparent', + borderColor: variables.buttonInfoBg, + borderWidth: variables.borderWidth * 2 + }, + '.warning': { + ...warningCommon, + backgroundColor: 'transparent', + borderColor: variables.buttonWarningBg, + borderWidth: variables.borderWidth * 2 + }, + '.danger': { + ...dangerCommon, + backgroundColor: 'transparent', + borderColor: variables.buttonDangerBg, + borderWidth: variables.borderWidth * 2 + }, + '.disabled': { + backgroundColor: 'transparent', + borderColor: variables.buttonDisabledBg, + borderWidth: variables.borderWidth * 2, + 'NativeBase.Text': { + color: variables.buttonDisabledBg + } + }, + ...primaryCommon, + borderWidth: variables.borderWidth * 2, + elevation: null, + shadowColor: null, + shadowOffset: null, + shadowOpacity: null, + shadowRadius: null, + backgroundColor: 'transparent' + }, + + '.dark': { + '.bordered': { + ...darkCommon + }, + backgroundColor: variables.brandDark + }, + '.light': { + '.transparent': { + ...lightCommon, + backgroundColor: 'transparent' + }, + '.bordered': { + ...lightCommon + }, + ...darkCommon, + backgroundColor: variables.brandLight + }, + + '.primary': { + '.bordered': { + ...primaryCommon + }, + backgroundColor: variables.buttonPrimaryBg + }, + + '.success': { + '.bordered': { + ...successCommon + }, + backgroundColor: variables.buttonSuccessBg + }, + + '.info': { + '.bordered': { + ...infoCommon + }, + backgroundColor: variables.buttonInfoBg + }, + + '.warning': { + '.bordered': { + ...warningCommon + }, + backgroundColor: variables.buttonWarningBg + }, + + '.danger': { + '.bordered': { + ...dangerCommon + }, + backgroundColor: variables.buttonDangerBg + }, + + '.block': { + justifyContent: 'center', + alignSelf: 'stretch' + }, + + '.full': { + justifyContent: 'center', + alignSelf: 'stretch', + borderRadius: 0 + }, + + '.rounded': { + borderRadius: variables.borderRadiusLarge + }, + + '.transparent': { + backgroundColor: 'transparent', + elevation: 0, + shadowColor: null, + shadowOffset: null, + shadowRadius: null, + shadowOpacity: null, + ...primaryCommon, + '.dark': { + ...darkCommon, + }, + '.danger': { + ...dangerCommon, + }, + '.warning': { + ...warningCommon, + }, + '.info': { + ...infoCommon, + }, + '.primary': { + ...primaryCommon, + }, + '.success': { + ...successCommon, + }, + '.light': { + ...lightCommon, + }, + '.disabled': { + backgroundColor: 'transparent', + borderColor: variables.buttonDisabledBg, + borderWidth: variables.borderWidth * 2, + 'NativeBase.Text': { + color: variables.buttonDisabledBg + }, + 'NativeBase.Icon': { + color: variables.buttonDisabledBg + }, + 'NativeBase.IconNB': { + color: variables.buttonDisabledBg + } + } + }, + + '.small': { + height: 30, + 'NativeBase.Text': { + fontSize: 14 + }, + 'NativeBase.Icon': { + fontSize: 20, + paddingTop: 0 + }, + 'NativeBase.IconNB': { + fontSize: 20, + paddingTop: 0 + } + }, + + '.large': { + height: 60, + 'NativeBase.Text': { + fontSize: 22 + } + }, + + '.capitalize': {}, + + '.vertical': { + flexDirection: 'column', + height: null + }, + + 'NativeBase.Text': { + fontFamily: variables.buttonFontFamily, + marginLeft: 0, + marginRight: 0, + color: variables.inverseTextColor, + fontSize: variables.buttonTextSize, + paddingHorizontal: 16, + backgroundColor: 'transparent' + }, + + 'NativeBase.Icon': { + color: variables.inverseTextColor, + fontSize: 24, + marginHorizontal: 16, + paddingTop: platform === PLATFORM.IOS ? 2 : undefined + }, + 'NativeBase.IconNB': { + color: variables.inverseTextColor, + fontSize: 24, + marginHorizontal: 16, + paddingTop: platform === PLATFORM.IOS ? 2 : undefined + }, + + '.iconLeft': { + 'NativeBase.Text': { + marginLeft: 0 + }, + 'NativeBase.IconNB': { + marginRight: 0, + marginLeft: 16 + }, + 'NativeBase.Icon': { + marginRight: 0, + marginLeft: 16 + } + }, + '.iconRight': { + 'NativeBase.Text': { + marginRight: 0 + }, + 'NativeBase.IconNB': { + marginLeft: 0, + marginRight: 16 + }, + 'NativeBase.Icon': { + marginLeft: 0, + marginRight: 16 + } + }, + '.picker': { + 'NativeBase.Text': { + '.note': { + fontSize: 16, + lineHeight: null + } + } + }, + paddingVertical: variables.buttonPadding, + backgroundColor: variables.buttonPrimaryBg, + borderRadius: variables.borderRadiusBase, + borderColor: variables.buttonPrimaryBg, + borderWidth: null, + height: 45, + flexDirection: 'row', + elevation: 2, + shadowColor: + platformStyle === PLATFORM.MATERIAL ? variables.brandDark : undefined, + shadowOffset: + platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined, + shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined, + shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined, + alignItems: 'center', + justifyContent: 'space-between', + alignSelf: 'flex-start' + }; + return buttonTheme; +}; diff --git a/src/native-base-theme/components/Card.js b/src/native-base-theme/components/Card.js new file mode 100644 index 0000000..de4f9f4 --- /dev/null +++ b/src/native-base-theme/components/Card.js @@ -0,0 +1,37 @@ +// @flow + +import variable from './../variables/platform'; + +export default (variables /* : * */ = variable) => { + const cardTheme = { + '.transparent': { + shadowColor: null, + shadowOffset: null, + shadowOpacity: null, + shadowRadius: null, + elevation: null, + backgroundColor: 'transparent', + borderWidth: 0 + }, + '.noShadow': { + shadowColor: null, + shadowOffset: null, + shadowOpacity: null, + elevation: null + }, + marginVertical: 5, + marginHorizontal: 2, + borderWidth: variables.borderWidth, + borderRadius: variables.cardBorderRadius, + borderColor: variables.cardBorderColor, + flexWrap: 'nowrap', + backgroundColor: variables.cardDefaultBg, + shadowColor: '#000', + shadowOffset: { width: 0, height: 2 }, + shadowOpacity: 0.1, + shadowRadius: 1.5, + elevation: 3 + }; + + return cardTheme; +}; diff --git a/src/native-base-theme/components/CardItem.js b/src/native-base-theme/components/CardItem.js new file mode 100644 index 0000000..bfb1757 --- /dev/null +++ b/src/native-base-theme/components/CardItem.js @@ -0,0 +1,198 @@ +// @flow + +import { StyleSheet } from 'react-native'; + +import variable from './../variables/platform'; +import { PLATFORM } from './../variables/commonColor'; + +export default (variables /* : * */ = variable) => { + const platform = variables.platform; + const transparentBtnCommon = { + 'NativeBase.Text': { + fontSize: variables.DefaultFontSize - 3, + color: variables.sTabBarActiveTextColor + }, + 'NativeBase.Icon': { + fontSize: variables.iconFontSize - 10, + color: variables.sTabBarActiveTextColor, + marginHorizontal: null + }, + 'NativeBase.IconNB': { + fontSize: variables.iconFontSize - 10, + color: variables.sTabBarActiveTextColor + }, + paddingVertical: null, + paddingHorizontal: null + }; + + const cardItemTheme = { + 'NativeBase.Left': { + 'NativeBase.Body': { + 'NativeBase.Text': { + '.note': { + color: variables.listNoteColor, + fontWeight: '400', + marginRight: 20 + } + }, + flex: 1, + marginLeft: 10, + alignItems: null + }, + 'NativeBase.Icon': { + fontSize: variables.iconFontSize + }, + 'NativeBase.IconNB': { + fontSize: variables.iconFontSize + }, + 'NativeBase.Text': { + marginLeft: 10, + alignSelf: 'center' + }, + 'NativeBase.Button': { + '.transparent': { + ...transparentBtnCommon, + paddingRight: variables.cardItemPadding + 5 + } + }, + flex: 1, + flexDirection: 'row', + alignItems: 'center' + }, + '.content': { + 'NativeBase.Text': { + color: platform === PLATFORM.IOS ? '#555' : '#222', + fontSize: variables.DefaultFontSize - 2 + } + }, + '.cardBody': { + padding: -5, + 'NativeBase.Text': { + marginTop: 5 + } + }, + 'NativeBase.Body': { + 'NativeBase.Text': { + '.note': { + color: variables.listNoteColor, + fontWeight: '200', + marginRight: 20 + } + }, + 'NativeBase.Button': { + '.transparent': { + ...transparentBtnCommon, + paddingRight: variables.cardItemPadding + 5, + alignSelf: 'stretch' + } + }, + flex: 1, + alignSelf: 'stretch', + alignItems: 'flex-start' + }, + 'NativeBase.Right': { + 'NativeBase.Badge': { + alignSelf: null + }, + 'NativeBase.Button': { + '.transparent': { + ...transparentBtnCommon + }, + alignSelf: null + }, + 'NativeBase.Icon': { + alignSelf: null, + fontSize: variables.iconFontSize - 8, + color: variables.cardBorderColor + }, + 'NativeBase.IconNB': { + alignSelf: null, + fontSize: variables.iconFontSize - 8, + color: variables.cardBorderColor + }, + 'NativeBase.Text': { + fontSize: variables.DefaultFontSize - 1, + alignSelf: null + }, + 'NativeBase.Thumbnail': { + alignSelf: null + }, + 'NativeBase.Image': { + alignSelf: null + }, + 'NativeBase.Radio': { + alignSelf: null + }, + 'NativeBase.Checkbox': { + alignSelf: null + }, + 'NativeBase.Switch': { + alignSelf: null + }, + flex: 0.8 + }, + '.header': { + 'NativeBase.Text': { + fontSize: 16, + fontWeight: platform === PLATFORM.IOS ? '600' : '500' + }, + '.bordered': { + 'NativeBase.Text': { + color: variables.brandPrimary, + fontWeight: platform === PLATFORM.IOS ? '600' : '500' + }, + borderBottomWidth: variables.borderWidth + }, + borderBottomWidth: null, + paddingVertical: variables.cardItemPadding + 5 + }, + '.footer': { + 'NativeBase.Text': { + fontSize: 16, + fontWeight: platform === PLATFORM.IOS ? '600' : '500' + }, + '.bordered': { + 'NativeBase.Text': { + color: variables.brandPrimary, + fontWeight: platform === PLATFORM.IOS ? '600' : '500' + }, + borderTopWidth: variables.borderWidth + }, + borderBottomWidth: null + }, + 'NativeBase.Text': { + '.note': { + color: variables.listNoteColor, + fontWeight: '200' + } + }, + 'NativeBase.Icon': { + width: variables.iconFontSize + 5, + fontSize: variables.iconFontSize - 2 + }, + 'NativeBase.IconNB': { + width: variables.iconFontSize + 5, + fontSize: variables.iconFontSize - 2 + }, + '.bordered': { + borderBottomWidth: StyleSheet.hairlineWidth, + borderColor: variables.cardBorderColor + }, + '.first': { + borderTopLeftRadius: variables.cardBorderRadius, + borderTopRightRadius: variables.cardBorderRadius + }, + '.last': { + borderBottomLeftRadius: variables.cardBorderRadius, + borderBottomRightRadius: variables.cardBorderRadius + }, + flexDirection: 'row', + alignItems: 'center', + borderRadius: variables.cardBorderRadius, + padding: variables.cardItemPadding + 5, + paddingVertical: variables.cardItemPadding, + backgroundColor: variables.cardDefaultBg + }; + + return cardItemTheme; +}; diff --git a/src/native-base-theme/components/CheckBox.js b/src/native-base-theme/components/CheckBox.js new file mode 100644 index 0000000..7a858c3 --- /dev/null +++ b/src/native-base-theme/components/CheckBox.js @@ -0,0 +1,38 @@ +// @flow + +import variable from './../variables/platform'; + +export default (variables /* : * */ = variable) => { + const checkBoxTheme = { + '.checked': { + 'NativeBase.Icon': { + color: variables.checkboxTickColor + }, + 'NativeBase.IconNB': { + color: variables.checkboxTickColor + } + }, + 'NativeBase.Icon': { + color: 'transparent', + lineHeight: variables.CheckboxIconSize, + marginTop: variables.CheckboxIconMarginTop, + fontSize: variables.CheckboxFontSize + }, + 'NativeBase.IconNB': { + color: 'transparent', + lineHeight: variables.CheckboxIconSize, + marginTop: variables.CheckboxIconMarginTop, + fontSize: variables.CheckboxFontSize + }, + borderRadius: variables.CheckboxRadius, + overflow: 'hidden', + width: variables.checkboxSize, + height: variables.checkboxSize, + borderWidth: variables.CheckboxBorderWidth, + paddingLeft: variables.CheckboxPaddingLeft - 1, + paddingBottom: variables.CheckboxPaddingBottom, + left: 10 + }; + + return checkBoxTheme; +}; diff --git a/src/native-base-theme/components/Container.js b/src/native-base-theme/components/Container.js new file mode 100644 index 0000000..cfd7e28 --- /dev/null +++ b/src/native-base-theme/components/Container.js @@ -0,0 +1,17 @@ +// @flow + +import { Platform, Dimensions } from 'react-native'; + +import variable from './../variables/platform'; +import { PLATFORM } from './../variables/commonColor'; + +const deviceHeight = Dimensions.get('window').height; +export default (variables /* : * */ = variable) => { + const theme = { + flex: 1, + height: Platform.OS === PLATFORM.IOS ? deviceHeight : deviceHeight - 20, + backgroundColor: variables.containerBgColor + }; + + return theme; +}; diff --git a/src/native-base-theme/components/Content.js b/src/native-base-theme/components/Content.js new file mode 100644 index 0000000..97bd81c --- /dev/null +++ b/src/native-base-theme/components/Content.js @@ -0,0 +1,14 @@ +// @flow + +export default () => { + const contentTheme = { + flex: 1, + backgroundColor: 'transparent', + 'NativeBase.Segment': { + borderWidth: 0, + backgroundColor: 'transparent' + } + }; + + return contentTheme; +}; diff --git a/src/native-base-theme/components/Fab.js b/src/native-base-theme/components/Fab.js new file mode 100644 index 0000000..4d2b9cb --- /dev/null +++ b/src/native-base-theme/components/Fab.js @@ -0,0 +1,25 @@ +// @flow + +export default () => { + const fabTheme = { + 'NativeBase.Button': { + alignItems: 'center', + padding: null, + justifyContent: 'center', + 'NativeBase.Icon': { + alignSelf: 'center', + fontSize: 20, + marginLeft: 0, + marginRight: 0 + }, + 'NativeBase.IconNB': { + alignSelf: 'center', + fontSize: 20, + marginLeft: 0, + marginRight: 0 + } + } + }; + + return fabTheme; +}; diff --git a/src/native-base-theme/components/Footer.js b/src/native-base-theme/components/Footer.js new file mode 100644 index 0000000..292b35c --- /dev/null +++ b/src/native-base-theme/components/Footer.js @@ -0,0 +1,119 @@ +// @flow + +import variable from './../variables/platform'; +import { PLATFORM } from './../variables/commonColor'; + +export default (variables /* : * */ = variable) => { + const platformStyle = variables.platformStyle; + const platform = variables.platform; + + const iconCommon = { + 'NativeBase.Icon': { + color: variables.tabBarActiveTextColor + } + }; + const iconNBCommon = { + 'NativeBase.IconNB': { + color: variables.tabBarActiveTextColor + } + }; + const textCommon = { + 'NativeBase.Text': { + color: variables.tabBarActiveTextColor + } + }; + const footerTheme = { + 'NativeBase.Left': { + 'NativeBase.Button': { + '.transparent': { + backgroundColor: 'transparent', + borderColor: null, + elevation: 0, + shadowColor: null, + shadowOffset: null, + shadowRadius: null, + shadowOpacity: null, + ...iconCommon, + ...iconNBCommon, + ...textCommon + }, + alignSelf: null, + ...iconCommon, + ...iconNBCommon + // ...textCommon + }, + flex: 1, + alignSelf: 'center', + alignItems: 'flex-start' + }, + 'NativeBase.Body': { + flex: 1, + alignItems: 'center', + alignSelf: 'center', + flexDirection: 'row', + 'NativeBase.Button': { + alignSelf: 'center', + '.transparent': { + backgroundColor: 'transparent', + borderColor: null, + elevation: 0, + shadowColor: null, + shadowOffset: null, + shadowRadius: null, + shadowOpacity: null, + ...iconCommon, + ...iconNBCommon, + ...textCommon + }, + '.full': { + height: variables.footerHeight, + paddingBottom: variables.footerPaddingBottom, + flex: 1 + }, + ...iconCommon, + ...iconNBCommon + // ...textCommon + } + }, + 'NativeBase.Right': { + 'NativeBase.Button': { + '.transparent': { + backgroundColor: 'transparent', + borderColor: null, + elevation: 0, + shadowColor: null, + shadowOffset: null, + shadowRadius: null, + shadowOpacity: null, + ...iconCommon, + ...iconNBCommon, + ...textCommon + }, + alignSelf: null, + ...iconCommon, + ...iconNBCommon + // ...textCommon + }, + flex: 1, + alignSelf: 'center', + alignItems: 'flex-end' + }, + backgroundColor: variables.footerDefaultBg, + flexDirection: 'row', + justifyContent: 'center', + borderTopWidth: + platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL + ? variables.borderWidth + : undefined, + borderColor: + platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL + ? '#cbcbcb' + : undefined, + height: variables.footerHeight, + paddingBottom: variables.footerPaddingBottom, + elevation: 3, + left: 0, + right: 0 + }; + return footerTheme; +}; diff --git a/src/native-base-theme/components/FooterTab.js b/src/native-base-theme/components/FooterTab.js new file mode 100644 index 0000000..abaa023 --- /dev/null +++ b/src/native-base-theme/components/FooterTab.js @@ -0,0 +1,79 @@ +// @flow + +import { Platform } from 'react-native'; + +import variable from './../variables/platform'; +import { PLATFORM } from './../variables/commonColor'; + +export default (variables /* : * */ = variable) => { + const platform = variables.platform; + + const footerTabTheme = { + 'NativeBase.Button': { + '.active': { + 'NativeBase.Text': { + color: variables.tabBarActiveTextColor, + fontSize: variables.tabBarTextSize, + lineHeight: 16 + }, + 'NativeBase.Icon': { + color: variables.tabBarActiveTextColor + }, + 'NativeBase.IconNB': { + color: variables.tabBarActiveTextColor + }, + backgroundColor: variables.tabActiveBgColor + }, + flexDirection: null, + backgroundColor: 'transparent', + borderColor: null, + elevation: 0, + shadowColor: null, + shadowOffset: null, + shadowRadius: null, + shadowOpacity: null, + alignSelf: 'center', + flex: 1, + height: variables.footerHeight, + justifyContent: 'center', + '.badge': { + 'NativeBase.Badge': { + 'NativeBase.Text': { + fontSize: 11, + fontWeight: platform === PLATFORM.IOS ? '600' : undefined, + lineHeight: 14 + }, + top: -3, + alignSelf: 'center', + left: 10, + zIndex: 99, + height: 18, + padding: 1.7, + paddingHorizontal: 3 + }, + 'NativeBase.Icon': { + marginTop: -18 + } + }, + 'NativeBase.Icon': { + color: variables.tabBarTextColor + }, + 'NativeBase.IconNB': { + color: variables.tabBarTextColor + }, + 'NativeBase.Text': { + color: variables.tabBarTextColor, + fontSize: variables.tabBarTextSize, + lineHeight: 16 + } + }, + backgroundColor: + Platform.OS === PLATFORM.ANDROID ? variables.footerDefaultBg : undefined, + flexDirection: 'row', + justifyContent: 'space-between', + flex: 1, + alignSelf: 'stretch' + }; + + return footerTabTheme; +}; diff --git a/src/native-base-theme/components/Form.js b/src/native-base-theme/components/Form.js new file mode 100644 index 0000000..3040f30 --- /dev/null +++ b/src/native-base-theme/components/Form.js @@ -0,0 +1,86 @@ +// @flow + +export default () => { + const theme = { + 'NativeBase.Item': { + '.fixedLabel': { + 'NativeBase.Label': { + paddingLeft: null + }, + marginLeft: 15 + }, + '.inlineLabel': { + 'NativeBase.Label': { + paddingLeft: null + }, + marginLeft: 15 + }, + '.placeholderLabel': { + 'NativeBase.Input': {} + }, + '.stackedLabel': { + 'NativeBase.Label': { + top: 5, + paddingLeft: null + }, + 'NativeBase.Input': { + paddingLeft: null, + marginLeft: null + }, + 'NativeBase.Icon': { + marginTop: 36 + }, + marginLeft: 15 + }, + '.floatingLabel': { + 'NativeBase.Input': { + paddingLeft: null, + top: 10, + marginLeft: null + }, + 'NativeBase.Label': { + left: 0, + top: 6 + }, + 'NativeBase.Icon': { + top: 6 + }, + marginTop: 15, + marginLeft: 15 + }, + '.regular': { + 'NativeBase.Label': { + left: 0 + }, + marginLeft: 0 + }, + '.rounded': { + 'NativeBase.Label': { + left: 0 + }, + marginLeft: 0 + }, + '.underline': { + 'NativeBase.Label': { + left: 0, + top: 0, + position: 'relative' + }, + 'NativeBase.Input': { + left: -15 + }, + marginLeft: 15 + }, + '.last': { + marginLeft: 0, + paddingLeft: 15 + }, + 'NativeBase.Label': { + paddingRight: 5 + }, + marginLeft: 15 + } + }; + + return theme; +}; diff --git a/src/native-base-theme/components/H1.js b/src/native-base-theme/components/H1.js new file mode 100644 index 0000000..20aa8db --- /dev/null +++ b/src/native-base-theme/components/H1.js @@ -0,0 +1,13 @@ +// @flow + +import variable from './../variables/platform'; + +export default (variables /* : * */ = variable) => { + const h1Theme = { + color: variables.textColor, + fontSize: variables.fontSizeH1, + lineHeight: variables.lineHeightH1 + }; + + return h1Theme; +}; diff --git a/src/native-base-theme/components/H2.js b/src/native-base-theme/components/H2.js new file mode 100644 index 0000000..cad4057 --- /dev/null +++ b/src/native-base-theme/components/H2.js @@ -0,0 +1,13 @@ +// @flow + +import variable from './../variables/platform'; + +export default (variables /* : * */ = variable) => { + const h2Theme = { + color: variables.textColor, + fontSize: variables.fontSizeH2, + lineHeight: variables.lineHeightH2 + }; + + return h2Theme; +}; diff --git a/src/native-base-theme/components/H3.js b/src/native-base-theme/components/H3.js new file mode 100644 index 0000000..19917f5 --- /dev/null +++ b/src/native-base-theme/components/H3.js @@ -0,0 +1,13 @@ +// @flow + +import variable from './../variables/platform'; + +export default (variables /* : * */ = variable) => { + const h3Theme = { + color: variables.textColor, + fontSize: variables.fontSizeH3, + lineHeight: variables.lineHeightH3 + }; + + return h3Theme; +}; diff --git a/src/native-base-theme/components/Header.js b/src/native-base-theme/components/Header.js new file mode 100644 index 0000000..31bb7ea --- /dev/null +++ b/src/native-base-theme/components/Header.js @@ -0,0 +1,419 @@ +// @flow + +import { PixelRatio, StatusBar } from 'react-native'; + +import variable from './../variables/platform'; +import { PLATFORM } from './../variables/commonColor'; + +export default (variables /* : * */ = variable) => { + const platformStyle = variables.platformStyle; + const platform = variables.platform; + + const headerTheme = { + '.span': { + height: 128, + 'NativeBase.Left': { + alignSelf: 'flex-start' + }, + 'NativeBase.Body': { + alignSelf: 'flex-end', + alignItems: 'flex-start', + justifyContent: 'center', + paddingBottom: 26 + }, + 'NativeBase.Right': { + alignSelf: 'flex-start' + } + }, + '.hasSubtitle': { + 'NativeBase.Body': { + 'NativeBase.Title': { + fontSize: variables.titleFontSize - 2, + fontFamily: variables.titleFontfamily, + textAlign: 'center', + fontWeight: '500', + paddingBottom: 3 + }, + 'NativeBase.Subtitle': { + fontSize: variables.subTitleFontSize, + fontFamily: variables.titleFontfamily, + color: variables.subtitleColor, + textAlign: 'center' + } + } + }, + '.transparent': { + backgroundColor: 'transparent', + borderBottomColor: 'transparent', + elevation: 0, + shadowColor: null, + shadowOffset: null, + shadowRadius: null, + shadowOpacity: null, + paddingTop: + platform === PLATFORM.ANDROID ? StatusBar.currentHeight : undefined, + height: + platform === PLATFORM.ANDROID + ? variables.toolbarHeight + StatusBar.currentHeight + : variables.toolbarHeight + }, + '.noShadow': { + elevation: 0, + shadowColor: null, + shadowOffset: null, + shadowRadius: null, + shadowOpacity: null + }, + '.hasTabs': { + elevation: 0, + shadowColor: null, + shadowOffset: null, + shadowRadius: null, + shadowOpacity: null, + borderBottomWidth: null + }, + '.hasSegment': { + elevation: 0, + shadowColor: null, + shadowOffset: null, + shadowRadius: null, + shadowOpacity: null, + borderBottomWidth: null, + 'NativeBase.Left': { + flex: 0.3 + }, + 'NativeBase.Right': { + flex: 0.3 + }, + 'NativeBase.Body': { + flex: 1, + 'NativeBase.Segment': { + marginRight: 0, + alignSelf: 'center', + 'NativeBase.Button': { + paddingLeft: 0, + paddingRight: 0 + } + } + } + }, + '.noLeft': { + 'NativeBase.Left': { + width: platform === PLATFORM.IOS ? undefined : 0, + flex: platform === PLATFORM.IOS ? 1 : 0 + }, + 'NativeBase.Body': { + 'NativeBase.Title': { + paddingLeft: platform === PLATFORM.IOS ? undefined : 10 + }, + 'NativeBase.Subtitle': { + paddingLeft: platform === PLATFORM.IOS ? undefined : 10 + } + } + }, + 'NativeBase.Button': { + justifyContent: 'center', + alignSelf: 'center', + alignItems: 'center', + '.transparent': { + 'NativeBase.Text': { + color: variables.toolbarBtnTextColor, + fontWeight: '600' + }, + 'NativeBase.Icon': { + color: variables.toolbarBtnColor + }, + 'NativeBase.IconNB': { + color: variables.toolbarBtnColor + }, + paddingHorizontal: variables.buttonPadding + }, + paddingHorizontal: 15 + }, + '.searchBar': { + 'NativeBase.Item': { + 'NativeBase.Icon': { + backgroundColor: 'transparent', + color: variables.dropdownLinkColor, + fontSize: variables.toolbarSearchIconSize, + alignItems: 'center', + marginTop: 2, + paddingRight: 10, + paddingLeft: 10 + }, + 'NativeBase.IconNB': { + backgroundColor: 'transparent', + color: null, + alignSelf: 'center' + }, + 'NativeBase.Input': { + alignSelf: 'center', + lineHeight: null, + height: variables.searchBarInputHeight + }, + alignSelf: 'center', + alignItems: 'center', + justifyContent: 'flex-start', + flex: 1, + height: variables.searchBarHeight, + borderColor: 'transparent', + backgroundColor: variables.toolbarInputColor + }, + 'NativeBase.Button': { + '.transparent': { + 'NativeBase.Text': { + fontWeight: '500' + }, + paddingHorizontal: null, + paddingLeft: platform === PLATFORM.IOS ? 10 : null + }, + paddingHorizontal: platform === PLATFORM.IOS ? undefined : null, + width: platform === PLATFORM.IOS ? undefined : 0, + height: platform === PLATFORM.IOS ? undefined : 0 + } + }, + '.rounded': { + 'NativeBase.Item': { + borderRadius: + platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL + ? 25 + : 3 + } + }, + 'NativeBase.Left': { + 'NativeBase.Button': { + '.hasText': { + marginLeft: -10, + height: 30, + 'NativeBase.Icon': { + color: variables.toolbarBtnColor, + fontSize: variables.iconHeaderSize, + marginTop: 2, + marginRight: 5, + marginLeft: 2 + }, + 'NativeBase.Text': { + color: variables.toolbarBtnTextColor, + fontSize: platform === PLATFORM.IOS ? 17 : 0, + marginLeft: 7, + lineHeight: 19.5 + }, + 'NativeBase.IconNB': { + color: variables.toolbarBtnColor, + fontSize: variables.iconHeaderSize, + marginTop: 2, + marginRight: 5, + marginLeft: 2 + } + }, + '.transparent': { + marginLeft: + platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL + ? -3 + : 0, + 'NativeBase.Icon': { + color: variables.toolbarBtnColor, + fontSize: + platform === PLATFORM.IOS && + variables.platformStyle !== PLATFORM.MATERIAL + ? variables.iconHeaderSize + 1 + : variables.iconHeaderSize, + marginTop: 0, + marginRight: 2, + marginLeft: 1, + paddingTop: 1 + }, + 'NativeBase.IconNB': { + color: variables.toolbarBtnColor, + fontSize: + platform === PLATFORM.IOS && + variables.platformStyle !== PLATFORM.MATERIAL + ? variables.iconHeaderSize + 1 + : variables.iconHeaderSize - 2, + marginTop: 0, + marginRight: 2, + marginLeft: 1, + paddingTop: 1 + }, + 'NativeBase.Text': { + color: variables.toolbarBtnTextColor, + fontSize: platform === PLATFORM.IOS ? 17 : 14, + top: platform === PLATFORM.IOS ? 1 : -1.5, + paddingLeft: + platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL + ? 2 + : 5, + paddingRight: + platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL + ? undefined + : 10 + }, + backgroundColor: 'transparent', + borderColor: null, + elevation: 0, + shadowColor: null, + shadowOffset: null, + shadowRadius: null, + shadowOpacity: null + }, + 'NativeBase.Icon': { + color: variables.toolbarBtnColor + }, + 'NativeBase.IconNB': { + color: variables.toolbarBtnColor + }, + alignSelf: null, + paddingRight: variables.buttonPadding, + paddingLeft: + platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL + ? 4 + : 8 + }, + flex: + platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL + ? 1 + : 0.4, + alignSelf: 'center', + alignItems: 'flex-start' + }, + 'NativeBase.Body': { + flex: 1, + alignItems: + platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL + ? 'center' + : 'flex-start', + alignSelf: 'center', + 'NativeBase.Segment': { + borderWidth: 0, + alignSelf: 'flex-end', + marginRight: platform === PLATFORM.IOS ? -40 : -55 + }, + 'NativeBase.Button': { + alignSelf: 'center', + '.transparent': { + backgroundColor: 'transparent' + }, + 'NativeBase.Icon': { + color: variables.toolbarBtnColor + }, + 'NativeBase.IconNB': { + color: variables.toolbarBtnColor + }, + 'NativeBase.Text': { + color: variables.inverseTextColor, + backgroundColor: 'transparent' + } + } + }, + 'NativeBase.Right': { + 'NativeBase.Button': { + '.hasText': { + height: 30, + 'NativeBase.Icon': { + color: variables.toolbarBtnColor, + fontSize: variables.iconHeaderSize - 2, + marginTop: 2, + marginRight: 2, + marginLeft: 5 + }, + 'NativeBase.Text': { + color: variables.toolbarBtnTextColor, + fontSize: platform === PLATFORM.IOS ? 17 : 14, + lineHeight: 19.5 + }, + 'NativeBase.IconNB': { + color: variables.toolbarBtnColor, + fontSize: variables.iconHeaderSize - 2, + marginTop: 2, + marginRight: 2, + marginLeft: 5 + } + }, + '.transparent': { + marginRight: platform === PLATFORM.IOS ? -9 : -5, + paddingLeft: 15, + paddingRight: 12, + paddingHorizontal: 15, + borderRadius: 50, + 'NativeBase.Icon': { + color: variables.toolbarBtnColor, + fontSize: variables.iconHeaderSize - 2, + marginTop: 0, + marginLeft: 2, + marginRight: 0 + // paddingTop: 0 + }, + 'NativeBase.IconNB': { + color: variables.toolbarBtnColor, + fontSize: variables.iconHeaderSize - 2, + marginTop: 0, + marginLeft: 2, + marginRight: 0 + // paddingTop: 0 + }, + 'NativeBase.Text': { + color: variables.toolbarBtnTextColor, + fontSize: platform === PLATFORM.IOS ? 17 : 14, + top: platform === PLATFORM.IOS ? 1 : -1.5, + paddingRight: + platform === PLATFORM.IOS && + variables.platformStyle !== PLATFORM.MATERIAL + ? 0 + : undefined + }, + backgroundColor: 'transparent', + borderColor: null, + elevation: 0, + shadowColor: null, + shadowOffset: null, + shadowRadius: null, + shadowOpacity: null + }, + 'NativeBase.Icon': { + color: variables.toolbarBtnColor + }, + 'NativeBase.IconNB': { + color: variables.toolbarBtnColor + }, + alignSelf: null, + paddingHorizontal: variables.buttonPadding + }, + flex: 1, + alignSelf: 'center', + alignItems: 'flex-end', + flexDirection: 'row', + justifyContent: 'flex-end' + }, + backgroundColor: variables.toolbarDefaultBg, + flexDirection: 'row', + // paddingHorizontal: 10, + paddingLeft: + platform === PLATFORM.IOS && variables.platformStyle !== PLATFORM.MATERIAL + ? 6 + : 10, + paddingRight: 10, + justifyContent: 'center', + // paddingTop: platform === PLATFORM.IOS ? 18 : 0, + borderBottomWidth: + platform === PLATFORM.IOS + ? 1 / PixelRatio.getPixelSizeForLayoutSize(1) + : 0, + borderBottomColor: variables.toolbarDefaultBorder, + height: + variables.platform === PLATFORM.IOS && + variables.platformStyle === PLATFORM.MATERIAL + ? variables.toolbarHeight + 10 + : variables.toolbarHeight, + elevation: 3, + shadowColor: platformStyle === PLATFORM.MATERIAL ? '#000' : undefined, + shadowOffset: + platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined, + shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined, + shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined, + top: 0, + left: 0, + right: 0 + }; + + return headerTheme; +}; diff --git a/src/native-base-theme/components/Icon.js b/src/native-base-theme/components/Icon.js new file mode 100644 index 0000000..1161cd2 --- /dev/null +++ b/src/native-base-theme/components/Icon.js @@ -0,0 +1,12 @@ +// @flow + +import variable from './../variables/platform'; + +export default (variables /* : * */ = variable) => { + const iconTheme = { + fontSize: variables.iconFontSize, + color: variables.textColor + }; + + return iconTheme; +}; diff --git a/src/native-base-theme/components/Input.js b/src/native-base-theme/components/Input.js new file mode 100644 index 0000000..d0dd6af --- /dev/null +++ b/src/native-base-theme/components/Input.js @@ -0,0 +1,19 @@ +// @flow + +import variable from './../variables/platform'; + +export default (variables /* : * */ = variable) => { + const inputTheme = { + '.multiline': { + height: null + }, + height: variables.inputHeightBase, + color: variables.inputColor, + paddingLeft: 5, + paddingRight: 5, + flex: 1, + fontSize: variables.inputFontSize + }; + + return inputTheme; +}; diff --git a/src/native-base-theme/components/InputGroup.js b/src/native-base-theme/components/InputGroup.js new file mode 100644 index 0000000..7988ca5 --- /dev/null +++ b/src/native-base-theme/components/InputGroup.js @@ -0,0 +1,132 @@ +// @flow + +import variable from './../variables/platform'; + +export default (variables /* : * */ = variable) => { + const inputGroupTheme = { + 'NativeBase.Icon': { + fontSize: 24, + color: variables.sTabBarActiveTextColor, + paddingHorizontal: 5 + }, + 'NativeBase.IconNB': { + fontSize: 24, + color: variables.sTabBarActiveTextColor, + paddingHorizontal: 5 + }, + 'NativeBase.Input': { + height: variables.inputHeightBase, + color: variables.inputColor, + paddingLeft: 5, + paddingRight: 5, + flex: 1, + fontSize: variables.inputFontSize, + lineHeight: variables.inputLineHeight + }, + '.underline': { + '.success': { + borderColor: variables.inputSuccessBorderColor + }, + '.error': { + borderColor: variables.inputErrorBorderColor + }, + paddingLeft: 5, + borderWidth: variables.borderWidth, + borderTopWidth: 0, + borderRightWidth: 0, + borderLeftWidth: 0, + borderColor: variables.inputBorderColor + }, + '.regular': { + '.success': { + borderColor: variables.inputSuccessBorderColor + }, + '.error': { + borderColor: variables.inputErrorBorderColor + }, + paddingLeft: 5, + borderWidth: variables.borderWidth, + borderColor: variables.inputBorderColor + }, + '.rounded': { + '.success': { + borderColor: variables.inputSuccessBorderColor + }, + '.error': { + borderColor: variables.inputErrorBorderColor + }, + paddingLeft: 5, + borderWidth: variables.borderWidth, + borderRadius: variables.inputGroupRoundedBorderRadius, + borderColor: variables.inputBorderColor + }, + + '.success': { + 'NativeBase.Icon': { + color: variables.inputSuccessBorderColor + }, + 'NativeBase.IconNB': { + color: variables.inputSuccessBorderColor + }, + '.rounded': { + borderRadius: 30, + borderColor: variables.inputSuccessBorderColor + }, + '.regular': { + borderColor: variables.inputSuccessBorderColor + }, + '.underline': { + borderWidth: variables.borderWidth, + borderTopWidth: 0, + borderRightWidth: 0, + borderLeftWidth: 0, + borderColor: variables.inputSuccessBorderColor + }, + borderColor: variables.inputSuccessBorderColor + }, + + '.error': { + 'NativeBase.Icon': { + color: variables.inputErrorBorderColor + }, + 'NativeBase.IconNB': { + color: variables.inputErrorBorderColor + }, + '.rounded': { + borderRadius: 30, + borderColor: variables.inputErrorBorderColor + }, + '.regular': { + borderColor: variables.inputErrorBorderColor + }, + '.underline': { + borderWidth: variables.borderWidth, + borderTopWidth: 0, + borderRightWidth: 0, + borderLeftWidth: 0, + borderColor: variables.inputErrorBorderColor + }, + borderColor: variables.inputErrorBorderColor + }, + '.disabled': { + 'NativeBase.Icon': { + color: '#384850' + }, + 'NativeBase.IconNB': { + color: '#384850' + } + }, + + paddingLeft: 5, + borderWidth: variables.borderWidth, + borderTopWidth: 0, + borderRightWidth: 0, + borderLeftWidth: 0, + borderColor: variables.inputBorderColor, + backgroundColor: 'transparent', + flexDirection: 'row', + alignItems: 'center' + }; + + return inputGroupTheme; +}; diff --git a/src/native-base-theme/components/Item.js b/src/native-base-theme/components/Item.js new file mode 100644 index 0000000..79c9add --- /dev/null +++ b/src/native-base-theme/components/Item.js @@ -0,0 +1,242 @@ +// @flow + +import { Platform } from 'react-native'; + +import variable from './../variables/platform'; +import { PLATFORM } from './../variables/commonColor'; + +export default (variables /* : * */ = variable) => { + const itemTheme = { + '.floatingLabel': { + 'NativeBase.Input': { + height: 50, + top: 8, + paddingTop: 3, + paddingBottom: 7, + '.multiline': { + minHeight: variables.inputHeightBase, + paddingTop: Platform.OS === PLATFORM.IOS ? 10 : 3, + paddingBottom: Platform.OS === PLATFORM.IOS ? 14 : 10 + } + }, + 'NativeBase.Label': { + paddingTop: 5 + }, + 'NativeBase.Icon': { + top: 6, + paddingTop: 8 + }, + 'NativeBase.IconNB': { + top: 6, + paddingTop: 8 + } + }, + '.fixedLabel': { + 'NativeBase.Label': { + position: null, + top: null, + left: null, + right: null, + flex: 1, + height: null, + width: null, + fontSize: variables.inputFontSize + }, + 'NativeBase.Input': { + flex: 2, + fontSize: variables.inputFontSize + } + }, + '.stackedLabel': { + 'NativeBase.Label': { + position: null, + top: null, + left: null, + right: null, + paddingTop: 5, + alignSelf: 'flex-start', + fontSize: variables.inputFontSize - 2 + }, + 'NativeBase.Icon': { + marginTop: 36 + }, + 'NativeBase.Input': { + // alignSelf: Platform.OS === PLATFORM.IOS ? 'stretch' : 'flex-start', + alignSelf: 'stretch', + flex: 1, + // width: Platform.OS === PLATFORM.IOS ? null : variables.deviceWidth - 25, + fontSize: variables.inputFontSize, + lineHeight: variables.inputLineHeight - 6, + '.secureTextEntry': { + fontSize: variables.inputFontSize + }, + '.multiline': { + paddingTop: Platform.OS === PLATFORM.IOS ? 9 : undefined, + paddingBottom: Platform.OS === PLATFORM.IOS ? 9 : undefined + } + }, + flexDirection: null, + minHeight: variables.inputHeightBase + 15 + }, + '.inlineLabel': { + 'NativeBase.Label': { + position: null, + top: null, + left: null, + right: null, + paddingRight: 20, + height: null, + width: null, + fontSize: variables.inputFontSize + }, + 'NativeBase.Input': { + paddingLeft: 5, + fontSize: variables.inputFontSize + }, + flexDirection: 'row' + }, + 'NativeBase.Label': { + fontSize: variables.inputFontSize, + color: variables.inputColorPlaceholder, + paddingRight: 5 + }, + 'NativeBase.Icon': { + fontSize: 24, + paddingRight: 8 + }, + 'NativeBase.IconNB': { + fontSize: 24, + paddingRight: 8 + }, + 'NativeBase.Input': { + '.multiline': { + height: null + }, + height: variables.inputHeightBase, + color: variables.inputColor, + flex: 1, + top: Platform.OS === PLATFORM.IOS ? 1.5 : undefined, + fontSize: variables.inputFontSize + }, + '.underline': { + 'NativeBase.Input': { + paddingLeft: 15 + }, + '.success': { + borderColor: variables.inputSuccessBorderColor + }, + '.error': { + borderColor: variables.inputErrorBorderColor + }, + borderWidth: variables.borderWidth * 2, + borderTopWidth: 0, + borderRightWidth: 0, + borderLeftWidth: 0, + borderColor: variables.inputBorderColor + }, + '.regular': { + 'NativeBase.Input': { + paddingLeft: 8 + }, + 'NativeBase.Icon': { + paddingLeft: 10 + }, + '.success': { + borderColor: variables.inputSuccessBorderColor + }, + '.error': { + borderColor: variables.inputErrorBorderColor + }, + borderWidth: variables.borderWidth * 2, + borderColor: variables.inputBorderColor + }, + '.rounded': { + 'NativeBase.Input': { + paddingLeft: 8 + }, + 'NativeBase.Icon': { + paddingLeft: 10 + }, + '.success': { + borderColor: variables.inputSuccessBorderColor + }, + '.error': { + borderColor: variables.inputErrorBorderColor + }, + borderWidth: variables.borderWidth * 2, + borderRadius: 30, + borderColor: variables.inputBorderColor + }, + + '.success': { + 'NativeBase.Icon': { + color: variables.inputSuccessBorderColor + }, + 'NativeBase.IconNB': { + color: variables.inputSuccessBorderColor + }, + '.rounded': { + borderRadius: 30, + borderColor: variables.inputSuccessBorderColor + }, + '.regular': { + borderColor: variables.inputSuccessBorderColor + }, + '.underline': { + borderWidth: variables.borderWidth * 2, + borderTopWidth: 0, + borderRightWidth: 0, + borderLeftWidth: 0, + borderColor: variables.inputSuccessBorderColor + }, + borderColor: variables.inputSuccessBorderColor + }, + + '.error': { + 'NativeBase.Icon': { + color: variables.inputErrorBorderColor + }, + 'NativeBase.IconNB': { + color: variables.inputErrorBorderColor + }, + '.rounded': { + borderRadius: 30, + borderColor: variables.inputErrorBorderColor + }, + '.regular': { + borderColor: variables.inputErrorBorderColor + }, + '.underline': { + borderWidth: variables.borderWidth * 2, + borderTopWidth: 0, + borderRightWidth: 0, + borderLeftWidth: 0, + borderColor: variables.inputErrorBorderColor + }, + borderColor: variables.inputErrorBorderColor + }, + '.disabled': { + 'NativeBase.Icon': { + color: '#384850' + }, + 'NativeBase.IconNB': { + color: '#384850' + } + }, + '.picker': { + marginLeft: 0 + }, + + borderWidth: variables.borderWidth * 2, + borderTopWidth: 0, + borderRightWidth: 0, + borderLeftWidth: 0, + borderColor: variables.inputBorderColor, + backgroundColor: 'transparent', + flexDirection: 'row', + alignItems: 'center', + marginLeft: 2 + }; + + return itemTheme; +}; diff --git a/src/native-base-theme/components/Label.js b/src/native-base-theme/components/Label.js new file mode 100644 index 0000000..118f648 --- /dev/null +++ b/src/native-base-theme/components/Label.js @@ -0,0 +1,12 @@ +// @flow + +export default () => { + const labelTheme = { + '.focused': { + width: 0 + }, + fontSize: 17 + }; + + return labelTheme; +}; diff --git a/src/native-base-theme/components/Left.js b/src/native-base-theme/components/Left.js new file mode 100644 index 0000000..e01d693 --- /dev/null +++ b/src/native-base-theme/components/Left.js @@ -0,0 +1,11 @@ +// @flow + +export default () => { + const leftTheme = { + flex: 1, + alignSelf: 'center', + alignItems: 'flex-start' + }; + + return leftTheme; +}; diff --git a/src/native-base-theme/components/ListItem.js b/src/native-base-theme/components/ListItem.js new file mode 100644 index 0000000..c41ec5d --- /dev/null +++ b/src/native-base-theme/components/ListItem.js @@ -0,0 +1,446 @@ +// @flow + +import { Platform, PixelRatio } from 'react-native'; + +import pickerTheme from './Picker'; +import variable from './../variables/platform'; +import { PLATFORM } from './../variables/commonColor'; + +export default (variables /* : * */ = variable) => { + const platform = variables.platform; + const selectedStyle = { + 'NativeBase.Text': { + color: variables.listItemSelected + }, + 'NativeBase.Icon': { + color: variables.listItemSelected + } + }; + + const listItemTheme = { + 'NativeBase.InputGroup': { + 'NativeBase.Icon': { + paddingRight: 5 + }, + 'NativeBase.IconNB': { + paddingRight: 5 + }, + 'NativeBase.Input': { + paddingHorizontal: 5 + }, + flex: 1, + borderWidth: null, + margin: -10, + borderBottomColor: 'transparent' + }, + '.searchBar': { + 'NativeBase.Item': { + 'NativeBase.Icon': { + backgroundColor: 'transparent', + color: variables.dropdownLinkColor, + fontSize: + platform === PLATFORM.IOS + ? variables.iconFontSize - 10 + : variables.iconFontSize - 5, + alignItems: 'center', + marginTop: 2, + paddingRight: 8 + }, + 'NativeBase.IconNB': { + backgroundColor: 'transparent', + color: null, + alignSelf: 'center' + }, + 'NativeBase.Input': { + alignSelf: 'center' + }, + alignSelf: 'center', + alignItems: 'center', + justifyContent: 'flex-start', + flex: 1, + height: platform === PLATFORM.IOS ? 30 : 40, + borderColor: 'transparent', + backgroundColor: '#fff', + borderRadius: 5 + }, + 'NativeBase.Button': { + '.transparent': { + 'NativeBase.Text': { + fontWeight: '500' + }, + paddingHorizontal: null, + paddingLeft: platform === PLATFORM.IOS ? 10 : null + }, + paddingHorizontal: platform === PLATFORM.IOS ? undefined : null, + width: platform === PLATFORM.IOS ? undefined : 0, + height: platform === PLATFORM.IOS ? undefined : 0 + }, + backgroundColor: variables.toolbarInputColor, + padding: 10, + marginLeft: null + }, + 'NativeBase.CheckBox': { + marginLeft: -10, + marginRight: 10 + }, + '.first': { + '.itemHeader': { + paddingTop: variables.listItemPadding + 3 + } + }, + '.itemHeader': { + '.first': { + paddingTop: variables.listItemPadding + 3 + }, + borderBottomWidth: + platform === PLATFORM.IOS ? variables.borderWidth : null, + marginLeft: null, + padding: variables.listItemPadding, + paddingLeft: variables.listItemPadding + 5, + paddingTop: + platform === PLATFORM.IOS ? variables.listItemPadding + 25 : undefined, + paddingBottom: + platform === PLATFORM.ANDROID ? variables.listItemPadding + 20 : undefined, + flexDirection: 'row', + borderColor: variables.listBorderColor, + 'NativeBase.Text': { + fontSize: 14, + color: platform === PLATFORM.IOS ? undefined : variables.listNoteColor + } + }, + '.itemDivider': { + borderBottomWidth: null, + marginLeft: null, + padding: variables.listItemPadding, + paddingLeft: variables.listItemPadding + 5, + backgroundColor: variables.listDividerBg, + flexDirection: 'row', + borderColor: variables.listBorderColor + }, + '.selected': { + 'NativeBase.Left': { + ...selectedStyle + }, + 'NativeBase.Body': { + ...selectedStyle + }, + 'NativeBase.Right': { + ...selectedStyle + }, + ...selectedStyle + }, + 'NativeBase.Left': { + 'NativeBase.Body': { + 'NativeBase.Text': { + '.note': { + color: variables.listNoteColor, + fontWeight: '200' + }, + fontWeight: '600' + }, + marginLeft: 10, + alignItems: null, + alignSelf: null + }, + 'NativeBase.Icon': { + width: variables.iconFontSize - 10, + fontSize: variables.iconFontSize - 10 + }, + 'NativeBase.IconNB': { + width: variables.iconFontSize - 10, + fontSize: variables.iconFontSize - 10 + }, + 'NativeBase.Text': { + alignSelf: 'center' + }, + flexDirection: 'row' + }, + 'NativeBase.Body': { + 'NativeBase.Text': { + marginHorizontal: variables.listItemPadding, + '.note': { + color: variables.listNoteColor, + fontWeight: '200' + } + }, + alignSelf: null, + alignItems: null + }, + 'NativeBase.Right': { + 'NativeBase.Badge': { + alignSelf: null + }, + 'NativeBase.PickerNB': { + 'NativeBase.Button': { + marginRight: -15, + 'NativeBase.Text': { + color: variables.topTabBarActiveTextColor + } + } + }, + 'NativeBase.Button': { + alignSelf: null, + '.transparent': { + 'NativeBase.Text': { + color: variables.topTabBarActiveTextColor + } + } + }, + 'NativeBase.Icon': { + alignSelf: null, + fontSize: variables.iconFontSize - 8, + color: '#c9c8cd' + }, + 'NativeBase.IconNB': { + alignSelf: null, + fontSize: variables.iconFontSize - 8, + color: '#c9c8cd' + }, + 'NativeBase.Text': { + '.note': { + color: variables.listNoteColor, + fontWeight: '200' + }, + alignSelf: null + }, + 'NativeBase.Thumbnail': { + alignSelf: null + }, + 'NativeBase.Image': { + alignSelf: null + }, + 'NativeBase.Radio': { + alignSelf: null + }, + 'NativeBase.Checkbox': { + alignSelf: null + }, + 'NativeBase.Switch': { + alignSelf: null + }, + padding: null, + flex: 0.28 + }, + 'NativeBase.Text': { + '.note': { + color: variables.listNoteColor, + fontWeight: '200' + }, + alignSelf: 'center' + }, + '.last': { + marginLeft: -(variables.listItemPadding + 5), + paddingLeft: (variables.listItemPadding + 5) * 2, + top: 1 + }, + '.avatar': { + 'NativeBase.Left': { + flex: 0, + alignSelf: 'flex-start', + paddingTop: 14 + }, + 'NativeBase.Body': { + 'NativeBase.Text': { + marginLeft: null + }, + flex: 1, + paddingVertical: variables.listItemPadding, + borderBottomWidth: variables.borderWidth, + borderColor: variables.listBorderColor, + marginLeft: variables.listItemPadding + 5 + }, + 'NativeBase.Right': { + 'NativeBase.Text': { + '.note': { + fontSize: variables.noteFontSize - 2 + } + }, + flex: 0, + paddingRight: variables.listItemPadding + 5, + alignSelf: 'stretch', + paddingVertical: variables.listItemPadding, + borderBottomWidth: variables.borderWidth, + borderColor: variables.listBorderColor + }, + '.noBorder': { + 'NativeBase.Body': { + borderBottomWidth: null + }, + 'NativeBase.Right': { + borderBottomWidth: null + } + }, + borderBottomWidth: null, + paddingVertical: null, + paddingRight: null + }, + '.thumbnail': { + 'NativeBase.Left': { + flex: 0 + }, + 'NativeBase.Body': { + 'NativeBase.Text': { + marginLeft: null + }, + flex: 1, + paddingVertical: variables.listItemPadding + 8, + borderBottomWidth: variables.borderWidth, + borderColor: variables.listBorderColor, + marginLeft: variables.listItemPadding + 5 + }, + 'NativeBase.Right': { + 'NativeBase.Button': { + '.transparent': { + 'NativeBase.Text': { + fontSize: variables.listNoteSize, + color: variables.sTabBarActiveTextColor + } + }, + height: null + }, + flex: 0, + justifyContent: 'center', + alignSelf: 'stretch', + paddingRight: variables.listItemPadding + 5, + paddingVertical: variables.listItemPadding + 5, + borderBottomWidth: variables.borderWidth, + borderColor: variables.listBorderColor + }, + '.noBorder': { + 'NativeBase.Body': { + borderBottomWidth: null + }, + 'NativeBase.Right': { + borderBottomWidth: null + } + }, + borderBottomWidth: null, + paddingVertical: null, + paddingRight: null + }, + '.icon': { + '.last': { + 'NativeBase.Body': { + borderBottomWidth: null + }, + 'NativeBase.Right': { + borderBottomWidth: null + }, + borderBottomWidth: variables.borderWidth, + borderColor: variables.listBorderColor + }, + 'NativeBase.Left': { + 'NativeBase.Button': { + 'NativeBase.IconNB': { + marginHorizontal: null, + fontSize: variables.iconFontSize - 5 + }, + 'NativeBase.Icon': { + marginHorizontal: null, + fontSize: variables.iconFontSize - 8 + }, + alignSelf: 'center', + height: 29, + width: 29, + borderRadius: 6, + paddingVertical: null, + paddingHorizontal: null, + alignItems: 'center', + justifyContent: 'center' + }, + 'NativeBase.Icon': { + width: variables.iconFontSize - 5, + fontSize: variables.iconFontSize - 2 + }, + 'NativeBase.IconNB': { + width: variables.iconFontSize - 5, + fontSize: variables.iconFontSize - 2 + }, + paddingRight: variables.listItemPadding + 5, + flex: 0, + height: 44, + justifyContent: 'center', + alignItems: 'center' + }, + 'NativeBase.Body': { + 'NativeBase.Text': { + marginLeft: null, + fontSize: 17 + }, + flex: 1, + height: 44, + justifyContent: 'center', + borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), + borderColor: variables.listBorderColor + }, + 'NativeBase.Right': { + 'NativeBase.Text': { + textAlign: 'center', + color: '#8F8E95', + fontSize: 17 + }, + 'NativeBase.IconNB': { + color: '#C8C7CC', + fontSize: variables.iconFontSize - 10, + alignSelf: 'center', + paddingLeft: 10, + paddingTop: 3 + }, + 'NativeBase.Icon': { + color: '#C8C7CC', + fontSize: variables.iconFontSize - 10, + alignSelf: 'center', + paddingLeft: 10, + paddingTop: 3 + }, + 'NativeBase.Switch': { + marginRight: Platform.OS === PLATFORM.IOS ? undefined : -5, + alignSelf: null + }, + 'NativeBase.PickerNB': { + ...pickerTheme() + }, + flexDirection: 'row', + alignItems: 'center', + flex: 0, + alignSelf: 'stretch', + height: 44, + justifyContent: 'flex-end', + borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), + borderColor: variables.listBorderColor, + paddingRight: variables.listItemPadding + 5 + }, + '.noBorder': { + 'NativeBase.Body': { + borderBottomWidth: null + }, + 'NativeBase.Right': { + borderBottomWidth: null + } + }, + borderBottomWidth: null, + paddingVertical: null, + paddingRight: null, + height: 44, + justifyContent: 'center' + }, + '.noBorder': { + borderBottomWidth: null + }, + '.noIndent': { + marginLeft: null, + padding: variables.listItemPadding, + paddingLeft: variables.listItemPadding + 6 + }, + alignItems: 'center', + flexDirection: 'row', + paddingRight: variables.listItemPadding + 6, + paddingVertical: variables.listItemPadding + 3, + marginLeft: variables.listItemPadding + 6, + borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), + backgroundColor: variables.listBg, + borderColor: variables.listBorderColor + }; + + return listItemTheme; +}; diff --git a/src/native-base-theme/components/Picker.android.js b/src/native-base-theme/components/Picker.android.js new file mode 100644 index 0000000..300a743 --- /dev/null +++ b/src/native-base-theme/components/Picker.android.js @@ -0,0 +1,14 @@ +// @flow + +export default () => { + const pickerTheme = { + '.note': { + color: '#8F8E95' + }, + // width: 90, + marginRight: -4, + flexGrow: 1 + }; + + return pickerTheme; +}; diff --git a/src/native-base-theme/components/Picker.ios.js b/src/native-base-theme/components/Picker.ios.js new file mode 100644 index 0000000..b81b056 --- /dev/null +++ b/src/native-base-theme/components/Picker.ios.js @@ -0,0 +1,7 @@ +// @flow + +export default () => { + const pickerTheme = {}; + + return pickerTheme; +}; diff --git a/src/native-base-theme/components/Picker.js b/src/native-base-theme/components/Picker.js new file mode 100644 index 0000000..300a743 --- /dev/null +++ b/src/native-base-theme/components/Picker.js @@ -0,0 +1,14 @@ +// @flow + +export default () => { + const pickerTheme = { + '.note': { + color: '#8F8E95' + }, + // width: 90, + marginRight: -4, + flexGrow: 1 + }; + + return pickerTheme; +}; diff --git a/src/native-base-theme/components/Radio.js b/src/native-base-theme/components/Radio.js new file mode 100644 index 0000000..d1e0e5f --- /dev/null +++ b/src/native-base-theme/components/Radio.js @@ -0,0 +1,31 @@ +// @flow + +import { Platform } from 'react-native'; + +import variable from './../variables/platform'; +import { PLATFORM } from './../variables/commonColor'; + +export default (variables /* : * */ = variable) => { + const radioTheme = { + '.selected': { + 'NativeBase.IconNB': { + color: + Platform.OS === PLATFORM.IOS + ? variables.radioColor + : variables.radioSelectedColorAndroid, + lineHeight: + Platform.OS === PLATFORM.IOS ? 25 : variables.radioBtnLineHeight, + height: Platform.OS === PLATFORM.IOS ? 20 : undefined + } + }, + 'NativeBase.IconNB': { + color: Platform.OS === PLATFORM.IOS ? 'transparent' : undefined, + lineHeight: + Platform.OS === PLATFORM.IOS ? undefined : variables.radioBtnLineHeight, + fontSize: + Platform.OS === PLATFORM.IOS ? undefined : variables.radioBtnSize + } + }; + + return radioTheme; +}; diff --git a/src/native-base-theme/components/Right.js b/src/native-base-theme/components/Right.js new file mode 100644 index 0000000..53b3308 --- /dev/null +++ b/src/native-base-theme/components/Right.js @@ -0,0 +1,14 @@ +// @flow + +export default () => { + const rightTheme = { + 'NativeBase.Button': { + alignSelf: null + }, + flex: 1, + alignSelf: 'center', + alignItems: 'flex-end' + }; + + return rightTheme; +}; diff --git a/src/native-base-theme/components/Segment.js b/src/native-base-theme/components/Segment.js new file mode 100644 index 0000000..8ad669c --- /dev/null +++ b/src/native-base-theme/components/Segment.js @@ -0,0 +1,57 @@ +// @flow + +import variable from './../variables/platform'; +import { PLATFORM } from './../variables/commonColor'; + +export default (variables /* : * */ = variable) => { + const platform = variables.platform; + + const segmentTheme = { + height: 45, + borderColor: variables.segmentBorderColorMain, + flexDirection: 'row', + justifyContent: 'center', + backgroundColor: variables.segmentBackgroundColor, + 'NativeBase.Button': { + alignSelf: 'center', + borderRadius: 0, + paddingTop: 3, + paddingBottom: 3, + height: 30, + backgroundColor: 'transparent', + borderWidth: 1, + borderLeftWidth: 0, + borderColor: variables.segmentBorderColor, + elevation: 0, + '.active': { + backgroundColor: variables.segmentActiveBackgroundColor, + 'NativeBase.Text': { + color: variables.segmentActiveTextColor + }, + 'NativeBase.Icon': { + color: variables.segmentActiveTextColor + } + }, + '.first': { + borderTopLeftRadius: platform === PLATFORM.IOS ? 5 : undefined, + borderBottomLeftRadius: platform === PLATFORM.IOS ? 5 : undefined, + borderLeftWidth: 1 + }, + '.last': { + borderTopRightRadius: platform === PLATFORM.IOS ? 5 : undefined, + borderBottomRightRadius: platform === PLATFORM.IOS ? 5 : undefined + }, + 'NativeBase.Text': { + color: variables.segmentTextColor, + fontSize: 14 + }, + 'NativeBase.Icon': { + fontSize: 22, + paddingTop: 0, + color: variables.segmentTextColor + } + } + }; + + return segmentTheme; +}; diff --git a/src/native-base-theme/components/Separator.js b/src/native-base-theme/components/Separator.js new file mode 100644 index 0000000..7fdf313 --- /dev/null +++ b/src/native-base-theme/components/Separator.js @@ -0,0 +1,49 @@ +// @flow + +import variable from './../variables/platform'; + +export default (variables /* : * */ = variable) => { + const theme = { + '.group': { + height: 50, + paddingVertical: variables.listItemPadding - 8, + paddingTop: variables.listItemPadding + 12, + '.bordered': { + height: 50, + paddingVertical: variables.listItemPadding - 8, + paddingTop: variables.listItemPadding + 12 + } + }, + '.bordered': { + '.noTopBorder': { + borderTopWidth: 0 + }, + '.noBottomBorder': { + borderBottomWidth: 0 + }, + height: 35, + paddingTop: variables.listItemPadding + 2, + paddingBottom: variables.listItemPadding, + borderBottomWidth: variables.borderWidth, + borderTopWidth: variables.borderWidth, + borderColor: variables.listBorderColor + }, + 'NativeBase.Text': { + fontSize: variables.tabBarTextSize - 2, + color: '#777' + }, + '.noTopBorder': { + borderTopWidth: 0 + }, + '.noBottomBorder': { + borderBottomWidth: 0 + }, + height: 38, + backgroundColor: '#F0EFF5', + flex: 1, + justifyContent: 'center', + paddingLeft: variables.listItemPadding + 5 + }; + + return theme; +}; diff --git a/src/native-base-theme/components/Spinner.js b/src/native-base-theme/components/Spinner.js new file mode 100644 index 0000000..a453b3f --- /dev/null +++ b/src/native-base-theme/components/Spinner.js @@ -0,0 +1,9 @@ +// @flow + +export default () => { + const spinnerTheme = { + height: 80 + }; + + return spinnerTheme; +}; diff --git a/src/native-base-theme/components/Subtitle.js b/src/native-base-theme/components/Subtitle.js new file mode 100644 index 0000000..e1ca40d --- /dev/null +++ b/src/native-base-theme/components/Subtitle.js @@ -0,0 +1,19 @@ +// @flow + +import { Platform } from 'react-native'; + +import variable from './../variables/platform'; +import { PLATFORM } from './../variables/commonColor'; + +export default (variables /* : * */ = variable) => { + const subtitleTheme = { + fontSize: variables.subTitleFontSize, + fontFamily: variables.titleFontfamily, + color: variables.subtitleColor, + textAlign: Platform.OS === PLATFORM.IOS ? 'center' : 'left', + paddingLeft: Platform.OS === PLATFORM.IOS ? 4 : 0, + marginLeft: Platform.OS === PLATFORM.IOS ? undefined : -3 + }; + + return subtitleTheme; +}; diff --git a/src/native-base-theme/components/SwipeRow.js b/src/native-base-theme/components/SwipeRow.js new file mode 100644 index 0000000..41d6083 --- /dev/null +++ b/src/native-base-theme/components/SwipeRow.js @@ -0,0 +1,46 @@ +// @flow + +export default () => { + const swipeRowTheme = { + 'NativeBase.ListItem': { + '.list': { + backgroundColor: '#FFF' + }, + marginLeft: 0 + }, + 'NativeBase.Left': { + flex: 0, + alignSelf: null, + alignItems: null, + 'NativeBase.Button': { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + alignSelf: 'stretch', + borderRadius: 0 + } + }, + 'NativeBase.Right': { + flex: 0, + alignSelf: null, + alignItems: null, + 'NativeBase.Button': { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + alignSelf: 'stretch', + borderRadius: 0 + } + }, + 'NativeBase.Button': { + flex: 1, + height: null, + alignItems: 'center', + justifyContent: 'center', + alignSelf: 'stretch', + borderRadius: 0 + } + }; + + return swipeRowTheme; +}; diff --git a/src/native-base-theme/components/Switch.js b/src/native-base-theme/components/Switch.js new file mode 100644 index 0000000..6b667bc --- /dev/null +++ b/src/native-base-theme/components/Switch.js @@ -0,0 +1,9 @@ +// @flow + +export default () => { + const switchTheme = { + marginVertical: -5 + }; + + return switchTheme; +}; diff --git a/src/native-base-theme/components/Tab.js b/src/native-base-theme/components/Tab.js new file mode 100644 index 0000000..b242306 --- /dev/null +++ b/src/native-base-theme/components/Tab.js @@ -0,0 +1,10 @@ +// @flow + +export default () => { + const tabTheme = { + flex: 1, + backgroundColor: '#FFF' + }; + + return tabTheme; +}; diff --git a/src/native-base-theme/components/TabBar.js b/src/native-base-theme/components/TabBar.js new file mode 100644 index 0000000..fa1490d --- /dev/null +++ b/src/native-base-theme/components/TabBar.js @@ -0,0 +1,57 @@ +// @flow + +import variable from './../variables/platform'; + +export default (variables /* : * */ = variable) => { + const tabBarTheme = { + '.tabIcon': { + height: undefined + }, + '.vertical': { + height: 60 + }, + 'NativeBase.Button': { + '.transparent': { + 'NativeBase.Text': { + fontSize: variables.tabFontSize, + color: variables.sTabBarActiveTextColor, + fontWeight: '400' + }, + 'NativeBase.IconNB': { + color: variables.sTabBarActiveTextColor + } + }, + 'NativeBase.IconNB': { + color: variables.sTabBarActiveTextColor + }, + 'NativeBase.Text': { + fontSize: variables.tabFontSize, + color: variables.sTabBarActiveTextColor, + fontWeight: '400' + }, + '.isTabActive': { + 'NativeBase.Text': { + fontWeight: '900' + } + }, + flex: 1, + alignSelf: 'stretch', + alignItems: 'center', + justifyContent: 'center', + borderRadius: null, + borderBottomColor: 'transparent', + backgroundColor: variables.tabBgColor + }, + height: 45, + flexDirection: 'row', + justifyContent: 'space-around', + borderWidth: 1, + borderTopWidth: 0, + borderLeftWidth: 0, + borderRightWidth: 0, + borderBottomColor: '#ccc', + backgroundColor: variables.tabBgColor + }; + + return tabBarTheme; +}; diff --git a/src/native-base-theme/components/TabContainer.js b/src/native-base-theme/components/TabContainer.js new file mode 100644 index 0000000..fa91548 --- /dev/null +++ b/src/native-base-theme/components/TabContainer.js @@ -0,0 +1,26 @@ +// @flow + +import { Platform } from 'react-native'; + +import variable from './../variables/platform'; +import { PLATFORM } from './../variables/commonColor'; + +export default (variables /* : * */ = variable) => { + const platformStyle = variables.platformStyle; + + const tabContainerTheme = { + elevation: 3, + height: 50, + flexDirection: 'row', + shadowColor: platformStyle === PLATFORM.MATERIAL ? '#000' : undefined, + shadowOffset: + platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined, + shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined, + shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined, + justifyContent: 'space-around', + borderBottomWidth: Platform.OS === PLATFORM.IOS ? variables.borderWidth : 0, + borderColor: variables.topTabBarBorderColor + }; + + return tabContainerTheme; +}; diff --git a/src/native-base-theme/components/TabHeading.js b/src/native-base-theme/components/TabHeading.js new file mode 100644 index 0000000..74cd6f4 --- /dev/null +++ b/src/native-base-theme/components/TabHeading.js @@ -0,0 +1,40 @@ +// @flow + +import variable from './../variables/platform'; +import { PLATFORM } from './../variables/commonColor'; + +export default (variables /* : * */ = variable) => { + const platform = variables.platform; + + const tabHeadingTheme = { + flexDirection: 'row', + backgroundColor: variables.tabDefaultBg, + flex: 1, + alignItems: 'center', + justifyContent: 'center', + '.scrollable': { + paddingHorizontal: 20, + flex: platform === PLATFORM.ANDROID ? 0 : 1, + minWidth: platform === PLATFORM.ANDROID ? undefined : 60 + }, + 'NativeBase.Text': { + color: variables.topTabBarTextColor, + marginHorizontal: 7 + }, + 'NativeBase.Icon': { + color: variables.topTabBarTextColor, + fontSize: platform === PLATFORM.IOS ? 26 : undefined + }, + '.active': { + 'NativeBase.Text': { + color: variables.topTabBarActiveTextColor, + fontWeight: '600' + }, + 'NativeBase.Icon': { + color: variables.topTabBarActiveTextColor + } + } + }; + + return tabHeadingTheme; +}; diff --git a/src/native-base-theme/components/Text.js b/src/native-base-theme/components/Text.js new file mode 100644 index 0000000..8c3fa24 --- /dev/null +++ b/src/native-base-theme/components/Text.js @@ -0,0 +1,17 @@ +// @flow + +import variable from './../variables/platform'; + +export default (variables /* : * */ = variable) => { + const textTheme = { + fontSize: variables.DefaultFontSize, + fontFamily: variables.fontFamily, + color: variables.textColor, + '.note': { + color: '#a7a7a7', + fontSize: variables.noteFontSize + } + }; + + return textTheme; +}; diff --git a/src/native-base-theme/components/Textarea.js b/src/native-base-theme/components/Textarea.js new file mode 100644 index 0000000..a46d93b --- /dev/null +++ b/src/native-base-theme/components/Textarea.js @@ -0,0 +1,25 @@ +// @flow + +import variable from './../variables/platform'; + +export default (variables /* : * */ = variable) => { + const textAreaTheme = { + '.underline': { + borderBottomWidth: variables.borderWidth, + marginTop: 5, + borderColor: variables.inputBorderColor + }, + '.bordered': { + borderWidth: 1, + marginTop: 5, + borderColor: variables.inputBorderColor + }, + color: variables.textColor, + paddingLeft: 10, + paddingRight: 5, + fontSize: 15, + textAlignVertical: 'top' + }; + + return textAreaTheme; +}; diff --git a/src/native-base-theme/components/Thumbnail.js b/src/native-base-theme/components/Thumbnail.js new file mode 100644 index 0000000..c6c9f68 --- /dev/null +++ b/src/native-base-theme/components/Thumbnail.js @@ -0,0 +1,40 @@ +// @flow + +export default () => { + const thumbnailTheme = { + '.square': { + borderRadius: 0, + '.small': { + width: 36, + height: 36, + borderRadius: 0 + }, + '.large': { + width: 80, + height: 80, + borderRadius: 0 + } + }, + '.small': { + width: 36, + height: 36, + borderRadius: 18, + '.square': { + borderRadius: 0 + } + }, + '.large': { + width: 80, + height: 80, + borderRadius: 40, + '.square': { + borderRadius: 0 + } + }, + width: 56, + height: 56, + borderRadius: 28 + }; + + return thumbnailTheme; +}; diff --git a/src/native-base-theme/components/Title.js b/src/native-base-theme/components/Title.js new file mode 100644 index 0000000..ac4f2bb --- /dev/null +++ b/src/native-base-theme/components/Title.js @@ -0,0 +1,21 @@ +// @flow + +import { Platform } from 'react-native'; + +import variable from './../variables/platform'; +import { PLATFORM } from './../variables/commonColor'; + +export default (variables /* : * */ = variable) => { + const titleTheme = { + fontSize: variables.titleFontSize, + fontFamily: variables.titleFontfamily, + color: variables.titleFontColor, + fontWeight: Platform.OS === PLATFORM.IOS ? '700' : undefined, + textAlign: Platform.OS === PLATFORM.IOS ? 'center' : 'left', + paddingLeft: Platform.OS === PLATFORM.IOS ? 4 : 0, + marginLeft: Platform.OS === PLATFORM.IOS ? undefined : -3, + paddingTop: 1 + }; + + return titleTheme; +}; diff --git a/src/native-base-theme/components/Toast.js b/src/native-base-theme/components/Toast.js new file mode 100644 index 0000000..f01db74 --- /dev/null +++ b/src/native-base-theme/components/Toast.js @@ -0,0 +1,41 @@ +// @flow + +import variable from './../variables/platform'; +import { PLATFORM } from './../variables/commonColor'; + +export default (variables /* : * */ = variable) => { + const platform = variables.platform; + + const toastTheme = { + '.danger': { + backgroundColor: variables.brandDanger + }, + '.warning': { + backgroundColor: variables.brandWarning + }, + '.success': { + backgroundColor: variables.brandSuccess + }, + backgroundColor: 'rgba(0,0,0,0.8)', + borderRadius: platform === PLATFORM.IOS ? 5 : 0, + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + padding: 10, + minHeight: 50, + 'NativeBase.Text': { + color: '#fff', + flex: 1 + }, + 'NativeBase.Button': { + backgroundColor: 'transparent', + height: 30, + elevation: 0, + 'NativeBase.Text': { + fontSize: 14 + } + } + }; + + return toastTheme; +}; diff --git a/src/native-base-theme/components/View.js b/src/native-base-theme/components/View.js new file mode 100644 index 0000000..827581e --- /dev/null +++ b/src/native-base-theme/components/View.js @@ -0,0 +1,13 @@ +// @flow + +import variable from './../variables/platform'; + +export default (variables /* : * */ = variable) => { + const viewTheme = { + '.padder': { + padding: variables.contentPadding + } + }; + + return viewTheme; +}; diff --git a/src/native-base-theme/components/index.js b/src/native-base-theme/components/index.js new file mode 100644 index 0000000..8b6be3e --- /dev/null +++ b/src/native-base-theme/components/index.js @@ -0,0 +1,249 @@ +/* eslint-disable no-param-reassign */ +// @flow + +import _ from 'lodash'; + +import bodyTheme from './Body'; +import leftTheme from './Left'; +import rightTheme from './Right'; +import headerTheme from './Header'; +import switchTheme from './Switch'; +import thumbnailTheme from './Thumbnail'; +import containerTheme from './Container'; +import contentTheme from './Content'; +import buttonTheme from './Button'; +import titleTheme from './Title'; +import subtitleTheme from './Subtitle'; +import inputGroupTheme from './InputGroup'; +import badgeTheme from './Badge'; +import checkBoxTheme from './CheckBox'; +import cardTheme from './Card'; +import radioTheme from './Radio'; +import h3Theme from './H3'; +import h2Theme from './H2'; +import h1Theme from './H1'; +import footerTheme from './Footer'; +import footerTabTheme from './FooterTab'; +import fabTheme from './Fab'; +import itemTheme from './Item'; +import labelTheme from './Label'; +import textAreaTheme from './Textarea'; +import textTheme from './Text'; +import toastTheme from './Toast'; +import tabTheme from './Tab'; +import tabBarTheme from './TabBar'; +import tabContainerTheme from './TabContainer'; +import viewTheme from './View'; +import tabHeadingTheme from './TabHeading'; +import iconTheme from './Icon'; +import inputTheme from './Input'; +import swipeRowTheme from './SwipeRow'; +import segmentTheme from './Segment'; +import spinnerTheme from './Spinner'; +import cardItemTheme from './CardItem'; +import listItemTheme from './ListItem'; +import formTheme from './Form'; +import separatorTheme from './Separator'; +import pickerTheme from './Picker'; +import variable from './../variables/platform'; + +export default (variables /* : * */ = variable) => { + const theme = { + variables, + 'NativeBase.Left': { + ...leftTheme(variables) + }, + 'NativeBase.Right': { + ...rightTheme(variables) + }, + 'NativeBase.Body': { + ...bodyTheme(variables) + }, + + 'NativeBase.Header': { + ...headerTheme(variables) + }, + + 'NativeBase.Button': { + ...buttonTheme(variables) + }, + + 'NativeBase.Title': { + ...titleTheme(variables) + }, + 'NativeBase.Subtitle': { + ...subtitleTheme(variables) + }, + + 'NativeBase.InputGroup': { + ...inputGroupTheme(variables) + }, + + 'NativeBase.Input': { + ...inputTheme(variables) + }, + + 'NativeBase.Badge': { + ...badgeTheme(variables) + }, + + 'NativeBase.CheckBox': { + ...checkBoxTheme(variables) + }, + + 'NativeBase.Radio': { + ...radioTheme(variables) + }, + + 'NativeBase.Card': { + ...cardTheme(variables) + }, + + 'NativeBase.CardItem': { + ...cardItemTheme(variables) + }, + + 'NativeBase.Toast': { + ...toastTheme(variables) + }, + + 'NativeBase.H1': { + ...h1Theme(variables) + }, + 'NativeBase.H2': { + ...h2Theme(variables) + }, + 'NativeBase.H3': { + ...h3Theme(variables) + }, + 'NativeBase.Form': { + ...formTheme(variables) + }, + + 'NativeBase.Container': { + ...containerTheme(variables) + }, + 'NativeBase.Content': { + ...contentTheme(variables) + }, + + 'NativeBase.Footer': { + ...footerTheme(variables) + }, + + 'NativeBase.Tabs': { + flex: 1 + }, + + 'NativeBase.FooterTab': { + ...footerTabTheme(variables) + }, + + 'NativeBase.ListItem': { + ...listItemTheme(variables) + }, + + 'NativeBase.ListItem1': { + ...listItemTheme(variables) + }, + + 'NativeBase.Icon': { + ...iconTheme(variables) + }, + 'NativeBase.IconNB': { + ...iconTheme(variables) + }, + 'NativeBase.Text': { + ...textTheme(variables) + }, + 'NativeBase.Spinner': { + ...spinnerTheme(variables) + }, + + 'NativeBase.Fab': { + ...fabTheme(variables) + }, + + 'NativeBase.Item': { + ...itemTheme(variables) + }, + + 'NativeBase.Label': { + ...labelTheme(variables) + }, + + 'NativeBase.Textarea': { + ...textAreaTheme(variables) + }, + + 'NativeBase.PickerNB': { + ...pickerTheme(variables), + 'NativeBase.Button': { + 'NativeBase.Text': {} + } + }, + + 'NativeBase.Tab': { + ...tabTheme(variables) + }, + + 'NativeBase.Segment': { + ...segmentTheme(variables) + }, + + 'NativeBase.TabBar': { + ...tabBarTheme(variables) + }, + 'NativeBase.ViewNB': { + ...viewTheme(variables) + }, + 'NativeBase.TabHeading': { + ...tabHeadingTheme(variables) + }, + 'NativeBase.TabContainer': { + ...tabContainerTheme(variables) + }, + 'NativeBase.Switch': { + ...switchTheme(variables) + }, + 'NativeBase.Separator': { + ...separatorTheme(variables) + }, + 'NativeBase.SwipeRow': { + ...swipeRowTheme(variables) + }, + 'NativeBase.Thumbnail': { + ...thumbnailTheme(variables) + } + }; + + const cssifyTheme = (grandparent, parent, parentKey) => { + _.forEach(parent, (style, styleName) => { + if ( + styleName.indexOf('.') === 0 && + parentKey && + parentKey.indexOf('.') === 0 + ) { + if (grandparent) { + if (!grandparent[styleName]) { + grandparent[styleName] = {}; + } else { + grandparent[styleName][parentKey] = style; + } + } + } + if ( + style && + typeof style === 'object' && + styleName !== 'fontVariant' && + styleName !== 'transform' + ) { + cssifyTheme(parent, style, styleName); + } + }); + }; + + cssifyTheme(null, theme, null); + + return theme; +}; diff --git a/src/native-base-theme/variables/commonColor.js b/src/native-base-theme/variables/commonColor.js new file mode 100644 index 0000000..7fc89ad --- /dev/null +++ b/src/native-base-theme/variables/commonColor.js @@ -0,0 +1,311 @@ +// @flow + +import color from 'color'; +import { Platform, Dimensions, PixelRatio } from 'react-native'; + +export const PLATFORM = { + ANDROID: 'android', + IOS: 'ios', + MATERIAL: 'material', + WEB: 'web' +}; + +const deviceHeight = Dimensions.get('window').height; +const deviceWidth = Dimensions.get('window').width; +const platform = Platform.OS; +const platformStyle = undefined; +const isIphoneX = + platform === PLATFORM.IOS && + (deviceHeight === 812 || + deviceWidth === 812 || + deviceHeight === 896 || + deviceWidth === 896); + +export default { + platformStyle, + platform, + + // Accordion + headerStyle: '#edebed', + iconStyle: '#000', + contentStyle: '#f5f4f5', + expandedIconStyle: '#000', + accordionBorderColor: '#d3d3d3', + + // ActionSheet + elevation: 4, + containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)', + innerTouchableBackgroundColor: '#fff', + listItemHeight: 50, + listItemBorderColor: 'transparent', + marginHorizontal: -15, + marginLeft: 14, + marginTop: 15, + minHeight: 56, + padding: 15, + touchableTextColor: '#757575', + + // Android + androidRipple: true, + androidRippleColor: 'rgba(256, 256, 256, 0.3)', + androidRippleColorDark: 'rgba(0, 0, 0, 0.15)', + buttonUppercaseAndroidText: true, + + // Badge + badgeBg: '#ED1727', + badgeColor: '#fff', + badgePadding: platform === PLATFORM.IOS ? 3 : 0, + + // Button + buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium', + buttonDisabledBg: '#b5b5b5', + buttonPadding: 6, + get buttonPrimaryBg() { + return this.brandPrimary; + }, + get buttonPrimaryColor() { + return this.inverseTextColor; + }, + get buttonInfoBg() { + return this.brandInfo; + }, + get buttonInfoColor() { + return this.inverseTextColor; + }, + get buttonSuccessBg() { + return this.brandSuccess; + }, + get buttonSuccessColor() { + return this.inverseTextColor; + }, + get buttonDangerBg() { + return this.brandDanger; + }, + get buttonDangerColor() { + return this.inverseTextColor; + }, + get buttonWarningBg() { + return this.brandWarning; + }, + get buttonWarningColor() { + return this.inverseTextColor; + }, + get buttonTextSize() { + return platform === PLATFORM.IOS + ? this.fontSizeBase * 1.1 + : this.fontSizeBase - 1; + }, + get buttonTextSizeLarge() { + return this.fontSizeBase * 1.5; + }, + get buttonTextSizeSmall() { + return this.fontSizeBase * 0.8; + }, + get borderRadiusLarge() { + return this.fontSizeBase * 3.8; + }, + get iconSizeLarge() { + return this.iconFontSize * 1.5; + }, + get iconSizeSmall() { + return this.iconFontSize * 0.6; + }, + + // Card + cardDefaultBg: '#fff', + cardBorderColor: '#ccc', + cardBorderRadius: 2, + cardItemPadding: platform === PLATFORM.IOS ? 10 : 12, + + // CheckBox + CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0, + CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2, + CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2, + CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5, + CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16, + CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1, + CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17, + checkboxBgColor: '#039BE5', + checkboxSize: 20, + checkboxTickColor: '#fff', + + // Color + brandPrimary: platform === PLATFORM.IOS ? '#fb1763' : '#fb1763', + brandInfo: '#62B1F6', + brandSuccess: '#5cb85c', + brandDanger: '#d9534f', + brandWarning: '#f0ad4e', + brandDark: '#000', + brandLight: '#a9a9a9', + + // Container + containerBgColor: '#fff', + + // Date Picker + datePickerTextColor: '#000', + datePickerBg: 'transparent', + + // FAB + fabWidth: 56, + + // Font + DefaultFontSize: 16, + fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto', + fontSizeBase: 15, + get fontSizeH1() { + return this.fontSizeBase * 1.8; + }, + get fontSizeH2() { + return this.fontSizeBase * 1.6; + }, + get fontSizeH3() { + return this.fontSizeBase * 1.4; + }, + + // Footer + footerHeight: 55, + footerDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5', + footerPaddingBottom: 0, + + // FooterTab + tabBarTextColor: platform === PLATFORM.IOS ? '#737373' : '#bfc6ea', + tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11, + activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff', + sTabBarActiveTextColor: '#007aff', + tabBarActiveTextColor: platform === PLATFORM.IOS ? '#2874F0' : '#fff', + tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5', + + // Header + toolbarBtnColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', + toolbarDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5', + toolbarHeight: platform === PLATFORM.IOS ? 64 : 56, + toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23, + toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff', + searchBarHeight: platform === PLATFORM.IOS ? 30 : 40, + searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50, + toolbarBtnTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', + iosStatusbar: 'dark-content', + toolbarDefaultBorder: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5', + get statusBarColor() { + return color(this.toolbarDefaultBg) + .darken(0.2) + .hex(); + }, + get darkenHeader() { + return color(this.tabBgColor) + .darken(0.03) + .hex(); + }, + + // Icon + iconFamily: 'Ionicons', + iconFontSize: platform === PLATFORM.IOS ? 30 : 28, + iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24, + + // InputGroup + inputFontSize: 17, + inputBorderColor: '#D9D5DC', + inputSuccessBorderColor: '#2b8339', + inputErrorBorderColor: '#ed2f2f', + inputHeightBase: 50, + get inputColor() { + return this.textColor; + }, + get inputColorPlaceholder() { + return '#575757'; + }, + + // Line Height + buttonLineHeight: 19, + lineHeightH1: 32, + lineHeightH2: 27, + lineHeightH3: 25, + lineHeight: platform === PLATFORM.IOS ? 20 : 24, + + // List + listBg: 'transparent', + listBorderColor: '#c9c9c9', + listDividerBg: '#f4f4f4', + listBtnUnderlayColor: '#DDD', + listItemPadding: platform === PLATFORM.IOS ? 10 : 12, + listNoteColor: '#808080', + listNoteSize: 13, + listItemSelected: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5', + + // Progress Bar + defaultProgressColor: '#E4202D', + inverseProgressColor: '#1A191B', + + // Radio Button + radioBtnSize: platform === PLATFORM.IOS ? 25 : 23, + radioSelectedColorAndroid: '#3F51B5', + radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24, + get radioColor() { + return this.brandPrimary; + }, + + // Segment + segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5', + segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', + segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', + segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5', + segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', + segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5', + + // Spinner + defaultSpinnerColor: '#45D56E', + inverseSpinnerColor: '#1A191B', + + // Tab + tabDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5', + topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9', + topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', + topTabBarBorderColor: platform === PLATFORM.IOS ? '#a7a6ab' : '#fff', + topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', + + // Tabs + tabBgColor: '#F8F8F8', + tabFontSize: 15, + + // Text + textColor: '#000', + inverseTextColor: '#fff', + noteFontSize: 14, + get defaultTextColor() { + return this.textColor; + }, + + // Title + titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium', + titleFontSize: platform === PLATFORM.IOS ? 17 : 19, + subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14, + subtitleColor: platform === PLATFORM.IOS ? '#000' : '#fff', + titleFontColor: platform === PLATFORM.IOS ? '#000' : '#fff', + + // Other + borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2, + borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), + contentPadding: 10, + dropdownLinkColor: '#414142', + inputLineHeight: 24, + deviceWidth, + deviceHeight, + isIphoneX, + inputGroupRoundedBorderRadius: 30, + + // iPhoneX SafeArea + Inset: { + portrait: { + topInset: 24, + leftInset: 0, + rightInset: 0, + bottomInset: 34 + }, + landscape: { + topInset: 0, + leftInset: 44, + rightInset: 44, + bottomInset: 21 + } + } +}; diff --git a/src/native-base-theme/variables/material.js b/src/native-base-theme/variables/material.js new file mode 100644 index 0000000..08273c4 --- /dev/null +++ b/src/native-base-theme/variables/material.js @@ -0,0 +1,304 @@ +// @flow + +import color from 'color'; +import { Platform, Dimensions, PixelRatio } from 'react-native'; + +import { PLATFORM } from './commonColor'; + +const deviceHeight = Dimensions.get('window').height; +const deviceWidth = Dimensions.get('window').width; +const platform = Platform.OS; +const platformStyle = PLATFORM.MATERIAL; +const isIphoneX = + platform === PLATFORM.IOS && + (deviceHeight === 812 || + deviceWidth === 812 || + deviceHeight === 896 || + deviceWidth === 896); + +export default { + platformStyle, + platform, + + // Accordion + headerStyle: '#edebed', + iconStyle: '#000', + contentStyle: '#f5f4f5', + expandedIconStyle: '#000', + accordionBorderColor: '#d3d3d3', + + // ActionSheet + elevation: 4, + containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)', + innerTouchableBackgroundColor: '#fff', + listItemHeight: 50, + listItemBorderColor: 'transparent', + marginHorizontal: -15, + marginLeft: 14, + marginTop: 15, + minHeight: 56, + padding: 15, + touchableTextColor: '#757575', + + // Android + androidRipple: true, + androidRippleColor: 'rgba(256, 256, 256, 0.3)', + androidRippleColorDark: 'rgba(0, 0, 0, 0.15)', + buttonUppercaseAndroidText: true, + + // Badge + badgeBg: '#ED1727', + badgeColor: '#fff', + badgePadding: 0, + + // Button + buttonFontFamily: 'Roboto', + buttonDisabledBg: '#b5b5b5', + buttonPadding: 6, + get buttonPrimaryBg() { + return this.brandPrimary; + }, + get buttonPrimaryColor() { + return this.inverseTextColor; + }, + get buttonInfoBg() { + return this.brandInfo; + }, + get buttonInfoColor() { + return this.inverseTextColor; + }, + get buttonSuccessBg() { + return this.brandSuccess; + }, + get buttonSuccessColor() { + return this.inverseTextColor; + }, + get buttonDangerBg() { + return this.brandDanger; + }, + get buttonDangerColor() { + return this.inverseTextColor; + }, + get buttonWarningBg() { + return this.brandWarning; + }, + get buttonWarningColor() { + return this.inverseTextColor; + }, + get buttonTextSize() { + return this.fontSizeBase - 1; + }, + get buttonTextSizeLarge() { + return this.fontSizeBase * 1.5; + }, + get buttonTextSizeSmall() { + return this.fontSizeBase * 0.8; + }, + get borderRadiusLarge() { + return this.fontSizeBase * 3.8; + }, + get iconSizeLarge() { + return this.iconFontSize * 1.5; + }, + get iconSizeSmall() { + return this.iconFontSize * 0.6; + }, + + // Card + cardDefaultBg: '#fff', + cardBorderColor: '#ccc', + cardBorderRadius: 2, + cardItemPadding: platform === PLATFORM.IOS ? 10 : 12, + + // CheckBox + CheckboxRadius: 0, + CheckboxBorderWidth: 2, + CheckboxPaddingLeft: 2, + CheckboxPaddingBottom: 5, + CheckboxIconSize: 16, + CheckboxIconMarginTop: 1, + CheckboxFontSize: 17, + checkboxBgColor: '#039BE5', + checkboxSize: 20, + checkboxTickColor: '#fff', + + // Color + brandPrimary: '#fb1763', + brandInfo: '#62B1F6', + brandSuccess: '#5cb85c', + brandDanger: '#d9534f', + brandWarning: '#f0ad4e', + brandDark: '#000', + brandLight: '#a9a9a9', + + // Container + containerBgColor: '#fff', + + // Date Picker + datePickerTextColor: '#000', + datePickerBg: 'transparent', + + // FAB + fabWidth: 56, + + // Font + DefaultFontSize: 16, + fontFamily: 'Roboto', + fontSizeBase: 15, + get fontSizeH1() { + return this.fontSizeBase * 1.8; + }, + get fontSizeH2() { + return this.fontSizeBase * 1.6; + }, + get fontSizeH3() { + return this.fontSizeBase * 1.4; + }, + + // Footer + footerHeight: 55, + footerDefaultBg: '#3F51B5', + footerPaddingBottom: 0, + + // FooterTab + tabBarTextColor: '#bfc6ea', + tabBarTextSize: 11, + activeTab: '#fff', + sTabBarActiveTextColor: '#007aff', + tabBarActiveTextColor: '#fff', + tabActiveBgColor: '#3F51B5', + + // Header + toolbarBtnColor: '#fff', + toolbarDefaultBg: '#3F51B5', + toolbarHeight: 56, + toolbarSearchIconSize: 23, + toolbarInputColor: '#fff', + searchBarHeight: platform === PLATFORM.IOS ? 30 : 40, + searchBarInputHeight: platform === PLATFORM.IOS ? 40 : 50, + toolbarBtnTextColor: '#fff', + toolbarDefaultBorder: '#3F51B5', + iosStatusbar: 'light-content', + get statusBarColor() { + return color(this.toolbarDefaultBg) + .darken(0.2) + .hex(); + }, + get darkenHeader() { + return color(this.tabBgColor) + .darken(0.03) + .hex(); + }, + + // Icon + iconFamily: 'Ionicons', + iconFontSize: 28, + iconHeaderSize: 24, + + // InputGroup + inputFontSize: 17, + inputBorderColor: '#D9D5DC', + inputSuccessBorderColor: '#2b8339', + inputErrorBorderColor: '#ed2f2f', + inputHeightBase: 50, + get inputColor() { + return this.textColor; + }, + get inputColorPlaceholder() { + return '#575757'; + }, + + // Line Height + buttonLineHeight: 19, + lineHeightH1: 32, + lineHeightH2: 27, + lineHeightH3: 25, + lineHeight: 24, + + // List + listBg: 'transparent', + listBorderColor: '#c9c9c9', + listDividerBg: '#f4f4f4', + listBtnUnderlayColor: '#DDD', + listItemPadding: 12, + listNoteColor: '#808080', + listNoteSize: 13, + listItemSelected: '#3F51B5', + + // Progress Bar + defaultProgressColor: '#E4202D', + inverseProgressColor: '#1A191B', + + // Radio Button + radioBtnSize: 23, + radioSelectedColorAndroid: '#3F51B5', + radioBtnLineHeight: 24, + get radioColor() { + return this.brandPrimary; + }, + + // Segment + segmentBackgroundColor: '#3F51B5', + segmentActiveBackgroundColor: '#fff', + segmentTextColor: '#fff', + segmentActiveTextColor: '#3F51B5', + segmentBorderColor: '#fff', + segmentBorderColorMain: '#3F51B5', + + // Spinner + defaultSpinnerColor: '#45D56E', + inverseSpinnerColor: '#1A191B', + + // Tab + tabDefaultBg: '#3F51B5', + topTabBarTextColor: '#b3c7f9', + topTabBarActiveTextColor: '#fff', + topTabBarBorderColor: '#fff', + topTabBarActiveBorderColor: '#fff', + + // Tabs + tabBgColor: '#F8F8F8', + tabFontSize: 15, + + // Text + textColor: '#000', + inverseTextColor: '#fff', + noteFontSize: 14, + get defaultTextColor() { + return this.textColor; + }, + + // Title + titleFontfamily: 'Roboto', + titleFontSize: 19, + subTitleFontSize: 14, + subtitleColor: '#FFF', + titleFontColor: '#FFF', + + // Other + borderRadiusBase: 2, + borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), + contentPadding: 10, + dropdownLinkColor: '#414142', + inputLineHeight: 24, + deviceWidth, + deviceHeight, + isIphoneX, + inputGroupRoundedBorderRadius: 30, + + // iPhoneX SafeArea + Inset: { + portrait: { + topInset: 24, + leftInset: 0, + rightInset: 0, + bottomInset: 34 + }, + landscape: { + topInset: 0, + leftInset: 44, + rightInset: 44, + bottomInset: 21 + } + } +}; diff --git a/src/native-base-theme/variables/platform.js b/src/native-base-theme/variables/platform.js new file mode 100644 index 0000000..825161c --- /dev/null +++ b/src/native-base-theme/variables/platform.js @@ -0,0 +1,334 @@ +// @flow + +import color from 'color'; +import { Platform, Dimensions, PixelRatio } from 'react-native'; + +import { PLATFORM } from './commonColor'; + +const deviceHeight = Dimensions.get('window').height; +const deviceWidth = Dimensions.get('window').width; +const platform = Platform.OS; +const platformStyle = undefined; +const isIphoneX = + platform === PLATFORM.IOS && + (deviceHeight === 812 || + deviceWidth === 812 || + deviceHeight === 896 || + deviceWidth === 896); + +export default { + platformStyle, + platform, + + // Accordion + accordionBorderColor: '#d3d3d3', + accordionContentPadding: 10, + accordionIconFontSize: 18, + contentStyle: '#f5f4f5', + expandedIconStyle: '#000', + headerStyle: '#edebed', + iconStyle: '#000', + + // ActionSheet + elevation: 4, + containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)', + innerTouchableBackgroundColor: '#fff', + listItemHeight: 50, + listItemBorderColor: 'transparent', + marginHorizontal: -15, + marginLeft: 14, + marginTop: 15, + minHeight: 56, + padding: 15, + touchableTextColor: '#757575', + + // Android + androidRipple: true, + androidRippleColor: 'rgba(256, 256, 256, 0.3)', + androidRippleColorDark: 'rgba(0, 0, 0, 0.15)', + buttonUppercaseAndroidText: true, + + // Badge + badgeBg: '#ED1727', + badgeColor: '#fff', + badgePadding: platform === PLATFORM.IOS ? 3 : 0, + + // Button + buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium', + buttonDisabledBg: '#b5b5b5', + buttonPadding: 6, + buttonDefaultActiveOpacity: 0.5, + buttonDefaultFlex: 1, + buttonDefaultBorderRadius: 2, + buttonDefaultBorderWidth: 1, + get buttonPrimaryBg() { + return this.brandPrimary; + }, + get buttonPrimaryColor() { + return this.inverseTextColor; + }, + get buttonInfoBg() { + return this.brandInfo; + }, + get buttonInfoColor() { + return this.inverseTextColor; + }, + get buttonSuccessBg() { + return this.brandSuccess; + }, + get buttonSuccessColor() { + return this.inverseTextColor; + }, + get buttonDangerBg() { + return this.brandDanger; + }, + get buttonDangerColor() { + return this.inverseTextColor; + }, + get buttonWarningBg() { + return this.brandWarning; + }, + get buttonWarningColor() { + return this.inverseTextColor; + }, + get buttonTextSize() { + return platform === PLATFORM.IOS + ? this.fontSizeBase * 1.1 + : this.fontSizeBase - 1; + }, + get buttonTextSizeLarge() { + return this.fontSizeBase * 1.5; + }, + get buttonTextSizeSmall() { + return this.fontSizeBase * 0.8; + }, + get borderRadiusLarge() { + return this.fontSizeBase * 3.8; + }, + get iconSizeLarge() { + return this.iconFontSize * 1.5; + }, + get iconSizeSmall() { + return this.iconFontSize * 0.6; + }, + + // Card + cardDefaultBg: '#fff', + cardBorderColor: '#ccc', + cardBorderRadius: 2, + cardItemPadding: platform === PLATFORM.IOS ? 10 : 12, + + // CheckBox + CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0, + CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2, + CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2, + CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5, + CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16, + CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1, + CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17, + checkboxBgColor: '#039BE5', + checkboxSize: 20, + checkboxTickColor: '#fff', + checkboxDefaultColor: 'transparent', + checkboxTextShadowRadius: 0, + + // Color + brandPrimary: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5', + brandInfo: '#62B1F6', + brandSuccess: '#5cb85c', + brandDanger: '#d9534f', + brandWarning: '#f0ad4e', + brandDark: '#000', + brandLight: '#a9a9a9', + + // Container + containerBgColor: '#fff', + + // Date Picker + datePickerFlex: 1, + datePickerPadding: 10, + datePickerTextColor: '#000', + datePickerBg: 'transparent', + + // FAB + fabBackgroundColor: 'blue', + fabBorderRadius: 28, + fabBottom: 0, + fabButtonBorderRadius: 20, + fabButtonHeight: 40, + fabButtonLeft: 7, + fabButtonMarginBottom: 10, + fabContainerBottom: 20, + fabDefaultPosition: 20, + fabElevation: 4, + fabIconColor: '#fff', + fabIconSize: 24, + fabShadowColor: '#000', + fabShadowOffsetHeight: 2, + fabShadowOffsetWidth: 0, + fabShadowOpacity: 0.4, + fabShadowRadius: 2, + fabWidth: 56, + + // Font + DefaultFontSize: 16, + fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto', + fontSizeBase: 15, + get fontSizeH1() { + return this.fontSizeBase * 1.8; + }, + get fontSizeH2() { + return this.fontSizeBase * 1.6; + }, + get fontSizeH3() { + return this.fontSizeBase * 1.4; + }, + + // Footer + footerHeight: 55, + footerDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5', + footerPaddingBottom: 0, + + // FooterTab + tabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9', + tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11, + activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff', + sTabBarActiveTextColor: '#007aff', + tabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', + tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5', + + // Header + toolbarBtnColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', + toolbarDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5', + toolbarHeight: platform === PLATFORM.IOS ? 64 : 56, + toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23, + toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff', + searchBarHeight: platform === PLATFORM.IOS ? 30 : 40, + searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50, + toolbarBtnTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', + toolbarDefaultBorder: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5', + iosStatusbar: platform === PLATFORM.IOS ? 'dark-content' : 'light-content', + get statusBarColor() { + return color(this.toolbarDefaultBg) + .darken(0.2) + .hex(); + }, + get darkenHeader() { + return color(this.tabBgColor) + .darken(0.03) + .hex(); + }, + + // Icon + iconFamily: 'Ionicons', + iconFontSize: platform === PLATFORM.IOS ? 30 : 28, + iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24, + + // InputGroup + inputFontSize: 17, + inputBorderColor: '#D9D5DC', + inputSuccessBorderColor: '#2b8339', + inputErrorBorderColor: '#ed2f2f', + inputHeightBase: 50, + get inputColor() { + return this.textColor; + }, + get inputColorPlaceholder() { + return '#575757'; + }, + + // Line Height + buttonLineHeight: 19, + lineHeightH1: 32, + lineHeightH2: 27, + lineHeightH3: 25, + lineHeight: platform === PLATFORM.IOS ? 20 : 24, + listItemSelected: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5', + + // List + listBg: 'transparent', + listBorderColor: '#c9c9c9', + listDividerBg: '#f4f4f4', + listBtnUnderlayColor: '#DDD', + listItemPadding: platform === PLATFORM.IOS ? 10 : 12, + listNoteColor: '#808080', + listNoteSize: 13, + + // Progress Bar + defaultProgressColor: '#E4202D', + inverseProgressColor: '#1A191B', + + // Radio Button + radioBtnSize: platform === PLATFORM.IOS ? 25 : 23, + radioSelectedColorAndroid: '#3F51B5', + radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24, + get radioColor() { + return this.brandPrimary; + }, + + // Segment + segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5', + segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', + segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', + segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5', + segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', + segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5', + + // Spinner + defaultSpinnerColor: '#45D56E', + inverseSpinnerColor: '#1A191B', + + // Tab + tabBarDisabledTextColor: '#BDBDBD', + tabDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5', + topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9', + topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', + topTabBarBorderColor: platform === PLATFORM.IOS ? '#a7a6ab' : '#fff', + topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', + + // Tabs + tabBgColor: '#F8F8F8', + tabFontSize: 15, + + // Text + textColor: '#000', + inverseTextColor: '#fff', + noteFontSize: 14, + get defaultTextColor() { + return this.textColor; + }, + + // Title + titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium', + titleFontSize: platform === PLATFORM.IOS ? 17 : 19, + subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14, + subtitleColor: platform === PLATFORM.IOS ? '#8e8e93' : '#FFF', + titleFontColor: platform === PLATFORM.IOS ? '#000' : '#FFF', + + // Other + borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2, + borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), + contentPadding: 10, + dropdownLinkColor: '#414142', + inputLineHeight: 24, + deviceWidth, + deviceHeight, + isIphoneX, + inputGroupRoundedBorderRadius: 30, + + // iPhoneX SafeArea + Inset: { + portrait: { + topInset: 24, + leftInset: 0, + rightInset: 0, + bottomInset: 34 + }, + landscape: { + topInset: 0, + leftInset: 44, + rightInset: 44, + bottomInset: 21 + } + } +}; From 5716714e07ec5a0c7d219e6c0f63ada70279f4fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andre=CC=81=20Kovac?= Date: Wed, 26 Aug 2020 16:07:23 +0200 Subject: [PATCH 3/3] Add native-base and use it with counter --- src/screens/CounterScreen.tsx | 69 ++++++++++++++++++++++++----------- 1 file changed, 48 insertions(+), 21 deletions(-) diff --git a/src/screens/CounterScreen.tsx b/src/screens/CounterScreen.tsx index 51e8348..a189d1b 100644 --- a/src/screens/CounterScreen.tsx +++ b/src/screens/CounterScreen.tsx @@ -1,6 +1,23 @@ -import React, { useState } from "react"; -import { Text } from "react-native"; +import React, { useState, FunctionComponent } from "react"; import styled from "styled-components/native"; +import { StyleProvider, Badge, Button, Text } from "native-base"; +import { Row, Grid } from "react-native-easy-grid"; + +// @ts-ignore +import getTheme from "../native-base-theme/components"; +// @ts-ignore +import material from "../native-base-theme/variables/material"; + +const CounterButton: FunctionComponent<{ onPress: () => void }> = ({ + onPress, + children, +}) => ( + + + +); const CounterScreen = () => { const [count, setCount] = useState(0); @@ -8,31 +25,41 @@ const CounterScreen = () => { const increment = () => setCount((prev: number) => prev + 1); return ( - - Clicked {count} times - - + + + + + {`Clicked `} + + + {count} + + + {` times`} + + + + + Increment + + + + ); }; -const Container = styled.View` - flex: 1; +/** + * This Wrapper around `Button` and `Badge` is necessary to align it horizontally + */ +const CenteredHorizontally = styled.View` align-items: center; - justify-content: center; `; -const Button = styled.TouchableOpacity` - background-color: #74e685; - border-radius: 10px; - padding: 10px; - margin: 10px; -`; - -const ClickedText = styled.Text` - font-size: 20px; - margin-bottom: 20px; +const Wrapper = styled.View<{ row?: boolean }>` + flex: 1; + flex-direction: ${(props) => (props.row ? "row" : "column")}; + align-items: center; + justify-content: center; `; export default CounterScreen;