@expo/ui 56.0.16 → 56.0.18

package/src/universal/TextInput/index.android.tsx

@@ -1,5 +1,6 @@
 import {
-  TextField as ComposeTextField,
+  BasicTextField,
+  Box,
   Text,
   type TextFieldImeAction,
   type TextFieldKeyboardType,
@@ -97,8 +98,6 @@ export function TextInput({
   const numberOfLines = numberOfLinesProp ?? rows;
   const keyboardType = keyboardTypeProp ?? inputModeToKeyboardType(inputMode);
   const returnKeyType = returnKeyTypeProp ?? enterKeyHintToReturnKeyType(enterKeyHint);
-  const { backgroundColor: styleBackgroundColor, ...boxStyle } = style ?? {};
-  const hideIndicator = boxStyle.borderWidth === 0 && underlineColorAndroid == null;
 
   const initialFallbackRef = useRef(defaultValue ?? '');
   const fallback = useNativeState<string>(initialFallbackRef.current);
@@ -156,11 +155,11 @@ export function TextInput({
     : undefined;
 
   return (
-    <ComposeTextField
+    <BasicTextField
       ref={innerRef}
       modifiers={[
         ...(userModifiers ?? []),
-        ...transformToModifiers(boxStyle, {}),
+        ...transformToModifiers(style, {}),
         ...(testID ? [testIDModifier(testID)] : []),
         ...(autoComplete ? [semantics({ contentType: autoComplete })] : []),
         ...(onContentSizeChange ? [onSizeChanged(onContentSizeChange)] : []),
@@ -171,50 +170,7 @@ export function TextInput({
       singleLine={!multiline}
       maxLines={multiline && numberOfLines && numberOfLines > 0 ? numberOfLines : undefined}
       minLines={multiline && numberOfLines && numberOfLines > 0 ? numberOfLines : undefined}
-      colors={
-        caretHidden ||
-        cursorColor ||
-        underlineColorAndroid ||
-        placeholderTextColor ||
-        styleBackgroundColor ||
-        hideIndicator
-          ? {
-              ...(caretHidden
-                ? { cursorColor: 'transparent' }
-                : cursorColor
-                  ? { cursorColor }
-                  : null),
-              ...(styleBackgroundColor
-                ? {
-                    focusedContainerColor: styleBackgroundColor,
-                    unfocusedContainerColor: styleBackgroundColor,
-                    disabledContainerColor: styleBackgroundColor,
-                    errorContainerColor: styleBackgroundColor,
-                  }
-                : null),
-              ...(underlineColorAndroid
-                ? {
-                    unfocusedIndicatorColor: underlineColorAndroid,
-                    focusedIndicatorColor: underlineColorAndroid,
-                  }
-                : hideIndicator
-                  ? {
-                      focusedIndicatorColor: 'transparent',
-                      unfocusedIndicatorColor: 'transparent',
-                      disabledIndicatorColor: 'transparent',
-                      errorIndicatorColor: 'transparent',
-                    }
-                  : null),
-              ...(placeholderTextColor
-                ? {
-                    unfocusedPlaceholderColor: placeholderTextColor,
-                    focusedPlaceholderColor: placeholderTextColor,
-                    disabledPlaceholderColor: placeholderTextColor,
-                  }
-                : null),
-            }
-          : undefined
-      }
+      cursorColor={caretHidden ? 'transparent' : (cursorColor ?? selectionColor)}
       textStyle={
         textStyle || (textAlign && textAlign !== 'auto')
           ? {
@@ -237,18 +193,28 @@ export function TextInput({
       onValueChange={onChangeText}
       maxLength={maxLength}
       onFocusChanged={handleFocusChanged}
-      selection={selection as Parameters<typeof ComposeTextField>[0]['selection']}
+      selection={selection as Parameters<typeof BasicTextField>[0]['selection']}
       onSelectionChange={onSelectionChange}>
-      {placeholder ? (
-        <ComposeTextField.Placeholder>
-          <Text
-            modifiers={[fillMaxWidth()]}
-            style={textAlign && textAlign !== 'auto' ? { textAlign } : undefined}>
-            {placeholder}
-          </Text>
-        </ComposeTextField.Placeholder>
-      ) : null}
-    </ComposeTextField>
+      <BasicTextField.DecorationBox>
+        <Box
+          modifiers={[fillMaxWidth()]}
+          contentAlignment={
+            textAlign === 'center' ? 'topCenter' : textAlign === 'right' ? 'topEnd' : undefined
+          }>
+          {placeholder != null ? (
+            <BasicTextField.Placeholder>
+              <Text
+                color={placeholderTextColor as string | undefined}
+                modifiers={[fillMaxWidth()]}
+                style={textAlign && textAlign !== 'auto' ? { textAlign } : undefined}>
+                {placeholder}
+              </Text>
+            </BasicTextField.Placeholder>
+          ) : null}
+          <BasicTextField.InnerTextField />
+        </Box>
+      </BasicTextField.DecorationBox>
+    </BasicTextField>
   );
 }
 

package/src/universal/TextInput/types.ts

@@ -194,7 +194,11 @@ export interface TextInputProps {
   rows?: number;
 
   /**
-   * Color of the underline indicator on Android. iOS / web ignore this.
+   * Color of the underline indicator on Android.
+   *
+   * @deprecated The Android `TextInput` renders an unstyled `BasicTextField` that
+   * has no underline indicator, so this has no effect. To draw your own border,
+   * pass it through `style` or `modifiers`.
    * @platform android
    */
   underlineColorAndroid?: ColorValue;

package/src/universal/modifierUtils.ts

@@ -0,0 +1,23 @@
+import type { ModifierConfig } from '../types';
+
+/**
+ * Drops derived modifiers that the user overrides through the `modifiers`
+ * escape hatch. A user-supplied modifier takes ownership of its `$type`, so
+ * the component skips the modifier of that type it would otherwise derive
+ * from `style`, `variant`, and similar props.
+ *
+ * Only pass style-derived modifiers as `derived`. Modifiers backing
+ * functional props (for example `onPress`, `onAppear`, `disabled`) must not
+ * go through this filter, or a user modifier of the same type would silently
+ * disable the prop.
+ */
+export function omitUserOverridden<T extends { $type: string }>(
+  derived: T[],
+  userModifiers?: readonly ModifierConfig[]
+): T[] {
+  if (!userModifiers?.length) {
+    return derived;
+  }
+  const userTypes = new Set(userModifiers.map((modifier) => modifier.$type));
+  return derived.filter((modifier) => !userTypes.has(modifier.$type));
+}

package/src/universal/transformStyle.android.ts

@@ -14,6 +14,7 @@ import {
   type ModifierConfig,
 } from '@expo/ui/jetpack-compose/modifiers';
 
+import { omitUserOverridden } from './modifierUtils';
 import type { UniversalBaseProps, UniversalStyle } from './types';
 
 /**
@@ -24,13 +25,16 @@ import type { UniversalBaseProps, UniversalStyle } from './types';
  * box model where background includes the padding area and border is outermost:
  *   sizing → border → clip → background → padding → opacity
  *   → events → behavior → user escape-hatch
+ *
+ * Style-derived modifiers yield to user-supplied modifiers of the same
+ * `$type`, so the escape hatch can override anything derived from props.
  */
 export function transformToModifiers(
   style: UniversalStyle | undefined,
   props: Pick<UniversalBaseProps, 'onPress' | 'disabled' | 'hidden' | 'testID'>,
   extraModifiers?: ModifierConfig[]
 ): ModifierConfig[] {
-  const mods: ModifierConfig[] = [];
+  let mods: ModifierConfig[] = [];
 
   if (style) {
     // Sizing (outermost)
@@ -95,6 +99,10 @@ export function transformToModifiers(
     }
   }
 
+  // A user-supplied modifier replaces any style-derived modifier of the same
+  // type. The event and behavior modifiers below are never dropped.
+  mods = omitUserOverridden(mods, extraModifiers);
+
   // Events — Compose uses clickable modifier
   if (props.onPress) mods.push(clickable(props.onPress));
 

package/src/universal/transformStyle.ios.ts

@@ -19,6 +19,7 @@ import {
 } from '@expo/ui/swift-ui/modifiers';
 
 import type { UniversalTextStyle } from './Text/types';
+import { omitUserOverridden } from './modifierUtils';
 import type { UniversalBaseProps, UniversalStyle } from './types';
 
 const FONT_WEIGHT_MAP: Record<string, Parameters<typeof font>[0]['weight']> = {
@@ -43,6 +44,9 @@ const FONT_WEIGHT_MAP: Record<string, Parameters<typeof font>[0]['weight']> = {
  * To match React Native's box model (background fills the full box):
  *   padding → sizing → background → clip → border → opacity
  *   → events → lifecycle → behavior → user escape-hatch
+ *
+ * Style-derived modifiers yield to user-supplied modifiers of the same
+ * `$type`, so the escape hatch can override anything derived from props.
  */
 export function transformToModifiers(
   style: UniversalStyle | undefined,
@@ -58,7 +62,7 @@ export function transformToModifiers(
     textStyle?: UniversalTextStyle;
   }
 ): ModifierConfig[] {
-  const mods: ModifierConfig[] = [];
+  let mods: ModifierConfig[] = [];
 
   // Text styling (innermost — applies to text content before container modifiers)
   const textStyle = options?.textStyle;
@@ -146,6 +150,10 @@ export function transformToModifiers(
     }
   }
 
+  // A user-supplied modifier replaces any style-derived modifier of the same
+  // type. The event, lifecycle, and behavior modifiers below are never dropped.
+  mods = omitUserOverridden(mods, extraModifiers);
+
   // Events
   if (props.onPress) mods.push(onTapGesture(props.onPress));
 

package/src/universal/types.ts

@@ -44,6 +44,8 @@ export interface UniversalBaseProps {
   /**
    * Platform-specific modifier escape hatch. Pass an array of modifier configs
    * from `@expo/ui/swift-ui/modifiers` or `@expo/ui/jetpack-compose/modifiers`.
+   * A modifier supplied here replaces any modifier of the same type that the
+   * component derives from `style` or other props.
    * @platform android
    * @platform ios
    */

package/android/src/main/java/expo/modules/ui/ShadowNodeSyncFlush.kt

@@ -1,28 +0,0 @@
-package expo.modules.ui
-
-import android.view.View
-import com.facebook.react.bridge.Arguments
-import com.facebook.react.bridge.ReactContext
-import com.facebook.react.bridge.WritableMap
-import com.facebook.react.uimanager.UIManagerHelper
-import com.facebook.react.uimanager.events.Event
-
-// Workaround helper that triggers a synchronous event to flush a pending
-// shadow-node state update in the current event beat. Mirrors iOS's
-// `EventQueue::UpdateMode::unstable_Immediate`, which Android does not expose
-// to Java/Kotlin as of now.
-// TODO: Remove when a synchronous state update API is exposed on Android.
-// https://github.com/facebook/react-native/pull/56311
-internal fun View.flushPendingStateUpdates() {
-  val reactContext = context as? ReactContext ?: return
-  val surfaceId = UIManagerHelper.getSurfaceId(this)
-  UIManagerHelper.getEventDispatcherForReactTag(reactContext, id)
-    ?.dispatchEvent(SyncFlushEvent(surfaceId, id))
-}
-
-private class SyncFlushEvent(surfaceId: Int, viewTag: Int) : Event<SyncFlushEvent>(surfaceId, viewTag) {
-  override fun getEventName(): String = "topExpoUISyncFlush"
-  override fun getEventData(): WritableMap = Arguments.createMap()
-  override fun canCoalesce(): Boolean = true
-  override fun experimental_isSynchronous(): Boolean = true
-}

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.16/expo.modules.ui-56.0.16-sources.jar.md5

@@ -1 +0,0 @@
-930e8ab7442da199117ed6e88be44b5b

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.16/expo.modules.ui-56.0.16-sources.jar.sha1

@@ -1 +0,0 @@
-4ed8efb025b6e6c393bc9c3f5f13f3c28bedda50

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.16/expo.modules.ui-56.0.16-sources.jar.sha256

@@ -1 +0,0 @@
-869fc2b13a7487be231ecffde437bf73d138786f9d20b04d843c59c2d95f376c

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.16/expo.modules.ui-56.0.16-sources.jar.sha512

@@ -1 +0,0 @@
-84b9331a94360a66891a0d1d33f82f6b9e90df27e7b209774b02a9a3732dafa4d58bb800952273b60d2c3a4b5c102dbc03ac418bc6123c33b39da4c515f5c2ea

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.16/expo.modules.ui-56.0.16.aar.md5

@@ -1 +0,0 @@
-86b861e8240bfa02ed19115b82f2191b

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.16/expo.modules.ui-56.0.16.aar.sha1

@@ -1 +0,0 @@
-12ad717dbdbff8ac4cf80073d6ce7996265718cc

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.16/expo.modules.ui-56.0.16.aar.sha256

@@ -1 +0,0 @@
-d3b7205e40a307e5b1e4c3e9cb1a067fdef2c1b49984e9df3222448c856b55a2

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.16/expo.modules.ui-56.0.16.aar.sha512

@@ -1 +0,0 @@
-0a92657dee5473065082fc5fa71f484a728b7f3a1ef0a8a80144ae17a1c71fffc60a6dd98a8c9e932eca828a2258a29df0529f471a1c6ee4503bc0ff7f46705d

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

@@ -1 +0,0 @@
-76b22d8101716780ce269a9c780a39f3

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

@@ -1 +0,0 @@
-a5ec14f774ba7cbc4f094af1684ea54873600661

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

@@ -1 +0,0 @@
-47111fef1e88685da6b2a1018c17235ccf956aa41eb1f8d1fdde4cbe7df86f80

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

@@ -1 +0,0 @@
-9266793e40dca55e2a32d8aea44e3428f82f69f0c0d3f696de7fa38ab9ea5fdaabd237173b0a810e5920eebf3f1d132d38bb058d8ef27061220dccc8aff00727

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

@@ -1 +0,0 @@
-5cf4b923e1b075be2708700c5db82342

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

@@ -1 +0,0 @@
-49737ff4ff40390e2e7c5828b663ee45ab9556bc

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

@@ -1 +0,0 @@
-4932698b7ce04c8c5f3fabfbc39b79826395202f6c0cc3ab57f90ff1081a0208

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

@@ -1 +0,0 @@
-ccd7c8e428bea422d337383c18e11ceefad80526b9b8fcf1daa4c5f55bb8008b3426dfaf3fe9ee49bbac0ba2eb347f520a0eee6cc3c8ee71af0ab3203a47ff0d