theoludwig/p61-project
Archived
1
1
Fork 0
Code Issues Pull Requests Releases Activity

feat: setup React Native Paper

Browse Source 
Ref: https://callstack.github.io/react-native-paper/
This commit is contained in:
Théo LUDWIG 2024-02-23 15:31:43 +01:00
parent c4895fe17c
commit 06a99b6b23
Signed by: theoludwig
GPG Key ID: ADFE5A563D718F3B
6 changed files with 288 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
app/(pages)/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -18,17 +18,153 @@ exports[`<HomePage /> renders correctly 1`] = `
}
}
>
<Text
<View
collapsable={false}
style={
{
"color": "#006CFF",
"fontFamily": "Canterbury",
"fontSize": 36,
"marginVertical": 20,
"backgroundColor": "rgba(103, 80, 164, 1)",
"borderRadius": 20,
"shadowColor": "#000",
"shadowOffset": {
"height": 0,
"width": 0,
},
"shadowOpacity": 0,
"shadowRadius": 0,
}
}
testID="button-container-outer-layer"
>
P61 Project
</Text>
<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,
]
}
>
<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>
</View>
</View>
</View>
</View>
</RNCSafeAreaView>
`;

21
app/(pages)/index.tsx
View File

@ -1,13 +1,18 @@
import { StatusBar } from "expo-status-bar"
import { StyleSheet, Text } from "react-native"
import { StyleSheet } from "react-native"
import { Button } from "react-native-paper"
import { SafeAreaView } from "react-native-safe-area-context"
const HomePage: React.FC = () => {
return (
<SafeAreaView style={styles.container}>
<Text style={styles.title}>P61 Project</Text>
<StatusBar style="auto" />
<Button
mode="contained"
onPress={() => {
return console.log("Pressed")
}}
>
Press me
</Button>
</SafeAreaView>
)
}
@ -18,12 +23,6 @@ const styles = StyleSheet.create({
alignItems: "center",
justifyContent: "center",
},
title: {
fontFamily: "Canterbury",
fontSize: 36,
color: "#006CFF",
marginVertical: 20,
},
})
export default HomePage

28
app/_layout.tsx
View File

@ -2,6 +2,11 @@ import { useFonts } from "expo-font"
import { Stack } from "expo-router"
import * as SplashScreen from "expo-splash-screen"
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 GeoramFont from "../assets/fonts/Georama-Black.ttf"
@ -43,13 +48,26 @@ const RootLayout: React.FC = () => {
}
return (
<Stack
screenOptions={{
headerShown: false,
<PaperProvider
theme={{
...DefaultTheme,
colors: {
...DefaultTheme.colors,
primary: "#f57c00",
secondary: "#fbc02d",
},
}}
>
<Stack.Screen name="(pages)" />
</Stack>
<Stack
screenOptions={{
headerShown: false,
}}
>
<Stack.Screen name="(pages)" />
</Stack>
<StatusBar style="dark" />
</PaperProvider>
)
}

5
babel.config.js
View File

@ -2,5 +2,10 @@ module.exports = function (api) {
api.cache(true)
return {
presets: ["babel-preset-expo"],
env: {
production: {
plugins: ["react-native-paper/babel"],
},
},
}
}

105
package-lock.json generated
View File

@ -23,8 +23,10 @@
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.73.4",
"react-native-paper": "5.12.3",
"react-native-safe-area-context": "4.8.2",
"react-native-screens": "3.29.0",
"react-native-vector-icons": "10.0.3",
"react-native-web": "0.19.10"
},
"devDependencies": {
@ -2094,6 +2096,26 @@
"integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
"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": {
"version": "18.6.1",
"resolved": "https://registry.npmjs.org/@commitlint/cli/-/cli-18.6.1.tgz",
@ -12943,6 +12965,14 @@
"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": {
"version": "3.0.8",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
@ -19523,6 +19553,31 @@
"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": {
"version": "4.8.2",
"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": "*"
}
},
"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": {
"version": "0.19.10",
"resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.10.tgz",

2
package.json
View File

@ -31,8 +31,10 @@
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.73.4",
"react-native-paper": "5.12.3",
"react-native-safe-area-context": "4.8.2",
"react-native-screens": "3.29.0",
"react-native-vector-icons": "10.0.3",
"react-native-web": "0.19.10"
},
"devDependencies": {