azri 6 дней назад
Родитель
Сommit
4bb45384fa
11 измененных файлов: 590 добавлений и 77 удалений
  1. 22
    0
      app/(tabs)/index.jsx
  2. 0
    74
      app/(tabs)/index.tsx
  3. 117
    0
      app/screens/HomeScreen.jsx
  4. 99
    0
      app/screens/WelcomeScreen.jsx
  5. Двоичные данные
      assets/images/text4ulogo.png
  6. Двоичные данные
      assets/images/text4utitle.png
  7. Двоичные данные
      assets/images/userdp.png
  8. 0
    0
      components/index.js
  9. 259
    3
      package-lock.json
  10. 4
    0
      package.json
  11. 89
    0
      theme.js

+ 22
- 0
app/(tabs)/index.jsx Просмотреть файл

@@ -0,0 +1,22 @@
1
+// App.js
2
+import React, { useState } from 'react';
3
+import { PaperProvider } from 'react-native-paper';
4
+import { lightTheme, darkTheme } from '../../theme';
5
+import WelcomeScreen from '../screens/WelcomeScreen';
6
+import HomeScreen from '../screens/HomeScreen';
7
+import { Button, Switch } from 'react-native-paper';
8
+import { View } from 'react-native';
9
+
10
+const App = () => {
11
+  const [isDarkMode, setIsDarkMode] = useState(false);
12
+
13
+  return (
14
+    <PaperProvider theme={lightTheme}>
15
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
16
+        <HomeScreen />
17
+      </View>
18
+    </PaperProvider>
19
+  );
20
+};
21
+
22
+export default App;

+ 0
- 74
app/(tabs)/index.tsx Просмотреть файл

@@ -1,74 +0,0 @@
1
-import { Image, StyleSheet, Platform } from 'react-native';
2
-
3
-import { HelloWave } from '@/components/HelloWave';
4
-import ParallaxScrollView from '@/components/ParallaxScrollView';
5
-import { ThemedText } from '@/components/ThemedText';
6
-import { ThemedView } from '@/components/ThemedView';
7
-
8
-export default function HomeScreen() {
9
-  return (
10
-    <ParallaxScrollView
11
-      headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
12
-      headerImage={
13
-        <Image
14
-          source={require('@/assets/images/partial-react-logo.png')}
15
-          style={styles.reactLogo}
16
-        />
17
-      }>
18
-      <ThemedView style={styles.titleContainer}>
19
-        <ThemedText type="title">Welcome!</ThemedText>
20
-        <HelloWave />
21
-      </ThemedView>
22
-      <ThemedView style={styles.stepContainer}>
23
-        <ThemedText type="subtitle">Step 1: Try it</ThemedText>
24
-        <ThemedText>
25
-          Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.
26
-          Press{' '}
27
-          <ThemedText type="defaultSemiBold">
28
-            {Platform.select({
29
-              ios: 'cmd + d',
30
-              android: 'cmd + m',
31
-              web: 'F12'
32
-            })}
33
-          </ThemedText>{' '}
34
-          to open developer tools.
35
-        </ThemedText>
36
-      </ThemedView>
37
-      <ThemedView style={styles.stepContainer}>
38
-        <ThemedText type="subtitle">Step 2: Explore</ThemedText>
39
-        <ThemedText>
40
-          Tap the Explore tab to learn more about what's included in this starter app.
41
-        </ThemedText>
42
-      </ThemedView>
43
-      <ThemedView style={styles.stepContainer}>
44
-        <ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
45
-        <ThemedText>
46
-          When you're ready, run{' '}
47
-          <ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '}
48
-          <ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '}
49
-          <ThemedText type="defaultSemiBold">app</ThemedText> to{' '}
50
-          <ThemedText type="defaultSemiBold">app-example</ThemedText>.
51
-        </ThemedText>
52
-      </ThemedView>
53
-    </ParallaxScrollView>
54
-  );
55
-}
56
-
57
-const styles = StyleSheet.create({
58
-  titleContainer: {
59
-    flexDirection: 'row',
60
-    alignItems: 'center',
61
-    gap: 8,
62
-  },
63
-  stepContainer: {
64
-    gap: 8,
65
-    marginBottom: 8,
66
-  },
67
-  reactLogo: {
68
-    height: 178,
69
-    width: 290,
70
-    bottom: 0,
71
-    left: 0,
72
-    position: 'absolute',
73
-  },
74
-});

+ 117
- 0
app/screens/HomeScreen.jsx Просмотреть файл

@@ -0,0 +1,117 @@
1
+import React, { useState } from 'react';
2
+import { View, StyleSheet, TextInput, Text } from 'react-native';
3
+import { Appbar, Menu, Avatar, useTheme } from 'react-native-paper';
4
+import Icon from 'react-native-vector-icons/MaterialIcons';
5
+import dpuser from "@/assets/images/userdp.png";
6
+
7
+const HomeScreen = () => {
8
+  const { colors, fonts } = useTheme();
9
+  const [menuVisible, setMenuVisible] = useState(false);
10
+  const [searchInput, setSearchInput] = useState("")
11
+
12
+  return (
13
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
14
+      <Appbar.Header>
15
+
16
+        <Avatar.Image size={50} source={dpuser}></Avatar.Image>
17
+
18
+        <View style={styles.titleContainer}>
19
+          <Appbar.Content title="General" titleStyle={[fonts.titleLarge, styles.title]} />
20
+        </View>
21
+
22
+        {/* Menu Component */}
23
+        <Menu
24
+          visible={menuVisible}
25
+          onDismiss={() => setMenuVisible(false)}
26
+          anchor={
27
+            <Appbar.Action icon="dots-vertical" onPress={() => setMenuVisible(true)} />
28
+          }
29
+        >
30
+          <Menu.Item onPress={() => console.log('Profile Clicked')} title="Profile" />
31
+          <Menu.Item onPress={() => console.log('Settings Clicked')} title="Settings" />
32
+          <Menu.Item onPress={() => console.log('Logout Clicked')} title="Logout" />
33
+        </Menu>
34
+      </Appbar.Header>
35
+
36
+      <View style={styles.tabContainer}>
37
+        <Text style={[styles.tabButton, fonts.titleMedium, { fontWeight: "bold" }, { borderBottomWidth: 2, borderBottomColor: colors.secondary, color: colors.secondary }]}>General  </Text>
38
+        <Text style={[styles.tabButton, { fontWeight: "bold" }, fonts.titleMedium]}>Request <Text style={styles.badge}>1</Text></Text>
39
+      </View>
40
+
41
+
42
+      <View style={styles.searchSection}>
43
+        <TextInput
44
+          style={styles.input}
45
+          placeholder="Search"
46
+          onChangeText={setSearchInput}
47
+          value={searchInput}
48
+          underlineColorAndroid="transparent"
49
+          placeholderTextColor="#D9D9D9"
50
+        />
51
+        <Icon name="search" size={20} color="#888" style={styles.icon} />
52
+      </View>
53
+
54
+    </View>
55
+  );
56
+};
57
+
58
+const styles = StyleSheet.create({
59
+  container: {
60
+    flex: 1,
61
+    padding: 20,
62
+    width: '100%',
63
+  },
64
+  badge: {
65
+    backgroundColor: "#BB5C3F",
66
+    color: "#FFF",
67
+    borderRadius: 100,
68
+    paddingVertical: 4,
69
+    paddingHorizontal: 6,
70
+    fontSize: 10,
71
+    fontWeight: "400",
72
+    verticalAlign:"middle",
73
+    marginStart:5
74
+  },
75
+  tabContainer: {
76
+    flexDirection: "row",
77
+    marginBottom: 20
78
+  },
79
+  tabButton: {
80
+    fontWeight: "bold",
81
+    paddingVertical: 15,
82
+    width: "50%",
83
+    textAlign: "center",
84
+    active: {
85
+      borderBottomWidth: 2,
86
+    }
87
+  },
88
+  titleContainer: {
89
+    flex: 1,
90
+    alignItems: 'center',
91
+  },
92
+  title: {
93
+    fontWeight: 'bold',
94
+  },
95
+  searchSection: {
96
+    flexDirection: 'row',
97
+    justifyContent: 'center',
98
+    alignItems: 'center'
99
+  },
100
+  icon: {
101
+    padding: 10,
102
+    position: "absolute",
103
+    right: 10,
104
+    color: "#D9D9D9"
105
+  },
106
+  input: {
107
+    height: 40,
108
+    flex: 1,
109
+    borderWidth: 1,
110
+    paddingVertical: 10,
111
+    paddingHorizontal: 20,
112
+    borderRadius: 100,
113
+    borderColor: "#C0CFD0"
114
+  }
115
+});
116
+
117
+export default HomeScreen;

+ 99
- 0
app/screens/WelcomeScreen.jsx Просмотреть файл

@@ -0,0 +1,99 @@
1
+import React from 'react';
2
+import { View, Text, StyleSheet, Image } from 'react-native';
3
+import { Button, useTheme } from 'react-native-paper';
4
+import text4uLogo from '@/assets/images/text4ulogo.png'
5
+import text4uTitle from '@/assets/images/text4utitle.png'
6
+
7
+const WelcomeScreen = () => {
8
+    const { colors, button, fonts } = useTheme();
9
+
10
+    const goToLogin = () => {
11
+        console.log("go to login")
12
+    }
13
+
14
+    return (
15
+        <View
16
+            style={[styles.container, { backgroundColor: colors.background }]}
17
+        >
18
+            <View style={[styles.logoContainer]}>
19
+                <Image style={[styles.logo]} source={text4uLogo}></Image>
20
+                <Image style={[styles.logoTitle]} source={text4uTitle}></Image>
21
+            </View>
22
+            <View style={styles.mainContainer}>
23
+                <Text style={[fonts.titleLarge, styles.heading]}>
24
+                    Notification Made Easy.
25
+                </Text>
26
+                <Text style={[fonts.titleSmall, styles.subHeading]}>
27
+                    Empowering you with instant alerts for every important moment!
28
+                </Text>
29
+                <Button
30
+                    mode="contained"
31
+                    style={[button, styles.button]}
32
+                    labelStyle={{ ...fonts.titleMedium, ...styles.buttonLabel }}
33
+                >
34
+                    Get Started
35
+                </Button>
36
+                <Text style={{ ...fonts.titleMedium, ...styles.loginInfo }}>
37
+                    Already have an account?
38
+                    <Text style={styles.loginText} onPress={goToLogin}>
39
+                        Login
40
+                    </Text>
41
+                </Text>
42
+            </View>
43
+        </View>
44
+    );
45
+};
46
+
47
+const styles = StyleSheet.create({
48
+    container: {
49
+        flex: 1,
50
+        width: "100%"
51
+    },
52
+    logoContainer:{
53
+        marginTop:"auto",
54
+        marginBottom:"auto"
55
+    },
56
+    logo:{
57
+        marginLeft:"auto",
58
+        marginRight:"auto"
59
+    },
60
+    logoTitle:{
61
+        marginLeft:"auto",
62
+        marginRight:"auto"
63
+    },
64
+    mainContainer:{
65
+        alignItems:"center",
66
+        marginTop:"auto",
67
+        marginBottom:"auto"
68
+    },
69
+    heading: {
70
+        fontWeight: "bold",
71
+        marginBottom: 20,
72
+    },
73
+    subHeading: {
74
+        marginBottom: 20,
75
+        maxWidth: "70%",
76
+        textAlign: "center",
77
+        marginBottom: 36
78
+    },
79
+    button: {
80
+        marginBottom: 36,
81
+        marginLeft:"auto",
82
+        marginRight:"auto"
83
+    },
84
+    buttonLabel: {
85
+        fontWeight: "bold"
86
+    },
87
+    loginInfo: {
88
+        marginBottom: 20,
89
+        maxWidth: "70%",
90
+        textAlign: "center",
91
+        fontWeight: "bold"
92
+    },
93
+    loginText: {
94
+        marginLeft: 5,
95
+        color:"#396868"
96
+    }
97
+});
98
+
99
+export default WelcomeScreen;

Двоичные данные
assets/images/text4ulogo.png Просмотреть файл


Двоичные данные
assets/images/text4utitle.png Просмотреть файл


Двоичные данные
assets/images/userdp.png Просмотреть файл


+ 0
- 0
components/index.js Просмотреть файл


+ 259
- 3
package-lock.json Просмотреть файл

@@ -11,6 +11,8 @@
11 11
         "@expo/vector-icons": "^14.0.2",
12 12
         "@react-navigation/bottom-tabs": "^7.2.0",
13 13
         "@react-navigation/native": "^7.0.14",
14
+        "@rneui/base": "github:react-native-elements/react-native-elements#base",
15
+        "@rneui/themed": "github:react-native-elements/react-native-elements#themed",
14 16
         "expo": "~52.0.40",
15 17
         "expo-blur": "~14.0.3",
16 18
         "expo-constants": "~17.0.8",
@@ -27,9 +29,11 @@
27 29
         "react-dom": "18.3.1",
28 30
         "react-native": "0.76.7",
29 31
         "react-native-gesture-handler": "~2.20.2",
32
+        "react-native-paper": "^5.13.1",
30 33
         "react-native-reanimated": "~3.16.1",
31 34
         "react-native-safe-area-context": "4.12.0",
32 35
         "react-native-screens": "~4.4.0",
36
+        "react-native-vector-icons": "^10.2.0",
33 37
         "react-native-web": "~0.19.13",
34 38
         "react-native-webview": "13.12.5"
35 39
       },
@@ -2218,6 +2222,28 @@
2218 2222
       "dev": true,
2219 2223
       "license": "MIT"
2220 2224
     },
2225
+    "node_modules/@callstack/react-theme-provider": {
2226
+      "version": "3.0.9",
2227
+      "resolved": "https://registry.npmjs.org/@callstack/react-theme-provider/-/react-theme-provider-3.0.9.tgz",
2228
+      "integrity": "sha512-tTQ0uDSCL0ypeMa8T/E9wAZRGKWj8kXP7+6RYgPTfOPs9N07C9xM8P02GJ3feETap4Ux5S69D9nteq9mEj86NA==",
2229
+      "license": "MIT",
2230
+      "dependencies": {
2231
+        "deepmerge": "^3.2.0",
2232
+        "hoist-non-react-statics": "^3.3.0"
2233
+      },
2234
+      "peerDependencies": {
2235
+        "react": ">=16.3.0"
2236
+      }
2237
+    },
2238
+    "node_modules/@callstack/react-theme-provider/node_modules/deepmerge": {
2239
+      "version": "3.3.0",
2240
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.3.0.tgz",
2241
+      "integrity": "sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA==",
2242
+      "license": "MIT",
2243
+      "engines": {
2244
+        "node": ">=0.10.0"
2245
+      }
2246
+    },
2221 2247
     "node_modules/@egjs/hammerjs": {
2222 2248
       "version": "2.0.17",
2223 2249
       "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
@@ -4017,6 +4043,61 @@
4017 4043
         "nanoid": "3.3.8"
4018 4044
       }
4019 4045
     },
4046
+    "node_modules/@rneui/base": {
4047
+      "version": "4.0.0-rc.7",
4048
+      "resolved": "git+ssh://git@github.com/react-native-elements/react-native-elements.git#d42432d9581b3c1d4a3413e2861ff8be12c700b6",
4049
+      "license": "MIT",
4050
+      "dependencies": {
4051
+        "@types/react-native-vector-icons": "^6.4.10",
4052
+        "color": "^3.2.1",
4053
+        "deepmerge": "^4.2.2",
4054
+        "hoist-non-react-statics": "^3.3.2",
4055
+        "react-native-ratings": "^8.1.0",
4056
+        "react-native-size-matters": "^0.4.0"
4057
+      },
4058
+      "funding": {
4059
+        "type": "github",
4060
+        "url": "https://github.com/sponsors/react-native-elements"
4061
+      },
4062
+      "peerDependencies": {
4063
+        "react-native-safe-area-context": ">= 3.0.0",
4064
+        "react-native-vector-icons": ">7.0.0"
4065
+      }
4066
+    },
4067
+    "node_modules/@rneui/base/node_modules/color": {
4068
+      "version": "3.2.1",
4069
+      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
4070
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
4071
+      "license": "MIT",
4072
+      "dependencies": {
4073
+        "color-convert": "^1.9.3",
4074
+        "color-string": "^1.6.0"
4075
+      }
4076
+    },
4077
+    "node_modules/@rneui/base/node_modules/color-convert": {
4078
+      "version": "1.9.3",
4079
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
4080
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
4081
+      "license": "MIT",
4082
+      "dependencies": {
4083
+        "color-name": "1.1.3"
4084
+      }
4085
+    },
4086
+    "node_modules/@rneui/base/node_modules/color-name": {
4087
+      "version": "1.1.3",
4088
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
4089
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
4090
+      "license": "MIT"
4091
+    },
4092
+    "node_modules/@rneui/themed": {
4093
+      "version": "4.0.0-rc.7",
4094
+      "resolved": "git+ssh://git@github.com/react-native-elements/react-native-elements.git#bda83f52e80b644de8e684475a6e15fd895ab43e",
4095
+      "license": "MIT",
4096
+      "funding": {
4097
+        "type": "github",
4098
+        "url": "https://github.com/sponsors/react-native-elements"
4099
+      }
4100
+    },
4020 4101
     "node_modules/@segment/loosely-validate-event": {
4021 4102
       "version": "2.0.0",
4022 4103
       "resolved": "https://registry.npmjs.org/@segment/loosely-validate-event/-/loosely-validate-event-2.0.0.tgz",
@@ -4223,20 +4304,37 @@
4223 4304
       "version": "15.7.14",
4224 4305
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
4225 4306
       "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
4226
-      "devOptional": true,
4227 4307
       "license": "MIT"
4228 4308
     },
4229 4309
     "node_modules/@types/react": {
4230 4310
       "version": "18.3.20",
4231 4311
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.20.tgz",
4232 4312
       "integrity": "sha512-IPaCZN7PShZK/3t6Q87pfTkRm6oLTd4vztyoj+cbHUF1g3FfVb2tFIL79uCRKEfv16AhqDMBywP2VW3KIZUvcg==",
4233
-      "devOptional": true,
4234 4313
       "license": "MIT",
4235 4314
       "dependencies": {
4236 4315
         "@types/prop-types": "*",
4237 4316
         "csstype": "^3.0.2"
4238 4317
       }
4239 4318
     },
4319
+    "node_modules/@types/react-native": {
4320
+      "version": "0.70.19",
4321
+      "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.70.19.tgz",
4322
+      "integrity": "sha512-c6WbyCgWTBgKKMESj/8b4w+zWcZSsCforson7UdXtXMecG3MxCinYi6ihhrHVPyUrVzORsvEzK8zg32z4pK6Sg==",
4323
+      "license": "MIT",
4324
+      "dependencies": {
4325
+        "@types/react": "*"
4326
+      }
4327
+    },
4328
+    "node_modules/@types/react-native-vector-icons": {
4329
+      "version": "6.4.18",
4330
+      "resolved": "https://registry.npmjs.org/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.18.tgz",
4331
+      "integrity": "sha512-YGlNWb+k5laTBHd7+uZowB9DpIK3SXUneZqAiKQaj1jnJCZM0x71GDim5JCTMi4IFkhc9m8H/Gm28T5BjyivUw==",
4332
+      "license": "MIT",
4333
+      "dependencies": {
4334
+        "@types/react": "*",
4335
+        "@types/react-native": "^0.70"
4336
+      }
4337
+    },
4240 4338
     "node_modules/@types/react-test-renderer": {
4241 4339
       "version": "18.3.1",
4242 4340
       "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-18.3.1.tgz",
@@ -5917,7 +6015,6 @@
5917 6015
       "version": "3.1.3",
5918 6016
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
5919 6017
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
5920
-      "devOptional": true,
5921 6018
       "license": "MIT"
5922 6019
     },
5923 6020
     "node_modules/data-urls": {
@@ -11744,6 +11841,70 @@
11744 11841
         "react-native": ">=0.73.0"
11745 11842
       }
11746 11843
     },
11844
+    "node_modules/react-native-paper": {
11845
+      "version": "5.13.1",
11846
+      "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-5.13.1.tgz",
11847
+      "integrity": "sha512-8frKVKJ5JBd8WL1G3tpcYzOgK40kxkD/U+yLHGKNeLnD6v1Qc9W6DxWTHWN7lsX/DPYnhgvw1aKkYaPTmDj5pg==",
11848
+      "license": "MIT",
11849
+      "dependencies": {
11850
+        "@callstack/react-theme-provider": "^3.0.9",
11851
+        "color": "^3.1.2",
11852
+        "use-latest-callback": "^0.1.5"
11853
+      },
11854
+      "peerDependencies": {
11855
+        "react": "*",
11856
+        "react-native": "*",
11857
+        "react-native-safe-area-context": "*",
11858
+        "react-native-vector-icons": "*"
11859
+      }
11860
+    },
11861
+    "node_modules/react-native-paper/node_modules/color": {
11862
+      "version": "3.2.1",
11863
+      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
11864
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
11865
+      "license": "MIT",
11866
+      "dependencies": {
11867
+        "color-convert": "^1.9.3",
11868
+        "color-string": "^1.6.0"
11869
+      }
11870
+    },
11871
+    "node_modules/react-native-paper/node_modules/color-convert": {
11872
+      "version": "1.9.3",
11873
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
11874
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
11875
+      "license": "MIT",
11876
+      "dependencies": {
11877
+        "color-name": "1.1.3"
11878
+      }
11879
+    },
11880
+    "node_modules/react-native-paper/node_modules/color-name": {
11881
+      "version": "1.1.3",
11882
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
11883
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
11884
+      "license": "MIT"
11885
+    },
11886
+    "node_modules/react-native-paper/node_modules/use-latest-callback": {
11887
+      "version": "0.1.11",
11888
+      "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.11.tgz",
11889
+      "integrity": "sha512-8nhb73STSD/z3GTHklvNjL8F9wMOo0bj0AFnulpIYuFTm6aQlT3ZcNbXF2YurKImIY8+kpSFSDHZZyQmurGrhw==",
11890
+      "license": "MIT",
11891
+      "peerDependencies": {
11892
+        "react": ">=16.8"
11893
+      }
11894
+    },
11895
+    "node_modules/react-native-ratings": {
11896
+      "version": "8.1.0",
11897
+      "resolved": "https://registry.npmjs.org/react-native-ratings/-/react-native-ratings-8.1.0.tgz",
11898
+      "integrity": "sha512-+QOJ4G3NjVkI1D+tk4EGx1dCvVfbD2nQdkrj9cXrcAoEiwmbep4z4bZbCKmWMpQ5h2dqbxABU8/eBnbDmvAc3g==",
11899
+      "license": "MIT",
11900
+      "dependencies": {
11901
+        "lodash": "^4.17.15"
11902
+      },
11903
+      "peerDependencies": {
11904
+        "react": "*",
11905
+        "react-native": "*"
11906
+      }
11907
+    },
11747 11908
     "node_modules/react-native-reanimated": {
11748 11909
       "version": "3.16.7",
11749 11910
       "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.16.7.tgz",
@@ -11792,6 +11953,101 @@
11792 11953
         "react-native": "*"
11793 11954
       }
11794 11955
     },
11956
+    "node_modules/react-native-size-matters": {
11957
+      "version": "0.4.2",
11958
+      "resolved": "https://registry.npmjs.org/react-native-size-matters/-/react-native-size-matters-0.4.2.tgz",
11959
+      "integrity": "sha512-DKE3f/sdcozd24oASgkP1iGg+YU3HoajRa5k3a4wkRzpiqREq8SGX12Y5zBgAt/8IivLQoTMYkyQu1/Giuy+zQ==",
11960
+      "license": "MIT",
11961
+      "peerDependencies": {
11962
+        "react-native": "*"
11963
+      }
11964
+    },
11965
+    "node_modules/react-native-vector-icons": {
11966
+      "version": "10.2.0",
11967
+      "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-10.2.0.tgz",
11968
+      "integrity": "sha512-n5HGcxUuVaTf9QJPs/W22xQpC2Z9u0nb0KgLPnVltP8vdUvOp6+R26gF55kilP/fV4eL4vsAHUqUjewppJMBOQ==",
11969
+      "license": "MIT",
11970
+      "dependencies": {
11971
+        "prop-types": "^15.7.2",
11972
+        "yargs": "^16.1.1"
11973
+      },
11974
+      "bin": {
11975
+        "fa-upgrade.sh": "bin/fa-upgrade.sh",
11976
+        "fa5-upgrade": "bin/fa5-upgrade.sh",
11977
+        "fa6-upgrade": "bin/fa6-upgrade.sh",
11978
+        "generate-icon": "bin/generate-icon.js"
11979
+      }
11980
+    },
11981
+    "node_modules/react-native-vector-icons/node_modules/cliui": {
11982
+      "version": "7.0.4",
11983
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
11984
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
11985
+      "license": "ISC",
11986
+      "dependencies": {
11987
+        "string-width": "^4.2.0",
11988
+        "strip-ansi": "^6.0.0",
11989
+        "wrap-ansi": "^7.0.0"
11990
+      }
11991
+    },
11992
+    "node_modules/react-native-vector-icons/node_modules/emoji-regex": {
11993
+      "version": "8.0.0",
11994
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
11995
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
11996
+      "license": "MIT"
11997
+    },
11998
+    "node_modules/react-native-vector-icons/node_modules/string-width": {
11999
+      "version": "4.2.3",
12000
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
12001
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
12002
+      "license": "MIT",
12003
+      "dependencies": {
12004
+        "emoji-regex": "^8.0.0",
12005
+        "is-fullwidth-code-point": "^3.0.0",
12006
+        "strip-ansi": "^6.0.1"
12007
+      },
12008
+      "engines": {
12009
+        "node": ">=8"
12010
+      }
12011
+    },
12012
+    "node_modules/react-native-vector-icons/node_modules/strip-ansi": {
12013
+      "version": "6.0.1",
12014
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
12015
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
12016
+      "license": "MIT",
12017
+      "dependencies": {
12018
+        "ansi-regex": "^5.0.1"
12019
+      },
12020
+      "engines": {
12021
+        "node": ">=8"
12022
+      }
12023
+    },
12024
+    "node_modules/react-native-vector-icons/node_modules/yargs": {
12025
+      "version": "16.2.0",
12026
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
12027
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
12028
+      "license": "MIT",
12029
+      "dependencies": {
12030
+        "cliui": "^7.0.2",
12031
+        "escalade": "^3.1.1",
12032
+        "get-caller-file": "^2.0.5",
12033
+        "require-directory": "^2.1.1",
12034
+        "string-width": "^4.2.0",
12035
+        "y18n": "^5.0.5",
12036
+        "yargs-parser": "^20.2.2"
12037
+      },
12038
+      "engines": {
12039
+        "node": ">=10"
12040
+      }
12041
+    },
12042
+    "node_modules/react-native-vector-icons/node_modules/yargs-parser": {
12043
+      "version": "20.2.9",
12044
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
12045
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
12046
+      "license": "ISC",
12047
+      "engines": {
12048
+        "node": ">=10"
12049
+      }
12050
+    },
11795 12051
     "node_modules/react-native-web": {
11796 12052
       "version": "0.19.13",
11797 12053
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.13.tgz",

+ 4
- 0
package.json Просмотреть файл

@@ -18,6 +18,8 @@
18 18
     "@expo/vector-icons": "^14.0.2",
19 19
     "@react-navigation/bottom-tabs": "^7.2.0",
20 20
     "@react-navigation/native": "^7.0.14",
21
+    "@rneui/base": "github:react-native-elements/react-native-elements#base",
22
+    "@rneui/themed": "github:react-native-elements/react-native-elements#themed",
21 23
     "expo": "~52.0.40",
22 24
     "expo-blur": "~14.0.3",
23 25
     "expo-constants": "~17.0.8",
@@ -34,9 +36,11 @@
34 36
     "react-dom": "18.3.1",
35 37
     "react-native": "0.76.7",
36 38
     "react-native-gesture-handler": "~2.20.2",
39
+    "react-native-paper": "^5.13.1",
37 40
     "react-native-reanimated": "~3.16.1",
38 41
     "react-native-safe-area-context": "4.12.0",
39 42
     "react-native-screens": "~4.4.0",
43
+    "react-native-vector-icons": "^10.2.0",
40 44
     "react-native-web": "~0.19.13",
41 45
     "react-native-webview": "13.12.5"
42 46
   },

+ 89
- 0
theme.js Просмотреть файл

@@ -0,0 +1,89 @@
1
+// src/theme.js
2
+import { DefaultTheme, MD3DarkTheme } from 'react-native-paper';
3
+
4
+export const lightTheme = {
5
+    ...DefaultTheme,
6
+    colors: {
7
+      primary: "#DD9C47",
8
+      onPrimary: "#FFF",
9
+      secondary: "#396868",
10
+      onSecondary: "#FFF",
11
+      error: "#BF645B",
12
+      background: "#FEFCF9",
13
+      onBackground: "#000000",
14
+      outline: "rgb(130, 117, 104)",
15
+      outlineVariant: "rgb(212, 196, 181)",
16
+      shadow: "rgb(0, 0, 0)",
17
+      scrim: "rgb(0, 0, 0)",
18
+      inverseSurface: "rgb(53, 47, 42)",
19
+      inverseOnSurface: "rgb(249, 239, 231)",
20
+      inversePrimary: "rgb(255, 185, 95)",
21
+      elevation: {
22
+        level0: "transparent",
23
+        level1: "rgb(249, 243, 242)",
24
+        level2: "rgb(245, 238, 235)",
25
+        level3: "rgb(242, 233, 227)",
26
+        level4: "rgb(240, 231, 224)",
27
+        level5: "rgb(238, 228, 219)"
28
+      },
29
+    },
30
+    button: {
31
+      alignSelf: 'flex-start',
32
+      paddingHorizontal: 15,
33
+      borderRadius: 100,
34
+      paddingVertical: 5,
35
+      minWidth: 'auto'
36
+    }
37
+};
38
+
39
+export const darkTheme = {
40
+    ...MD3DarkTheme,
41
+    colors: {
42
+      primary: "rgb(255, 185, 95)",
43
+      onPrimary: "rgb(71, 42, 0)",
44
+      primaryContainer: "rgb(101, 62, 0)",
45
+      onPrimaryContainer: "rgb(255, 221, 184)",
46
+      secondary: "rgb(76, 218, 218)",
47
+      onSecondary: "rgb(0, 55, 55)",
48
+      secondaryContainer: "rgb(0, 79, 79)",
49
+      onSecondaryContainer: "rgb(111, 247, 246)",
50
+      tertiary: "rgb(79, 216, 235)",
51
+      onTertiary: "rgb(0, 54, 61)",
52
+      tertiaryContainer: "rgb(0, 79, 88)",
53
+      onTertiaryContainer: "rgb(151, 240, 255)",
54
+      error: "rgb(255, 180, 171)",
55
+      onError: "rgb(105, 0, 5)",
56
+      errorContainer: "rgb(147, 0, 10)",
57
+      onErrorContainer: "rgb(255, 180, 171)",
58
+      background: "rgb(31, 27, 22)",
59
+      onBackground: "rgb(235, 225, 217)",
60
+      surface: "rgb(31, 27, 22)",
61
+      onSurface: "rgb(235, 225, 217)",
62
+      surfaceVariant: "rgb(80, 69, 57)",
63
+      onSurfaceVariant: "rgb(212, 196, 181)",
64
+      outline: "rgb(156, 142, 128)",
65
+      outlineVariant: "rgb(80, 69, 57)",
66
+      shadow: "rgb(0, 0, 0)",
67
+      scrim: "rgb(0, 0, 0)",
68
+      inverseSurface: "rgb(235, 225, 217)",
69
+      inverseOnSurface: "rgb(53, 47, 42)",
70
+      inversePrimary: "rgb(133, 83, 0)",
71
+      elevation: {
72
+        level0: "transparent",
73
+        level1: "rgb(42, 35, 26)",
74
+        level2: "rgb(49, 40, 28)",
75
+        level3: "rgb(56, 44, 30)",
76
+        level4: "rgb(58, 46, 31)",
77
+        level5: "rgb(62, 49, 32)"
78
+      },
79
+      surfaceDisabled: "rgba(235, 225, 217, 0.12)",
80
+      onSurfaceDisabled: "rgba(235, 225, 217, 0.38)",
81
+      backdrop: "rgba(56, 47, 36, 0.4)",
82
+      errorCustom: "rgb(255, 180, 171)",
83
+      onErrorCustom: "rgb(95, 20, 17)",
84
+      errorCustomContainer: "rgb(125, 43, 37)",
85
+      onErrorCustomContainer: "rgb(255, 218, 214)"
86
+    }
87
+};
88
+
89
+console.log(DefaultTheme)

Загрузка…
Отмена
Сохранить