Amplify-js: Custom theme for withAuthenticator in React Native

[hszeto]

I'm trying to use my theme for withAuthenticator in React Native.

According to the docs, https://aws-amplify.github.io/docs/js/authentication#props , withAuthenticator takes a theme argument.

The code base reflect that:
https://github.com/aws-amplify/amplify-js/blob/master/packages/aws-amplify-react/src/Auth/index.jsx#L37

That's for aws-amplify-react.

However, I'm using aws-amplify-react-native for my react native app. That equivalent line, https://github.com/aws-amplify/amplify-js/blob/master/packages/aws-amplify-react-native/src/Auth/index.js#L45 , does not have theme. it's a shorter argument list.

How do I pass my own theme into withAuthenticator in React Native?

My partial package.json:
"aws-amplify": "^1.1.6",
"aws-amplify-react-native": "^2.0.6",
"expo": "^30.0.1",
"react": "16.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",

[brandenocon]

Any updates here?

[brandenocon]

I was able to resolve by using 'Authenticator' rather than try and work 'withAuthenticator'. A way around developing UI comps from scratch is to edit the theme in Authenticator, and move forward. In the same docs.

[hszeto]

@brandenocon Thanks for the pointers.

Instead of:

export default withAuthenticator(App, false, [
  <MySignInScreen/>,
  <MyForgotPasswordScreen/>,
  <MySignUpScreen/>,
  <MyConfirmSignUpScreen/>,
],
null,
MyAuthTheme);

I replaced the above with:

const AppWithAuthenticator = withAuthenticator(App, false, [
  <MySignInScreen/>,
  <MyForgotPasswordScreen/>,
  <MySignUpScreen/>,
  <MyConfirmSignUpScreen/>,
]);

class AppWithAuth extends React.Component {
  render(){
    return (
      <Authenticator hideDefault={true} theme={MyAuthTheme}>
        <AppWithAuthenticator />
      </Authenticator>
    );
  }
}

Which seems to be working.

[brandenocon]

Nice, glad you have a solution that works!! Also, I found this repository by @richardzcode to be extremely helpful and in line with building custom UI components. Thanks Richard!

[jimbol]

Ideally, we'd be able to pass a theme into withAuthenticator for React Native as the docs suggest. Is there a reason not to?

[jordanranz]

@jimbol Thanks for the pull request!

I have gone ahead and merged it. I will close this issue for now. Please reopen if there are any related problems.

[jbburf]

Are there any docs anywhere explaining the theme object and what options I have to pass (in RN)?

[jimbol]

Take a look at the theme file. I just moved this into my project and changed it as needed.
https://github.com/aws-amplify/amplify-js/blob/master/packages/aws-amplify-react-native/src/AmplifyTheme.js

[chunyenHuang]

Ideally, we'd be able to pass a theme into withAuthenticator for React Native as the docs suggest. Is there a reason not to?
Based on the current code
https://github.com/aws-amplify/amplify-js/blob/master/packages/aws-amplify-react-native/src/Auth/index.js

Documentation should be changed.
https://aws-amplify.github.io/docs/js/authentication#customize-ui-theme

export default withAuthenticator(App, {
                // Render a sign out button once logged in
                includeGreetings: true, 
                // Show only certain components
                authenticatorComponents: [MyComponents],
                // display federation/social provider buttons 
                federated: {myFederatedConfig}, 
                // customize the UI/styling
                theme: {myCustomTheme}});

// You expect to work
export default withAuthenticator(
  App,
  { 
     includeGreetings: true,
     theme: {myCustomTheme}
  }, // documentation says you can place federated and theme here, but it actually 
)

// What actually working
export default withAuthenticator(
  App,
  { includeGreetings: true, },  // documentation says you can place federated and theme here, but it actually wont work
  undefined, // placeholder for authenticatorComponents
  undefined, // placeholder for federated
  theme, // This is where the theme should be placed. the 5th argument
)

[nihp]

I have used the Login, SignUp, ForgotPassword, ComfirmSignUp and other files too from aws-amplify-react-native.

Now I need to customize the screen as per my modified screens (Login, SignUp, ForgotPassword, ComfirmSignUp).

What is the best practice and how can I customize this by replacing with my customized screens.

import {
  Authenticator,
  AmplifyTheme,
  Greetings,
  SignIn,
  ConfirmSignIn,
  RequireNewPassword,
  SignUp,
  ConfirmSignUp,
  VerifyContact,
  ForgotPassword,
  AuthPiece,
} from "aws-amplify-react-native";

<Authenticator errorMessage={map}
         <Authenticator/>,
 <AmplifyTheme/>,
  <Greetings/>,
<SignIn/>,
  <ConfirmSignIn/>,
  <RequireNewPassword/>,
  <SignUp/>,
  <ConfirmSignUp/>,
  <VerifyContact/>,
 < ForgotPassword/>,
        >
   </Authenticator>

Now I am going to replace only 4 screens. Can I make this with the cognito. I am using the phone number to login in prod and email in dev.

How can I make this as customized with the same aws-amplify-react-native

[kam2001]

this should work with theme and signUpConfig

export default withAuthenticator(App,
false, // include Greetings
undefined, // placeholder for authenticatorComponents
undefined, // placeholder for federated
myCustomTheme, // your theme
signUpConfig // your signUpConfig
)

[esthor]

the theme file @jimbol linked has been converted to a TypeScript file, so its .../AmplifyTheme.ts now instead of .js : https://github.com/aws-amplify/amplify-js/blob/master/packages/aws-amplify-react-native/src/AmplifyTheme.ts

[schrecka]

the theme file @jimbol linked has been converted to a TypeScript file, so its .../AmplifyTheme.ts now instead of .js : https://github.com/aws-amplify/amplify-js/blob/master/packages/aws-amplify-react-native/src/AmplifyTheme.ts

@esthor this worked for me thank you

[newbie737]

What if you want to add only custom config and custom theme? Without adding any authenticated components or federated? I am really frustrated how come such big piece of functionality is missing such a basic documentation. Can someone have a look into my issue here https://github.com/aws-amplify/amplify-js/discussions/7575