CODEWITHSUNDEEP
javascriptreact-nativeaws-amplify
Hobgob
Hobgob

Reputation: 33

Customise AWS Amplify UI?

Believe I may be going about this the wrong way and would greatly appreciate guidance on the issue.

I’m using React-Native and AWS Amplify for authentication. What I would like to do is change the colours and sizes of the elements.

Seen others mention using themes but they don’t have any effect.

For example, changing the colour of the sign in button:

https://github.com/aws-amplify/amplify-js/blob/master/packages/aws-amplify-react/src/Amplify-UI/Amplify-UI-Components-React.tsx

SignInButton uses the theme element signInButton

Seen that others approached this by creating a new theme with the changes they wanted, in my case a hideous button to confirm I can manipulate the theme:

const theme = {
  ...AmplifyTheme,
  signInButton: {
color: "red",
backgroundColor: "green"
  } 
}

Then add the theme to withAuthencator:

export default withAuthenticator(App, true, theme={theme})

The UI doesn’t change also seen another error that ’theme’is read only

Greatly appreciate the help with this issue!

Upvotes: 3

Views: 2981

Answers (1)

dustinnoyes
dustinnoyes

Reputation: 209

There may be a bug in the withAuthenticator HOC related to theme; however, you can directly use the component like so:


const MySectionHeaderText = Object.assign({}, AmplifyTheme.sectionHeaderText, { 'fontSize': 10 });
const MyTheme = Object.assign({}, AmplifyTheme, { sectionHeaderText: MySectionHeaderText });

class App extends React.Component {
  render() {
    return (
        <Authenticator theme={MyTheme}></Authenticator>
    );
  }
}

Upvotes: 1

Related Questions