@expo/ui 56.0.3 → 56.0.5

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>

package/src/universal/Text/index.tsx

@@ -1,8 +1,15 @@
-import { Text as RNText, useColorScheme, type TextStyle } from 'react-native';
+import { Text as RNText, StyleSheet, useColorScheme } from 'react-native';
 
 import type { TextProps } from './types';
 import { useUniversalLifecycle } from '../hooks';
 
+const styles = StyleSheet.create({
+  light: { color: '#000000' },
+  dark: { color: '#FFFFFF' },
+  hidden: { display: 'none' },
+  disabled: { opacity: 0.5 },
+});
+
 /**
  * A component for displaying styled text content.
  */
@@ -14,56 +21,30 @@ export function Text({
   onPress,
   onAppear,
   onDisappear,
-  disabled,
-  hidden,
+  disabled = false,
+  hidden = false,
   testID,
 }: TextProps) {
   useUniversalLifecycle(onAppear, onDisappear);
 
   const isDarkScheme = useColorScheme() === 'dark';
 
-  const textStyleOverrides: TextStyle = {
-    ...(textStyle?.fontSize != null ? { fontSize: textStyle.fontSize } : undefined),
-    ...(textStyle?.fontWeight != null ? { fontWeight: textStyle.fontWeight } : undefined),
-    ...(textStyle?.fontFamily != null ? { fontFamily: textStyle.fontFamily } : undefined),
-    ...(textStyle?.color != null ? { color: textStyle.color } : undefined),
-    ...(textStyle?.lineHeight != null ? { lineHeight: textStyle.lineHeight } : undefined),
-    ...(textStyle?.letterSpacing != null ? { letterSpacing: textStyle.letterSpacing } : undefined),
-    ...(textStyle?.textAlign != null ? { textAlign: textStyle.textAlign } : undefined),
-  };
-
   return (
     <RNText
-      style={[
-        isDarkScheme ? textDarkStyle : textLightStyle,
-        style,
-        textStyleOverrides,
-        hidden ? hiddenStyle : null,
-        disabled ? disabledStyle : null,
-      ]}
       numberOfLines={numberOfLines}
       onPress={onPress}
       disabled={disabled}
-      testID={testID}>
+      testID={testID}
+      style={[
+        isDarkScheme ? styles.dark : styles.light,
+        style,
+        textStyle,
+        hidden && styles.hidden,
+        disabled && styles.disabled,
+      ]}>
       {children}
     </RNText>
   );
 }
 
-const textLightStyle: TextStyle = {
-  color: '#000000',
-};
-
-const textDarkStyle: TextStyle = {
-  color: '#FFFFFF',
-};
-
-const hiddenStyle: TextStyle = {
-  display: 'none',
-};
-
-const disabledStyle: TextStyle = {
-  opacity: 0.5,
-};
-
 export * from './types';

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.3/expo.modules.ui-56.0.3.module.md5

@@ -1 +0,0 @@
-9a80adc4e838c59474bb9026acd53433

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.3/expo.modules.ui-56.0.3.module.sha1

@@ -1 +0,0 @@
-5a7ca98cf0b7d42beb78532a4de00ee4d1597e6e

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.3/expo.modules.ui-56.0.3.module.sha256

@@ -1 +0,0 @@
-1b1e0569740ff5fbfa0a3412f1efbf8f7a5b3d577239f108ba4a5d51b39d41e6

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.3/expo.modules.ui-56.0.3.module.sha512

@@ -1 +0,0 @@
-5d627db27038fcf6c659f4b5d030a112c19097b15258e490b60da47867204ddffed145a62b649b24be23e8ddb6668b98c31a14059489398be5c8f76782138a82

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.3/expo.modules.ui-56.0.3.pom.md5

@@ -1 +0,0 @@
-0d85db163ef7ad2031fd783734fbbfc2

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.3/expo.modules.ui-56.0.3.pom.sha1

@@ -1 +0,0 @@
-b6801cacf665cc9e2aecf9d0bb04c98f0ed1aa29

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.3/expo.modules.ui-56.0.3.pom.sha256

@@ -1 +0,0 @@
-8879720c37c6bebdc6150d3fed464da86ddcece3b0e75759ce3ab7f48943fe06

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.3/expo.modules.ui-56.0.3.pom.sha512

@@ -1 +0,0 @@
-2ecda699c389b7f19611c8a6c00c5011f69fdfb9d25c02997f93ee1e8037fc441b499a230e68ad1683bd3a3f3b5e08c139e04268319788a2c9852eb148bbb356