diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 000000000..543e93d1e
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+ presets: [ 'module:metro-react-native-babel-preset' ],
+ env: {
+ production: {
+ plugins: [ 'react-native-paper/babel' ]
+ }
+ },
+ plugins: [ 'optional-require' ]
+};
diff --git a/package-lock.json b/package-lock.json
index 3a23ab4b4..ef7ac4781 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -450,20 +450,22 @@
}
},
"@babel/core": {
- "version": "7.5.5",
- "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.5.5.tgz",
- "integrity": "sha512-i4qoSr2KTtce0DmkuuQBV4AuQgGPUcPXMr9L5MyYAtk06z068lQ10a4O009fe5OB/DfNV+h+qqT7ddNV8UnRjg==",
+ "version": "7.9.0",
+ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.9.0.tgz",
+ "integrity": "sha512-kWc7L0fw1xwvI0zi8OKVBuxRVefwGOrKSQMvrQ3dW+bIIavBY3/NpXmpjMy7bQnLgwgzWQZ8TlM57YHpHNHz4w==",
"requires": {
- "@babel/code-frame": "^7.5.5",
- "@babel/generator": "^7.5.5",
- "@babel/helpers": "^7.5.5",
- "@babel/parser": "^7.5.5",
- "@babel/template": "^7.4.4",
- "@babel/traverse": "^7.5.5",
- "@babel/types": "^7.5.5",
- "convert-source-map": "^1.1.0",
+ "@babel/code-frame": "^7.8.3",
+ "@babel/generator": "^7.9.0",
+ "@babel/helper-module-transforms": "^7.9.0",
+ "@babel/helpers": "^7.9.0",
+ "@babel/parser": "^7.9.0",
+ "@babel/template": "^7.8.6",
+ "@babel/traverse": "^7.9.0",
+ "@babel/types": "^7.9.0",
+ "convert-source-map": "^1.7.0",
"debug": "^4.1.0",
- "json5": "^2.1.0",
+ "gensync": "^1.0.0-beta.1",
+ "json5": "^2.1.2",
"lodash": "^4.17.13",
"resolve": "^1.3.2",
"semver": "^5.4.1",
@@ -471,88 +473,188 @@
},
"dependencies": {
"@babel/code-frame": {
- "version": "7.5.5",
- "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.5.5.tgz",
- "integrity": "sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==",
+ "version": "7.12.13",
+ "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
+ "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
"requires": {
- "@babel/highlight": "^7.0.0"
+ "@babel/highlight": "^7.12.13"
}
},
"@babel/generator": {
- "version": "7.5.5",
- "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.5.5.tgz",
- "integrity": "sha512-ETI/4vyTSxTzGnU2c49XHv2zhExkv9JHLTwDAFz85kmcwuShvYG2H08FwgIguQf4JC75CBnXAUM5PqeF4fj0nQ==",
+ "version": "7.14.1",
+ "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.1.tgz",
+ "integrity": "sha512-TMGhsXMXCP/O1WtQmZjpEYDhCYC9vFhayWZPJSZCGkPJgUqX0rF0wwtrYvnzVxIjcF80tkUertXVk5cwqi5cAQ==",
"requires": {
- "@babel/types": "^7.5.5",
+ "@babel/types": "^7.14.1",
"jsesc": "^2.5.1",
- "lodash": "^4.17.13",
- "source-map": "^0.5.0",
- "trim-right": "^1.0.1"
+ "source-map": "^0.5.0"
+ }
+ },
+ "@babel/helper-function-name": {
+ "version": "7.12.13",
+ "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz",
+ "integrity": "sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA==",
+ "requires": {
+ "@babel/helper-get-function-arity": "^7.12.13",
+ "@babel/template": "^7.12.13",
+ "@babel/types": "^7.12.13"
+ }
+ },
+ "@babel/helper-get-function-arity": {
+ "version": "7.12.13",
+ "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz",
+ "integrity": "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==",
+ "requires": {
+ "@babel/types": "^7.12.13"
+ }
+ },
+ "@babel/helper-member-expression-to-functions": {
+ "version": "7.13.12",
+ "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.13.12.tgz",
+ "integrity": "sha512-48ql1CLL59aKbU94Y88Xgb2VFy7a95ykGRbJJaaVv+LX5U8wFpLfiGXJJGUozsmA1oEh/o5Bp60Voq7ACyA/Sw==",
+ "requires": {
+ "@babel/types": "^7.13.12"
+ }
+ },
+ "@babel/helper-module-imports": {
+ "version": "7.13.12",
+ "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.13.12.tgz",
+ "integrity": "sha512-4cVvR2/1B693IuOvSI20xqqa/+bl7lqAMR59R4iu39R9aOX8/JoYY1sFaNvUMyMBGnHdwvJgUrzNLoUZxXypxA==",
+ "requires": {
+ "@babel/types": "^7.13.12"
+ }
+ },
+ "@babel/helper-module-transforms": {
+ "version": "7.14.0",
+ "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.0.tgz",
+ "integrity": "sha512-L40t9bxIuGOfpIGA3HNkJhU9qYrf4y5A5LUSw7rGMSn+pcG8dfJ0g6Zval6YJGd2nEjI7oP00fRdnhLKndx6bw==",
+ "requires": {
+ "@babel/helper-module-imports": "^7.13.12",
+ "@babel/helper-replace-supers": "^7.13.12",
+ "@babel/helper-simple-access": "^7.13.12",
+ "@babel/helper-split-export-declaration": "^7.12.13",
+ "@babel/helper-validator-identifier": "^7.14.0",
+ "@babel/template": "^7.12.13",
+ "@babel/traverse": "^7.14.0",
+ "@babel/types": "^7.14.0"
+ }
+ },
+ "@babel/helper-optimise-call-expression": {
+ "version": "7.12.13",
+ "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.13.tgz",
+ "integrity": "sha512-BdWQhoVJkp6nVjB7nkFWcn43dkprYauqtk++Py2eaf/GRDFm5BxRqEIZCiHlZUGAVmtwKcsVL1dC68WmzeFmiA==",
+ "requires": {
+ "@babel/types": "^7.12.13"
+ }
+ },
+ "@babel/helper-replace-supers": {
+ "version": "7.13.12",
+ "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.13.12.tgz",
+ "integrity": "sha512-Gz1eiX+4yDO8mT+heB94aLVNCL+rbuT2xy4YfyNqu8F+OI6vMvJK891qGBTqL9Uc8wxEvRW92Id6G7sDen3fFw==",
+ "requires": {
+ "@babel/helper-member-expression-to-functions": "^7.13.12",
+ "@babel/helper-optimise-call-expression": "^7.12.13",
+ "@babel/traverse": "^7.13.0",
+ "@babel/types": "^7.13.12"
+ }
+ },
+ "@babel/helper-simple-access": {
+ "version": "7.13.12",
+ "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.13.12.tgz",
+ "integrity": "sha512-7FEjbrx5SL9cWvXioDbnlYTppcZGuCY6ow3/D5vMggb2Ywgu4dMrpTJX0JdQAIcRRUElOIxF3yEooa9gUb9ZbA==",
+ "requires": {
+ "@babel/types": "^7.13.12"
}
},
"@babel/helper-split-export-declaration": {
- "version": "7.4.4",
- "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz",
- "integrity": "sha512-Ro/XkzLf3JFITkW6b+hNxzZ1n5OQ80NvIUdmHspih1XAhtN3vPTuUFT4eQnela+2MaZ5ulH+iyP513KJrxbN7Q==",
+ "version": "7.12.13",
+ "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz",
+ "integrity": "sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==",
"requires": {
- "@babel/types": "^7.4.4"
+ "@babel/types": "^7.12.13"
+ }
+ },
+ "@babel/helper-validator-identifier": {
+ "version": "7.14.0",
+ "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
+ "integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A=="
+ },
+ "@babel/highlight": {
+ "version": "7.14.0",
+ "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.0.tgz",
+ "integrity": "sha512-YSCOwxvTYEIMSGaBQb5kDDsCopDdiUGsqpatp3fOlI4+2HQSkTmEVWnVuySdAC5EWCqSWWTv0ib63RjR7dTBdg==",
+ "requires": {
+ "@babel/helper-validator-identifier": "^7.14.0",
+ "chalk": "^2.0.0",
+ "js-tokens": "^4.0.0"
}
},
"@babel/parser": {
- "version": "7.5.5",
- "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.5.5.tgz",
- "integrity": "sha512-E5BN68cqR7dhKan1SfqgPGhQ178bkVKpXTPEXnFJBrEt8/DKRZlybmy+IgYLTeN7tp1R5Ccmbm2rBk17sHYU3g=="
+ "version": "7.14.1",
+ "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.1.tgz",
+ "integrity": "sha512-muUGEKu8E/ftMTPlNp+mc6zL3E9zKWmF5sDHZ5MSsoTP9Wyz64AhEf9kD08xYJ7w6Hdcu8H550ircnPyWSIF0Q=="
},
"@babel/template": {
- "version": "7.4.4",
- "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.4.4.tgz",
- "integrity": "sha512-CiGzLN9KgAvgZsnivND7rkA+AeJ9JB0ciPOD4U59GKbQP2iQl+olF1l76kJOupqidozfZ32ghwBEJDhnk9MEcw==",
+ "version": "7.12.13",
+ "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz",
+ "integrity": "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==",
"requires": {
- "@babel/code-frame": "^7.0.0",
- "@babel/parser": "^7.4.4",
- "@babel/types": "^7.4.4"
+ "@babel/code-frame": "^7.12.13",
+ "@babel/parser": "^7.12.13",
+ "@babel/types": "^7.12.13"
}
},
"@babel/traverse": {
- "version": "7.5.5",
- "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.5.5.tgz",
- "integrity": "sha512-MqB0782whsfffYfSjH4TM+LMjrJnhCNEDMDIjeTpl+ASaUvxcjoiVCo/sM1GhS1pHOXYfWVCYneLjMckuUxDaQ==",
+ "version": "7.14.0",
+ "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.0.tgz",
+ "integrity": "sha512-dZ/a371EE5XNhTHomvtuLTUyx6UEoJmYX+DT5zBCQN3McHemsuIaKKYqsc/fs26BEkHs/lBZy0J571LP5z9kQA==",
"requires": {
- "@babel/code-frame": "^7.5.5",
- "@babel/generator": "^7.5.5",
- "@babel/helper-function-name": "^7.1.0",
- "@babel/helper-split-export-declaration": "^7.4.4",
- "@babel/parser": "^7.5.5",
- "@babel/types": "^7.5.5",
+ "@babel/code-frame": "^7.12.13",
+ "@babel/generator": "^7.14.0",
+ "@babel/helper-function-name": "^7.12.13",
+ "@babel/helper-split-export-declaration": "^7.12.13",
+ "@babel/parser": "^7.14.0",
+ "@babel/types": "^7.14.0",
"debug": "^4.1.0",
- "globals": "^11.1.0",
- "lodash": "^4.17.13"
+ "globals": "^11.1.0"
}
},
"@babel/types": {
- "version": "7.5.5",
- "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.5.5.tgz",
- "integrity": "sha512-s63F9nJioLqOlW3UkyMd+BYhXt44YuaFm/VV0VwuteqjYwRrObkU7ra9pY4wAJR3oXi8hJrMcrcJdO/HH33vtw==",
+ "version": "7.14.1",
+ "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.1.tgz",
+ "integrity": "sha512-S13Qe85fzLs3gYRUnrpyeIrBJIMYv33qSTg1qoBwiG6nPKwUWAD9odSzWhEedpwOIzSEI6gbdQIWEMiCI42iBA==",
"requires": {
- "esutils": "^2.0.2",
- "lodash": "^4.17.13",
+ "@babel/helper-validator-identifier": "^7.14.0",
"to-fast-properties": "^2.0.0"
}
},
- "debug": {
- "version": "4.1.1",
- "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
- "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+ "convert-source-map": {
+ "version": "1.7.0",
+ "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
+ "integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==",
"requires": {
- "ms": "^2.1.1"
+ "safe-buffer": "~5.1.1"
}
},
- "json5": {
- "version": "2.1.0",
- "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.0.tgz",
- "integrity": "sha512-8Mh9h6xViijj36g7Dxi+Y4S6hNGV96vcJZr/SrlHh1LR/pEn/8j/+qIBbs44YKl69Lrfctp4QD+AdWLTMqEZAQ==",
+ "debug": {
+ "version": "4.3.1",
+ "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+ "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
"requires": {
- "minimist": "^1.2.0"
+ "ms": "2.1.2"
+ }
+ },
+ "js-tokens": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+ "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+ },
+ "json5": {
+ "version": "2.2.0",
+ "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
+ "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
+ "requires": {
+ "minimist": "^1.2.5"
}
},
"ms": {
@@ -901,94 +1003,126 @@
}
},
"@babel/helpers": {
- "version": "7.5.5",
- "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.5.5.tgz",
- "integrity": "sha512-nRq2BUhxZFnfEn/ciJuhklHvFOqjJUD5wpx+1bxUF2axL9C+v4DE/dmp5sT2dKnpOs4orZWzpAZqlCy8QqE/7g==",
+ "version": "7.14.0",
+ "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.0.tgz",
+ "integrity": "sha512-+ufuXprtQ1D1iZTO/K9+EBRn+qPWMJjZSw/S0KlFrxCw4tkrzv9grgpDHkY9MeQTjTY8i2sp7Jep8DfU6tN9Mg==",
"requires": {
- "@babel/template": "^7.4.4",
- "@babel/traverse": "^7.5.5",
- "@babel/types": "^7.5.5"
+ "@babel/template": "^7.12.13",
+ "@babel/traverse": "^7.14.0",
+ "@babel/types": "^7.14.0"
},
"dependencies": {
- "@babel/generator": {
- "version": "7.5.5",
- "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.5.5.tgz",
- "integrity": "sha512-ETI/4vyTSxTzGnU2c49XHv2zhExkv9JHLTwDAFz85kmcwuShvYG2H08FwgIguQf4JC75CBnXAUM5PqeF4fj0nQ==",
+ "@babel/code-frame": {
+ "version": "7.12.13",
+ "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
+ "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
"requires": {
- "@babel/types": "^7.5.5",
+ "@babel/highlight": "^7.12.13"
+ }
+ },
+ "@babel/generator": {
+ "version": "7.14.1",
+ "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.1.tgz",
+ "integrity": "sha512-TMGhsXMXCP/O1WtQmZjpEYDhCYC9vFhayWZPJSZCGkPJgUqX0rF0wwtrYvnzVxIjcF80tkUertXVk5cwqi5cAQ==",
+ "requires": {
+ "@babel/types": "^7.14.1",
"jsesc": "^2.5.1",
- "lodash": "^4.17.13",
- "source-map": "^0.5.0",
- "trim-right": "^1.0.1"
+ "source-map": "^0.5.0"
+ }
+ },
+ "@babel/helper-function-name": {
+ "version": "7.12.13",
+ "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz",
+ "integrity": "sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA==",
+ "requires": {
+ "@babel/helper-get-function-arity": "^7.12.13",
+ "@babel/template": "^7.12.13",
+ "@babel/types": "^7.12.13"
+ }
+ },
+ "@babel/helper-get-function-arity": {
+ "version": "7.12.13",
+ "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz",
+ "integrity": "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==",
+ "requires": {
+ "@babel/types": "^7.12.13"
}
},
"@babel/helper-split-export-declaration": {
- "version": "7.4.4",
- "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz",
- "integrity": "sha512-Ro/XkzLf3JFITkW6b+hNxzZ1n5OQ80NvIUdmHspih1XAhtN3vPTuUFT4eQnela+2MaZ5ulH+iyP513KJrxbN7Q==",
+ "version": "7.12.13",
+ "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz",
+ "integrity": "sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==",
"requires": {
- "@babel/types": "^7.4.4"
+ "@babel/types": "^7.12.13"
+ }
+ },
+ "@babel/helper-validator-identifier": {
+ "version": "7.14.0",
+ "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
+ "integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A=="
+ },
+ "@babel/highlight": {
+ "version": "7.14.0",
+ "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.0.tgz",
+ "integrity": "sha512-YSCOwxvTYEIMSGaBQb5kDDsCopDdiUGsqpatp3fOlI4+2HQSkTmEVWnVuySdAC5EWCqSWWTv0ib63RjR7dTBdg==",
+ "requires": {
+ "@babel/helper-validator-identifier": "^7.14.0",
+ "chalk": "^2.0.0",
+ "js-tokens": "^4.0.0"
}
},
"@babel/parser": {
- "version": "7.5.5",
- "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.5.5.tgz",
- "integrity": "sha512-E5BN68cqR7dhKan1SfqgPGhQ178bkVKpXTPEXnFJBrEt8/DKRZlybmy+IgYLTeN7tp1R5Ccmbm2rBk17sHYU3g=="
+ "version": "7.14.1",
+ "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.1.tgz",
+ "integrity": "sha512-muUGEKu8E/ftMTPlNp+mc6zL3E9zKWmF5sDHZ5MSsoTP9Wyz64AhEf9kD08xYJ7w6Hdcu8H550ircnPyWSIF0Q=="
},
"@babel/template": {
- "version": "7.4.4",
- "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.4.4.tgz",
- "integrity": "sha512-CiGzLN9KgAvgZsnivND7rkA+AeJ9JB0ciPOD4U59GKbQP2iQl+olF1l76kJOupqidozfZ32ghwBEJDhnk9MEcw==",
+ "version": "7.12.13",
+ "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz",
+ "integrity": "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==",
"requires": {
- "@babel/code-frame": "^7.0.0",
- "@babel/parser": "^7.4.4",
- "@babel/types": "^7.4.4"
+ "@babel/code-frame": "^7.12.13",
+ "@babel/parser": "^7.12.13",
+ "@babel/types": "^7.12.13"
}
},
"@babel/traverse": {
- "version": "7.5.5",
- "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.5.5.tgz",
- "integrity": "sha512-MqB0782whsfffYfSjH4TM+LMjrJnhCNEDMDIjeTpl+ASaUvxcjoiVCo/sM1GhS1pHOXYfWVCYneLjMckuUxDaQ==",
+ "version": "7.14.0",
+ "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.0.tgz",
+ "integrity": "sha512-dZ/a371EE5XNhTHomvtuLTUyx6UEoJmYX+DT5zBCQN3McHemsuIaKKYqsc/fs26BEkHs/lBZy0J571LP5z9kQA==",
"requires": {
- "@babel/code-frame": "^7.5.5",
- "@babel/generator": "^7.5.5",
- "@babel/helper-function-name": "^7.1.0",
- "@babel/helper-split-export-declaration": "^7.4.4",
- "@babel/parser": "^7.5.5",
- "@babel/types": "^7.5.5",
+ "@babel/code-frame": "^7.12.13",
+ "@babel/generator": "^7.14.0",
+ "@babel/helper-function-name": "^7.12.13",
+ "@babel/helper-split-export-declaration": "^7.12.13",
+ "@babel/parser": "^7.14.0",
+ "@babel/types": "^7.14.0",
"debug": "^4.1.0",
- "globals": "^11.1.0",
- "lodash": "^4.17.13"
- },
- "dependencies": {
- "@babel/code-frame": {
- "version": "7.5.5",
- "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.5.5.tgz",
- "integrity": "sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==",
- "requires": {
- "@babel/highlight": "^7.0.0"
- }
- }
+ "globals": "^11.1.0"
}
},
"@babel/types": {
- "version": "7.5.5",
- "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.5.5.tgz",
- "integrity": "sha512-s63F9nJioLqOlW3UkyMd+BYhXt44YuaFm/VV0VwuteqjYwRrObkU7ra9pY4wAJR3oXi8hJrMcrcJdO/HH33vtw==",
+ "version": "7.14.1",
+ "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.1.tgz",
+ "integrity": "sha512-S13Qe85fzLs3gYRUnrpyeIrBJIMYv33qSTg1qoBwiG6nPKwUWAD9odSzWhEedpwOIzSEI6gbdQIWEMiCI42iBA==",
"requires": {
- "esutils": "^2.0.2",
- "lodash": "^4.17.13",
+ "@babel/helper-validator-identifier": "^7.14.0",
"to-fast-properties": "^2.0.0"
}
},
"debug": {
- "version": "4.1.1",
- "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
- "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+ "version": "4.3.1",
+ "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+ "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
"requires": {
- "ms": "^2.1.1"
+ "ms": "2.1.2"
}
},
+ "js-tokens": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+ "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+ },
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -1851,18 +1985,11 @@
}
},
"@babel/runtime": {
- "version": "7.5.5",
- "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.5.tgz",
- "integrity": "sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==",
+ "version": "7.9.0",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.0.tgz",
+ "integrity": "sha512-cTIudHnzuWLS56ik4DnRnqqNf8MkdUzV4iFFI1h7Jo9xvrpQROYaAnaSd2mHLQAzzZAPfATynX5ord6YlNYNMA==",
"requires": {
- "regenerator-runtime": "^0.13.2"
- },
- "dependencies": {
- "regenerator-runtime": {
- "version": "0.13.3",
- "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
- "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw=="
- }
+ "regenerator-runtime": "^0.13.4"
}
},
"@babel/template": {
@@ -1938,6 +2065,15 @@
}
}
},
+ "@callstack/react-theme-provider": {
+ "version": "3.0.6",
+ "resolved": "https://registry.npmjs.org/@callstack/react-theme-provider/-/react-theme-provider-3.0.6.tgz",
+ "integrity": "sha512-wwKMXfmklfogpalNZT0W+jh76BIquiYUiQHOaPmt/PCyCEP/E6rP+e7Uie6mBZrfkea9WJYJ+mus6r+45JAEhg==",
+ "requires": {
+ "deepmerge": "^3.2.0",
+ "hoist-non-react-statics": "^3.3.0"
+ }
+ },
"@cnakazawa/watch": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz",
@@ -5277,6 +5413,39 @@
}
}
},
+ "babel-plugin-optional-require": {
+ "version": "0.3.1",
+ "resolved": "https://registry.npmjs.org/babel-plugin-optional-require/-/babel-plugin-optional-require-0.3.1.tgz",
+ "integrity": "sha512-qL9pdz6fgMjO3NZ1igO8BEJrWooLgkuhJ2yc4ligr3lMvEq7tzFZuz3JWSa6P05khrvTz1USf0POkxAjlFnkLw==",
+ "dev": true,
+ "requires": {
+ "is-builtin-module": "^2.0.0",
+ "resolve-from": "^4.0.0"
+ },
+ "dependencies": {
+ "builtin-modules": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-2.0.0.tgz",
+ "integrity": "sha512-3U5kUA5VPsRUA3nofm/BXX7GVHKfxz0hOBAPxXrIvHzlDRkQVqEn6yi8QJegxl4LzOHLdvb7XF5dVawa/VVYBg==",
+ "dev": true
+ },
+ "is-builtin-module": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-2.0.0.tgz",
+ "integrity": "sha512-G2jLHphOywpgrL/AaJKWDXpdpGR9X4V1PCkB+EwG5Z28z8EukgdWnAUFAS2wdBtIpwHhHBIiq0NBOWEbSXN0Rg==",
+ "dev": true,
+ "requires": {
+ "builtin-modules": "^2.0.0"
+ }
+ },
+ "resolve-from": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+ "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+ "dev": true
+ }
+ }
+ },
"babel-plugin-syntax-jsx": {
"version": "6.18.0",
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
@@ -12803,6 +12972,11 @@
"is-wsl": "^1.1.0"
}
},
+ "optional-require": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/optional-require/-/optional-require-1.0.3.tgz",
+ "integrity": "sha512-RV2Zp2MY2aeYK5G+B/Sps8lW5NHAzE5QClbFP15j+PWmP+T9PxlJXBOOLoSAdgwFvS4t0aMR4vpedMkbHfh0nA=="
+ },
"optionator": {
"version": "0.8.2",
"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz",
@@ -14789,11 +14963,26 @@
"resolved": "https://registry.npmjs.org/react-native-immersive/-/react-native-immersive-2.0.0.tgz",
"integrity": "sha512-9TL05nTHN/x9sN1wbUlBoGyzH4NCuZ/7WEEUp5CvOoKuUABvdYosov0O0SAMbm/5J913RRoy98VB6tGNi9lRSw=="
},
+ "react-native-iphone-x-helper": {
+ "version": "1.3.1",
+ "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz",
+ "integrity": "sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg=="
+ },
"react-native-keep-awake": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/react-native-keep-awake/-/react-native-keep-awake-4.0.0.tgz",
"integrity": "sha512-0Fotox+eLXQooeibVs3P60yASYUWjtRw9MZNmbuHt5UZQrgUrAKsE4jm7gTr4tPU1m1RkwGzcgUFpcOkh/ec7g=="
},
+ "react-native-paper": {
+ "version": "4.8.1",
+ "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-4.8.1.tgz",
+ "integrity": "sha512-WgmqrDdcrr0ZbuiLCwMpmOMhl1n8uIvNulxsl2oCGtD8oeMkPJKHf4G/ONR+iNrSXcFbJek+uDRSmcGA5kDfUA==",
+ "requires": {
+ "@callstack/react-theme-provider": "^3.0.5",
+ "color": "^3.1.2",
+ "react-native-iphone-x-helper": "^1.3.1"
+ }
+ },
"react-native-sound": {
"version": "github:jitsi/react-native-sound#3fe5480fce935e888d5089d94a191c7c7e3aa190",
"from": "github:jitsi/react-native-sound#3fe5480fce935e888d5089d94a191c7c7e3aa190"
diff --git a/package.json b/package.json
index 7346d480d..682b768f9 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
"moment": "2.29.1",
"moment-duration-format": "2.2.2",
"olm": "https://packages.matrix.org/npm/olm/olm-3.2.1.tgz",
+ "optional-require": "1.0.3",
"pixelmatch": "5.1.0",
"promise.allsettled": "1.0.4",
"punycode": "2.1.1",
@@ -77,6 +78,7 @@
"react-native-device-info": "8.0.0",
"react-native-immersive": "2.0.0",
"react-native-keep-awake": "4.0.0",
+ "react-native-paper": "4.8.1",
"react-native-sound": "github:jitsi/react-native-sound#3fe5480fce935e888d5089d94a191c7c7e3aa190",
"react-native-splash-screen": "3.2.0",
"react-native-svg": "12.1.0",
@@ -102,7 +104,7 @@
"zxcvbn": "4.4.2"
},
"devDependencies": {
- "@babel/core": "7.5.5",
+ "@babel/core": "7.9.0",
"@babel/plugin-proposal-class-properties": "7.1.0",
"@babel/plugin-proposal-export-default-from": "7.0.0",
"@babel/plugin-proposal-export-namespace-from": "7.0.0",
@@ -112,9 +114,10 @@
"@babel/preset-env": "7.1.0",
"@babel/preset-flow": "7.0.0",
"@babel/preset-react": "7.0.0",
- "@babel/runtime": "7.5.5",
+ "@babel/runtime": "7.9.0",
"babel-eslint": "10.0.1",
"babel-loader": "8.0.4",
+ "babel-plugin-optional-require": "0.3.1",
"circular-dependency-plugin": "5.2.0",
"clean-css-cli": "4.3.0",
"css-loader": "3.6.0",
diff --git a/react/features/app/components/App.native.js b/react/features/app/components/App.native.js
index 0c4f689c7..70e6a1aa7 100644
--- a/react/features/app/components/App.native.js
+++ b/react/features/app/components/App.native.js
@@ -11,6 +11,7 @@ import { getFeatureFlag } from '../../base/flags/functions';
import { Platform } from '../../base/react';
import { DimensionsDetector, clientResized } from '../../base/responsive-ui';
import { updateSettings } from '../../base/settings';
+import JitsiThemePaperProvider from '../../base/ui/components/JitsiThemeProvider.native';
import logger from '../logger';
import { AbstractApp } from './AbstractApp';
@@ -127,10 +128,12 @@ export class App extends AbstractApp {
*/
_createMainElement(component, props) {
return (
-
- { super._createMainElement(component, props) }
-
+
+
+ { super._createMainElement(component, props) }
+
+
);
}
diff --git a/react/features/base/ui/Tokens.js b/react/features/base/ui/Tokens.js
index 04ee329ca..e5a0544f8 100644
--- a/react/features/base/ui/Tokens.js
+++ b/react/features/base/ui/Tokens.js
@@ -1,6 +1,6 @@
// @flow
-// Default color pallete
+// Default color palette
export const colors = {
error03: '#7A141F',
error04: '#A21B29',
@@ -157,6 +157,15 @@ export const colorMap = {
// Disabled background for high-contrast input fields
field02Disabled: 'surface06',
+ // Background for section header
+ section01: 'surface10',
+
+ // Active color for section header
+ section01Active: 'primary04',
+
+ // Inactive color for section header
+ section01Inactive: 'surface01',
+
// Borders
// Border for the input fields in hover state
border01: 'surface08',
@@ -184,7 +193,7 @@ export const colorMap = {
// Color for positive messages applied to icons & borders
success01: 'success05',
- // Color for positive messages applied tobackgrounds
+ // Color for positive messages applied to backgrounds
success02: 'success05',
// Color for warning messages applied to icons, borders & backgrounds
diff --git a/react/features/base/ui/components/BaseTheme.native.js b/react/features/base/ui/components/BaseTheme.native.js
new file mode 100644
index 000000000..cd55a3675
--- /dev/null
+++ b/react/features/base/ui/components/BaseTheme.native.js
@@ -0,0 +1,13 @@
+// @flow
+
+import { font, colors, colorMap, spacing, shape, typography } from '../Tokens';
+import { createNativeTheme } from '../functions.native';
+
+export default createNativeTheme({
+ font,
+ colors,
+ colorMap,
+ spacing,
+ shape,
+ typography
+});
diff --git a/react/features/base/ui/components/JitsiThemeProvider.native.js b/react/features/base/ui/components/JitsiThemeProvider.native.js
new file mode 100644
index 000000000..e22550d22
--- /dev/null
+++ b/react/features/base/ui/components/JitsiThemeProvider.native.js
@@ -0,0 +1,24 @@
+// @flow
+
+import * as React from 'react';
+import { Provider as PaperProvider } from 'react-native-paper';
+
+import BaseTheme from './BaseTheme.native';
+
+type Props = {
+
+ /**
+ * The children of the component.
+ */
+ children: React.ChildrenArray
+}
+
+/**
+ * The theme provider for the mobile app.
+ *
+ * @param {Object} props - The props of the component.
+ * @returns {React.ReactNode}
+ */
+export default function JitsiThemePaperProvider(props: Props) {
+ return { props.children };
+}
diff --git a/react/features/base/ui/functions.native.js b/react/features/base/ui/functions.native.js
new file mode 100644
index 000000000..794f6af33
--- /dev/null
+++ b/react/features/base/ui/functions.native.js
@@ -0,0 +1,24 @@
+// @flow
+
+import { DefaultTheme } from 'react-native-paper';
+
+import { createColorTokens } from './utils';
+
+/**
+ * Creates a React Native Paper theme based on local UI tokens.
+ *
+ * @param {Object} arg - The ui tokens.
+ * @returns {Object}
+ */
+export function createNativeTheme({ font, colors, colorMap, shape, spacing, typography }: Object) {
+ return {
+ ...DefaultTheme,
+ palette: createColorTokens(colorMap, colors),
+ shape,
+ spacing,
+ typography: {
+ font,
+ ...typography
+ }
+ };
+}
diff --git a/react/features/base/ui/functions.js b/react/features/base/ui/functions.web.js
similarity index 54%
rename from react/features/base/ui/functions.js
rename to react/features/base/ui/functions.web.js
index 952f4bb38..713ad0faf 100644
--- a/react/features/base/ui/functions.js
+++ b/react/features/base/ui/functions.web.js
@@ -2,19 +2,7 @@
import { createMuiTheme } from '@material-ui/core/styles';
-/**
- * Creates the color tokens based on the color theme and the association map.
- * If a key is not fonund in the association map it defaults to the current value.
- *
- * @param {Object} colorMap - A map between the token name and the actual color value.
- * @param {Object} colors - An object containing all the theme colors.
- * @returns {Object}
- */
-function createColorTokens(colorMap: Object, colors: Object): Object {
- return Object.entries(colorMap)
- .reduce((result, [ token, value ]) =>
- Object.assign(result, { [token]: colors[value] || value }), {});
-}
+import { createColorTokens } from './utils';
/**
* Creates a MUI theme based on local UI tokens.
diff --git a/react/features/base/ui/utils.js b/react/features/base/ui/utils.js
new file mode 100644
index 000000000..717a0d317
--- /dev/null
+++ b/react/features/base/ui/utils.js
@@ -0,0 +1,15 @@
+// @flow
+
+/**
+ * Creates the color tokens based on the color theme and the association map.
+ * If a key is not found in the association map it defaults to the current value.
+ *
+ * @param {Object} colorMap - A map between the token name and the actual color value.
+ * @param {Object} colors - An object containing all the theme colors.
+ * @returns {Object}
+ */
+export function createColorTokens(colorMap: Object, colors: Object): Object {
+ return Object.entries(colorMap)
+ .reduce((result, [ token, value ]) =>
+ Object.assign(result, { [token]: colors[value] || value }), {});
+}
diff --git a/react/features/settings/components/native/FormSectionAccordion.js b/react/features/settings/components/native/FormSectionAccordion.js
new file mode 100644
index 000000000..0fc2d7e4a
--- /dev/null
+++ b/react/features/settings/components/native/FormSectionAccordion.js
@@ -0,0 +1,87 @@
+// @flow
+
+import React, { useState } from 'react';
+import { List } from 'react-native-paper';
+
+import { translate } from '../../../base/i18n';
+import { Icon, IconArrowDown, IconArrowUp } from '../../../base/icons';
+
+import styles from './styles';
+
+/**
+ * The type of the React {@code Component} props of {@link FormSectionAccordion}
+ */
+type Props = {
+
+ /**
+ * Is the section an accordion or not.
+ */
+ accordion: boolean,
+
+ /**
+ * The children to be displayed within this Link.
+ */
+ children: React$Node,
+
+ /**
+ * Whether the accordion is expandable.
+ */
+ expandable: boolean,
+
+ /**
+ * The i18n key of the text label of the section.
+ */
+ label: string,
+
+ /**
+ * An external style object passed to the component.
+ */
+ style: Object,
+
+ /**
+ * Invoked to obtain translated strings.
+ */
+ t: Function
+}
+
+/**
+ * Section accordion on settings form.
+ *
+ * @returns {React$Element}
+ */
+function FormSectionAccordion({ accordion, children, expandable, label, style, t }: Props) {
+ const [ expandSection, setExpandSection ] = useState(false);
+
+ /**
+ * Press handler for expanding form section.
+ *
+ * @returns {void}
+ */
+ function onPress() {
+ setExpandSection(!expandSection);
+ }
+
+ return (
+
+ accordion && }
+ style = { [
+ styles.formSectionTitle,
+ style
+ ] }
+ title = { t(label) }
+ titleStyle = {
+ expandSection || !expandable
+ ? styles.formSectionTitleActive : styles.formSectionTitleInActive }>
+ { children }
+
+ );
+}
+
+export default translate(FormSectionAccordion);
diff --git a/react/features/settings/components/native/FormSectionHeader.js b/react/features/settings/components/native/FormSectionHeader.js
deleted file mode 100644
index 7497ef871..000000000
--- a/react/features/settings/components/native/FormSectionHeader.js
+++ /dev/null
@@ -1,60 +0,0 @@
-// @flow
-
-import React, { Component } from 'react';
-import { Text, View } from 'react-native';
-
-import { translate } from '../../../base/i18n';
-
-import styles from './styles';
-
-/**
- * The type of the React {@code Component} props of {@link FormSectionHeader}
- */
-type Props = {
-
- /**
- * The i18n key of the text label of the section.
- */
- label: string,
-
- /**
- * An external style object passed to the component.
- */
- style: Object,
-
- /**
- * Invoked to obtain translated strings.
- */
- t: Function
-}
-
-/**
- * Implements a React {@code Component} which renders a section header on a
- * form.
- */
-class FormSectionHeader extends Component {
- /**
- * Implements React's {@link Component#render()}.
- *
- * @inheritdoc
- * @override
- * @returns {ReactElement}
- */
- render() {
- const { label, style, t } = this.props;
-
- return (
-
-
- { t(label) }
-
-
- );
- }
-}
-
-export default translate(FormSectionHeader);
diff --git a/react/features/settings/components/native/SettingsView.js b/react/features/settings/components/native/SettingsView.js
index 2a7a6d50a..89901a373 100644
--- a/react/features/settings/components/native/SettingsView.js
+++ b/react/features/settings/components/native/SettingsView.js
@@ -1,7 +1,8 @@
// @flow
import React from 'react';
-import { Alert, NativeModules, ScrollView, Switch, Text, TextInput } from 'react-native';
+import { Alert, NativeModules, ScrollView, Text } from 'react-native';
+import { Divider, Switch, TextInput, withTheme } from 'react-native-paper';
import { translate } from '../../../base/i18n';
import { JitsiModal } from '../../../base/modal';
@@ -15,7 +16,8 @@ import {
} from '../AbstractSettingsView';
import FormRow from './FormRow';
-import FormSectionHeader from './FormSectionHeader';
+import FormSectionAccordion from './FormSectionAccordion';
+import styles, { THUMB_COLOR } from './styles';
/**
* Application information module.
@@ -54,11 +56,6 @@ type State = {
*/
serverURL: string,
- /**
- * Whether to show advanced settings or not.
- */
- showAdvanced: boolean,
-
/**
* State variable for the start with audio muted switch.
*/
@@ -67,7 +64,7 @@ type State = {
/**
* State variable for the start with video muted switch.
*/
- startWithVideoMuted: boolean,
+ startWithVideoMuted: boolean
}
/**
@@ -81,7 +78,12 @@ type Props = AbstractProps & {
*
* @protected
*/
- _serverURLChangeEnabled: boolean
+ _serverURLChangeEnabled: boolean,
+
+ /**
+ * Theme used for styles.
+ */
+ theme: Object
}
/**
@@ -117,7 +119,6 @@ class SettingsView extends AbstractSettingsView {
displayName,
email,
serverURL,
- showAdvanced: false,
startWithAudioMuted,
startWithVideoMuted
};
@@ -128,7 +129,6 @@ class SettingsView extends AbstractSettingsView {
this._onDisableCallIntegration = this._onDisableCallIntegration.bind(this);
this._onDisableCrashReporting = this._onDisableCrashReporting.bind(this);
this._onDisableP2P = this._onDisableP2P.bind(this);
- this._onShowAdvanced = this._onShowAdvanced.bind(this);
this._setURLFieldReference = this._setURLFieldReference.bind(this);
this._showURLAlert = this._showURLAlert.bind(this);
}
@@ -140,7 +140,17 @@ class SettingsView extends AbstractSettingsView {
* @returns {ReactElement}
*/
render() {
- const { displayName, email, serverURL, startWithAudioMuted, startWithVideoMuted } = this.state;
+ const {
+ disableCallIntegration,
+ disableCrashReporting,
+ disableP2P,
+ displayName,
+ email,
+ serverURL,
+ startWithAudioMuted,
+ startWithVideoMuted
+ } = this.state;
+ const { palette } = this.props.theme;
return (
{
modalId = { SETTINGS_VIEW_ID }
onClose = { this._onClose }>
-
-
+
-
-
+
-
-
-
+
+
-
-
-
-
-
-
-
-
-
-
- {`${AppInfo.version} build ${AppInfo.buildNumber}`}
-
-
-
- {this._renderAdvancedSettings()}
+
+
+
+
+
+
+
+
+
+
+
+
+ {`${AppInfo.version} build ${AppInfo.buildNumber}`}
+
+
+
+
+
+
+
+
+
+
+
+
+ {AppInfo.GOOGLE_SERVICES_ENABLED && (
+
+
+
+ )}
+
);
@@ -337,22 +406,9 @@ class SettingsView extends AbstractSettingsView {
* @returns {boolean} - True if the modal can be closed.
*/
_onClose() {
- this.setState({ showAdvanced: false });
-
return this._processServerURL(true /* hideOnSuccess */);
}
- _onShowAdvanced: () => void;
-
- /**
- * Handles the advanced settings button.
- *
- * @returns {void}
- */
- _onShowAdvanced() {
- this.setState({ showAdvanced: !this.state.showAdvanced });
- }
-
/**
* Callback to update the start with audio muted value.
*
@@ -403,56 +459,6 @@ class SettingsView extends AbstractSettingsView {
return hideOnSuccess;
}
- /**
- * Renders the advanced settings options.
- *
- * @private
- * @returns {React$Element}
- */
- _renderAdvancedSettings() {
- const { disableCallIntegration, disableP2P, disableCrashReporting, showAdvanced } = this.state;
-
- if (!showAdvanced) {
- return (
-
-
-
- );
- }
-
- return (
- <>
-
-
-
-
-
-
- {AppInfo.GOOGLE_SERVICES_ENABLED && (
-
-
-
- )}
- >
- );
- }
-
_setURLFieldReference: (React$ElementRef<*> | null) => void;
/**
@@ -538,4 +544,4 @@ function _mapStateToProps(state) {
};
}
-export default translate(connect(_mapStateToProps)(SettingsView));
+export default translate(connect(_mapStateToProps)(withTheme(SettingsView)));
diff --git a/react/features/settings/components/native/styles.js b/react/features/settings/components/native/styles.js
index 9706306e9..3086aa0ef 100644
--- a/react/features/settings/components/native/styles.js
+++ b/react/features/settings/components/native/styles.js
@@ -1,9 +1,9 @@
-import { ColorPalette } from '../../../base/styles';
-
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
export const ANDROID_UNDERLINE_COLOR = 'transparent';
-export const PLACEHOLDER_COLOR = ColorPalette.lightGrey;
+export const PLACEHOLDER_COLOR = BaseTheme.palette.action02Focus;
+export const THUMB_COLOR = BaseTheme.palette.field02;
-const TEXT_SIZE = 17;
+const TEXT_SIZE = 14;
/**
* The styles of the native components of the feature {@code settings}.
@@ -15,7 +15,7 @@ export default {
fieldContainer: {
alignItems: 'center',
flexDirection: 'row',
- minHeight: 65,
+ minHeight: 56,
paddingHorizontal: 8
},
@@ -24,8 +24,7 @@ export default {
*/
fieldContainerColumn: {
alignItems: 'flex-start',
- flexDirection: 'column',
- paddingVertical: 3
+ flexDirection: 'column'
},
/**
@@ -34,7 +33,7 @@ export default {
fieldLabelContainer: {
alignItems: 'center',
flexDirection: 'row',
- marginRight: 5
+ paddingLeft: 8
},
/**
@@ -67,29 +66,61 @@ export default {
alignItems: 'center',
flex: 1,
flexDirection: 'row',
- justifyContent: 'flex-end'
+ justifyContent: 'flex-end',
+ paddingRight: 8
},
/**
* Style for the form section separator titles.
*/
formSectionTitle: {
- backgroundColor: 'rgba(0, 0, 0, 0.1)',
- padding: 5
+ backgroundColor: BaseTheme.palette.section01,
+ paddingBottom: 0,
+ paddingTop: 0
+ },
+
+ formSectionTitleActive: {
+ color: BaseTheme.palette.section01Active
+ },
+
+ formSectionTitleInActive: {
+ color: BaseTheme.palette.section01Inactive
+ },
+
+ sectionClose: {
+ color: BaseTheme.palette.section01Inactive,
+ fontSize: 14
+ },
+
+ sectionOpen: {
+ color: BaseTheme.palette.section01Active,
+ fontSize: 14
},
/**
* Global {@code Text} color for the components.
*/
text: {
- color: ColorPalette.black
+ color: BaseTheme.palette.field01
+ },
+
+ /**
+ * Text input container style.
+ */
+ textInputContainer: {
+ flex: 1,
+ height: 40,
+ paddingBottom: 8,
+ paddingTop: 2,
+ paddingLeft: 16,
+ paddingRight: 16
},
/**
* Standard text input field style.
*/
textInputField: {
- color: ColorPalette.black,
+ color: BaseTheme.palette.field01,
flex: 1,
fontSize: TEXT_SIZE,
textAlign: 'right'
diff --git a/webpack.config.js b/webpack.config.js
index 2bfbf020f..46a421c77 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -77,6 +77,9 @@ const config = {
],
loader: 'babel-loader',
options: {
+ // Avoid loading babel.config.js, since we only use it for React Native.
+ configFile: false,
+
// XXX The require.resolve bellow solves failures to locate the
// presets when lib-jitsi-meet, for example, is npm linked in
// jitsi-meet.