styles props not working on expo 51 (enterStyle | exitStyle | pressStyle)

[AlanSaracho]

Current Behavior

I'm having some issues with tamagui animations, enterStyle, exitStyle and pressStyle are not working. idk if this is a bug, or if i missing something.

PD: I also tried with @tamagui/animations-react-native, but got the same problem.

This is my configuration:

tamagui.config.ts

import { createTamagui } from '@tamagui/core';
import { tokens } from 'src/ds/_core/tokens';
import { themes } from 'src/ds/_core/themes';
import { animations } from 'src/ds/_core/animations';

const tamaguiConfig = createTamagui({ tokens, themes, animations });

export type AppConfig = typeof tamaguiConfig;

declare module '@tamagui/core' {
  interface TamaguiCustomConfig extends AppConfig {}
}

export default tamaguiConfig;

babel.config.js

process.env.TAMAGUI_TARGET = 'native'; // Don't forget to specify your TAMAGUI_TARGET here

const babelConfig = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module:react-native-dotenv',
        {
          moduleName: '@env',
          path: '.env',
          blacklist: null,
          whitelist: null,
          safe: false,
          allowUndefined: true,
        },
      ],
      [
        'transform-inline-environment-variables',
        {
          include: 'TAMAGUI_TARGET',
        },
      ],
      [
        '@tamagui/babel-plugin',
        {
          components: ['tamagui'],
          config: './tamagui.config.ts',
          logTimings: true,
          disableExtraction: process.env.NODE_ENV === 'development',
        },
      ],
      // 'react-native-reanimated/plugin',
      [
        'module-resolver',
        {
          alias: {
            src: './src',
            assets: './assets',
          },
        },
      ],
    ],
  };
};

module.exports = babelConfig;

component:

        <AnimatePresence>
          {showElement && (
            <View
              key="loremIpsum"
              animation="lazy"
              animateOnly={['opacity']}
              width={100}
              height={100}
              backgroundColor="red"
              opacity={1}
              enterStyle={{ opacity: 0 }}
              exitStyle={{ opacity: 0 }}
            />
          )}
        </AnimatePresence>

thanks =)

Expected Behavior

No response

Tamagui Version

"expo": "~51.0.12",
    "@tamagui/animate-presence": "1.100.1",
    "@tamagui/animations-moti": "1.100.1",
    "@tamagui/core": "1.100.1",
    "react-native-reanimated": "~3.10.1",
    "moti": "^0.29.0",

Platform (Web, iOS, Android)

ios, android, ios

Reproduction

component:

        <AnimatePresence>
          {showElement && (
            <View
              key="loremIpsum"
              animation="lazy"
              animateOnly={['opacity']}
              width={100}
              height={100}
              backgroundColor="red"
              opacity={1}
              enterStyle={{ opacity: 0 }}
              exitStyle={{ opacity: 0 }}
            />
          )}
        </AnimatePresence>

### System Info

_No response_

[AlanSaracho]

Well, the animations start to work when i remove module:react-native-dotenv and transform-inline-environment-variables from my babel config.

[arekkubaczkowski]

@AlanSaracho this is what I needed to do to get it working with transform-inline-environment-variables