refactor: use styled-components in image-zoom

src/components/image-zoom.component.js

@@ -1,35 +1,46 @@
 import React, { Component } from 'react';
-import {
-  StyleSheet,
-  Image,
-  View,
-  Modal,
-  Dimensions,
-  TouchableOpacity,
-  TouchableHighlight,
-} from 'react-native';
+import { Image, Modal, Dimensions } from 'react-native';
 import { Icon } from 'react-native-elements';
+import styled from 'styled-components/native';
 import PhotoView from 'react-native-photo-view';
 
 import { colors } from 'config';
 
-const styles = StyleSheet.create({
-  touchable: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  modalContainer: {
-    flex: 1,
-    backgroundColor: colors.black,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  closeButton: {
-    position: 'absolute',
-    top: 30,
-    right: 10,
-  },
-});
+const Touchable = styled.TouchableHighlight`
+  justify-content: center;
+  align-items: center;
+`;
+
+const ModalContainer = styled.View`
+  flex: 1;
+  background-color: ${colors.black};
+  justify-content: center;
+  align-items: center;
+`;
+
+const StyledPhotoView = styled(PhotoView).attrs({
+  resizeMode: 'contain',
+  minimumZoomScale: 0.5,
+  maximumZoomScale: 3,
+})`
+   width: ${Dimensions.get('window').width}px;
+   height: ${Dimensions.get('window').height}px;
+`;
+
+const CloseButton = styled.TouchableOpacity.attrs({
+  activeOpacity: 0.5,
+})`
+  position: absolute;
+  top: 30px;
+  right: 10px;
+`;
+
+const CloseIcon = styled(Icon).attrs({
+  color: colors.white,
+  size: 28,
+  name: 'x',
+  type: 'octicon',
+})``;
 
 export class ImageZoom extends Component {
   props: {
@@ -53,42 +64,26 @@ export class ImageZoom extends Component {
   }
 
   render() {
-    const window = Dimensions.get('window');
     const { uri, style } = this.props;
 
     if (this.state.imgZoom) {
       return (
         <Modal animationType={'fade'} onRequestClose={() => this.closeModal()}>
-          <View style={styles.modalContainer}>
-            <PhotoView
-              resizeMode={'contain'}
-              onTap={() => this.closeModal()}
-              source={uri}
-              minimumZoomScale={0.5}
-              maximumZoomScale={3}
-              style={{ width: window.width, height: window.height }}
-            />
+          <ModalContainer>
+            <StyledPhotoView onTap={() => this.closeModal()} source={uri} />
 
-            <TouchableOpacity
-              activeOpacity={0.5}
-              onPress={() => this.closeModal()}
-              style={styles.closeButton}
-            >
-              <Icon color={colors.white} size={28} name="x" type="octicon" />
-            </TouchableOpacity>
-          </View>
+            <CloseButton onPress={() => this.closeModal()}>
+              <CloseIcon />
+            </CloseButton>
+          </ModalContainer>
         </Modal>
       );
     }
 
     return (
-      <TouchableHighlight
-        onPress={() => this.openModal()}
-        underlayColor="transparent"
-        style={styles.touchable}
-      >
+      <Touchable onPress={() => this.openModal()} underlayColor="transparent">
         <Image style={style} source={uri} />
-      </TouchableHighlight>
+      </Touchable>
     );
   }
 }