@expo/ui 56.0.2 → 56.0.4

package/src/universal/Column/index.tsx

@@ -1,14 +1,23 @@
-import { Pressable, View, type ViewStyle } from 'react-native';
+import { Pressable, StyleSheet, View, type ViewStyle } from 'react-native';
 
 import type { ColumnProps } from './types';
 import { useUniversalLifecycle } from '../hooks';
 import type { UniversalAlignment } from '../types';
 
-const alignmentMap: Record<UniversalAlignment, ViewStyle['alignItems']> = {
-  start: 'flex-start',
-  center: 'center',
-  end: 'flex-end',
-};
+const styles = StyleSheet.create({
+  column: { flexDirection: 'column' },
+  hidden: { display: 'none' },
+  disabled: {
+    opacity: 0.5,
+    pointerEvents: 'none',
+  },
+});
+
+const alignmentStyles = StyleSheet.create({
+  start: { alignItems: 'flex-start' },
+  center: { alignItems: 'center' },
+  end: { alignItems: 'flex-end' },
+} satisfies Record<UniversalAlignment, ViewStyle>);
 
 /**
  * A vertical layout container that arranges its children from top to bottom.
@@ -21,25 +30,27 @@ export function Column({
   onPress,
   onAppear,
   onDisappear,
-  disabled,
-  hidden,
+  disabled = false,
+  hidden = false,
   testID,
 }: ColumnProps) {
   useUniversalLifecycle(onAppear, onDisappear);
 
-  const viewStyle: ViewStyle = {
-    flexDirection: 'column',
-    alignItems: alignmentMap[alignment],
-    gap: spacing,
-    ...style,
-    ...(hidden ? { display: 'none' } : undefined),
-    ...(disabled ? { opacity: 0.5, pointerEvents: 'none' } : undefined),
-  };
-
   const Container = onPress ? Pressable : View;
 
   return (
-    <Container style={viewStyle} onPress={onPress} disabled={disabled} testID={testID}>
+    <Container
+      onPress={onPress}
+      disabled={disabled}
+      testID={testID}
+      style={[
+        styles.column,
+        alignmentStyles[alignment],
+        spacing != null && { gap: spacing },
+        style,
+        hidden && styles.hidden,
+        disabled && styles.disabled,
+      ]}>
       {children}
     </Container>
   );

package/src/universal/FieldGroup/FieldGroup.tsx

@@ -1,9 +1,27 @@
-import { ScrollView, useColorScheme, type ViewStyle } from 'react-native';
+import { ScrollView, StyleSheet, useColorScheme } from 'react-native';
 
 import { groupFieldGroupChildren } from './groupChildren';
 import type { FieldGroupProps } from './types';
 import { useUniversalLifecycle } from '../hooks';
 
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#f2f2f7',
+    flex: 1,
+  },
+  containerDark: {
+    backgroundColor: '#000000',
+  },
+  hidden: {
+    display: 'none',
+  },
+  contentContainer: {
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    gap: 24,
+  },
+});
+
 /**
  * A scrollable container for grouped settings-style rows, mirroring the look
  * of an iOS Settings screen. Render one or more
@@ -16,7 +34,7 @@ export function FieldGroup({
   style,
   onAppear,
   onDisappear,
-  hidden,
+  hidden = false,
   testID,
 }: FieldGroupProps) {
   useUniversalLifecycle(onAppear, onDisappear);
@@ -26,36 +44,14 @@ export function FieldGroup({
   return (
     <ScrollView
       style={[
-        containerBaseStyle,
-        isDarkScheme ? containerDarkStyle : containerLightStyle,
+        styles.container,
+        isDarkScheme && styles.containerDark,
         style,
-        hidden ? hiddenStyle : null,
+        hidden && styles.hidden,
       ]}
-      contentContainerStyle={contentContainerStyle}
+      contentContainerStyle={styles.contentContainer}
       testID={testID}>
       {groupFieldGroupChildren(children)}
     </ScrollView>
   );
 }
-
-const containerBaseStyle: ViewStyle = {
-  flex: 1,
-};
-
-const containerLightStyle: ViewStyle = {
-  backgroundColor: '#f2f2f7',
-};
-
-const containerDarkStyle: ViewStyle = {
-  backgroundColor: '#000000',
-};
-
-const hiddenStyle: ViewStyle = {
-  display: 'none',
-};
-
-const contentContainerStyle: ViewStyle = {
-  paddingHorizontal: 16,
-  paddingVertical: 16,
-  gap: 24,
-};

package/src/universal/FieldGroup/FieldSection.tsx

@@ -1,10 +1,62 @@
 import { Fragment } from 'react';
-import { Text, useColorScheme, View, type TextStyle, type ViewStyle } from 'react-native';
+import { StyleSheet, Text, useColorScheme, View } from 'react-native';
 
 import { extractFieldSectionSlots } from './FieldSectionSlots';
 import type { FieldSectionProps } from './types';
 import { useUniversalLifecycle } from '../hooks';
 
+const styles = StyleSheet.create({
+  hidden: {
+    display: 'none',
+  },
+  headerContainer: {
+    paddingHorizontal: 16,
+    paddingBottom: 8,
+  },
+  headerText: {
+    color: '#6c6c70',
+    fontSize: 14,
+    fontWeight: '500',
+  },
+  headerTextDark: {
+    color: '#98989e',
+  },
+  headerTextUppercase: {
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+    fontSize: 13,
+  },
+  card: {
+    backgroundColor: '#ffffff',
+    borderRadius: 12,
+    overflow: 'hidden',
+  },
+  cardDark: {
+    backgroundColor: '#1c1c1e',
+  },
+  // Gives each row the same minimum height SwiftUI `Form` uses for single-line
+  // rows on iOS, so a text-only row doesn't collapse to its text intrinsic
+  // size. Taller content (e.g. a Switch) grows the row naturally. Horizontal
+  // padding matches SwiftUI `Form`'s built-in row leading/trailing inset.
+  rowWrapper: {
+    minHeight: 44,
+    justifyContent: 'center',
+    paddingHorizontal: 16,
+  },
+  divider: {
+    backgroundColor: '#e5e5ea',
+    height: 1,
+    marginLeft: 16,
+  },
+  dividerDark: {
+    backgroundColor: '#38383a',
+  },
+  footerContainer: {
+    paddingHorizontal: 16,
+    paddingTop: 8,
+  },
+});
+
 /**
  * A grouped list of rows within a [`FieldGroup`](#fieldgroup). Each direct
  * child is rendered as a single row. Use `title` for a simple caption header,
@@ -27,105 +79,35 @@ export function FieldSection({
 
   const { header, footer, rows } = extractFieldSectionSlots(children);
 
-  const containerStyle: ViewStyle = {
-    ...style,
-    ...(hidden ? { display: 'none' } : undefined),
-  };
-
   const headerNode =
     header ??
     (title ? (
       <Text
         style={[
-          headerTextStyle,
-          isDarkScheme ? headerTextDarkStyle : headerTextLightStyle,
-          titleUppercase ? headerTextUppercaseStyle : null,
+          styles.headerText,
+          isDarkScheme && styles.headerTextDark,
+          titleUppercase && styles.headerTextUppercase,
         ]}>
         {title}
       </Text>
     ) : null);
 
   return (
-    <View style={containerStyle} testID={testID}>
-      {headerNode ? <View style={headerContainerStyle}>{headerNode}</View> : null}
+    <View style={[style, hidden && styles.hidden]} testID={testID}>
+      {headerNode ? <View style={styles.headerContainer}>{headerNode}</View> : null}
       {rows.length > 0 ? (
-        <View style={[cardBaseStyle, isDarkScheme ? cardDarkStyle : cardLightStyle]}>
+        <View style={[styles.card, isDarkScheme && styles.cardDark]}>
           {rows.map((child, index) => (
             <Fragment key={index}>
-              <View style={rowWrapperStyle}>{child}</View>
+              <View style={styles.rowWrapper}>{child}</View>
               {index < rows.length - 1 ? (
-                <View style={[dividerStyle, isDarkScheme ? dividerDarkStyle : dividerLightStyle]} />
+                <View style={[styles.divider, isDarkScheme && styles.dividerDark]} />
               ) : null}
             </Fragment>
           ))}
         </View>
       ) : null}
-      {footer ? <View style={footerContainerStyle}>{footer}</View> : null}
+      {footer ? <View style={styles.footerContainer}>{footer}</View> : null}
     </View>
   );
 }
-
-const headerContainerStyle: ViewStyle = {
-  paddingHorizontal: 16,
-  paddingBottom: 8,
-};
-
-const headerTextStyle: TextStyle = {
-  fontSize: 14,
-  fontWeight: '500',
-};
-
-const headerTextLightStyle: TextStyle = {
-  color: '#6c6c70',
-};
-
-const headerTextDarkStyle: TextStyle = {
-  color: '#98989e',
-};
-
-const headerTextUppercaseStyle: TextStyle = {
-  textTransform: 'uppercase',
-  letterSpacing: 0.5,
-  fontSize: 13,
-};
-
-const cardBaseStyle: ViewStyle = {
-  borderRadius: 12,
-  overflow: 'hidden',
-};
-
-const cardLightStyle: ViewStyle = {
-  backgroundColor: '#ffffff',
-};
-
-const cardDarkStyle: ViewStyle = {
-  backgroundColor: '#1c1c1e',
-};
-
-// Gives each row the same minimum height SwiftUI `Form` uses for single-line
-// rows on iOS, so a text-only row doesn't collapse to its text intrinsic
-// size. Taller content (e.g. a Switch) grows the row naturally. Horizontal
-// padding matches SwiftUI `Form`'s built-in row leading/trailing inset.
-const rowWrapperStyle: ViewStyle = {
-  minHeight: 44,
-  justifyContent: 'center',
-  paddingHorizontal: 16,
-};
-
-const dividerStyle: ViewStyle = {
-  height: 1,
-  marginLeft: 16,
-};
-
-const dividerLightStyle: ViewStyle = {
-  backgroundColor: '#e5e5ea',
-};
-
-const dividerDarkStyle: ViewStyle = {
-  backgroundColor: '#38383a',
-};
-
-const footerContainerStyle: ViewStyle = {
-  paddingHorizontal: 16,
-  paddingTop: 8,
-};

package/src/universal/Row/index.tsx

@@ -1,14 +1,31 @@
-import { Pressable, View, type ViewStyle } from 'react-native';
+import { Pressable, StyleSheet, View, type ViewStyle } from 'react-native';
 
 import type { RowProps } from './types';
 import { useUniversalLifecycle } from '../hooks';
 import type { UniversalAlignment } from '../types';
 
-const alignmentMap: Record<UniversalAlignment, ViewStyle['alignItems']> = {
-  start: 'flex-start',
-  center: 'center',
-  end: 'flex-end',
-};
+const styles = StyleSheet.create({
+  row: {
+    // Fill the parent's cross-axis by default so a `<Spacer flexible />`
+    // child has room to grow. Without this, a Row placed inside a `Column`
+    // with alignment other than 'stretch' is content-sized on web, which
+    // leaves flex children with no leftover space. SwiftUI and Compose
+    // achieve the same effect via their own layout phases.
+    alignSelf: 'stretch',
+    flexDirection: 'row',
+  },
+  hidden: { display: 'none' },
+  disabled: {
+    opacity: 0.5,
+    pointerEvents: 'none',
+  },
+});
+
+const alignmentStyles = StyleSheet.create({
+  start: { alignItems: 'flex-start' },
+  center: { alignItems: 'center' },
+  end: { alignItems: 'flex-end' },
+} satisfies Record<UniversalAlignment, ViewStyle>);
 
 /**
  * A horizontal layout container that arranges its children from start to end.
@@ -21,31 +38,27 @@ export function Row({
   onPress,
   onAppear,
   onDisappear,
-  disabled,
-  hidden,
+  disabled = false,
+  hidden = false,
   testID,
 }: RowProps) {
   useUniversalLifecycle(onAppear, onDisappear);
 
-  const viewStyle: ViewStyle = {
-    // Fill the parent's cross-axis by default so a `<Spacer flexible />`
-    // child has room to grow. Without this, a Row placed inside a `Column`
-    // with alignment other than 'stretch' is content-sized on web, which
-    // leaves flex children with no leftover space. SwiftUI and Compose
-    // achieve the same effect via their own layout phases.
-    alignSelf: 'stretch',
-    flexDirection: 'row',
-    alignItems: alignmentMap[alignment],
-    gap: spacing,
-    ...style,
-    ...(hidden ? { display: 'none' } : undefined),
-    ...(disabled ? { opacity: 0.5, pointerEvents: 'none' } : undefined),
-  };
-
   const Container = onPress ? Pressable : View;
 
   return (
-    <Container style={viewStyle} onPress={onPress} disabled={disabled} testID={testID}>
+    <Container
+      onPress={onPress}
+      disabled={disabled}
+      testID={testID}
+      style={[
+        styles.row,
+        alignmentStyles[alignment],
+        spacing != null && { gap: spacing },
+        style,
+        hidden && styles.hidden,
+        disabled && styles.disabled,
+      ]}>
       {children}
     </Container>
   );

package/src/universal/ScrollView/index.tsx

@@ -1,8 +1,23 @@
-import { ScrollView as RNScrollView, type ViewStyle } from 'react-native';
+import { ScrollView as RNScrollView, StyleSheet } from 'react-native';
 
 import type { ScrollViewProps } from './types';
 import { useUniversalLifecycle } from '../hooks';
 
+const styles = StyleSheet.create({
+  container: {
+    // Constrain to viewport width so horizontal content overflows and scrolls
+    // instead of expanding the parent layout.
+    // @ts-expect-error
+    maxWidth: '100vw',
+  },
+  noGrow: { flexGrow: 0 },
+  hidden: { display: 'none' },
+  disabled: {
+    opacity: 0.5,
+    pointerEvents: 'none',
+  },
+});
+
 /**
  * A scrollable container that supports vertical or horizontal scrolling.
  */
@@ -15,24 +30,14 @@ export function ScrollView({
   // API compatibility but silently ignored (RN ScrollView has no press handler).
   onAppear,
   onDisappear,
-  disabled,
-  hidden,
+  disabled = false,
+  hidden = false,
   testID,
 }: ScrollViewProps) {
   useUniversalLifecycle(onAppear, onDisappear);
 
   const isHorizontal = direction === 'horizontal';
 
-  const containerStyle: ViewStyle = {
-    // Constrain to viewport width so horizontal content overflows and scrolls
-    // instead of expanding the parent layout.
-    maxWidth: '100vw' as any,
-    ...style,
-    ...(style?.height != null ? { flexGrow: 0 } : undefined),
-    ...(hidden ? { display: 'none' } : undefined),
-    ...(disabled ? { opacity: 0.5, pointerEvents: 'none' } : undefined),
-  };
-
   // react-native-web does not support separate vertical and horizontal indicator props,
   // so we map both to its single `showsIndicators` prop.
   const showVerticalIndicator = showsIndicators;
@@ -43,9 +48,15 @@ export function ScrollView({
       horizontal={isHorizontal}
       showsVerticalScrollIndicator={showVerticalIndicator}
       showsHorizontalScrollIndicator={showHorizontalIndicator}
-      style={containerStyle}
       nestedScrollEnabled
-      testID={testID}>
+      testID={testID}
+      style={[
+        styles.container,
+        style,
+        style?.height != null && styles.noGrow,
+        hidden && styles.hidden,
+        disabled && styles.disabled,
+      ]}>
       {children}
     </RNScrollView>
   );

package/src/universal/Slider/index.tsx

@@ -1,7 +1,23 @@
-import { View, type ViewStyle } from 'react-native';
+import type { ComponentProps } from 'react';
+import { StyleSheet, unstable_createElement, View, type ViewProps } from 'react-native';
 
 import type { SliderProps } from './types';
 
+const styles = StyleSheet.create({
+  view: {
+    alignSelf: 'stretch',
+    justifyContent: 'center',
+  },
+  input: {
+    width: '100%',
+    cursor: 'pointer',
+  },
+});
+
+const NativeSlider = (
+  props: Omit<ComponentProps<'input'>, 'style' | 'type'> & { style?: ViewProps['style'] }
+) => unstable_createElement('input', { ...props, type: 'range' });
+
 /**
  * A control for selecting a value from a continuous or stepped range.
  */
@@ -11,13 +27,12 @@ export function Slider({
   min = 0,
   max = 1,
   step,
-  disabled,
+  disabled = false,
   testID,
 }: SliderProps) {
   return (
-    <View style={containerStyle}>
-      <input
-        type="range"
+    <View style={styles.view}>
+      <NativeSlider
         value={value}
         min={min}
         max={max}
@@ -25,20 +40,10 @@ export function Slider({
         disabled={disabled}
         onChange={(e) => onValueChange(parseFloat(e.target.value))}
         data-testid={testID}
-        style={inputStyle}
+        style={styles.input}
       />
     </View>
   );
 }
 
-const containerStyle: ViewStyle = {
-  alignSelf: 'stretch',
-  justifyContent: 'center',
-};
-
-const inputStyle: React.CSSProperties = {
-  width: '100%',
-  cursor: 'pointer',
-};
-
 export * from './types';

package/src/universal/Spacer/index.tsx

@@ -1,8 +1,13 @@
-import { View, type ViewStyle } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 import type { SpacerProps } from './types';
 import { useUniversalLifecycle } from '../hooks';
 
+const styles = StyleSheet.create({
+  flexible: { flex: 1 },
+  hidden: { display: 'none' },
+});
+
 /**
  * A layout spacer that produces empty space between siblings in a
  * `Row` or `Column`.
@@ -13,19 +18,22 @@ export function Spacer({
   style,
   onAppear,
   onDisappear,
-  hidden,
+  hidden = false,
   testID,
 }: SpacerProps) {
   useUniversalLifecycle(onAppear, onDisappear);
 
-  const viewStyle: ViewStyle = {
-    ...(flexible ? { flex: 1 } : undefined),
-    ...(size != null ? { width: size, height: size } : undefined),
-    ...style,
-    ...(hidden ? { display: 'none' } : undefined),
-  };
-
-  return <View style={viewStyle} testID={testID} />;
+  return (
+    <View
+      testID={testID}
+      style={[
+        flexible && styles.flexible,
+        size != null && { width: size, height: size },
+        style,
+        hidden && styles.hidden,
+      ]}
+    />
+  );
 }
 
 export * from './types';

package/src/universal/Switch/index.tsx

@@ -1,21 +1,26 @@
-import { Switch as RNSwitch, View, Text } from 'react-native';
+import { Switch as RNSwitch, View, Text, StyleSheet } from 'react-native';
 
 import type { SwitchProps } from './types';
 
+const styles = StyleSheet.create({
+  view: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 8,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+});
+
 /**
  * A toggle control that switches between on and off states.
  */
-export function Switch({ value, onValueChange, label, disabled, testID }: SwitchProps) {
+export function Switch({ value, onValueChange, label, disabled = false, testID }: SwitchProps) {
   if (label) {
     return (
-      <View
-        style={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          gap: 8,
-          opacity: disabled ? 0.5 : 1,
-        }}>
+      <View style={[styles.view, disabled && styles.disabled]}>
         <Text>{label}</Text>
         <RNSwitch value={value} onValueChange={onValueChange} disabled={disabled} testID={testID} />
       </View>