LoadingSpinner: add workaround for Surface issue

facebook/react-native#17565

src/ui/generic/loadingSpinner.tsx

@@ -4,8 +4,6 @@ import { StyleSheet } from 'react-native'
 import { JolocomTheme } from 'src/styles/jolocom-theme'
 const loaders = require('react-native-indicator')
 
-interface Props {}
-
 const styles = StyleSheet.create({
  loadingContainer: {
  backgroundColor: 'white',
@@ -16,12 +14,28 @@ const styles = StyleSheet.create({
  },
 })
 
-export const LoadingSpinner: React.SFC<Props> = props => (
- <Container style={styles.loadingContainer}>
- <loaders.RippleLoader
- size={120}
- strokeWidth={4}
- color={JolocomTheme.primaryColorPurple}
- />
- </Container>
-)
+export class LoadingSpinner extends React.PureComponent {
+ componentDidMount() {
+ // FIXME
+ // HACK because of https:/facebook/react-native/issues/17565
+ // the fix will land in RN 0.61
+ // then we can get rid of this
+ requestAnimationFrame(() => this.forceUpdate())
+ // it is actually not even always reproducible :/
+ }
+
+ render() {
+ // FIXME the key={Date.now()} bit is part of the HACK from above,
+ // see componentDidMount
+ return (
+ <Container style={styles.loadingContainer}>
+ <loaders.RippleLoader
+ key={Date.now()}
+ size={120}
+ strokeWidth={4}
+ color={JolocomTheme.primaryColorPurple}
+ />
+ </Container>
+ )
+ }
+}