React Native Custome Sign Up

Question

I have been trying to edit the theme of the default UI for amplify's withAuthenticator and got the theme working no problem but now it seems that it has reset my sign up page back to the default one?

for example, see my code here:

const signUpConfig = {
  header: 'Sign up to our App',
  hideAllDefaults: true,
  signUpFields: [
    {
      label: 'Username',
      key: 'username',
      required: true,
      displayOrder: 1,
      type: 'string'
    },
    {
      label: 'Password',
      key: 'password',
      required: true,
      displayOrder: 2,
      type: 'password'
    },
    {
      label: 'Email',
      key: 'email',
      required: true,
      displayOrder: 4,
      type: 'string'
    }
  ]
};
const usernameAttributes = 'Username';

const MyButton = Object.assign({}, AmplifyTheme.button, { backgroundColor: 'yellow' });
const sectionLink = Object.assign({}, AmplifyTheme.sectionFooterLink, { color: 'black' });
const buttondisable = Object.assign({}, AmplifyTheme.buttonDisabled, { backgroundColor: '#cccccc' });
const MyTheme = Object.assign({}, AmplifyTheme, { button: MyButton }, {sectionFooterLink:sectionLink},{buttonDisabled:buttondisable});

export default withAuthenticator(RealApp,false, [], null, MyTheme, {signUpConfig}
);

Any ideas? I have read the documentation and even formatted the export default different ways but either the sign up page gets overwritten or the theme isn't applied etc.

Answer 1

Got it working.

Turns out you have to actually add in the whole config into the export e.g

export default withAuthenticator(RealApp,false, [], null, MyTheme, {header: 'Sign up to our App',
hideAllDefaults: true,
signUpFields: [
  {
    label: 'Username',
    key: 'username',
    required: true,
    displayOrder: 1,
    type: 'string'
  },
  {
    label: 'Password',
    key: 'password',
    required: true,
    displayOrder: 2,
    type: 'password'
  },
  {
    label: 'Email',
    key: 'email',
    required: true,
    displayOrder: 4,
    type: 'string'
  }
]
}
);