0.5 Theme Support in iOS not working

[troyschneringer]

I am trying to style the lock in ios using the 0.5 updates to support this. My best guess looking at the commit with the changes (5142e05) is that I should configure it as follows:

const style = {
  ios: {
    primaryButtonNormalColor: '#148c87'
  }
};
const lock = new Auth0Lock({clientId: '...', domain: '...', style});

lock.show({}, (err, profile, token) {
  if(err) {
    console.log(err);
  }
});

However, I am still just seeing the basic lock ui. Am I missing something or is there a bug?

[galaxode]

I am also having trouble with this. I don't see any documentation on what the shape of the style parameter should look like. I have attempted adding the style parameter in different ways without success. I can't tell if it's because I'm doing it wrong or if it really isn't working yet. Will the documentation be updated?

[erictherobot]

I'm not sure if you've been able to solve your issue, but I found that this works quite well for me:

const lock = new Auth0Lock({
  clientId: Config.AUTH0_CLIENT_ID,
  domain: Config.AUTH0_DOMAIN,
  style: {
    ios: {
      primaryButtonNormalColor: '#59D56E',
      primaryButtonHighlightedColor: '#59D56E',
      primaryButtonTextColor: '#FFFFFF',
      secondaryButtonBackgroundColor: '#ff0000',
      secondaryButtonTextColor: '#FFFFFF',
      textFieldTextColor: '#ff0000',
      titleTextColor: '#FFFFFF',
      descriptionTextColor: '#B79AD0',
      separatorTextColor: '#B79AD0',
      credentialBoxBorderColor: '#FFFFFF',
      credentialBoxSeparatorColor: '#f3f3f3',
      credentialBoxBackgroundColor: '#FFFFFF',
      screenBackgroundColor: '#ff0000',
      iconImageName: '../assets/img/logo.png',
    },
  },
})

I am referencing this guide for the naming conventions: https://auth0.com/docs/quickstart/native/ios-objc/10-customizing-lock

hope this helps you!

[galaxode]

Thanks, so much! That really helps.

However, the logo still won't change for some reason. If I try to change it, the default logo image will disappear but a blank white circle will remain. The other theme changes work, just not the logo. I've checked the pathname of my image and also tried different sizes with no luck.

const lock = new Auth0Lock({
  clientId: config.AUTH0_CLIENT_ID,
  domain: config.AUTH0_DOMAIN,
  style: {
    ios: {
      primaryButtonTextColor: '#000000',
      primaryButtonNormalColor: colors.midgray,
      primaryButtonHighlightedColor: colors.lightgray,
      secondaryButtonBackgroundColor: colors.midgray,
      credentialBoxBackgroundColor: '#FFFFFF',
      screenBackgroundColor: colors.beige,
      iconImageName: '../../img/logo.png'
    }
  }
});

[StevenFrostwick]

This is great!

However I also can't manage to change the icon or any of the fonts.

[duhseekoh]

@StevenFrostwick - You can't change the fonts because that's not part of the bridge. Look at the PR for the subset of styles you can set.

https://github.com/auth0/react-native-lock/pull/117/files#diff-f90e1baef89181662680552a60c2ef36R44

[rickycpadilla]

@galaxode and @StevenFrostwick To change the icon / logo, you need to store the image in ios/[project name]/Images.xcassets. The easiest way is to open Xcode and drag your image into the Images.xcassets folder. Then in your Auth0Lock initialization code set iconImageName to the name of your image

const lock = new Auth0Lock({
  clientId: config.AUTH0_CLIENT_ID,
  domain: config.AUTH0_DOMAIN,
  style: {
    ios: {
      primaryButtonTextColor: '#000000',
      primaryButtonNormalColor: colors.midgray,
      primaryButtonHighlightedColor: colors.lightgray,
      secondaryButtonBackgroundColor: colors.midgray,
      credentialBoxBackgroundColor: '#FFFFFF',
      screenBackgroundColor: colors.beige,
      iconImageName: 'logo.png'
    }
  }
});

[StevenFrostwick]

Awesome thanks @rickycpadilla that worked 👍

[galaxode]

It isn't working for me. I've dragged a few different image files into Image.xcassets and used the file names for the iconImageName property with no luck. I'm still getting a blank circle where the icon should go.

[StevenFrostwick]

Hey @galaxode I think I had to "reset content and settings" on the Simulator to see the change.

[sergeylaptev]

Still doesn't work after reset:(