expo-template-default 55.0.1 → 55.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app.json +5 -1
- package/assets/images/icon.png +0 -0
- package/assets/images/splash-icon.png +0 -0
- package/package.json +12 -12
- package/src/app/explore.tsx +76 -83
- package/src/components/app-tabs.native.tsx +2 -6
package/app.json
CHANGED
package/assets/images/icon.png
CHANGED
|
Binary file
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "expo-template-default",
|
|
3
3
|
"license": "0BSD",
|
|
4
4
|
"main": "expo-router/entry",
|
|
5
|
-
"version": "55.0.
|
|
5
|
+
"version": "55.0.2",
|
|
6
6
|
"scripts": {
|
|
7
7
|
"start": "expo start",
|
|
8
8
|
"reset-project": "node ./scripts/reset-project.js",
|
|
@@ -16,18 +16,18 @@
|
|
|
16
16
|
"@react-navigation/bottom-tabs": "^7.7.3",
|
|
17
17
|
"@react-navigation/elements": "^2.8.1",
|
|
18
18
|
"@react-navigation/native": "^7.1.28",
|
|
19
|
-
"expo": "~55.0.0-preview.
|
|
19
|
+
"expo": "~55.0.0-preview.3",
|
|
20
20
|
"expo-constants": "~55.0.0",
|
|
21
|
-
"expo-font": "~55.0.
|
|
22
|
-
"expo-glass-effect": "~55.0.
|
|
23
|
-
"expo-image": "~55.0.
|
|
24
|
-
"expo-linking": "~55.0.
|
|
25
|
-
"expo-router": "~55.0.0-beta.
|
|
26
|
-
"expo-splash-screen": "~55.0.
|
|
27
|
-
"expo-status-bar": "~55.0.
|
|
28
|
-
"expo-symbols": "~55.0.
|
|
29
|
-
"expo-system-ui": "~55.0.
|
|
30
|
-
"expo-web-browser": "~55.0.
|
|
21
|
+
"expo-font": "~55.0.1",
|
|
22
|
+
"expo-glass-effect": "~55.0.1",
|
|
23
|
+
"expo-image": "~55.0.1",
|
|
24
|
+
"expo-linking": "~55.0.1",
|
|
25
|
+
"expo-router": "~55.0.0-beta.1",
|
|
26
|
+
"expo-splash-screen": "~55.0.1",
|
|
27
|
+
"expo-status-bar": "~55.0.1",
|
|
28
|
+
"expo-symbols": "~55.0.1",
|
|
29
|
+
"expo-system-ui": "~55.0.1",
|
|
30
|
+
"expo-web-browser": "~55.0.1",
|
|
31
31
|
"react": "19.2.0",
|
|
32
32
|
"react-dom": "19.2.0",
|
|
33
33
|
"react-native": "0.83.1",
|
package/src/app/explore.tsx
CHANGED
|
@@ -34,102 +34,95 @@ export default function TabTwoScreen() {
|
|
|
34
34
|
});
|
|
35
35
|
|
|
36
36
|
return (
|
|
37
|
-
<
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
<ThemedView style={styles.
|
|
43
|
-
<
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
37
|
+
<ScrollView
|
|
38
|
+
style={[styles.scrollView, { backgroundColor: theme.background }]}
|
|
39
|
+
contentInset={insets}
|
|
40
|
+
contentContainerStyle={[styles.contentContainer, contentPlatformStyle]}>
|
|
41
|
+
<ThemedView style={styles.container}>
|
|
42
|
+
<ThemedView style={styles.titleContainer}>
|
|
43
|
+
<ThemedText type="subtitle">Explore</ThemedText>
|
|
44
|
+
<ThemedText style={styles.centerText} themeColor="textSecondary">
|
|
45
|
+
This starter app includes example{'\n'}code to help you get started.
|
|
46
|
+
</ThemedText>
|
|
47
|
+
|
|
48
|
+
<ExternalLink href="https://docs.expo.dev" asChild>
|
|
49
|
+
<Pressable style={({ pressed }) => pressed && styles.pressed}>
|
|
50
|
+
<ThemedView type="backgroundElement" style={styles.linkButton}>
|
|
51
|
+
<ThemedText type="link">Expo documentation</ThemedText>
|
|
52
|
+
<IconSymbol color={theme.text} name="arrow.up.right.square" size={12} />
|
|
53
|
+
</ThemedView>
|
|
54
|
+
</Pressable>
|
|
55
|
+
</ExternalLink>
|
|
56
|
+
</ThemedView>
|
|
48
57
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
58
|
+
<ThemedView style={styles.sectionsWrapper}>
|
|
59
|
+
<Collapsible title="File-based routing">
|
|
60
|
+
<ThemedText type="small">
|
|
61
|
+
This app has two screens: <ThemedText type="code">src/app/index.tsx</ThemedText> and{' '}
|
|
62
|
+
<ThemedText type="code">src/app/explore.tsx</ThemedText>
|
|
63
|
+
</ThemedText>
|
|
64
|
+
<ThemedText type="small">
|
|
65
|
+
The layout file in <ThemedText type="code">src/app/_layout.tsx</ThemedText> sets up
|
|
66
|
+
the tab navigator.
|
|
67
|
+
</ThemedText>
|
|
68
|
+
<ExternalLink href="https://docs.expo.dev/router/introduction">
|
|
69
|
+
<ThemedText type="linkPrimary">Learn more</ThemedText>
|
|
56
70
|
</ExternalLink>
|
|
57
|
-
</
|
|
71
|
+
</Collapsible>
|
|
58
72
|
|
|
59
|
-
<
|
|
60
|
-
<
|
|
73
|
+
<Collapsible title="Android, iOS, and web support">
|
|
74
|
+
<ThemedView type="backgroundElement" style={styles.collapsibleContent}>
|
|
61
75
|
<ThemedText type="small">
|
|
62
|
-
|
|
63
|
-
|
|
76
|
+
You can open this project on Android, iOS, and the web. To open the web version,
|
|
77
|
+
press <ThemedText type="smallBold">w</ThemedText> in the terminal running this
|
|
78
|
+
project.
|
|
64
79
|
</ThemedText>
|
|
65
|
-
<
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
</ExternalLink>
|
|
72
|
-
</Collapsible>
|
|
73
|
-
|
|
74
|
-
<Collapsible title="Android, iOS, and web support">
|
|
75
|
-
<ThemedView type="backgroundElement" style={styles.collapsibleContent}>
|
|
76
|
-
<ThemedText type="small">
|
|
77
|
-
You can open this project on Android, iOS, and the web. To open the web version,
|
|
78
|
-
press <ThemedText type="smallBold">w</ThemedText> in the terminal running this
|
|
79
|
-
project.
|
|
80
|
-
</ThemedText>
|
|
81
|
-
<Image
|
|
82
|
-
source={require('@/assets/images/tutorial-web.png')}
|
|
83
|
-
style={styles.imageTutorial}
|
|
84
|
-
/>
|
|
85
|
-
</ThemedView>
|
|
86
|
-
</Collapsible>
|
|
80
|
+
<Image
|
|
81
|
+
source={require('@/assets/images/tutorial-web.png')}
|
|
82
|
+
style={styles.imageTutorial}
|
|
83
|
+
/>
|
|
84
|
+
</ThemedView>
|
|
85
|
+
</Collapsible>
|
|
87
86
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
87
|
+
<Collapsible title="Images">
|
|
88
|
+
<ThemedText type="small">
|
|
89
|
+
For static images, you can use the <ThemedText type="code">@2x</ThemedText> and{' '}
|
|
90
|
+
<ThemedText type="code">@3x</ThemedText> suffixes to provide files for different
|
|
91
|
+
screen densities.
|
|
92
|
+
</ThemedText>
|
|
93
|
+
<Image source={require('@/assets/images/react-logo.png')} style={styles.imageReact} />
|
|
94
|
+
<ExternalLink href="https://reactnative.dev/docs/images">
|
|
95
|
+
<ThemedText type="linkPrimary">Learn more</ThemedText>
|
|
96
|
+
</ExternalLink>
|
|
97
|
+
</Collapsible>
|
|
99
98
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
99
|
+
<Collapsible title="Light and dark mode components">
|
|
100
|
+
<ThemedText type="small">
|
|
101
|
+
This template has light and dark mode support. The{' '}
|
|
102
|
+
<ThemedText type="code">useColorScheme()</ThemedText> hook lets you inspect what the
|
|
103
|
+
user's current color scheme is, and so you can adjust UI colors accordingly.
|
|
104
|
+
</ThemedText>
|
|
105
|
+
<ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
|
|
106
|
+
<ThemedText type="linkPrimary">Learn more</ThemedText>
|
|
107
|
+
</ExternalLink>
|
|
108
|
+
</Collapsible>
|
|
110
109
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
</ThemedView>
|
|
120
|
-
{Platform.OS === 'web' && <WebBadge />}
|
|
110
|
+
<Collapsible title="Animations">
|
|
111
|
+
<ThemedText type="small">
|
|
112
|
+
This template includes an example of an animated component. The{' '}
|
|
113
|
+
<ThemedText type="code">src/components/ui/collapsible.tsx</ThemedText> component uses
|
|
114
|
+
the powerful <ThemedText type="code">react-native-reanimated</ThemedText> library to
|
|
115
|
+
animate opening this hint.
|
|
116
|
+
</ThemedText>
|
|
117
|
+
</Collapsible>
|
|
121
118
|
</ThemedView>
|
|
122
|
-
|
|
123
|
-
|
|
119
|
+
{Platform.OS === 'web' && <WebBadge />}
|
|
120
|
+
</ThemedView>
|
|
121
|
+
</ScrollView>
|
|
124
122
|
);
|
|
125
123
|
}
|
|
126
124
|
|
|
127
125
|
const styles = StyleSheet.create({
|
|
128
|
-
root: {
|
|
129
|
-
flex: 1,
|
|
130
|
-
flexDirection: 'row',
|
|
131
|
-
justifyContent: 'center',
|
|
132
|
-
},
|
|
133
126
|
scrollView: {
|
|
134
127
|
flex: 1,
|
|
135
128
|
},
|
|
@@ -1,12 +1,9 @@
|
|
|
1
|
-
import { isLiquidGlassAvailable } from 'expo-glass-effect';
|
|
2
1
|
import { NativeTabs } from 'expo-router/unstable-native-tabs';
|
|
3
2
|
import React from 'react';
|
|
4
|
-
import {
|
|
3
|
+
import { useColorScheme } from 'react-native';
|
|
5
4
|
|
|
6
5
|
import { Colors } from '@/constants/theme';
|
|
7
6
|
|
|
8
|
-
const useLiquidGlass = Platform.OS === 'ios' && isLiquidGlassAvailable();
|
|
9
|
-
|
|
10
7
|
export default function AppTabs() {
|
|
11
8
|
const scheme = useColorScheme();
|
|
12
9
|
const colors = Colors[scheme === 'unspecified' ? 'light' : scheme];
|
|
@@ -15,8 +12,7 @@ export default function AppTabs() {
|
|
|
15
12
|
<NativeTabs
|
|
16
13
|
backgroundColor={colors.background}
|
|
17
14
|
indicatorColor={colors.backgroundElement}
|
|
18
|
-
labelStyle={{ selected: { color: colors.text } }}
|
|
19
|
-
disableTransparentOnScrollEdge={!useLiquidGlass}>
|
|
15
|
+
labelStyle={{ selected: { color: colors.text } }}>
|
|
20
16
|
<NativeTabs.Trigger name="index">
|
|
21
17
|
<NativeTabs.Trigger.Label>Home</NativeTabs.Trigger.Label>
|
|
22
18
|
<NativeTabs.Trigger.Icon src={require('@/assets/images/tabIcons/home.png')} />
|