feat(rn,ui) introduce react-native-paper

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' ]
+};

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==",
-      "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",
+      "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.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==",
-          "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",
+          "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.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"
           }
         },
+        "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": {
+            "safe-buffer": "~5.1.1"
+          }
+        },
         "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=="
+        },
         "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==",
+          "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.0"
+            "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/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/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-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==",
-          "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",
+          "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.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"

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",

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 (
-            <DimensionsDetector
-                onDimensionsChanged = { this._onDimensionsChanged }>
-                { super._createMainElement(component, props) }
-            </DimensionsDetector>
+            <JitsiThemePaperProvider>
+                <DimensionsDetector
+                    onDimensionsChanged = { this._onDimensionsChanged }>
+                    { super._createMainElement(component, props) }
+                </DimensionsDetector>
+            </JitsiThemePaperProvider>
         );
     }
 

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

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
+});

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<any>
+}
+
+/**
+ * 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 <PaperProvider theme = { BaseTheme }>{ props.children }</PaperProvider>;
+}

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
+        }
+    };
+}

react/features/base/ui/functions.js → 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.

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 }), {});
+}

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<any>}
+ */
+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 (
+        <List.Accordion
+            expanded = { expandSection || !expandable }
+            onPress = { onPress }
+            /* eslint-disable-next-line react/jsx-no-bind */
+            right = { props =>
+                accordion && <Icon
+                    { ...props }
+                    src = { expandSection ? IconArrowUp : IconArrowDown }
+                    style = { expandSection ? styles.sectionOpen : styles.sectionClose } /> }
+            style = { [
+                styles.formSectionTitle,
+                style
+            ] }
+            title = { t(label) }
+            titleStyle = {
+                expandSection || !expandable
+                    ? styles.formSectionTitleActive : styles.formSectionTitleInActive }>
+            { children }
+        </List.Accordion>
+    );
+}
+
+export default translate(FormSectionAccordion);

react/features/settings/components/native/FormSectionHeader.js

@@ -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<Props> {
-    /**
-     * Implements React's {@link Component#render()}.
-     *
-     * @inheritdoc
-     * @override
-     * @returns {ReactElement}
-     */
-    render() {
-        const { label, style, t } = this.props;
-
-        return (
-            <View
-                style = { [
-                    styles.formSectionTitle,
-                    style
-                ] } >
-                <Text>
-                    { t(label) }
-                </Text>
-            </View>
-        );
-    }
-}
-
-export default translate(FormSectionHeader);

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<Props, State> {
             displayName,
             email,
             serverURL,
-            showAdvanced: false,
             startWithAudioMuted,
             startWithVideoMuted
         };
@@ -128,7 +129,6 @@ class SettingsView extends AbstractSettingsView<Props, State> {
         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<Props, State> {
      * @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 (
             <JitsiModal
@@ -150,71 +160,130 @@ class SettingsView extends AbstractSettingsView<Props, State> {
                 modalId = { SETTINGS_VIEW_ID }
                 onClose = { this._onClose }>
                 <ScrollView>
-                    <FormSectionHeader
-                        label = 'settingsView.profileSection' />
-                    <FormRow
-                        fieldSeparator = { true }
-                        label = 'settingsView.displayName'
-                        layout = 'column'>
+                    <FormSectionAccordion
+                        accordion = { false }
+                        expandable = { false }
+                        label = 'settingsView.profileSection'>
                         <TextInput
                             autoCorrect = { false }
+                            label = { this.props.t('settingsView.displayName') }
+                            mode = 'outlined'
                             onChangeText = { this._onChangeDisplayName }
                             placeholder = 'John Doe'
+                            style = { styles.textInputContainer }
                             textContentType = { 'name' } // iOS only
+                            theme = {{
+                                colors: {
+                                    primary: palette.action01Active,
+                                    underlineColor: 'transparent'
+                                }
+                            }}
                             value = { displayName } />
-                    </FormRow>
-                    <FormRow
-                        label = 'settingsView.email'
-                        layout = 'column'>
+                        <Divider style = { styles.fieldSeparator } />
                         <TextInput
                             autoCapitalize = 'none'
                             autoCorrect = { false }
                             keyboardType = { 'email-address' }
+                            label = { this.props.t('settingsView.email') }
+                            mode = 'outlined'
                             onChangeText = { this._onChangeEmail }
                             placeholder = 'email@example.com'
+                            style = { styles.textInputContainer }
                             textContentType = { 'emailAddress' } // iOS only
+                            theme = {{
+                                colors: {
+                                    primary: palette.action01Active,
+                                    underlineColor: 'transparent'
+                                }
+                            }}
                             value = { email } />
-                    </FormRow>
-                    <FormSectionHeader
-                        label = 'settingsView.conferenceSection' />
-                    <FormRow
-                        fieldSeparator = { true }
-                        label = 'settingsView.serverURL'
-                        layout = 'column'>
+                    </FormSectionAccordion>
+                    <FormSectionAccordion
+                        accordion = { false }
+                        expandable = { false }
+                        label = 'settingsView.conferenceSection'>
                         <TextInput
                             autoCapitalize = 'none'
                             autoCorrect = { false }
                             editable = { this.props._serverURLChangeEnabled }
                             keyboardType = { 'url' }
+                            label = { this.props.t('settingsView.serverURL') }
+                            mode = 'outlined'
                             onBlur = { this._onBlurServerURL }
                             onChangeText = { this._onChangeServerURL }
                             placeholder = { this.props._serverURL }
+                            style = { styles.textInputContainer }
                             textContentType = { 'URL' } // iOS only
+                            theme = {{
+                                colors: {
+                                    primary: palette.action01Active,
+                                    underlineColor: 'transparent'
+                                }
+                            }}
                             value = { serverURL } />
-                    </FormRow>
-                    <FormRow
-                        fieldSeparator = { true }
-                        label = 'settingsView.startWithAudioMuted'>
-                        <Switch
-                            onValueChange = { this._onStartAudioMutedChange }
-                            value = { startWithAudioMuted } />
-                    </FormRow>
-                    <FormRow label = 'settingsView.startWithVideoMuted'>
-                        <Switch
-                            onValueChange = { this._onStartVideoMutedChange }
-                            value = { startWithVideoMuted } />
-                    </FormRow>
-                    <FormSectionHeader
-                        label = 'settingsView.buildInfoSection' />
-                    <FormRow
-                        label = 'settingsView.version'>
-                        <Text>
-                            {`${AppInfo.version} build ${AppInfo.buildNumber}`}
-                        </Text>
-                    </FormRow>
-                    <FormSectionHeader
-                        label = 'settingsView.advanced' />
-                    {this._renderAdvancedSettings()}
+                        <Divider style = { styles.fieldSeparator } />
+                        <FormRow
+                            label = 'settingsView.startWithAudioMuted'>
+                            <Switch
+                                onValueChange = { this._onStartAudioMutedChange }
+                                thumbColor = { THUMB_COLOR }
+                                trackColor = {{ true: palette.action01Active }}
+                                value = { startWithAudioMuted } />
+                        </FormRow>
+                        <Divider style = { styles.fieldSeparator } />
+                        <FormRow label = 'settingsView.startWithVideoMuted'>
+                            <Switch
+                                onValueChange = { this._onStartVideoMutedChange }
+                                thumbColor = { THUMB_COLOR }
+                                trackColor = {{ true: palette.action01Active }}
+                                value = { startWithVideoMuted } />
+                        </FormRow>
+                    </FormSectionAccordion>
+                    <FormSectionAccordion
+                        accordion = { false }
+                        expandable = { false }
+                        label = 'settingsView.buildInfoSection'>
+                        <FormRow
+                            label = 'settingsView.version'>
+                            <Text>
+                                {`${AppInfo.version} build ${AppInfo.buildNumber}`}
+                            </Text>
+                        </FormRow>
+                    </FormSectionAccordion>
+                    <FormSectionAccordion
+                        accordion = { true }
+                        expandable = { true }
+                        label = 'settingsView.advanced'>
+                        <FormRow
+                            label = 'settingsView.disableCallIntegration'>
+                            <Switch
+                                onValueChange = { this._onDisableCallIntegration }
+                                thumbColor = { THUMB_COLOR }
+                                trackColor = {{ true: palette.action01Active }}
+                                value = { disableCallIntegration } />
+                        </FormRow>
+                        <Divider style = { styles.fieldSeparator } />
+                        <FormRow
+                            label = 'settingsView.disableP2P'>
+                            <Switch
+                                onValueChange = { this._onDisableP2P }
+                                thumbColor = { THUMB_COLOR }
+                                trackColor = {{ true: palette.action01Active }}
+                                value = { disableP2P } />
+                        </FormRow>
+                        <Divider style = { styles.fieldSeparator } />
+                        {AppInfo.GOOGLE_SERVICES_ENABLED && (
+                            <FormRow
+                                fieldSeparator = { true }
+                                label = 'settingsView.disableCrashReporting'>
+                                <Switch
+                                    onValueChange = { this._onDisableCrashReporting }
+                                    thumbColor = { THUMB_COLOR }
+                                    trackColor = {{ true: palette.action01Active }}
+                                    value = { disableCrashReporting } />
+                            </FormRow>
+                        )}
+                    </FormSectionAccordion>
                 </ScrollView>
             </JitsiModal>
         );
@@ -337,22 +406,9 @@ class SettingsView extends AbstractSettingsView<Props, State> {
      * @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<Props, State> {
         return hideOnSuccess;
     }
 
-    /**
-     * Renders the advanced settings options.
-     *
-     * @private
-     * @returns {React$Element}
-     */
-    _renderAdvancedSettings() {
-        const { disableCallIntegration, disableP2P, disableCrashReporting, showAdvanced } = this.state;
-
-        if (!showAdvanced) {
-            return (
-                <FormRow
-                    fieldSeparator = { true }
-                    label = 'settingsView.showAdvanced'>
-                    <Switch
-                        onValueChange = { this._onShowAdvanced }
-                        value = { showAdvanced } />
-                </FormRow>
-            );
-        }
-
-        return (
-            <>
-                <FormRow
-                    fieldSeparator = { true }
-                    label = 'settingsView.disableCallIntegration'>
-                    <Switch
-                        onValueChange = { this._onDisableCallIntegration }
-                        value = { disableCallIntegration } />
-                </FormRow>
-                <FormRow
-                    fieldSeparator = { true }
-                    label = 'settingsView.disableP2P'>
-                    <Switch
-                        onValueChange = { this._onDisableP2P }
-                        value = { disableP2P } />
-                </FormRow>
-                {AppInfo.GOOGLE_SERVICES_ENABLED && (
-                    <FormRow
-                        fieldSeparator = { true }
-                        label = 'settingsView.disableCrashReporting'>
-                        <Switch
-                            onValueChange = { this._onDisableCrashReporting }
-                            value = { disableCrashReporting } />
-                    </FormRow>
-                )}
-            </>
-        );
-    }
-
     _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)));

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'

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.