Sign in button in Authenticator.SignIn Component clashes with Nativewind 4

[itomtom]

Before creating a new issue, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have tried disabling all browser extensions or using a different browser
• [X] I have tried deleting the node_modules folder and reinstalling my dependencies
• [X] I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React Native

Which UI component?

Authenticator

How is your app built?

Expo Go

What browsers are you seeing the problem on?

iOS (React Native)

Which region are you seeing the problem in?

No response

Please describe your bug.

The Sign In button becomes text white with no background colour when Nativewind v4 is installed.

What's the expected behaviour?

The expected behaviour is for the "Sign in" button to be visible

Help us reproduce the bug!

• Use the basic example of the authenticator component here.
• Install Nativewind v4
• The button will not be visible anymore

Code Snippet

metro.config.js

const { getDefaultConfig } = require('expo/metro-config');
const { withNativeWind } = require('nativewind/metro');

const config = getDefaultConfig(__dirname);

module.exports = withNativeWind(config, { input: './global.css' });

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./**/*.{js,jsx,ts,tsx}'],
    presets: [require('nativewind/preset')],
    theme: {
        screens: {
            xs: '480px',
            sm: '640px',
            md: '768px',
            lg: '1024px',
            xl: '1280px',
            xxl: '1440px',
            xxxl: '1600px',
        },
        fontSize: {
            xs: ['12px', '12px'],
            sm: ['14px', '14px'],
            base: ['16px', '22px'],
            lg: ['18px', '24px'],
            xl: ['20px', '20px'],
            '2xl': ['24px', '28px'],
            '3xl': ['32px', '36px'],
        },
        fontFamily: {
            body: ['ProximaNova-Regular', 'Arial', 'Helvetica', 'sans-serif'],
            heading: ['ProximaNova-Semibold', 'Arial', 'Helvetica', 'sans-serif'],
        },
    },
    plugins: [],
};

global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
      presets: [['babel-preset-expo', { jsxImportSource: 'nativewind' }], 'nativewind/babel'],
  };
};

Console log output

No response

Additional information and screenshots

There must be conflict in the styling for it to affect the Sign in button. Another way to potentially address this is to style the button directly however the documentation doesn't provide any example on how to style the Sign In button in React Native.

I also tried to add global css styling but that too did not work.

[hbuchel]

Hi @itomtom I installed the Authenticator + NativeWind@v4 in a fresh Expo app and confirmed I see the same behavior of the button element not being visible. I'm not yet sure of the root cause; given that this is integration with another styling library I will keep this open as a feature request for now.

Additionally and likely unrelated to this issue, I see that you listed Expo Go. Just a note on that if you are using aws-amplify@6 that Expo Go is not supported. Some information on that here.

[itomtom]

Hi @hbuchel We're using:

• "aws-amplify": "^5"
• "@aws-amplify/ui-react-native": "^1"

So it works with Expo Go. What do you think we can do to resolve this issue and can the classes be namespace to avoid this situation?

[itomtom]

Hi @hbuchel Are there any updates on this? I'm more than happy to override the theme for buttons BUT I attempted with defining containerPrimary and cannot see any reflected changes.

[coyksdev]

i have this same issue. i just created my own components.

[martinezguillaume]

same issue here !

[martinezguillaume]

After some struggling, I finally find a workaround "not so bad". I just desactivate the style callback with this patch @aws-amplify/ui-react-native@2.2.2

diff --git a/node_modules/@aws-amplify/ui-react-native/src/primitives/Button/Button.tsx b/node_modules/@aws-amplify/ui-react-native/src/primitives/Button/Button.tsx
index b14770f..faf21dd 100644
--- a/node_modules/@aws-amplify/ui-react-native/src/primitives/Button/Button.tsx
+++ b/node_modules/@aws-amplify/ui-react-native/src/primitives/Button/Button.tsx
@@ -47,7 +47,7 @@ export default function Button({
       {...rest}
       accessibilityRole={accessibilityRole}
       disabled={disabled}
-      style={pressableStyle}
+      style={pressableStyle({ pressed: false })}
     >
       {typeof children === 'string' ? (
         <Text style={[buttonTextStyle, textStyle]}>{children}</Text>

This issue is linked to this issue, maybe it is only react-native involved