Code refactoring

jacklam718 · Mar 28, 2019 · e37dd4a · e37dd4a
1 parent 0f7af69
commit e37dd4a
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 126 deletions.
diff --git a/src/App.js b/src/App.js
@@ -9,44 +9,17 @@ import {
   StatusBar,
   TouchableOpacity,
 } from 'react-native';
-import GradientBackgrounds from './GradientBackgrounds';
+import { isIphoneX } from './env';
 import DualShock4 from './DualShock4';
-import Indicator from './Indicator';
 import ProductCarousel from './ProductCarousel';
 
-const {
-  width: deviceWidth,
-  height: deviceHeight,
-} = Dimensions.get('window');
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
-  page: {
-    width: deviceWidth,
-    backgroundColor: 'transparent',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 28,
-    backgroundColor: "transparent",
-    borderTopLeftRadius: 15,
-    borderTopRightRadius: 15
-  },
-  card: {
-    backgroundColor: '#fff',
-  },
-  indicator: {
-    position: "absolute",
-    bottom: 70,
-    left: 0,
-    right: 0,
-    alignItems: 'center',
-  },
   skipButton: {
     position: 'absolute',
-    top: 50,
+    top: isIphoneX ? 50 : 40,
     right: 25,
   },
 });
@@ -81,6 +54,11 @@ export default class App extends React.Component {
   render() {
     return (
       <View style={styles.container}>
+        <StatusBar
+          backgroundColor="black"
+          barStyle="light-content"
+        />
+
         <ProductCarousel
           products={products}
           scrollEnabled={!this.state.isOpen}

diff --git a/src/Card.js b/src/Card.js
@@ -1,21 +1,5 @@
-// @flow
-
-import React, { Component } from 'react';
-import {
-  View,
-  Image,
-  Text,
-  Animated,
-  Platform,
-  Dimensions,
-  StyleSheet,
-} from 'react-native';
-import Button from './Button';
-
-const {
-  width: DEVICE_WIDTH,
-  height: DEVIC_HEIGHT,
-} = Dimensions.get('window');
+import React from 'react';
+import { Text, Animated, StyleSheet } from 'react-native';
 
 const styles = StyleSheet.create({
   container: {

diff --git a/src/DualShock4.js b/src/DualShock4.js
@@ -17,29 +17,14 @@ import {
   Heading5,
   Paragraph
 } from './Text';
+import { deviceWidth, deviceHeight } from './env';
 import Card from './Card';
 import Button from './Button';
 import Indicator from './Indicator';
 
-const {
-  width: deviceWidth,
-  height: deviceHeight,
-} = Dimensions.get('window');
-
-const {
-  width: DEVICE_WIDTH,
-  height: DEVIC_HEIGHT,
-} = Dimensions.get('window');
-
-const CARD_WIDTH = DEVICE_WIDTH * 0.85;
-const CARD_HEIGHT = DEVIC_HEIGHT * 0.65;
-
 const styles = StyleSheet.create({
-  content: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
   imageContainer: {
+    marginTop: 50,
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: 'transparent',
@@ -53,11 +38,10 @@ export default class DualShock4 extends Component {
   }
 
   cardSize = new Animated.ValueXY({
-    x: CARD_WIDTH,
-    y: CARD_HEIGHT,
+    x: 0,
+    y: 0,
   });
 
-  // animatedButton = 
   titleTranslateX = new Animated.Value(0);
   imageRotate = new Animated.Value(0);
   imageTranslateY = new Animated.Value(0);
@@ -69,8 +53,8 @@ export default class DualShock4 extends Component {
   activeTextOpacity = new Animated.Value(0);
 
   inputRange = [
-    DEVICE_WIDTH * this.props.index,
-    DEVICE_WIDTH * (this.props.index + 1),
+    deviceWidth * this.props.index,
+    deviceWidth * (this.props.index + 1),
   ];
 
   state = {
@@ -135,23 +119,23 @@ export default class DualShock4 extends Component {
       }, () => {
         Animated.parallel([
           Animated.timing(this.cardSize.x, {
-            toValue: DEVICE_WIDTH,
+            toValue: deviceWidth,
             duration: 200,
             useNativeDriver: false,
           }),
           Animated.timing(this.cardSize.y, {
-            toValue: DEVIC_HEIGHT,
+            toValue: deviceHeight,
             duration: 200,
             useNativeDriver: false,
           }),
           Animated.spring(this.titleTranslateX, {
-            toValue: DEVIC_HEIGHT,
+            toValue: deviceHeight,
             friction: 4.5,
             tension: 0.5,
             useNativeDriver: true,
           }),
           Animated.spring(this.imageTranslateY, {
-            toValue: DEVIC_HEIGHT/2,
+            toValue: deviceHeight/2,
             useNativeDriver: true,
           }),
           Animated.timing(this.imageRotate, {
@@ -185,13 +169,11 @@ export default class DualShock4 extends Component {
     return !this.state.isActive ? (
       <Animated.View
         style={{
-          // top: 50,
-          // position: 'absolute',
           opacity: this.previewTextOpacity,
           transform: [{
             translateX: this.props.scrollX.interpolate({
               inputRange: this.inputRange,
-              outputRange: [0, -DEVICE_WIDTH * 0.1],
+              outputRange: [0, -deviceWidth * 0.1],
             }),
           }],
         }}
@@ -207,14 +189,11 @@ export default class DualShock4 extends Component {
     return !this.state.isActive ? (
       <Animated.View
         style={{
-          // top: 90,
-          // position: 'absolute',
           opacity: this.previewTextOpacity,
-          // height: 40,
           transform: [{
             translateX: this.props.scrollX.interpolate({
               inputRange: this.inputRange,
-              outputRange: [0, -DEVICE_WIDTH * 0.4],
+              outputRange: [0, -deviceWidth * 0.4],
             }),
           }],
         }}
@@ -234,7 +213,7 @@ export default class DualShock4 extends Component {
           transform: [{
             translateX: this.props.scrollX.interpolate({
               inputRange: this.inputRange,
-              outputRange: [0, -DEVICE_WIDTH * 0.2],
+              outputRange: [0, -deviceWidth * 0.2],
             }),
           }],
         }}
@@ -261,8 +240,8 @@ export default class DualShock4 extends Component {
             opacity: this.state.isActive ? 1 : 0,
             transform: [{
               translateX: this.titleTranslateX.interpolate({
-                inputRange: [0, DEVIC_HEIGHT],
-                outputRange: [-300, 0],
+                inputRange: [0, deviceHeight],
+                outputRange: [-deviceWidth, 0],
               }),
             }],
           }}
@@ -277,8 +256,8 @@ export default class DualShock4 extends Component {
           style={{
             transform: [{
               translateX: this.titleTranslateX.interpolate({
-                inputRange: [this.state.height, DEVIC_HEIGHT],
-                outputRange: [-400, 0],
+                inputRange: [this.state.height, deviceHeight],
+                outputRange: [-deviceWidth, 0],
               }),
             }],
           }}
@@ -323,12 +302,12 @@ export default class DualShock4 extends Component {
           opacity: this.activeTextOpacity,
           transform: [{
             translateX: this.cardSize.y.interpolate({
-              inputRange: [this.state.height, DEVIC_HEIGHT],
+              inputRange: [this.state.height, deviceHeight],
               outputRange: [0, 100],
             }),
           }, {
             translateY: this.cardSize.y.interpolate({
-              inputRange: [this.state.height, DEVIC_HEIGHT],
+              inputRange: [this.state.height, deviceHeight],
               outputRange: [0, 60],
             }),
           }],
@@ -403,7 +382,7 @@ export default class DualShock4 extends Component {
           cardSize,
           {
             borderRadius: this.cardSize.y.interpolate({
-              inputRange: [height, DEVIC_HEIGHT],
+              inputRange: [height, deviceHeight],
               outputRange: [15, 0],
             }),
           },
@@ -416,35 +395,25 @@ export default class DualShock4 extends Component {
           renderToHardwareTextureAndroid
           style={StyleSheet.flatten([
             styles.imageContainer,
-            // { marginTop: DEVIC_HEIGHT * 0.08 },
-            { marginTop: this.state.isActive ? 50 : 50 },
             {
               transform: [{
                 translateX: scrollX.interpolate({
                   inputRange: this.inputRange,
-                  outputRange: [0, -DEVICE_WIDTH * 0.5],
+                  outputRange: [0, -deviceWidth * 0.5],
                 }),
               }, {
                 translateY: this.imageTranslateY.interpolate({
-                  inputRange: [
-                    0,
-                    DEVIC_HEIGHT/2,
-                  ],
-                  outputRange: [0, -DEVIC_HEIGHT/2],
+                  inputRange: [0, deviceHeight/2],
+                  outputRange: [0, -deviceHeight/2],
                 }),
               }, {
                 rotate: this.imageRotate.interpolate({
                   inputRange: [0, 1],
                   outputRange: ['0deg', '180deg'],
                 }),
               }, {
-                scaleX: this.imageTranslateY.interpolate({
-                  inputRange: [0, DEVIC_HEIGHT/2],
-                  outputRange: [1, 1.55],
-                }),
-              }, {
-                scaleY: this.imageTranslateY.interpolate({
-                  inputRange: [0, DEVIC_HEIGHT/2],
+                scale: this.imageTranslateY.interpolate({
+                  inputRange: [0, deviceHeight/2],
                   outputRange: [1, 1.55],
                 }),
               }],
@@ -464,12 +433,12 @@ export default class DualShock4 extends Component {
           style={{
             transform: [{
               translateX: this.cardSize.y.interpolate({
-                inputRange: [height, DEVIC_HEIGHT],
+                inputRange: [height, deviceHeight],
                 outputRange: [0, -60],
               }),
             }, {
               translateY: this.cardSize.y.interpolate({
-                inputRange: [height, DEVIC_HEIGHT],
+                inputRange: [height, deviceHeight],
                 outputRange: [0, 100],
               }),
             }],
@@ -482,9 +451,7 @@ export default class DualShock4 extends Component {
         </Animated.View>
 
         {this.renderDetailPrice()}
-
         {this.renderPreviewName()}
-
         {this.renderDetailFooterImage()}
       </Card>
     );

diff --git a/src/GradientBackgrounds.js b/src/GradientBackgrounds.js
@@ -1,15 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  View,
-  Animated,
-  StyleSheet,
-  Dimensions,
-  Platform,
-} from 'react-native';
-
-const { height: deviceHeight, width: deviceWidth } = Dimensions.get('window');
-const isAdroid = Platform.OS === 'android';
+import { View, Animated, StyleSheet } from 'react-native';
+import { deviceWidth, deviceHeight, isAdroid } from './env';
 
 const styles = StyleSheet.create({
   container: {

diff --git a/src/Indicator.js b/src/Indicator.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { View, Animated, StyleSheet, Dimensions } from 'react-native';
+import { deviceWidth } from './env';
 
-const { width: DEVICE_WIDTH } = Dimensions.get('window');
 const styles = StyleSheet.create({
   container: {
     alignItems: 'center',
@@ -18,7 +18,7 @@ const styles = StyleSheet.create({
 export default function Indicator({ progress, count, style }) {
   const dots = [];
   for (let i = 0; i < count; i++) {
-    const inputRange = [DEVICE_WIDTH * (i-1), DEVICE_WIDTH * i, DEVICE_WIDTH * (i+1)];
+    const inputRange = [deviceWidth * (i-1), deviceWidth * i, deviceWidth * (i+1)];
     const size = progress.interpolate({
       inputRange,
       outputRange: [6, 10, 6],

diff --git a/src/ProductCarousel.js b/src/ProductCarousel.js
@@ -1,15 +1,9 @@
 import React, { Component } from 'react';
 import { View, ScrollView, StyleSheet, Animated, Dimensions, Platform } from 'react-native'; 
+import { isIphoneX, deviceWidth } from './env';
 import GradientBackgrounds from './GradientBackgrounds';
 import Indicator from './Indicator';
 
-const {
-  width: deviceWidth,
-  height: deviceHeight,
-} = Dimensions.get('window');
-
-const isIphoneX = Platform.OS === 'ios' && (deviceHeight === 812 || deviceWidth === 812);
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,

diff --git a/src/env.js b/src/env.js
@@ -0,0 +1,6 @@
+import { Dimensions, Platform } from 'react-native';
+
+export const deviceWidth = Dimensions.get('window').width;
+export const deviceHeight = Dimensions.get('window').height;
+export const isIphoneX = Platform.OS === 'ios' && (deviceWidth === 812 || deviceHeight === 812);
+export const isAdroid = Platform.OS === 'android';