Commit 61543a81 authored by Kendall Roth's avatar Kendall Roth
Browse files

Add sample About screen

parent 4fe4db80
......@@ -25,8 +25,7 @@ module.exports = function (api) {
env: {
production: {
// Remove console statements from app during release builds
// plugins: ["react-native-paper/babel", "transform-remove-console"],
plugins: ["transform-remove-console"],
plugins: ["react-native-paper/babel", "transform-remove-console"],
},
},
};
......
......@@ -10,13 +10,16 @@
"@react-native-masked-view/masked-view": "0.2.4",
"@react-navigation/native": "^6.0.2",
"@react-navigation/stack": "^6.0.7",
"dayjs": "^1.10.6",
"expo": "~42.0.1",
"expo-linking": "~2.3.1",
"expo-splash-screen": "~0.11.2",
"expo-status-bar": "~1.0.4",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
"react-native-gesture-handler": "~1.10.2",
"react-native-paper": "^4.9.2",
"react-native-safe-area-context": "3.2.0",
"react-native-screens": "~3.4.0",
"react-native-web": "~0.13.12"
......@@ -6303,6 +6306,17 @@
"resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-9.2.0.tgz",
"integrity": "sha512-R5jAx5j3MqrhKFB307FBpaHtYSYeVIFX/rVforBF5inKonYjXRWVhjGoBjolF4geAryNamC3NKhMfxyaaB0W6Q=="
},
"node_modules/expo-linking": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/expo-linking/-/expo-linking-2.3.1.tgz",
"integrity": "sha512-c2O23OdWOHaIRAKhveZ/PhdNq8DUx3995GQKtnz0WK7fuAmEYM8GU/F6KIUXV0QGEkRKB7drDb8Rk2JYi39Gag==",
"dependencies": {
"expo-constants": "~11.0.1",
"invariant": "^2.2.4",
"qs": "^6.5.0",
"url-parse": "^1.4.4"
}
},
"node_modules/expo-modules-autolinking": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-0.0.3.tgz",
......@@ -9755,7 +9769,6 @@
"version": "1.11.0",
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.11.0.tgz",
"integrity": "sha512-jp7ikS6Sd3GxQfZJPyH3cjcbJF6GZPClgdV+EFygjFLQ5FmW/dRUnTd9PQ9k0JhoNDabWFbpF1yCdSWCC6gexg==",
"dev": true,
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
......@@ -10467,6 +10480,20 @@
"node": ">=6"
}
},
"node_modules/qs": {
"version": "6.10.1",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.10.1.tgz",
"integrity": "sha512-M528Hph6wsSVOBiYUnGf+K/7w0hNshs/duGsNXPUCLH5XAqjEtiPGwNONLV0tBH8NoGb0mvD5JubnUTrujKDTg==",
"dependencies": {
"side-channel": "^1.0.4"
},
"engines": {
"node": ">=0.6"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/query-string": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/query-string/-/query-string-7.0.1.tgz",
......@@ -10627,6 +10654,41 @@
"ua-parser-js": "^0.7.18"
}
},
"node_modules/react-native-paper": {
"version": "4.9.2",
"resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-4.9.2.tgz",
"integrity": "sha512-J7FRsd0YblQawtuj9I46F//apZHadsCKk6jWpc6njFTYdgUeCdkR8KgEto7cp2WxbcGNELx7KGwPQ4zAgX746A==",
"dependencies": {
"@callstack/react-theme-provider": "^3.0.6",
"color": "^3.1.2",
"react-native-iphone-x-helper": "^1.3.1"
},
"peerDependencies": {
"react": "*",
"react-native": "*",
"react-native-vector-icons": "*"
}
},
"node_modules/react-native-paper/node_modules/@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==",
"dependencies": {
"deepmerge": "^3.2.0",
"hoist-non-react-statics": "^3.3.0"
},
"peerDependencies": {
"react": "^16.3.0"
}
},
"node_modules/react-native-paper/node_modules/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==",
"peerDependencies": {
"react-native": ">=0.42.0"
}
},
"node_modules/react-native-safe-area-context": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.2.0.tgz",
......@@ -10648,6 +10710,135 @@
"react-native": "*"
}
},
"node_modules/react-native-vector-icons": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-8.1.0.tgz",
"integrity": "sha512-sHIdBB6Y0dHaot2fMXgy5J/hhCn5YuyN7SKDNFgPzL8KA1oF2/v7mgYMavnK7LIIs2dJoGnDANKf61dsU+TZlg==",
"peer": true,
"dependencies": {
"lodash.frompairs": "^4.0.1",
"lodash.isequal": "^4.5.0",
"lodash.isstring": "^4.0.1",
"lodash.omit": "^4.5.0",
"lodash.pick": "^4.4.0",
"lodash.template": "^4.5.0",
"prop-types": "^15.7.2",
"yargs": "^16.1.1"
},
"bin": {
"fa5-upgrade": "bin/fa5-upgrade.sh",
"generate-icon": "bin/generate-icon.js"
}
},
"node_modules/react-native-vector-icons/node_modules/ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"peer": true,
"dependencies": {
"color-convert": "^2.0.1"
},
"engines": {
"node": ">=8"
},
"funding": {
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
"node_modules/react-native-vector-icons/node_modules/cliui": {
"version": "7.0.4",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
"integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
"peer": true,
"dependencies": {
"string-width": "^4.2.0",
"strip-ansi": "^6.0.0",
"wrap-ansi": "^7.0.0"
}
},
"node_modules/react-native-vector-icons/node_modules/color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"peer": true,
"dependencies": {
"color-name": "~1.1.4"
},
"engines": {
"node": ">=7.0.0"
}
},
"node_modules/react-native-vector-icons/node_modules/color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"peer": true
},
"node_modules/react-native-vector-icons/node_modules/strip-ansi": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
"integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
"peer": true,
"dependencies": {
"ansi-regex": "^5.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/react-native-vector-icons/node_modules/wrap-ansi": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
"peer": true,
"dependencies": {
"ansi-styles": "^4.0.0",
"string-width": "^4.1.0",
"strip-ansi": "^6.0.0"
},
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
}
},
"node_modules/react-native-vector-icons/node_modules/y18n": {
"version": "5.0.8",
"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
"peer": true,
"engines": {
"node": ">=10"
}
},
"node_modules/react-native-vector-icons/node_modules/yargs": {
"version": "16.2.0",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
"integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
"peer": true,
"dependencies": {
"cliui": "^7.0.2",
"escalade": "^3.1.1",
"get-caller-file": "^2.0.5",
"require-directory": "^2.1.1",
"string-width": "^4.2.0",
"y18n": "^5.0.5",
"yargs-parser": "^20.2.2"
},
"engines": {
"node": ">=10"
}
},
"node_modules/react-native-vector-icons/node_modules/yargs-parser": {
"version": "20.2.9",
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
"integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
"peer": true,
"engines": {
"node": ">=10"
}
},
"node_modules/react-native-web": {
"version": "0.13.18",
"resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.13.18.tgz",
......@@ -11734,7 +11925,6 @@
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
"integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
"dev": true,
"dependencies": {
"call-bind": "^1.0.0",
"get-intrinsic": "^1.0.2",
......@@ -18086,6 +18276,17 @@
"resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-9.2.0.tgz",
"integrity": "sha512-R5jAx5j3MqrhKFB307FBpaHtYSYeVIFX/rVforBF5inKonYjXRWVhjGoBjolF4geAryNamC3NKhMfxyaaB0W6Q=="
},
"expo-linking": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/expo-linking/-/expo-linking-2.3.1.tgz",
"integrity": "sha512-c2O23OdWOHaIRAKhveZ/PhdNq8DUx3995GQKtnz0WK7fuAmEYM8GU/F6KIUXV0QGEkRKB7drDb8Rk2JYi39Gag==",
"requires": {
"expo-constants": "~11.0.1",
"invariant": "^2.2.4",
"qs": "^6.5.0",
"url-parse": "^1.4.4"
}
},
"expo-modules-autolinking": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-0.0.3.tgz",
......@@ -20868,8 +21069,7 @@
"object-inspect": {
"version": "1.11.0",
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.11.0.tgz",
"integrity": "sha512-jp7ikS6Sd3GxQfZJPyH3cjcbJF6GZPClgdV+EFygjFLQ5FmW/dRUnTd9PQ9k0JhoNDabWFbpF1yCdSWCC6gexg==",
"dev": true
"integrity": "sha512-jp7ikS6Sd3GxQfZJPyH3cjcbJF6GZPClgdV+EFygjFLQ5FmW/dRUnTd9PQ9k0JhoNDabWFbpF1yCdSWCC6gexg=="
},
"object-keys": {
"version": "1.1.1",
......@@ -21388,6 +21588,14 @@
"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
"dev": true
},
"qs": {
"version": "6.10.1",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.10.1.tgz",
"integrity": "sha512-M528Hph6wsSVOBiYUnGf+K/7w0hNshs/duGsNXPUCLH5XAqjEtiPGwNONLV0tBH8NoGb0mvD5JubnUTrujKDTg==",
"requires": {
"side-channel": "^1.0.4"
}
},
"query-string": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/query-string/-/query-string-7.0.1.tgz",
......@@ -21793,6 +22001,33 @@
}
}
},
"react-native-paper": {
"version": "4.9.2",
"resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-4.9.2.tgz",
"integrity": "sha512-J7FRsd0YblQawtuj9I46F//apZHadsCKk6jWpc6njFTYdgUeCdkR8KgEto7cp2WxbcGNELx7KGwPQ4zAgX746A==",
"requires": {
"@callstack/react-theme-provider": "^3.0.6",
"color": "^3.1.2",
"react-native-iphone-x-helper": "^1.3.1"
},
"dependencies": {
"@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"
}
},
"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==",
"requires": {}
}
}
},
"react-native-safe-area-context": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.2.0.tgz",
......@@ -21807,6 +22042,106 @@
"warn-once": "^0.1.0"
}
},
"react-native-vector-icons": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-8.1.0.tgz",
"integrity": "sha512-sHIdBB6Y0dHaot2fMXgy5J/hhCn5YuyN7SKDNFgPzL8KA1oF2/v7mgYMavnK7LIIs2dJoGnDANKf61dsU+TZlg==",
"peer": true,
"requires": {
"lodash.frompairs": "^4.0.1",
"lodash.isequal": "^4.5.0",
"lodash.isstring": "^4.0.1",
"lodash.omit": "^4.5.0",
"lodash.pick": "^4.4.0",
"lodash.template": "^4.5.0",
"prop-types": "^15.7.2",
"yargs": "^16.1.1"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"peer": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"cliui": {
"version": "7.0.4",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
"integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
"peer": true,
"requires": {
"string-width": "^4.2.0",
"strip-ansi": "^6.0.0",
"wrap-ansi": "^7.0.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"peer": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"peer": true
},
"strip-ansi": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
"integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
"peer": true,
"requires": {
"ansi-regex": "^5.0.0"
}
},
"wrap-ansi": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
"peer": true,
"requires": {
"ansi-styles": "^4.0.0",
"string-width": "^4.1.0",
"strip-ansi": "^6.0.0"
}
},
"y18n": {
"version": "5.0.8",
"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
"peer": true
},
"yargs": {
"version": "16.2.0",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
"integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
"peer": true,
"requires": {
"cliui": "^7.0.2",
"escalade": "^3.1.1",
"get-caller-file": "^2.0.5",
"require-directory": "^2.1.1",
"string-width": "^4.2.0",
"y18n": "^5.0.5",
"yargs-parser": "^20.2.2"
}
},
"yargs-parser": {
"version": "20.2.9",
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
"integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
"peer": true
}
}
},
"react-native-web": {
"version": "0.13.18",
"resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.13.18.tgz",
......@@ -22396,7 +22731,6 @@
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
"integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
"dev": true,
"requires": {
"call-bind": "^1.0.0",
"get-intrinsic": "^1.0.2",
......
......@@ -3,12 +3,14 @@ import { StatusBar } from "expo-status-bar";
import * as SplashScreen from "expo-splash-screen";
import React, { ReactElement, useCallback, useEffect, useState } from "react";
import { StyleSheet, View } from "react-native";
import { Provider as PaperProvider } from "react-native-paper";
import "react-native-gesture-handler";
// Components
import Router from "./Router";
// Utilities
import theme, { colors } from "@styles/theme";
const App = (): ReactElement | null => {
const [isAppReady, setIsAppReady] = useState(false);
......@@ -26,11 +28,10 @@ const App = (): ReactElement | null => {
const onLayoutRootView = useCallback(async () => {
if (isAppReady) {
// This tells the splash screen to hide immediately! If we call this after
// `setAppIsReady`, then we may see a blank screen while the app is
// loading its initial state and rendering its first pixels. So instead,
// we hide the splash screen once we know the root view has already
// performed layout.
// This tells the splash screen to hide immediately! If we call this after `setAppIsReady`,
// then we may see a blank screen while the app is loading its initial state and
// rendering its first pixels. So instead, we hide the splash screen once we know the
// root view has already performed layout.
await SplashScreen.hideAsync();
}
}, [isAppReady]);
......@@ -38,16 +39,19 @@ const App = (): ReactElement | null => {
if (!isAppReady) return null;
return (
<View style={styles.app} onLayout={onLayoutRootView}>
<StatusBar style="light" />
<Router />
</View>
<PaperProvider theme={theme}>
<View style={styles.app} onLayout={onLayoutRootView}>
<StatusBar style="auto" />
<Router />
</View>
</PaperProvider>
);
};
const styles = StyleSheet.create({
app: {
flex: 1,
backgroundColor: colors.background,
},
});
......
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { DefaultTheme, NavigationContainer } from "@react-navigation/native";
// import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createStackNavigator } from "@react-navigation/stack";
import {
createStackNavigator,
TransitionPresets,
} from "@react-navigation/stack";
// Components
import MainScreen from "@screens/MainScreen";
......@@ -13,16 +16,30 @@ import { colors } from "@styles/theme";
const Stack = createStackNavigator();
// const Stack = createNativeStackNavigator();
const navigationTheme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
background: colors.background,
text: colors.primary,
},
};
const Router = (): React.ReactElement => {
return (
<NavigationContainer>
<NavigationContainer theme={navigationTheme}>
<Stack.Navigator
initialRouteName="Main"
screenOptions={{
// NOTE: Default transition can cause flickering if header color is different than page!
...TransitionPresets.DefaultTransition,
headerStyle: {
backgroundColor: colors.primary,
backgroundColor: colors.background,
elevation: 0,
},
headerTitleStyle: {
fontWeight: "bold",
},
headerTintColor: colors.white,
}}
>
<Stack.Screen name="Main" component={MainScreen} />
......
import React, { ReactElement, useCallback, useLayoutEffect } from "react";
import { Button, StyleSheet, Text, View } from "react-native";
import React, { ReactElement, useLayoutEffect } from "react";
import { Image, StyleSheet, Text, View } from "react-native";
import { useNavigation } from "@react-navigation/native";
// Utilities
import { colors } from "@theme";
import { IconButton } from "react-native-paper";
const MainScreen = (): ReactElement | null => {
const navigation = useNavigation();
/*useLayoutEffect(() => {
useLayoutEffect(() => {
const onAboutPress = () => navigation.navigate("About");
navigation.setOptions({
headerRight: () => <Button title="About" onPress={onAboutPress} />,
headerRight: () => (
<IconButton
color={colors.primary}
icon="information"
onPress={onAboutPress}
/>
),
});
}, [navigation, onAboutPress]);*/
/** Go to "About" page */
const onAboutPress = useCallback(() => {
navigation.navigate("About");
}, [navigation]);
return (
<View style={styles.page}>
<Text>Welcome!</Text>
<Button title="About" onPress={onAboutPress} />
<Image source={require("@assets/icon.png")} style={styles.pageLogo} />
<Text style={styles.pageTitle}>PayMe</Text>
</View>
);
};
......@@ -32,7 +36,16 @@ const styles = StyleSheet.create({
flex: 1,
alignItems: "center",
justifyContent: "center",
backgroundColor: colors.background,
},
pageLogo: {
height: 64,
width: 64,
borderRadius: 16,
},
pageTitle: {
marginTop: 16,
fontSize: 24,
color: colors.primary,
},
});
......
import dayjs from "dayjs";
import { MaterialCommunityIcons as Icon } from "@expo/vector-icons";
import * as Linking from "expo-linking";
import React, { ReactElement } from "react";
import { StyleSheet, Text, View } from "react-native";
import { StyleSheet, View } from "react-native";
import { Chip, Text } from "react-native-paper";
// Utilities