React Native - Unable to resolve “@aws-amplify/ui/dist/style.css”

** Which Category is your question related to? ** react-native & @aws-amplify/ui

** What AWS Services are you utilizing? ** Amplify & Cognito

** Provide additional details e.g. code snippets **

I’m attempting to customize the AWS Amplify UI signin/signup process by following this article. Every time I import anything from aws-amplify-react I receive this error:

Unable to resolve "@aws-amplify/ui/dist/style.css" from "node_modules/aws-amplify-react/dist/Amplify-UI/Amplify-UI-Components-React.js"

I’ve tried installing @aws-amplify/ui specifically, along with other combinations of aws-amplify versions. Here’s the relevant part of my package.json:

...
"aws-amplify": "^1.1.25",
"aws-amplify-react": "^2.3.5",
"aws-amplify-react-native": "^2.1.9",
...

And the versions of the specific UI & auth that I’ve tried:

"@aws-amplify/auth": "^1.2.21",
"@aws-amplify/ui": "^1.0.2",

Here is the import statement:

import { ConfirmSignIn, ConfirmSignUp, ForgotPassword, RequireNewPassword, SignIn, SignUp, VerifyContact, withAuthenticator } from 'aws-amplify-react';

Any help on resolving this issue is greatly appreciated.

[alebiavati]

Hi @dperconti, thanks for using AWS Amplify!

It looks like you are using both aws-amplify-react and aws-amplify-react-native. The aws-amplify-react module is not meant to be used with React Native. This is because CSS cannot be parsed in RN.

Please follow this guide to pass a theme object to the authenticator component to customize styling.

[kay-is]

To use this with Expo, which allows Web and Android/iOS builds, I installed aws-amplify-react and aws-amplify-react-native and created two files:

//aws-amplify-react.js
export * from "aws-amplify-react-native";

//aws-amplify-react.web.js
export * from "aws-amplify-react";

With this setup I just have to do import ... from "./aws-amplify-react" and get the right implementation.

Now, I just have to hope they have the same interfaces, haha.