refactor: migrate user repo list screen to styled-components

src/user/screens/repository-list.screen.js

@@ -1,8 +1,9 @@
 /* eslint-disable no-shadow */
 import React, { Component } from 'react';
+import styled from 'styled-components/native';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { FlatList, View, Dimensions, StyleSheet } from 'react-native';
+import { FlatList, Dimensions } from 'react-native';
 
 import {
   ViewContainer,
@@ -31,26 +32,24 @@ const mapDispatchToProps = dispatch =>
     dispatch
   );
 
-const styles = StyleSheet.create({
-  header: {
-    borderBottomColor: colors.greyLight,
-    borderBottomWidth: 1,
-  },
-  searchBarWrapper: {
-    flexDirection: 'row',
-  },
-  searchContainer: {
-    width: Dimensions.get('window').width,
-    backgroundColor: colors.white,
-    flex: 1,
-  },
-  searchCancelButton: {
-    color: colors.black,
-  },
-  listContainer: {
-    marginBottom: 90,
-  },
-});
+const Header = styled.View`
+  border-bottom-color: ${colors.greyLight};
+  border-bottom-width: 1;
+`;
+
+const SearchBarWrapper = styled.View`
+  flex-direction: row;
+`;
+
+const SearchContainer = styled.View`
+  width: ${Dimensions.get('window').width};
+  background-color: ${colors.white};
+  flex: 1;
+`;
+
+const ListContainer = styled.View`
+  margin-bottom: 90;
+`;
 
 class RepositoryList extends Component {
   props: {
@@ -130,48 +129,46 @@ class RepositoryList extends Component {
 
     return (
       <ViewContainer>
-        <View>
-          <View style={styles.header}>
-            <View style={styles.searchBarWrapper}>
-              <View style={styles.searchContainer}>
-                <SearchBar
-                  textColor={colors.primaryDark}
-                  textFieldBackgroundColor={colors.greyLight}
-                  showsCancelButton={searchFocus}
-                  onFocus={() => this.setState({ searchFocus: true })}
-                  onCancelButtonPress={() =>
-                    this.setState({ searchStart: false, query: '' })}
-                  onSearchButtonPress={query => {
-                    this.search(query);
-                  }}
-                  hideBackground
-                />
-              </View>
-            </View>
-          </View>
-
-          {loading &&
-            [...Array(searchStart ? repoCount : 10)].map(
-              (item, index) => <LoadingRepositoryListItem key={index} /> // eslint-disable-line react/no-array-index-key
-            )}
-
-          {!loading && (
-            <View style={styles.listContainer}>
-              <FlatList
-                removeClippedSubviews={false}
-                data={this.getList()}
-                keyExtractor={this.keyExtractor}
-                renderItem={({ item }) => (
-                  <RepositoryListItem
-                    repository={item}
-                    showFullName={authUser.login !== item.owner.login}
-                    navigation={navigation}
-                  />
-                )}
+        <Header>
+          <SearchBarWrapper>
+            <SearchContainer>
+              <SearchBar
+                textColor={colors.primaryDark}
+                textFieldBackgroundColor={colors.greyLight}
+                showsCancelButton={searchFocus}
+                onFocus={() => this.setState({ searchFocus: true })}
+                onCancelButtonPress={() =>
+                  this.setState({ searchStart: false, query: '' })}
+                onSearchButtonPress={query => {
+                  this.search(query);
+                }}
+                hideBackground
               />
-            </View>
+            </SearchContainer>
+          </SearchBarWrapper>
+        </Header>
+
+        {loading &&
+          [...Array(searchStart ? repoCount : 10)].map(
+            (item, index) => <LoadingRepositoryListItem key={index} /> // eslint-disable-line react/no-array-index-key
           )}
-        </View>
+
+        {!loading && (
+          <ListContainer>
+            <FlatList
+              removeClippedSubviews={false}
+              data={this.getList()}
+              keyExtractor={this.keyExtractor}
+              renderItem={({ item }) => (
+                <RepositoryListItem
+                  repository={item}
+                  showFullName={authUser.login !== item.owner.login}
+                  navigation={navigation}
+                />
+              )}
+            />
+          </ListContainer>
+        )}
       </ViewContainer>
     );
   }