Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[SDK52][expo-router] Link component asChild breaks Pressable function styling. #32775

Open
a-eid opened this issue Nov 11, 2024 · 2 comments
Open

[SDK52][expo-router] Link component asChild breaks Pressable function styling. #32775

a-eid opened this issue Nov 11, 2024 · 2 comments
Assignees
@marklawlor
Labels
needs review Issue is ready to be reviewed by a maintainer Router expo-router

Comments

@a-eid
Copy link

a-eid commented Nov 11, 2024

Minimal reproducible example

https://snack.expo.dev/@aeid/link-aschild-breaks-on-array-styles

Which package manager are you using? (Yarn is recommended)

pnpm

If the issue is web-related, please select the bundler (web.bundler in the app.json)

None

Summary

Link component asChild prop breaks Pressable function styling.

   <SafeAreaView
      style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Link href="/" asChild style={({ pressed }) => ({ backgroundColor: pressed ? "red" : "blue", padding: 20 })}>
          <Pressable>
            <Text>here we goo</Text>
          </Pressable>
        </Link>
    </SafeAreaView

works in sdk51 but not in sdk52.

this doesn't work in either sdk51 & sdk52

   <SafeAreaView
      style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Link href="/" asChild>
          <Pressable  style={({ pressed }) => ({ backgroundColor: pressed ? "red" : "blue", padding: 20 })}>
            <Text>here we goo</Text>
          </Pressable>
        </Link>
    </SafeAreaView

also keep in mind that Link styling types in sdk52 is not as flexible as it was in sdk51.

Environment

expo-env-info 1.2.0 environment info:
    System:
      OS: macOS 14.5
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 20.17.0 - ~/n/bin/node
      Yarn: 1.22.22 - ~/n/bin/yarn
      npm: 10.8.2 - ~/n/bin/npm
      Watchman: 2024.09.30.00 - /opt/homebrew/bin/watchman
    Managers:
      CocoaPods: 1.14.3 - /Users/user/.rbenv/shims/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 23.5, iOS 17.5, macOS 14.5, tvOS 17.5, visionOS 1.2, watchOS 10.5
    IDEs:
      Android Studio: 2024.1 AI-241.18034.62.2411.12071903
      Xcode: 15.4/15F31d - /usr/bin/xcodebuild
    npmGlobalPackages:
      eas-cli: 13.1.1
    Expo Workflow: managed
@a-eid a-eid added needs validation Issue needs to be validated Router expo-router labels Nov 11, 2024
@expo-bot expo-bot added needs review Issue is ready to be reviewed by a maintainer and removed needs validation Issue needs to be validated labels Nov 11, 2024
@a-eid
Copy link
Author

a-eid commented Nov 15, 2024 •
edited
Loading

this happens because of StyleSheet.flatten(style), [style]) , I am not entirely sure why we allow styling the Link component at all, it's not it's responsibility. we should just pass the styles to the child directly.

Edit

I would actually prefer if the Link component didn't default to Text and enforced having a direct child. it should not have only navigation related props.

@a-eid
Copy link
Author

a-eid commented Nov 16, 2024

Link component seem to also break when used with react-native-unistyles v3, it completely breaks Pressable / Touchable based styleing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@marklawlor marklawlor

Labels
needs review Issue is ready to be reviewed by a maintainer Router expo-router
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@marklawlor @a-eid @expo-bot