feat: setup React Native Paper
Ref: https://callstack.github.io/react-native-paper/
This commit is contained in:
parent
c4895fe17c
commit
06a99b6b23
@ -18,17 +18,153 @@ exports[`<HomePage /> renders correctly 1`] = `
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<Text
|
<View
|
||||||
|
collapsable={false}
|
||||||
style={
|
style={
|
||||||
{
|
{
|
||||||
"color": "#006CFF",
|
"backgroundColor": "rgba(103, 80, 164, 1)",
|
||||||
"fontFamily": "Canterbury",
|
"borderRadius": 20,
|
||||||
"fontSize": 36,
|
"shadowColor": "#000",
|
||||||
"marginVertical": 20,
|
"shadowOffset": {
|
||||||
|
"height": 0,
|
||||||
|
"width": 0,
|
||||||
|
},
|
||||||
|
"shadowOpacity": 0,
|
||||||
|
"shadowRadius": 0,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
testID="button-container-outer-layer"
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
collapsable={false}
|
||||||
|
style={
|
||||||
|
{
|
||||||
|
"backgroundColor": "rgba(103, 80, 164, 1)",
|
||||||
|
"borderColor": "transparent",
|
||||||
|
"borderRadius": 20,
|
||||||
|
"borderStyle": "solid",
|
||||||
|
"borderWidth": 0,
|
||||||
|
"flex": undefined,
|
||||||
|
"minWidth": 64,
|
||||||
|
"shadowColor": "#000",
|
||||||
|
"shadowOffset": {
|
||||||
|
"height": 0,
|
||||||
|
"width": 0,
|
||||||
|
},
|
||||||
|
"shadowOpacity": 0,
|
||||||
|
"shadowRadius": 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
testID="button-container"
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
accessibilityRole="button"
|
||||||
|
accessibilityState={
|
||||||
|
{
|
||||||
|
"busy": undefined,
|
||||||
|
"checked": undefined,
|
||||||
|
"disabled": false,
|
||||||
|
"expanded": undefined,
|
||||||
|
"selected": undefined,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
accessibilityValue={
|
||||||
|
{
|
||||||
|
"max": undefined,
|
||||||
|
"min": undefined,
|
||||||
|
"now": undefined,
|
||||||
|
"text": undefined,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
accessible={true}
|
||||||
|
collapsable={false}
|
||||||
|
focusable={true}
|
||||||
|
onBlur={[Function]}
|
||||||
|
onClick={[Function]}
|
||||||
|
onFocus={[Function]}
|
||||||
|
onResponderGrant={[Function]}
|
||||||
|
onResponderMove={[Function]}
|
||||||
|
onResponderRelease={[Function]}
|
||||||
|
onResponderTerminate={[Function]}
|
||||||
|
onResponderTerminationRequest={[Function]}
|
||||||
|
onStartShouldSetResponder={[Function]}
|
||||||
|
style={
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"overflow": "hidden",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"borderRadius": 20,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
testID="button"
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"alignItems": "center",
|
||||||
|
"flexDirection": "row",
|
||||||
|
"justifyContent": "center",
|
||||||
|
},
|
||||||
|
undefined,
|
||||||
|
]
|
||||||
|
}
|
||||||
>
|
>
|
||||||
P61 Project
|
<Text
|
||||||
|
numberOfLines={1}
|
||||||
|
selectable={false}
|
||||||
|
style={
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"textAlign": "left",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"color": "rgba(28, 27, 31, 1)",
|
||||||
|
"writingDirection": "ltr",
|
||||||
|
},
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"fontFamily": "System",
|
||||||
|
"fontSize": 14,
|
||||||
|
"fontWeight": "500",
|
||||||
|
"letterSpacing": 0.1,
|
||||||
|
"lineHeight": 20,
|
||||||
|
},
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"marginHorizontal": 16,
|
||||||
|
"marginVertical": 9,
|
||||||
|
"textAlign": "center",
|
||||||
|
},
|
||||||
|
false,
|
||||||
|
{
|
||||||
|
"marginHorizontal": 24,
|
||||||
|
"marginVertical": 10,
|
||||||
|
},
|
||||||
|
undefined,
|
||||||
|
false,
|
||||||
|
{
|
||||||
|
"color": "rgba(255, 255, 255, 1)",
|
||||||
|
"fontFamily": "System",
|
||||||
|
"fontSize": 14,
|
||||||
|
"fontWeight": "500",
|
||||||
|
"letterSpacing": 0.1,
|
||||||
|
"lineHeight": 20,
|
||||||
|
},
|
||||||
|
undefined,
|
||||||
|
],
|
||||||
|
],
|
||||||
|
]
|
||||||
|
}
|
||||||
|
testID="button-text"
|
||||||
|
>
|
||||||
|
Press me
|
||||||
</Text>
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
</RNCSafeAreaView>
|
</RNCSafeAreaView>
|
||||||
`;
|
`;
|
||||||
|
@ -1,13 +1,18 @@
|
|||||||
import { StatusBar } from "expo-status-bar"
|
import { StyleSheet } from "react-native"
|
||||||
import { StyleSheet, Text } from "react-native"
|
import { Button } from "react-native-paper"
|
||||||
import { SafeAreaView } from "react-native-safe-area-context"
|
import { SafeAreaView } from "react-native-safe-area-context"
|
||||||
|
|
||||||
const HomePage: React.FC = () => {
|
const HomePage: React.FC = () => {
|
||||||
return (
|
return (
|
||||||
<SafeAreaView style={styles.container}>
|
<SafeAreaView style={styles.container}>
|
||||||
<Text style={styles.title}>P61 Project</Text>
|
<Button
|
||||||
|
mode="contained"
|
||||||
<StatusBar style="auto" />
|
onPress={() => {
|
||||||
|
return console.log("Pressed")
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Press me
|
||||||
|
</Button>
|
||||||
</SafeAreaView>
|
</SafeAreaView>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -18,12 +23,6 @@ const styles = StyleSheet.create({
|
|||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
},
|
},
|
||||||
title: {
|
|
||||||
fontFamily: "Canterbury",
|
|
||||||
fontSize: 36,
|
|
||||||
color: "#006CFF",
|
|
||||||
marginVertical: 20,
|
|
||||||
},
|
|
||||||
})
|
})
|
||||||
|
|
||||||
export default HomePage
|
export default HomePage
|
||||||
|
@ -2,6 +2,11 @@ import { useFonts } from "expo-font"
|
|||||||
import { Stack } from "expo-router"
|
import { Stack } from "expo-router"
|
||||||
import * as SplashScreen from "expo-splash-screen"
|
import * as SplashScreen from "expo-splash-screen"
|
||||||
import { useEffect } from "react"
|
import { useEffect } from "react"
|
||||||
|
import {
|
||||||
|
MD3LightTheme as DefaultTheme,
|
||||||
|
PaperProvider,
|
||||||
|
} from "react-native-paper"
|
||||||
|
import { StatusBar } from "expo-status-bar"
|
||||||
|
|
||||||
import CanterburyFont from "../assets/fonts/Canterbury.ttf"
|
import CanterburyFont from "../assets/fonts/Canterbury.ttf"
|
||||||
import GeoramFont from "../assets/fonts/Georama-Black.ttf"
|
import GeoramFont from "../assets/fonts/Georama-Black.ttf"
|
||||||
@ -43,6 +48,16 @@ const RootLayout: React.FC = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<PaperProvider
|
||||||
|
theme={{
|
||||||
|
...DefaultTheme,
|
||||||
|
colors: {
|
||||||
|
...DefaultTheme.colors,
|
||||||
|
primary: "#f57c00",
|
||||||
|
secondary: "#fbc02d",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
<Stack
|
<Stack
|
||||||
screenOptions={{
|
screenOptions={{
|
||||||
headerShown: false,
|
headerShown: false,
|
||||||
@ -50,6 +65,9 @@ const RootLayout: React.FC = () => {
|
|||||||
>
|
>
|
||||||
<Stack.Screen name="(pages)" />
|
<Stack.Screen name="(pages)" />
|
||||||
</Stack>
|
</Stack>
|
||||||
|
|
||||||
|
<StatusBar style="dark" />
|
||||||
|
</PaperProvider>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -2,5 +2,10 @@ module.exports = function (api) {
|
|||||||
api.cache(true)
|
api.cache(true)
|
||||||
return {
|
return {
|
||||||
presets: ["babel-preset-expo"],
|
presets: ["babel-preset-expo"],
|
||||||
|
env: {
|
||||||
|
production: {
|
||||||
|
plugins: ["react-native-paper/babel"],
|
||||||
|
},
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
105
package-lock.json
generated
105
package-lock.json
generated
@ -23,8 +23,10 @@
|
|||||||
"react": "18.2.0",
|
"react": "18.2.0",
|
||||||
"react-dom": "18.2.0",
|
"react-dom": "18.2.0",
|
||||||
"react-native": "0.73.4",
|
"react-native": "0.73.4",
|
||||||
|
"react-native-paper": "5.12.3",
|
||||||
"react-native-safe-area-context": "4.8.2",
|
"react-native-safe-area-context": "4.8.2",
|
||||||
"react-native-screens": "3.29.0",
|
"react-native-screens": "3.29.0",
|
||||||
|
"react-native-vector-icons": "10.0.3",
|
||||||
"react-native-web": "0.19.10"
|
"react-native-web": "0.19.10"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
@ -2094,6 +2096,26 @@
|
|||||||
"integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
|
"integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/@callstack/react-theme-provider": {
|
||||||
|
"version": "3.0.9",
|
||||||
|
"resolved": "https://registry.npmjs.org/@callstack/react-theme-provider/-/react-theme-provider-3.0.9.tgz",
|
||||||
|
"integrity": "sha512-tTQ0uDSCL0ypeMa8T/E9wAZRGKWj8kXP7+6RYgPTfOPs9N07C9xM8P02GJ3feETap4Ux5S69D9nteq9mEj86NA==",
|
||||||
|
"dependencies": {
|
||||||
|
"deepmerge": "^3.2.0",
|
||||||
|
"hoist-non-react-statics": "^3.3.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=16.3.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@callstack/react-theme-provider/node_modules/deepmerge": {
|
||||||
|
"version": "3.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.3.0.tgz",
|
||||||
|
"integrity": "sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.10.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@commitlint/cli": {
|
"node_modules/@commitlint/cli": {
|
||||||
"version": "18.6.1",
|
"version": "18.6.1",
|
||||||
"resolved": "https://registry.npmjs.org/@commitlint/cli/-/cli-18.6.1.tgz",
|
"resolved": "https://registry.npmjs.org/@commitlint/cli/-/cli-18.6.1.tgz",
|
||||||
@ -12943,6 +12965,14 @@
|
|||||||
"node": ">=8"
|
"node": ">=8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/hoist-non-react-statics": {
|
||||||
|
"version": "3.3.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
||||||
|
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
|
||||||
|
"dependencies": {
|
||||||
|
"react-is": "^16.7.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/hosted-git-info": {
|
"node_modules/hosted-git-info": {
|
||||||
"version": "3.0.8",
|
"version": "3.0.8",
|
||||||
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
|
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
|
||||||
@ -19523,6 +19553,31 @@
|
|||||||
"react": "18.2.0"
|
"react": "18.2.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/react-native-paper": {
|
||||||
|
"version": "5.12.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-5.12.3.tgz",
|
||||||
|
"integrity": "sha512-nH1e1pGPE/aOE5YR2GRX7CfMHFA9cAfrAfgCtwL4amJPDZCoVjc5yt2VDiUE1rT+JUfk0qdICMP3UggxvjMgug==",
|
||||||
|
"dependencies": {
|
||||||
|
"@callstack/react-theme-provider": "^3.0.9",
|
||||||
|
"color": "^3.1.2",
|
||||||
|
"use-latest-callback": "^0.1.5"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "*",
|
||||||
|
"react-native": "*",
|
||||||
|
"react-native-safe-area-context": "*",
|
||||||
|
"react-native-vector-icons": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/react-native-paper/node_modules/color": {
|
||||||
|
"version": "3.2.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
|
||||||
|
"integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
|
||||||
|
"dependencies": {
|
||||||
|
"color-convert": "^1.9.3",
|
||||||
|
"color-string": "^1.6.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/react-native-safe-area-context": {
|
"node_modules/react-native-safe-area-context": {
|
||||||
"version": "4.8.2",
|
"version": "4.8.2",
|
||||||
"resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.8.2.tgz",
|
"resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.8.2.tgz",
|
||||||
@ -19545,6 +19600,56 @@
|
|||||||
"react-native": "*"
|
"react-native": "*"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/react-native-vector-icons": {
|
||||||
|
"version": "10.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-10.0.3.tgz",
|
||||||
|
"integrity": "sha512-ZgVlV5AdQgnPHHvBEihGf2xwyziT1acpXV1U+WfCgCv3lcEeCRsmwAsBU+kUSNsU+8TcWVsX04kdI6qUaS8D7w==",
|
||||||
|
"dependencies": {
|
||||||
|
"prop-types": "^15.7.2",
|
||||||
|
"yargs": "^16.1.1"
|
||||||
|
},
|
||||||
|
"bin": {
|
||||||
|
"fa-upgrade.sh": "bin/fa-upgrade.sh",
|
||||||
|
"fa5-upgrade": "bin/fa5-upgrade.sh",
|
||||||
|
"fa6-upgrade": "bin/fa6-upgrade.sh",
|
||||||
|
"generate-icon": "bin/generate-icon.js"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"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==",
|
||||||
|
"dependencies": {
|
||||||
|
"string-width": "^4.2.0",
|
||||||
|
"strip-ansi": "^6.0.0",
|
||||||
|
"wrap-ansi": "^7.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"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==",
|
||||||
|
"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==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=10"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/react-native-web": {
|
"node_modules/react-native-web": {
|
||||||
"version": "0.19.10",
|
"version": "0.19.10",
|
||||||
"resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.10.tgz",
|
"resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.10.tgz",
|
||||||
|
@ -31,8 +31,10 @@
|
|||||||
"react": "18.2.0",
|
"react": "18.2.0",
|
||||||
"react-dom": "18.2.0",
|
"react-dom": "18.2.0",
|
||||||
"react-native": "0.73.4",
|
"react-native": "0.73.4",
|
||||||
|
"react-native-paper": "5.12.3",
|
||||||
"react-native-safe-area-context": "4.8.2",
|
"react-native-safe-area-context": "4.8.2",
|
||||||
"react-native-screens": "3.29.0",
|
"react-native-screens": "3.29.0",
|
||||||
|
"react-native-vector-icons": "10.0.3",
|
||||||
"react-native-web": "0.19.10"
|
"react-native-web": "0.19.10"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
Reference in New Issue
Block a user