[native] Wasn’t able to get the pressStyle working in IOS simulator

[tonyabracadabra]

I was not able to configure any pressStyles in tamagui, for example the code from https://tamagui.dev/docs/core/animations#react-native-animated

import { LogoIcon } from '@tamagui/logo'

import { Play } from '@tamagui/lucide-icons'

import { Button, Square, useControllableState, useEvent } from 'tamagui'
export function AnimationsDemo(props) {

  const [positionI, setPositionI] = useControllableState({

    strategy: 'most-recent-wins',

    prop: props.position,

    defaultProp: 0,

  })

  const position = positions[positionI]

  const onPress = useEvent(() => {

    setPositionI((x) => {

      return (x + 1) % positions.length

    })

  })
  return (

    <>

      <Square
        animation={props.animation || 'bouncy'}
        animateOnly={['transform']}
        onPress={onPress}
        size={104}
        borderColor="$borderColor"
        borderWidth={1}
        borderRadius="$9"
        backgroundColor="$color9"
        hoverStyle={{
          scale: 1.5,
        }}
        pressStyle={{
          scale: 0.9,
        }}
        {...position}
      >

        {props.children || <LogoIcon downscale={0.75} />}

      </Square>
      <Button
        position="absolute"
        bottom={20}
        left={20}
        icon={Play}
        theme={props.tint}
        size="$5"
        circular
        onPress={onPress}
      />

    </>

  )

}
export const positions = [

  {

    x: 0,

    y: 0,

    scale: 1,

    rotate: '0deg',

  },

  {

    x: -50,

    y: -50,

    scale: 0.5,

    rotate: '-45deg',

    hoverStyle: {

      scale: 0.6,

    },

    pressStyle: {

      scale: 0.4,

    },

  },

  {

    x: 50,

    y: 50,

    scale: 1,

    rotate: '180deg',

    hoverStyle: {

      scale: 1.1,

    },

    pressStyle: {

      scale: 0.9,

    },

  },

]

The following

pressStyle: {
      scale: 0.9,
    },

isn't working for me when I click and hold on the IOS simulator, but it works perfectly in web.

[tonyabracadabra]

It is really weird, @timothymiller the pressStyle with the latest version of tamagui isn’t working in t4 but works with the official starter template @natew Maybe there is some problem with the babel plugin or other version incompatibilities I’m not sure

[natew]

Maybe because react-native-web-lite, you need to update that version alongside tamagui. Actually I think removing react-native-web-lite in general is fine, I'm slowly going to deprecate it and move all our starters off it.

[tonyabracadabra]

@timothymiller Hey

Maybe because react-native-web-lite, you need to update that version alongside tamagui. Actually I think removing react-native-web-lite in general is fine, I'm slowly going to deprecate it and move all our starters off it.

interesting, why would react-native-web-lit effect the pressStyle in ios? I tried using the latest tamagui upgrade command in the repo that upgrades the react-native-web-lit as well (pnpm up -r '*tamagui*'@latest '@tamagui/*'@latest react-native-web-lite@latest), but the problem persists

[tonyabracadabra]

Actually, not only does the pressStyle is missing, the theme (I enabled the default theme as dark) is also broken for me in IOS simulator using the configuration in t4, could you help reproduce the issue? @timothymiller @natew

Below is the style comparison on web/ios simulator

[masrurimz]

Hi @tonyabracadabra try to remove the dotenv from babel.config. in my case removing those from babel config make the pressStyle working again

[natew]

I'll get a proper fix this weekend, but this is the temporary fix.

[timothymiller]

Thanks @natew for investigating this. FWIW, I was not able to get light theme button presses to work, even with removing dotenv support. Anyway, we need this for setting the API url ,etc.

About to sign off for the night. Will investigate more tomorrow!

[natew]

The latest versions should fix this I believe, I made them de-opt on all press styles for native optimization.

[natew]

Small snippet to repro?

[timothymiller]

• I upgraded all Tamagui versions from 1.75.9 to 1.76.0 and the iOS press styles were still missing
• dotenv is now removed from the expo project in favor of Expo 49 environment variable support
• 1.76.0 introduced a weird issue when starting the next.js project:

To reproduce this,

bun create t4-app

followed by

bun i
bun ios

Should display the press style bug in it's full glory

[timothymiller]

I'm sure the issue is something incorrectly set in the tamagui theme config. This issue exists in the tamagui starter repo as well. Will investigate more later this week.

[tonyabracadabra]

• I upgraded all Tamagui versions from 1.75.9 to 1.76.0 and the iOS press styles were still missing
• dotenv is now removed from the expo project in favor of Expo 49 environment variable support
• 1.76.0 introduced a weird issue when starting the next.js project:

To reproduce this,

bun create t4-app

followed by

bun i
bun ios

Should display the press style bug in it's full glory

@natew Could you assist reproducing the issue?

[natew]

I fixed the issue in the reproduction that was opened on Tamagui by fixing stuff in static, and then just went and tested the starter and it works on inline and styled() usages:

https://github.com/timothymiller/t4-app/assets/12100/f25f028b-9ccc-4217-9d1c-bd9402bce527

https://github.com/timothymiller/t4-app/assets/12100/05223f4f-84ea-4318-ae1e-00d782ac434c

Can't replicate there at least.

[timothymiller]

Can someone test if this is fixed with the latest Tamagui 1.79? It's already in the master branch

[timothymiller]

It's working properly. It's just super faint in light mode