expo-template-default 51.0.9 → 51.0.10

package/app/(tabs)/explore.tsx

@@ -72,8 +72,8 @@ export default function TabTwoScreen() {
         <ThemedText>
           This template includes an example of an animated component. The{' '}
           <ThemedText type="defaultSemiBold">components/HelloWave.tsx</ThemedText> component uses
-          the <ThemedText type="defaultSemiBold">Animated</ThemedText> API to create a waving hand
-          animation.
+          the powerful <ThemedText type="defaultSemiBold">react-native-reanimated</ThemedText> library
+          to create a waving hand animation.
         </ThemedText>
         {Platform.select({
           ios: (

package/app/(tabs)/index.tsx

@@ -1,9 +1,9 @@
 import { Image, StyleSheet, Platform } from 'react-native';
 
+import { HelloWave } from '@/components/HelloWave';
 import ParallaxScrollView from '@/components/ParallaxScrollView';
 import { ThemedText } from '@/components/ThemedText';
 import { ThemedView } from '@/components/ThemedView';
-import { HelloWave } from '@/components/HelloWave';
 
 export default function HomeScreen() {
   return (
@@ -58,6 +58,7 @@ const styles = StyleSheet.create({
   },
   stepContainer: {
     gap: 8,
+    marginBottom: 8,
   },
   reactLogo: {
     height: 178,

package/components/Collapsible.tsx

@@ -23,7 +23,7 @@ export function Collapsible({ children, title }: PropsWithChildren & { title: st
         />
         <ThemedText type="defaultSemiBold">{title}</ThemedText>
       </TouchableOpacity>
-      <ThemedView style={styles.content}>{isOpen ? children : null}</ThemedView>
+      {isOpen && <ThemedView style={styles.content}>{children}</ThemedView>}
     </ThemedView>
   );
 }
@@ -32,9 +32,10 @@ const styles = StyleSheet.create({
   heading: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: 4,
+    gap: 6,
   },
   content: {
+    marginTop: 6,
     marginLeft: 24,
   },
 });

package/components/ExternalLink.tsx

@@ -1,23 +1,22 @@
 import { Link } from 'expo-router';
-import * as WebBrowser from 'expo-web-browser';
-import React from 'react';
+import { openBrowserAsync } from 'expo-web-browser';
+import { type ComponentProps } from 'react';
 import { Platform } from 'react-native';
 
-export function ExternalLink(
-  props: Omit<React.ComponentProps<typeof Link>, 'href'> & { href: string }
-) {
+type Props = Omit<ComponentProps<typeof Link>, 'href'> & { href: string };
+
+export function ExternalLink({ href, ...rest }: Props) {
   return (
     <Link
       target="_blank"
-      {...props}
-      // @ts-expect-error: External URLs are not typed.
-      href={props.href}
-      onPress={(e) => {
+      {...rest}
+      href={href}
+      onPress={async (event) => {
         if (Platform.OS !== 'web') {
           // Prevent the default behavior of linking to the default browser on native.
-          e.preventDefault();
+          event.preventDefault();
           // Open the link in an in-app browser.
-          WebBrowser.openBrowserAsync(props.href as string);
+          await openBrowserAsync(href);
         }
       }}
     />

package/components/ParallaxScrollView.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren, ReactElement } from 'react';
 import { StyleSheet, useColorScheme } from 'react-native';
 import Animated, {
   interpolate,
@@ -11,15 +11,17 @@ import { ThemedView } from '@/components/ThemedView';
 
 const HEADER_HEIGHT = 250;
 
+type Props = PropsWithChildren<{
+  headerImage: ReactElement;
+  headerBackgroundColor: { dark: string; light: string };
+}>;
+
 export default function ParallaxScrollView({
   children,
   headerImage,
   headerBackgroundColor,
-}: PropsWithChildren<{
-  headerImage: React.ReactElement;
-  headerBackgroundColor: { dark: string; light: string };
-}>) {
-  const colorScheme = useColorScheme() || 'light';
+}: Props) {
+  const colorScheme = useColorScheme() ?? 'light';
   const scrollRef = useAnimatedRef<Animated.ScrollView>();
   const scrollOffset = useScrollViewOffset(scrollRef);
 
@@ -68,9 +70,7 @@ const styles = StyleSheet.create({
   content: {
     flex: 1,
     padding: 32,
-    gap: 24,
-    borderRadius: 16,
+    gap: 16,
     overflow: 'hidden',
-    marginTop: -12,
   },
 });

package/components/ThemedText.tsx

@@ -1,14 +1,20 @@
-import { Text, StyleSheet } from 'react-native';
+import { Text, type TextProps, StyleSheet } from 'react-native';
 
 import { useThemeColor } from '@/hooks/useThemeColor';
 
-export type TextProps = {
+export type ThemedTextProps = TextProps & {
   lightColor?: string;
   darkColor?: string;
-} & { type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link' } & Text['props'];
+  type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
+};
 
-export function ThemedText(props: TextProps) {
-  const { style, lightColor, darkColor, type = 'default', ...otherProps } = props;
+export function ThemedText({
+  style,
+  lightColor,
+  darkColor,
+  type = 'default',
+  ...rest
+}: ThemedTextProps) {
   const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
 
   return (
@@ -22,7 +28,7 @@ export function ThemedText(props: TextProps) {
         type === 'link' ? styles.link : undefined,
         style,
       ]}
-      {...otherProps}
+      {...rest}
     />
   );
 }
@@ -49,6 +55,6 @@ const styles = StyleSheet.create({
   link: {
     lineHeight: 30,
     fontSize: 16,
-    color: '#2e78b7',
+    color: '#0a7ea4',
   },
 });

package/components/ThemedView.tsx

@@ -1,14 +1,13 @@
-import { View } from 'react-native';
+import { View, type ViewProps } from 'react-native';
 
 import { useThemeColor } from '@/hooks/useThemeColor';
 
-export type ViewProps = {
+export type ThemedViewProps = ViewProps & {
   lightColor?: string;
   darkColor?: string;
-} & View['props'];
+};
 
-export function ThemedView(props: ViewProps) {
-  const { style, lightColor, darkColor, ...otherProps } = props;
+export function ThemedView({ style, lightColor, darkColor, ...otherProps }: ThemedViewProps) {
   const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background');
 
   return <View style={[{ backgroundColor }, style]} {...otherProps} />;

package/components/navigation/TabBarIcon.tsx

@@ -1,11 +1,9 @@
 // You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
 
 import Ionicons from '@expo/vector-icons/Ionicons';
+import { type IconProps } from '@expo/vector-icons/build/createIconSet';
 import { type ComponentProps } from 'react';
 
-export function TabBarIcon(props: {
-  name: ComponentProps<typeof Ionicons>['name'];
-  color: string;
-}) {
-  return <Ionicons size={28} style={{ marginBottom: -3 }} {...props} />;
+export function TabBarIcon({ style, ...rest }: IconProps<ComponentProps<typeof Ionicons>['name']>) {
+  return <Ionicons size={28} style={[{ marginBottom: -3 }, style]} {...rest} />;
 }

package/hooks/useThemeColor.ts

@@ -1,9 +1,10 @@
 /**
  * Learn more about light and dark modes:
- * https://docs.expo.io/guides/color-schemes/
+ * https://docs.expo.dev/guides/color-schemes/
  */
 
 import { useColorScheme } from 'react-native';
+
 import { Colors } from '@/constants/Colors';
 
 export function useThemeColor(

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "expo-template-default",
   "main": "expo-router/entry",
-  "version": "51.0.9",
+  "version": "51.0.10",
   "scripts": {
     "start": "expo start",
     "reset-project": "./scripts/reset-project.js",
@@ -17,11 +17,11 @@
   "dependencies": {
     "@expo/vector-icons": "^14.0.0",
     "@react-navigation/native": "^6.0.2",
-    "expo": "~51.0.0-preview.6",
+    "expo": "~51.0.0-preview.7",
     "expo-constants": "~16.0.1",
     "expo-font": "~12.0.4",
     "expo-linking": "~6.3.1",
-    "expo-router": "~3.5.3",
+    "expo-router": "~3.5.4",
     "expo-splash-screen": "~0.27.2",
     "expo-status-bar": "~1.12.1",
     "expo-system-ui": "~3.0.2",