Skip to content

[ios][ui] Add per-axis scaleEffect support to view modifiers#43228

Merged
amandeepmittal merged 4 commits intoexpo:mainfrom
ramonclaudio:feat/expo-ui-list-inverted
Feb 20, 2026
Merged

[ios][ui] Add per-axis scaleEffect support to view modifiers#43228
amandeepmittal merged 4 commits intoexpo:mainfrom
ramonclaudio:feat/expo-ui-list-inverted

Conversation

@ramonclaudio
Copy link
Copy Markdown
Contributor

@ramonclaudio ramonclaudio commented Feb 18, 2026

scaleEffect now takes number | { x: number; y: number }. When passed a number, TS normalizes it to { x, y } before hitting native. Swift side is a straight pass-through to content.scaleEffect(x: x, y: y). Same structure as OffsetModifier (non-optional @Field vars with identity defaults, single-line body).

Usage: Inverted List

Flip the List vertically, flip each row back, reverse the data — messages anchor to the bottom and new content pushes up naturally:

import { Group, HStack, List, Spacer, Text } from "@expo/ui/swift-ui";
import { listStyle, scaleEffect, scrollContentBackground } from "@expo/ui/swift-ui/modifiers";

function MessageList({ messages }: { messages: { id: string; text: string }[] }) {
  return (
    <List
      modifiers={[
        listStyle("plain"),
        scrollContentBackground("hidden"),
        scaleEffect({ x: 1, y: -1 }),
      ]}
    >
      {[...messages].reverse().map((msg) => (
        <Group key={msg.id} modifiers={[scaleEffect({ x: 1, y: -1 })]}>
          <HStack>
            <Text>{msg.text}</Text>
            <Spacer />
          </HStack>
        </Group>
      ))}
    </List>
  );
}

Existing scaleEffect(number) calls still work — scaleEffect(0.5) normalizes to { x: 0.5, y: 0.5 }.

Changes

Only touches modifiers:

  • src/swift-ui/modifiers/index.ts: union type, typeof dispatch (+2/-1)
  • ios/Modifiers/ViewModifierRegistry.swift: @Field var x/y with 1.0 defaults (+2/-2)
  • CHANGELOG.md: single entry
  • build/ type declarations rebuilt

Test Plan

yarn clean, yarn lint --fix, yarn lint, yarn build all pass. yarn test has no test suites in expo-ui (exits with "No tests found"). Rebased on upstream/main.

Existing scaleEffect(number) calls still work since the TS layer normalizes scaleEffect(0.5) to { x: 0.5, y: 0.5 }. Per-axis usage: scaleEffect({ x: 1, y: -1 }) passes x and y directly to native.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Feb 18, 2026

Subscribed to pull request

File Patterns Mentions
docs/** @amandeepmittal
packages/expo-ui/** @aleqsio, @behenate, @douglowder

Generated by CodeMention

@expo-bot expo-bot added the bot: suggestions ExpoBot has some suggestions label Feb 18, 2026
@ramonclaudio ramonclaudio marked this pull request as draft February 18, 2026 01:24
@expo-bot expo-bot added bot: passed checks ExpoBot has nothing to complain about and removed bot: suggestions ExpoBot has some suggestions labels Feb 18, 2026
@ramonclaudio ramonclaudio changed the title Add inverted prop to List [ios][ui] Add inverted prop to List for bottom-anchored scrolling Feb 18, 2026
@ramonclaudio ramonclaudio marked this pull request as ready for review February 18, 2026 13:52
@ramonclaudio ramonclaudio force-pushed the feat/expo-ui-list-inverted branch from 8ca0d33 to 9ddcef8 Compare February 18, 2026 14:31
@ramonclaudio ramonclaudio changed the title [ios][ui] Add inverted prop to List for bottom-anchored scrolling [ios][ui] Add inverted prop to List + per-axis scaleEffect Feb 18, 2026
@ramonclaudio ramonclaudio force-pushed the feat/expo-ui-list-inverted branch from 9ddcef8 to 20684f0 Compare February 18, 2026 15:25
@intergalacticspacehighway
Copy link
Copy Markdown
Contributor

@ramonclaudio thanks for the PR. We can achieve this by passing scaleEffect directly to List and inverting the children on user side right? We want to keep the native layer as lean/close to SwiftUI as possible so we try to avoid adding any custom props. So instead of inverted prop we can add the x, y support in scaleEffect in this PR. wyt?

@ramonclaudio ramonclaudio force-pushed the feat/expo-ui-list-inverted branch from d498c63 to df37a1b Compare February 19, 2026 13:26
@ramonclaudio ramonclaudio changed the title [ios][ui] Add inverted prop to List + per-axis scaleEffect [ios][ui] Add per-axis scaleEffect support to view modifiers Feb 19, 2026
@ramonclaudio ramonclaudio force-pushed the feat/expo-ui-list-inverted branch from df37a1b to e9a36c4 Compare February 19, 2026 13:27
@ramonclaudio
Copy link
Copy Markdown
Contributor Author

@intergalacticspacehighway I agree. Reworked it. Removed the inverted prop, docs additions, and native-component-list changes. PR now only touches the modifier layer.

Copy link
Copy Markdown
Member

@amandeepmittal amandeepmittal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Docs change looks good to me!

@amandeepmittal amandeepmittal merged commit 2deed4f into expo:main Feb 20, 2026
14 checks passed
@amandeepmittal
Copy link
Copy Markdown
Member

I've merged this PR since @intergalacticspacehighway already approved it, but if there are any follow-up changes, let me know. Happy to follow up in a separate PR.

Thank you for your contirbution @ramonclaudio!

@ramonclaudio
Copy link
Copy Markdown
Contributor Author

NP! Thank you @amandeepmittal @intergalacticspacehighway

ramonclaudio added a commit to ramonclaudio/patches that referenced this pull request Feb 25, 2026
feat(@expo/ui): add npm/pnpm patches for per-axis scaleEffect (expo/expo#43228)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bot: passed checks ExpoBot has nothing to complain about

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants