refactor: Updated section-list styles to used styled-components

.all-contributorsrc

@@ -731,6 +731,15 @@
         "bug",
         "translation"
       ]
+    },
+    {
+      "login": "jamesg1",
+      "name": "James Gosbell",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/3621147?v=4",
+      "profile": "https://github.com/jamesg1",
+      "contributions": [
+        "code"
+      ]
     }
   ]
 }

src/components/section-list.component.js

@@ -1,6 +1,7 @@
 import React from 'react';
-import { StyleSheet, Text, View, ActivityIndicator } from 'react-native';
+import { ActivityIndicator } from 'react-native';
 import { List, ListItem, Button } from 'react-native-elements';
+import styled from 'styled-components';
 
 import { colors, fonts } from 'config';
 
@@ -15,42 +16,53 @@ type Props = {
   buttonAction: Function,
 };
 
-const styles = StyleSheet.create({
-  section: {
-    marginTop: 15,
-  },
-  topHeader: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  sectionTitle: {
-    color: colors.black,
-    padding: 15,
-    ...fonts.fontPrimaryBold,
+const Section = styled.View`
+  margin-top: 15;
+`;
+const Header = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+`;
+const SectionTitle = styled.Text`
+  color: ${colors.black};
+  padding: 15px;
+  ${fonts.fontPrimaryBold};
+`;
+const TitleView = styled.View`
+  padding: 15px;
+`;
+const StyledList = styled(List).attrs({
+  containerStyle: {
+    marginTop: 0,
+    borderBottomColor: colors.grey,
+    borderBottomWidth: 1,
   },
-  listTitle: {
+})``;
+const StyledListItem = styled(ListItem).attrs({
+  titleStyle: {
     color: colors.black,
     ...fonts.fontPrimary,
   },
-  button: {
+})``;
+const LoadingIcon = styled(ActivityIndicator)`
+  margin: 20px 0;
+`;
+const StyledButton = styled(Button).attrs({
+  textStyle: {
+    ...fonts.fontPrimaryBold,
+  },
+  fontSize: 13,
+  color: colors.primaryDark,
+  buttonStyle: {
     backgroundColor: colors.white,
     borderColor: colors.primaryDark,
     borderWidth: 1,
     borderRadius: 3,
     paddingVertical: 5,
     paddingHorizontal: 10,
   },
-  list: {
-    marginTop: 0,
-    borderBottomColor: colors.grey,
-    borderBottomWidth: 1,
-  },
-  loadingIcon: {
-    marginVertical: 20,
-  },
-});
+})``;
 
 export const SectionList = ({
   loading,
@@ -65,48 +77,33 @@ export const SectionList = ({
   let listDisplay;
 
   if (loading) {
-    listDisplay = (
-      <ActivityIndicator animating={loading} style={styles.loadingIcon} />
-    );
+    listDisplay = <LoadingIcon animating={loading} />;
   } else if (noItems) {
-    listDisplay = (
-      <ListItem
-        title={noItemsMessage}
-        titleStyle={styles.listTitle}
-        hideChevron
-      />
-    );
+    listDisplay = <StyledListItem title={noItemsMessage} hideChevron />;
   } else {
     listDisplay = children;
   }
 
   let sectionTitle = '';
 
   if (typeof title === 'string') {
-    sectionTitle = <Text style={styles.sectionTitle}>{title}</Text>;
+    sectionTitle = <SectionTitle>{title}</SectionTitle>;
   } else {
-    sectionTitle = <View style={{ padding: 15 }}>{title}</View>;
+    sectionTitle = <TitleView>{title}</TitleView>;
   }
 
   return (
-    <View style={styles.section}>
-      <View style={styles.topHeader}>
+    <Section>
+      <Header>
         {sectionTitle}
 
         {showButton &&
           !loading && (
-            <Button
-              title={buttonTitle}
-              textStyle={fonts.fontPrimarySemiBold}
-              fontSize={13}
-              color={showButton ? colors.primaryDark : colors.white}
-              buttonStyle={styles.button}
-              onPress={buttonAction}
-            />
+            <StyledButton title={buttonTitle} onPress={buttonAction} />
           )}
-      </View>
-      <List containerStyle={styles.list}>{listDisplay}</List>
-    </View>
+      </Header>
+      <StyledList>{listDisplay}</StyledList>
+    </Section>
   );
 };