Amplify-js: New version of React Native + withAuthenticator == funky background

Created on 28 Jan 2019 · 5Comments · Source: aws-amplify/amplify-js

Describe the bug
The new version of React Native renders a black background when using the withAuthenticator HOC.

To Reproduce
Steps to reproduce the behavior:

Create new React Native project (0.58+).
Install Amplify + Amplify React Native libraries
Add amplify & auth category
Use the withAuthenticator HOC

Expected behavior
White background & normal UI shows up

Screenshots
screen shot 2019-01-28 at 11 58 17 am

Desktop (please complete the following information):

OS: iOS
Browser: chrome
Version:

{
  "name": "randomrn",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "aws-amplify": "^1.1.19",
    "aws-amplify-react-native": "^2.1.7",
    "react": "16.6.3",
    "react-native": "0.58.2"
  },
  "devDependencies": {
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "24.0.0",
    "jest": "24.0.0",
    "metro-react-native-babel-preset": "0.51.1",
    "react-test-renderer": "16.6.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

Smartphone (please complete the following information):

Device: iPhone X
OS: [e.g. iOS8.1]
Browser [e.g. stock browser, safari]
Version [e.g. 22] 10.1

Additional context
I tested this with older versions of React Native, as late as 0.57.8, & it worked fine.

You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = 'DEBUG'; in your app.

React Native UI bug

Source

dabit3

👍11

Most helpful comment

A workaround for react-native >= 58

const theme = StyleSheet.create({
  ...AmplifyTheme,
  container: {
    ...AmplifyTheme.container,
    backgroundColor: '#FFFFFF'
  }
});
export default withAuthenticator(App, false, [], null, theme);

manueliglesias on 13 Feb 2019

👍6 ❤1

All 5 comments

If anyone wants a workaround for now, you can initialize a pre 0.58.0 version of React Native until this gets resolved:

react-native init --version 0.57.8 MyProject

dabit3 on 1 Feb 2019

👍1

A workaround for react-native >= 58

const theme = StyleSheet.create({
  ...AmplifyTheme,
  container: {
    ...AmplifyTheme.container,
    backgroundColor: '#FFFFFF'
  }
});
export default withAuthenticator(App, false, [], null, theme);

manueliglesias on 13 Feb 2019

👍6 ❤1

This was great thanks @manueliglesias ! Does anyone have any recommendations on fixing the busted styling on iPhone X simulator?

screen shot 2019-02-17 at 5 03 51 pm

Furthermore, after authenticating successfully the next screen I see has a complete black background too.

tetreault on 17 Feb 2019

Am seeing this in the latest version of react native vs the amplify react native library i installed today. Was any one able to get this fixed? also am noticing that the AmplifyTheme.js is not present inside node_modules/aws-amplify-react-native/src , its empty