expo-template-tabs 49.0.0 → 49.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.
Files changed (16) hide show
  1. package/app/(tabs)/_layout.tsx +1 -1
  2. package/app/(tabs)/index.tsx +2 -2
  3. package/app/(tabs)/two.tsx +2 -2
  4. package/app/+html.tsx +34 -0
  5. package/app/[...missing].tsx +1 -1
  6. package/app/_layout.tsx +20 -15
  7. package/app/modal.tsx +2 -2
  8. package/app.json +17 -0
  9. package/babel.config.js +3 -2
  10. package/components/EditScreenInfo.tsx +2 -1
  11. package/components/ExternalLink.tsx +5 -1
  12. package/components/Themed.tsx +9 -9
  13. package/metro.config.js +10 -0
  14. package/package.json +14 -7
  15. package/tsconfig.json +13 -2
  16. package/index.ts +0 -1
package/app/(tabs)/_layout.tsx CHANGED
@@ -2,7 +2,7 @@ import FontAwesome from '@expo/vector-icons/FontAwesome';
2
2
  import { Link, Tabs } from 'expo-router';
3
3
  import { Pressable, useColorScheme } from 'react-native';
4
4
 
5
- import Colors from '../../constants/Colors';
5
+ import Colors from '@/constants/Colors';
6
6
 
7
7
  /**
8
8
  * You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
package/app/(tabs)/index.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import { StyleSheet } from 'react-native';
2
2
 
3
- import EditScreenInfo from '../../components/EditScreenInfo';
4
- import { Text, View } from '../../components/Themed';
3
+ import EditScreenInfo from '@/components/EditScreenInfo';
4
+ import { Text, View } from '@/components/Themed';
5
5
 
6
6
  export default function TabOneScreen() {
7
7
  return (
package/app/(tabs)/two.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import { StyleSheet } from 'react-native';
2
2
 
3
- import EditScreenInfo from '../../components/EditScreenInfo';
4
- import { Text, View } from '../../components/Themed';
3
+ import EditScreenInfo from '@/components/EditScreenInfo';
4
+ import { Text, View } from '@/components/Themed';
5
5
 
6
6
  export default function TabTwoScreen() {
7
7
  return (
package/app/+html.tsx ADDED
@@ -0,0 +1,34 @@
1
+ import { ScrollViewStyleReset } from 'expo-router/html';
2
+
3
+ // This file is web-only and used to configure the root HTML for every
4
+ // web page during static rendering.
5
+ // The contents of this function only run in Node.js environments and
6
+ // do not have access to the DOM or browser APIs.
7
+ export default function Root({ children }: { children: React.ReactNode }) {
8
+ return (
9
+ <html lang="en">
10
+ <head>
11
+ <meta charSet="utf-8" />
12
+ <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
13
+
14
+ {/*
15
+ This viewport disables scaling which makes the mobile website act more like a native app.
16
+ However this does reduce built-in accessibility. If you want to enable scaling, use this instead:
17
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
18
+ */}
19
+ <meta
20
+ name="viewport"
21
+ content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1.00001,viewport-fit=cover"
22
+ />
23
+ {/*
24
+ Disable body scrolling on web. This makes ScrollView components work closer to how they do on native.
25
+ However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
26
+ */}
27
+ <ScrollViewStyleReset />
28
+
29
+ {/* Add any additional <head> elements that you want globally available on web... */}
30
+ </head>
31
+ <body>{children}</body>
32
+ </html>
33
+ );
34
+ }
package/app/[...missing].tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import { Link, Stack } from 'expo-router';
2
2
  import { StyleSheet } from 'react-native';
3
3
 
4
- import { Text, View } from '../components/Themed';
4
+ import { Text, View } from '@/components/Themed';
5
5
 
6
6
  export default function NotFoundScreen() {
7
7
  return (
package/app/_layout.tsx CHANGED
@@ -15,6 +15,9 @@ export const unstable_settings = {
15
15
  initialRouteName: '(tabs)',
16
16
  };
17
17
 
18
+ // Prevent the splash screen from auto-hiding before asset loading is complete.
19
+ SplashScreen.preventAutoHideAsync();
20
+
18
21
  export default function RootLayout() {
19
22
  const [loaded, error] = useFonts({
20
23
  SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
@@ -26,26 +29,28 @@ export default function RootLayout() {
26
29
  if (error) throw error;
27
30
  }, [error]);
28
31
 
29
- return (
30
- <>
31
- {/* Keep the splash screen open until the assets have loaded. In the future, we should just support async font loading with a native version of font-display. */}
32
- {!loaded && <SplashScreen />}
33
- {loaded && <RootLayoutNav />}
34
- </>
35
- );
32
+ useEffect(() => {
33
+ if (loaded) {
34
+ SplashScreen.hideAsync();
35
+ }
36
+ }, [loaded]);
37
+
38
+ if (!loaded) {
39
+ return null;
40
+ }
41
+
42
+ return <RootLayoutNav />;
36
43
  }
37
44
 
38
45
  function RootLayoutNav() {
39
46
  const colorScheme = useColorScheme();
40
47
 
41
48
  return (
42
- <>
43
- <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
44
- <Stack>
45
- <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
46
- <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
47
- </Stack>
48
- </ThemeProvider>
49
- </>
49
+ <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
50
+ <Stack>
51
+ <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
52
+ <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
53
+ </Stack>
54
+ </ThemeProvider>
50
55
  );
51
56
  }
package/app/modal.tsx CHANGED
@@ -1,8 +1,8 @@
1
1
  import { StatusBar } from 'expo-status-bar';
2
2
  import { Platform, StyleSheet } from 'react-native';
3
3
 
4
- import EditScreenInfo from '../components/EditScreenInfo';
5
- import { Text, View } from '../components/Themed';
4
+ import EditScreenInfo from '@/components/EditScreenInfo';
5
+ import { Text, View } from '@/components/Themed';
6
6
 
7
7
  export default function ModalScreen() {
8
8
  return (
package/app.json CHANGED
@@ -24,7 +24,24 @@
24
24
  },
25
25
  "web": {
26
26
  "bundler": "metro",
27
+ "output": "static",
27
28
  "favicon": "./assets/images/favicon.png"
29
+ },
30
+ "plugins": [
31
+ [
32
+ "expo-router",
33
+ {
34
+ "origin": false,
35
+ "asyncRoutes": {
36
+ "default": "development",
37
+ "android": false
38
+ }
39
+ }
40
+ ]
41
+ ],
42
+ "experiments": {
43
+ "tsconfigPaths": true,
44
+ "typedRoutes": true
28
45
  }
29
46
  }
30
47
  }
package/babel.config.js CHANGED
@@ -1,9 +1,10 @@
1
1
  module.exports = function (api) {
2
2
  api.cache(true);
3
3
  return {
4
- presets: ["babel-preset-expo"],
4
+ presets: ['babel-preset-expo'],
5
5
  plugins: [
6
- require.resolve("expo-router/babel"),
6
+ // Required for expo-router
7
+ 'expo-router/babel',
7
8
  ],
8
9
  };
9
10
  };
package/components/EditScreenInfo.tsx CHANGED
@@ -1,11 +1,12 @@
1
1
  import React from 'react';
2
2
  import { StyleSheet } from 'react-native';
3
3
 
4
- import Colors from '../constants/Colors';
5
4
  import { ExternalLink } from './ExternalLink';
6
5
  import { MonoText } from './StyledText';
7
6
  import { Text, View } from './Themed';
8
7
 
8
+ import Colors from '@/constants/Colors';
9
+
9
10
  export default function EditScreenInfo({ path }: { path: string }) {
10
11
  return (
11
12
  <View>
package/components/ExternalLink.tsx CHANGED
@@ -3,7 +3,9 @@ import * as WebBrowser from 'expo-web-browser';
3
3
  import React from 'react';
4
4
  import { Platform } from 'react-native';
5
5
 
6
- export function ExternalLink(props: React.ComponentProps<typeof Link>) {
6
+ export function ExternalLink(
7
+ props: Omit<React.ComponentProps<typeof Link>, 'href'> & { href: string }
8
+ ) {
7
9
  return (
8
10
  <Link
9
11
  hrefAttrs={{
@@ -11,6 +13,8 @@ export function ExternalLink(props: React.ComponentProps<typeof Link>) {
11
13
  target: '_blank',
12
14
  }}
13
15
  {...props}
16
+ // @ts-expect-error: External URLs are not typed.
17
+ href={props.href}
14
18
  onPress={(e) => {
15
19
  if (Platform.OS !== 'web') {
16
20
  // Prevent the default behavior of linking to the default browser on native.
package/components/Themed.tsx CHANGED
@@ -5,7 +5,15 @@
5
5
 
6
6
  import { Text as DefaultText, useColorScheme, View as DefaultView } from 'react-native';
7
7
 
8
- import Colors from '../constants/Colors';
8
+ import Colors from '@/constants/Colors';
9
+
10
+ type ThemeProps = {
11
+ lightColor?: string;
12
+ darkColor?: string;
13
+ };
14
+
15
+ export type TextProps = ThemeProps & DefaultText['props'];
16
+ export type ViewProps = ThemeProps & DefaultView['props'];
9
17
 
10
18
  export function useThemeColor(
11
19
  props: { light?: string; dark?: string },
@@ -21,14 +29,6 @@ export function useThemeColor(
21
29
  }
22
30
  }
23
31
 
24
- type ThemeProps = {
25
- lightColor?: string;
26
- darkColor?: string;
27
- };
28
-
29
- export type TextProps = ThemeProps & DefaultText['props'];
30
- export type ViewProps = ThemeProps & DefaultView['props'];
31
-
32
32
  export function Text(props: TextProps) {
33
33
  const { style, lightColor, darkColor, ...otherProps } = props;
34
34
  const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
package/metro.config.js ADDED
@@ -0,0 +1,10 @@
1
+ // Learn more https://docs.expo.io/guides/customizing-metro
2
+ const { getDefaultConfig } = require('expo/metro-config');
3
+
4
+ /** @type {import('expo/metro-config').MetroConfig} */
5
+ const config = getDefaultConfig(__dirname, {
6
+ // [Web-only]: Enables CSS support in Metro.
7
+ isCSSEnabled: true,
8
+ });
9
+
10
+ module.exports = config;
package/package.json CHANGED
@@ -1,7 +1,8 @@
1
1
  {
2
2
  "name": "expo-template-tabs",
3
+ "main": "expo-router/entry",
3
4
  "description": "The Tab Navigation project template includes several example screens.",
4
- "version": "49.0.0",
5
+ "version": "49.0.2",
5
6
  "scripts": {
6
7
  "start": "expo start",
7
8
  "android": "expo start --android",
@@ -15,19 +16,19 @@
15
16
  "dependencies": {
16
17
  "@expo/vector-icons": "^13.0.0",
17
18
  "@react-navigation/native": "^6.0.2",
18
- "expo": "~49.0.0-alpha.5",
19
+ "expo": "~49.0.0-alpha.6",
19
20
  "expo-font": "~11.4.0",
20
- "expo-linking": "~5.0.0",
21
+ "expo-linking": "~5.0.1",
21
22
  "expo-splash-screen": "~0.20.0",
22
23
  "expo-status-bar": "~1.6.0",
23
24
  "expo-system-ui": "~2.4.0",
24
25
  "expo-web-browser": "~12.3.0",
25
- "expo-router": "^1.0.0-rc5",
26
+ "expo-router": "^2.0.0-rc.1",
26
27
  "react": "18.2.0",
27
28
  "react-dom": "18.2.0",
28
- "react-native": "0.72.0-rc.6",
29
- "react-native-safe-area-context": "4.5.3",
30
- "react-native-screens": "~3.20.0",
29
+ "react-native": "0.72.0",
30
+ "react-native-safe-area-context": "4.6.3",
31
+ "react-native-screens": "~3.22.0",
31
32
  "react-native-web": "~0.18.10"
32
33
  },
33
34
  "devDependencies": {
@@ -37,5 +38,11 @@
37
38
  "jest-expo": "~48.0.0",
38
39
  "react-test-renderer": "18.2.0",
39
40
  "typescript": "^4.9.4"
41
+ },
42
+ "overrides": {
43
+ "react-refresh": "~0.14.0"
44
+ },
45
+ "resolutions": {
46
+ "react-refresh": "~0.14.0"
40
47
  }
41
48
  }
package/tsconfig.json CHANGED
@@ -1,6 +1,17 @@
1
1
  {
2
2
  "extends": "expo/tsconfig.base",
3
3
  "compilerOptions": {
4
- "strict": true
5
- }
4
+ "strict": true,
5
+ "paths": {
6
+ "@/*": [
7
+ "./*"
8
+ ]
9
+ }
10
+ },
11
+ "include": [
12
+ "**/*.ts",
13
+ "**/*.tsx",
14
+ ".expo/types/**/*.ts",
15
+ "expo-env.d.ts"
16
+ ]
6
17
  }
package/index.ts DELETED
@@ -1 +0,0 @@
1
- import 'expo-router/entry';