CODEWITHSUNDEEP
amazon-web-servicesreact-nativeaws-amplify
edreins
edreins

Reputation: 1

How can I override the AmplifyTheme in my react native app

I'm making an app that uses Amazon Cognito authentication, via amplify add auth. It is my first time using it so I decided not to customize the UI too much, but I am trying to override the AmplifyTheme styles listed here, as instructed by the documentation here.

Here is my attempt to override the AmplifyTheme:

const MyButton = Object.assign({}, AmplifyTheme.button, { 
backgroundColor: '#A7B1B2' });

const myNavBar = Object.assign({}, AmplifyTheme.navBar, { marginTop: 
35, padding: 15, flexDirection: 'row', justifyContent: 'space-between', 
alignItems: 'center'});

const myTheme = Object.assign({}, AmplifyTheme, { button: MyButton, 
navBar: myNavBar });

At the bottom of my App.js file I have the following, according to the Amplify Authentication documentation:

export default withAuthenticator(App,
  includeGreetings = true,
  authenticatorComponents = [],
  federated = null,
  theme = {myTheme});

However, the Greeting style is unchanged! Does anyone know how to override the AmplifyTheme??

Upvotes: 0

Views: 1217

Answers (1)

Tijo Thomas
Tijo Thomas

Reputation: 71

You could add a separate file with the custom theme. export that theme file in your withAuthenticator/Authenticator

//Custom theme
import {
  Authenticator,
  AmplifyTheme
} from 'aws-amplify-react-native';
const theme = {
  ...AmplifyTheme,
  container: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'space-around',
    paddingTop: 10,
    width: '100%',
    marginTop: 30
  },
  button: {
    alignItems: 'center',
    padding: 16,
  }
}

just refer to this postcustom module

Upvotes: 3

Related Questions