From d69085eba59cd4d02bccb53b36b746801437e47c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ali=20=C3=96ks=C3=BCz?= Date: Sun, 29 Aug 2021 17:56:32 +0300 Subject: [PATCH] implemented react navigation with bottom bar --- App.js | 3 +- package-lock.json | 337 ++++++++++++++++++++++---------- package.json | 7 +- src/components/BottomBar.js | 183 ++++++++++++++--- src/navigation/TabNavigation.js | 12 +- src/screens/ConfigScreen.js | 20 ++ src/screens/LogsScreen.js | 20 ++ src/screens/WebooksScreen.js | 20 ++ src/utils.js | 11 +- 9 files changed, 475 insertions(+), 138 deletions(-) create mode 100644 src/screens/ConfigScreen.js create mode 100644 src/screens/LogsScreen.js create mode 100644 src/screens/WebooksScreen.js diff --git a/App.js b/App.js index c52721a..6c33ea7 100644 --- a/App.js +++ b/App.js @@ -1,9 +1,10 @@ import React from 'react'; -import {SafeAreaView, StyleSheet, Text} from 'react-native'; +import {SafeAreaView, StyleSheet, StatusBar} from 'react-native'; import Navigation from './src/navigation/Navigation'; const App = () => { return ( + ); diff --git a/package-lock.json b/package-lock.json index a0ec0c1..7d85ab3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -338,18 +338,10 @@ "supports-color": "^5.3.0" } }, - "color-convert": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", - "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "requires": { - "color-name": "1.1.3" - } - }, - "color-name": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" + "escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=" }, "has-flag": { "version": "3.0.0", @@ -947,6 +939,14 @@ "minimist": "^1.2.0" } }, + "@egjs/hammerjs": { + "version": "2.0.17", + "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz", + "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==", + "requires": { + "@types/hammerjs": "^2.0.36" + } + }, "@eslint/eslintrc": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.2.2.tgz", @@ -1690,6 +1690,16 @@ "resolved": "https://registry.npmjs.org/@react-native/polyfills/-/polyfills-1.0.0.tgz", "integrity": "sha512-0jbp4RxjYopTsIdLl+/Fy2TiwVYHy4mgeu07DG4b/LyM0OS/+lPP5c9sbnt/AMlnF6qz2JRZpPpGw1eMNS6A4w==" }, + "@react-navigation/bottom-tabs": { + "version": "6.0.5", + "resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-6.0.5.tgz", + "integrity": "sha512-GytjJUzacHhe3C24HFrPl881Donrw2m+3JBNqMJALxMRjSA8yY72+l16bZR9YFsrywSHVSbjxIfzqtGb8rIVJg==", + "requires": { + "@react-navigation/elements": "^1.1.0", + "color": "^3.1.3", + "warn-once": "^0.1.0" + } + }, "@react-navigation/core": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.0.1.tgz", @@ -1700,20 +1710,13 @@ "nanoid": "^3.1.23", "query-string": "^7.0.0", "react-is": "^16.13.0" - }, - "dependencies": { - "escape-string-regexp": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", - "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==" - }, - "react-is": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" - } } }, + "@react-navigation/elements": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.1.0.tgz", + "integrity": "sha512-jZncciZPGuoP6B6f+Wpf6MYSSYy86B2HJDbFTCtT5xZV0w6V9GgCeqvSTOEAxifZrmKl8uDxsr0GrIxgQE8NxA==" + }, "@react-navigation/native": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.0.2.tgz", @@ -1722,13 +1725,6 @@ "@react-navigation/core": "^6.0.1", "escape-string-regexp": "^4.0.0", "nanoid": "^3.1.23" - }, - "dependencies": { - "escape-string-regexp": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", - "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==" - } } }, "@react-navigation/routers": { @@ -1739,6 +1735,16 @@ "nanoid": "^3.1.23" } }, + "@react-navigation/stack": { + "version": "6.0.7", + "resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-6.0.7.tgz", + "integrity": "sha512-hxwhRZbn6zD2rInhItBeHTCPYzmurz+/8/MhtRevBEdLG0+61dik8Y+evg/mu6AsOU0WrDakTsLcHdf/9zkXzw==", + "requires": { + "@react-navigation/elements": "^1.1.0", + "color": "^3.1.3", + "warn-once": "^0.1.0" + } + }, "@sideway/address": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.2.tgz", @@ -1836,6 +1842,11 @@ "@types/node": "*" } }, + "@types/hammerjs": { + "version": "2.0.40", + "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.40.tgz", + "integrity": "sha512-VbjwR1fhsn2h2KXAY4oy1fm7dCxaKy0D+deTb8Ilc3Eo3rc5+5eA4rfYmZaHgNJKxVyI0f6WIXzO2zLkVmQPHA==" + }, "@types/istanbul-lib-coverage": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz", @@ -1864,9 +1875,9 @@ "dev": true }, "@types/node": { - "version": "16.7.4", - "resolved": "https://registry.npmjs.org/@types/node/-/node-16.7.4.tgz", - "integrity": "sha512-25QXpDsTiDnl2rZGUenagVMwO46way8dOUdvoC3R3p+6TrbpxeJBo/v87BEG1IHI31Jhaa8lPeSHcqwxsVBeYQ==" + "version": "16.7.5", + "resolved": "https://registry.npmjs.org/@types/node/-/node-16.7.5.tgz", + "integrity": "sha512-E7SpxDXoHEpmZ9C1gSqwadhE6zPRtf3g0gJy9Y51DsImnR5TcDs3QEiV/3Q7zOM8LWaZp5Gph71NK6ElVMG1IQ==" }, "@types/normalize-package-data": { "version": "2.4.1", @@ -2165,6 +2176,21 @@ "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", "requires": { "color-convert": "^2.0.1" + }, + "dependencies": { + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + } } }, "anymatch": { @@ -2813,18 +2839,36 @@ "object-visit": "^1.0.0" } }, + "color": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz", + "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==", + "requires": { + "color-convert": "^1.9.3", + "color-string": "^1.6.0" + } + }, "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", "requires": { - "color-name": "~1.1.4" + "color-name": "1.1.3" } }, "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" + }, + "color-string": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.6.0.tgz", + "integrity": "sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA==", + "requires": { + "color-name": "^1.0.0", + "simple-swizzle": "^0.2.2" + } }, "colorette": { "version": "1.3.0", @@ -2949,6 +2993,14 @@ "parse-json": "^4.0.0" } }, + "cross-fetch": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.4.tgz", + "integrity": "sha512-1eAtFWdIubi6T4XPy6ei9iUFoKpUkIF971QLN8lIvvvwueI65+Nw5haMNKUwfJxabqlIIDODJKGrQ66gxC0PbQ==", + "requires": { + "node-fetch": "2.6.1" + } + }, "cross-spawn": { "version": "6.0.5", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", @@ -3215,6 +3267,13 @@ "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", "requires": { "is-arrayish": "^0.2.1" + }, + "dependencies": { + "is-arrayish": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", + "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=" + } } }, "error-stack-parser": { @@ -3281,9 +3340,9 @@ "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=" }, "escape-string-regexp": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=" + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==" }, "escodegen": { "version": "2.0.0", @@ -3548,6 +3607,14 @@ "requires": { "escape-string-regexp": "^1.0.5", "ignore": "^5.0.5" + }, + "dependencies": { + "escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", + "dev": true + } } }, "eslint-plugin-flowtype": { @@ -3575,14 +3642,15 @@ } }, "eslint-plugin-react": { - "version": "7.24.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.24.0.tgz", - "integrity": "sha512-KJJIx2SYx7PBx3ONe/mEeMz4YE0Lcr7feJTCMyyKb/341NcjuAgim3Acgan89GfPv7nxXK2+0slu0CWXYM4x+Q==", + "version": "7.25.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.25.0.tgz", + "integrity": "sha512-bZL+HeB+Qaimb4ryOc+OYYOX0XnOr6FX30ZXkzL8iSJA3tATTtZ1YgYyjK3jGvVDcZMejfUaeS/5wKDfTgyfVw==", "dev": true, "requires": { "array-includes": "^3.1.3", "array.prototype.flatmap": "^1.2.4", "doctrine": "^2.1.0", + "estraverse": "^5.2.0", "has": "^1.0.3", "jsx-ast-utils": "^2.4.1 || ^3.0.0", "minimatch": "^3.0.4", @@ -3594,6 +3662,12 @@ "string.prototype.matchall": "^4.0.5" }, "dependencies": { + "estraverse": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz", + "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==", + "dev": true + }, "resolve": { "version": "2.0.0-next.3", "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.3.tgz", @@ -3930,6 +4004,25 @@ "bser": "2.1.1" } }, + "fbjs": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-3.0.0.tgz", + "integrity": "sha512-dJd4PiDOFuhe7vk4F80Mba83Vr2QuK86FoxtgPmzBqEJahncp+13YCmfoa53KHCo6OnlXLG7eeMWPfB5CrpVKg==", + "requires": { + "cross-fetch": "^3.0.4", + "fbjs-css-vars": "^1.0.0", + "loose-envify": "^1.0.0", + "object-assign": "^4.1.0", + "promise": "^7.1.1", + "setimmediate": "^1.0.5", + "ua-parser-js": "^0.7.18" + } + }, + "fbjs-css-vars": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz", + "integrity": "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==" + }, "file-entry-cache": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-5.0.1.tgz", @@ -4262,6 +4355,14 @@ "source-map": "^0.7.3" } }, + "hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "requires": { + "react-is": "^16.7.0" + } + }, "hosted-git-info": { "version": "2.8.9", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz", @@ -4469,9 +4570,9 @@ } }, "is-arrayish": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", - "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=" + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", + "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==" }, "is-bigint": { "version": "1.0.4", @@ -5970,9 +6071,9 @@ "dev": true }, "ws": { - "version": "7.5.3", - "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.3.tgz", - "integrity": "sha512-kQ/dHIzuLrS6Je9+uv81ueZomEwH0qVYstcAQ4/Z93K8zeko9gtAbttJWzoC5ukqXY1PpoouV3+VSOqEAFt5wg==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.4.tgz", + "integrity": "sha512-zP9z6GXm6zC27YtspwH99T3qTG7bBFv2VIkeHstMLrLlDJuzA7tQ5ls3OJ1hOGGCzTQPniNJoHXIAOS0Jljohg==", "dev": true } } @@ -6171,18 +6272,10 @@ "supports-color": "^5.3.0" } }, - "color-convert": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", - "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "requires": { - "color-name": "1.1.3" - } - }, - "color-name": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" + "escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=" }, "has-flag": { "version": "3.0.0", @@ -6387,6 +6480,13 @@ "@babel/plugin-transform-modules-commonjs": "^7.0.0", "@babel/register": "^7.0.0", "escape-string-regexp": "^1.0.5" + }, + "dependencies": { + "escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=" + } } }, "metro-babel-transformer": { @@ -7077,18 +7177,10 @@ "supports-color": "^5.3.0" } }, - "color-convert": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", - "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "requires": { - "color-name": "1.1.3" - } - }, - "color-name": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" + "escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=" }, "has-flag": { "version": "3.0.0", @@ -7332,6 +7424,11 @@ "version": "5.0.0", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz", "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==" + }, + "react-is": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" } } }, @@ -7347,11 +7444,11 @@ "dev": true }, "promise": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/promise/-/promise-8.1.0.tgz", - "integrity": "sha512-W04AqnILOL/sPRXziNicCjSNRruLAuIHEOVBazepu0545DDNGYHz7ar9ZgZ1fMU8/MA4mVxp5rkBWRi6OXIy3Q==", + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", + "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", "requires": { - "asap": "~2.0.6" + "asap": "~2.0.3" } }, "prompts": { @@ -7371,13 +7468,6 @@ "loose-envify": "^1.4.0", "object-assign": "^4.1.1", "react-is": "^16.8.1" - }, - "dependencies": { - "react-is": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" - } } }, "psl": { @@ -7436,16 +7526,16 @@ }, "dependencies": { "ws": { - "version": "7.5.3", - "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.3.tgz", - "integrity": "sha512-kQ/dHIzuLrS6Je9+uv81ueZomEwH0qVYstcAQ4/Z93K8zeko9gtAbttJWzoC5ukqXY1PpoouV3+VSOqEAFt5wg==" + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.4.tgz", + "integrity": "sha512-zP9z6GXm6zC27YtspwH99T3qTG7bBFv2VIkeHstMLrLlDJuzA7tQ5ls3OJ1hOGGCzTQPniNJoHXIAOS0Jljohg==" } } }, "react-is": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", - "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "react-native": { "version": "0.65.1", @@ -7536,6 +7626,14 @@ "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } + }, + "promise": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/promise/-/promise-8.1.0.tgz", + "integrity": "sha512-W04AqnILOL/sPRXziNicCjSNRruLAuIHEOVBazepu0545DDNGYHz7ar9ZgZ1fMU8/MA4mVxp5rkBWRi6OXIy3Q==", + "requires": { + "asap": "~2.0.6" + } } } }, @@ -7550,6 +7648,18 @@ "nullthrows": "^1.1.1" } }, + "react-native-gesture-handler": { + "version": "1.10.3", + "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.10.3.tgz", + "integrity": "sha512-cBGMi1IEsIVMgoox4RvMx7V2r6bNKw0uR1Mu1o7NbuHS6BRSVLq0dP34l2ecnPlC+jpWd3le6Yg1nrdCjby2Mw==", + "requires": { + "@egjs/hammerjs": "^2.0.17", + "fbjs": "^3.0.0", + "hoist-non-react-statics": "^3.3.0", + "invariant": "^2.2.4", + "prop-types": "^15.7.2" + } + }, "react-native-safe-area-context": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.3.0.tgz", @@ -7670,6 +7780,14 @@ "react-is": "^17.0.2", "react-shallow-renderer": "^16.13.1", "scheduler": "^0.20.2" + }, + "dependencies": { + "react-is": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", + "dev": true + } } }, "read-pkg": { @@ -8174,6 +8292,11 @@ } } }, + "setimmediate": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", + "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=" + }, "setprototypeof": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz", @@ -8244,6 +8367,14 @@ "plist": "^3.0.1" } }, + "simple-swizzle": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", + "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=", + "requires": { + "is-arrayish": "^0.3.1" + } + }, "sisteransi": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz", @@ -8271,19 +8402,6 @@ "requires": { "color-convert": "^1.9.0" } - }, - "color-convert": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", - "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "requires": { - "color-name": "1.1.3" - } - }, - "color-name": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" } } }, @@ -8906,6 +9024,11 @@ "is-typedarray": "^1.0.0" } }, + "ua-parser-js": { + "version": "0.7.28", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.28.tgz", + "integrity": "sha512-6Gurc1n//gjp9eQNXjD9O3M/sMwVtN5S8Lv9bvOYBfKfDNiIIhqiyi01vMBO45u4zkDE420w/e0se7Vs+sIg+g==" + }, "uglify-es": { "version": "3.3.9", "resolved": "https://registry.npmjs.org/uglify-es/-/uglify-es-3.3.9.tgz", diff --git a/package.json b/package.json index 3d9cd3f..944365a 100644 --- a/package.json +++ b/package.json @@ -10,13 +10,16 @@ "lint": "eslint ." }, "dependencies": { + "@react-navigation/bottom-tabs": "^6.0.5", "@react-navigation/native": "^6.0.2", + "@react-navigation/stack": "^6.0.7", "react": "17.0.2", "react-native": "0.65.1", + "react-native-gesture-handler": "^1.10.3", "react-native-safe-area-context": "^3.3.0", "react-native-screens": "^3.6.0", - "react-native-toast-message": "^1.4.9", - "react-native-vector-icons": "^8.1.0" + "react-native-toast-message": "1.4.9", + "react-native-vector-icons": "8.1.0" }, "devDependencies": { "@babel/core": "^7.12.9", diff --git a/src/components/BottomBar.js b/src/components/BottomBar.js index d759774..12e8923 100644 --- a/src/components/BottomBar.js +++ b/src/components/BottomBar.js @@ -1,42 +1,163 @@ import React from 'react'; -import {StyleSheet, TouchableHighlight, View} from 'react-native'; +import {StyleSheet, TouchableHighlight, Text, View} from 'react-native'; import Ionicons from 'react-native-vector-icons/dist/Ionicons'; -import Ionicons from 'react-native-vector-icons/dist/MaterialCommunityIcons'; - +import MaterialCommunityIcons from 'react-native-vector-icons/dist/MaterialCommunityIcons'; const iconSize = 26; const BottomBar = ({state, navigation}) => { const onClick = index => { - console.log('Clicked to :', index); + let tabName; + switch (index) { + case 0: + tabName = 'DatabaseScreen'; + break; + case 1: + tabName = 'WebhooksScreen'; + break; + case 2: + tabName = 'LogsScreen'; + break; + case 3: + tabName = 'ConfigScreen'; + break; + case 4: + tabName = 'ApiScreen'; + break; + default: + tabName = 'BrowserScreen'; + break; + } + const event = navigation.emit({ + type: 'tabPress', + target: index, + }); + if (!event.defaultPrevented) { + navigation.navigate(tabName); + } }; return ( onClick(0)} - underlayColor={'white'} + underlayColor={'#EEEEEE'} style={styles.touchable}> - - - {state.index === 0 && Browser} + + + + + Database + + + {state.index === 0 && } onClick(1)} - underlayColor={'white'} + underlayColor={'#EEEEEE'} + style={styles.touchable}> + + + + + Webhooks + + + {state.index === 1 && } + + + onClick(2)} + underlayColor={'#EEEEEE'} style={styles.touchable}> - - - {state.index === 1 && Api} + + + + + Logs + + + {state.index === 2 && } + + + onClick(3)} + underlayColor={'#EEEEEE'} + style={styles.touchable}> + + + + + Config + + + {state.index === 3 && } + + + onClick(4)} + underlayColor={'#EEEEEE'} + style={styles.touchable}> + + + + + Api + + + {state.index === 4 && } @@ -46,21 +167,35 @@ const BottomBar = ({state, navigation}) => { const styles = StyleSheet.create({ main: { width: '100%', - height: 50, + height: 55, backgroundColor: 'white', flexDirection: 'row', }, touchable: { + flex: 1, + height: '100%', + justifyContent: 'center', + alignItems: 'center', + }, + touchableChild: { flex: 1, justifyContent: 'center', alignItems: 'center', }, innerView: { alignItems: 'center', + marginTop: 2, }, text: { fontWeight: 'bold', - fontSize: 16, + fontSize: 11, + }, + topLine: { + width: '100%', + height: 3, + backgroundColor: '#169CEE', + position: 'absolute', + top: 0, }, }); diff --git a/src/navigation/TabNavigation.js b/src/navigation/TabNavigation.js index 90f540a..125c891 100644 --- a/src/navigation/TabNavigation.js +++ b/src/navigation/TabNavigation.js @@ -3,14 +3,22 @@ import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; // Screens import BrowserScreen from '../screens/BrowserScreen'; import ApiScreen from '../screens/ApiScreen'; +import WebhooksScreen from '../screens/WebooksScreen'; +import LogsScreen from '../screens/LogsScreen'; +import ConfigScreen from '../screens/ConfigScreen'; // BottomBar import BottomBar from '../components/BottomBar'; const Tab = createBottomTabNavigator(); const TabNavigation = () => { return ( - }> - + }> + + + + ); diff --git a/src/screens/ConfigScreen.js b/src/screens/ConfigScreen.js new file mode 100644 index 0000000..12cecad --- /dev/null +++ b/src/screens/ConfigScreen.js @@ -0,0 +1,20 @@ +import React from 'react'; +import {StyleSheet, Text, View} from 'react-native'; + +const ConfigScreen = props => { + return ( + + Config Screen + + ); +}; + +const styles = StyleSheet.create({ + main: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, +}); + +export default ConfigScreen; diff --git a/src/screens/LogsScreen.js b/src/screens/LogsScreen.js new file mode 100644 index 0000000..57a4fd8 --- /dev/null +++ b/src/screens/LogsScreen.js @@ -0,0 +1,20 @@ +import React from 'react'; +import {StyleSheet, Text, View} from 'react-native'; + +const LogsScreen = props => { + return ( + + Logs Screen + + ); +}; + +const styles = StyleSheet.create({ + main: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, +}); + +export default LogsScreen; diff --git a/src/screens/WebooksScreen.js b/src/screens/WebooksScreen.js new file mode 100644 index 0000000..00bfb70 --- /dev/null +++ b/src/screens/WebooksScreen.js @@ -0,0 +1,20 @@ +import React from 'react'; +import {StyleSheet, Text, View} from 'react-native'; + +const WebooksScreen = props => { + return ( + + Webooks Screen + + ); +}; + +const styles = StyleSheet.create({ + main: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, +}); + +export default WebooksScreen; diff --git a/src/utils.js b/src/utils.js index aae04b6..9f86da6 100644 --- a/src/utils.js +++ b/src/utils.js @@ -1,11 +1,18 @@ import Toast from 'react-native-toast-message'; - +export const ToastTypes = { + TYPE_INFO: 'info', + TYPE_SUCCESS: 'success', + TYPE_ERROR: 'error', +}; export const Functions = { - toastMessage(title, msg, type = 'info') { + toastMessage(title, msg, type = ToastTypes.TYPE_INFO) { Toast.show({ type: type, text1: title, text2: msg, + position: 'bottom', + autoHide: true, + visibilityTime: 750, }); }, };