refactor: switch LoadingContainer to styled components (#785)

gitpoint · Apr 25, 2018 · 777ac29 · 777ac29
1 parent 12078d8
commit 777ac29
Showing 1 changed file with 16 additions and 18 deletions.
diff --git a/src/components/loading-indicators/loading-container.component.js b/src/components/loading-indicators/loading-container.component.js
@@ -1,5 +1,6 @@
 import React from 'react';
-import { StyleSheet, View, ActivityIndicator, Text } from 'react-native';
+import { ActivityIndicator } from 'react-native';
+import styled from 'styled-components';
 
 import { colors, fonts } from 'config';
 
@@ -9,24 +10,21 @@ type Props = {
   center: boolean,
 };
 
-const styles = StyleSheet.create({
-  loadingContainer: {
-    backgroundColor: colors.white,
-    flex: 1,
-    alignItems: 'center',
-  },
-  center: {
-    justifyContent: 'center',
-  },
-  text: {
-    paddingTop: 20,
-    ...fonts.fontPrimary,
-  },
-});
+const Container = styled.View`
+  background-color: ${colors.white};
+  flex: 1;
+  align-items: center;
+  justify-content: ${props => (props.center ? 'center' : 'initial')};
+`;
+
+const Message = styled.Text`
+  padding-top: 20;
+  ${fonts.fontPrimary};
+`;
 
 export const LoadingContainer = ({ animating, text, center }: Props) => (
-  <View style={[styles.loadingContainer, center && styles.center]}>
+  <Container center={center}>
     <ActivityIndicator animating={animating} size="large" />
-    {text && <Text style={styles.text}>{text}</Text>}
-  </View>
+    {text && <Message>{text}</Message>}
+  </Container>
 );