Expo SDK 38.0.9

Author: Nattatorn Yucharoen

screens/Product1/PhotoButton.js

@@ -16,11 +16,11 @@ const PhotoButton = () => (
         fontWeight: '400',
       }}
       buttonStyle={{
-        borderWidth: 0,
-        borderRadius: 5,
-        paddingLeft: 10,
         backgroundColor: 'rgba(128,128,128, 0.7)',
+        borderRadius: 5,
+        borderWidth: 0,
         elevation: 0,
+        paddingLeft: 10,
       }}
       containerStyle={{
         marginBottom: 15,

screens/Product1/Product.js

@@ -9,11 +9,11 @@ import {
 } from 'react-native'
 import PropTypes from 'prop-types'
 
+import productData from './product.json'
+
 import PhotoButton from './PhotoButton'
 import ProductStyles from './ProductStyle'
 
-import productData from './product.json'
-
 const styles = StyleSheet.create({ ...ProductStyles })
 
 class Product extends Component {
@@ -49,9 +49,7 @@ class Product extends Component {
 
   renderNavigator = () => {
     return (
-      <View
-        style={{ flexDirection: 'row' }}
-      >
+      <View style={{ flexDirection: 'row' }} >
         <TouchableOpacity style={[styles.navigatorButton, { flex: 2 }]}>
           <Text style={styles.navigatorText}>DIRECTIONS</Text>
         </TouchableOpacity>
@@ -66,12 +64,11 @@ class Product extends Component {
   }
 
   renderContactHeader = () => {
-    const { img } = this.props
     return (
       <View style={styles.headerContainer}>
         <View style={styles.coverContainer}>
           <ImageBackground
-            source={{ uri: img }}
+            source={{uri: this.props.img}}
             style={styles.coverImage}
           >
             <PhotoButton />
@@ -83,7 +80,7 @@ class Product extends Component {
 
   render() {
     return (
-      <View style={styles.mainviewStyle}>
+      <View style={styles.mainViewStyle}>
         <ScrollView style={styles.scroll}>
           <View style={[styles.container, this.props.containerStyle]}>
             <View style={styles.cardContainer}>

screens/Product1/ProductStyle.js

@@ -28,83 +28,81 @@ export default {
   productRow: {
     margin: 25,
   },
-  mainviewStyle: {
+  mainViewStyle: {
     flex: 1,
-    flexGrow: 1,
     flexDirection: 'column',
+    flexGrow: 1,
   },
   coverMetaContainer: {
     alignItems: 'flex-end',
     flex: 1,
     justifyContent: 'flex-end',
   },
   footer: {
-    position: 'absolute',
-    flex: 0.1,
-    left: 0,
-    right: 0,
-    bottom: 0,
+    alignItems: 'center',
     backgroundColor: '#e36449',
+    bottom: 0,
+    flex: 0.1,
     flexDirection: 'row',
     height: 65,
-    alignItems: 'center',
+    left: 0,
+    position: 'absolute',
+    right: 0,
   },
   buttonFooter: {
     alignItems: 'center',
-    justifyContent: 'center',
     flex: 1,
+    justifyContent: 'center',
   },
   navigatorButton: {
     alignItems: 'flex-start',
-    justifyContent: 'center',
     flex: 1,
+    justifyContent: 'center',
   },
   navigatorText: {
+    alignItems: 'flex-start',
     color: Colors.green,
+    fontSize: 16,
     fontWeight: 'bold',
-    alignItems: 'flex-start',
     justifyContent: 'center',
-
-    fontSize: 16,
   },
   borderCenter: {
-    height: 55,
-    borderWidth: 0.5,
     borderColor: '#FFA890',
+    borderWidth: 0.5,
+    height: 55,
   },
   textFooter: {
-    color: 'white',
-    fontWeight: 'bold',
     alignItems: 'center',
+    color: 'white',
     fontSize: 18,
+    fontWeight: 'bold',
   },
   priceText: {
-    marginBottom: 5,
-    letterSpacing: 1,
-
     color: Colors.black,
     fontSize: 36,
     fontWeight: '400',
+    letterSpacing: 1,
+    marginBottom: 5,
   },
   detailText: {
-    marginBottom: 4,
     color: Colors.black,
     fontSize: 22,
     fontWeight: '600',
     letterSpacing: 0.5,
+    marginBottom: 4,
   },
   subDetailText: {
     color: Colors.black,
     fontSize: 16,
     fontWeight: '100',
-    lineHeight: 28,
     letterSpacing: 0.5,
+    lineHeight: 28,
   },
   descriptionText: {
-    marginBottom: 4,
     color: Colors.gray,
     fontSize: 16,
     fontWeight: '400',
     letterSpacing: 1,
+    marginBottom: 4,
   },
 }

screens/Product1/index.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+
 import productData from './product.json'
 
 import { NavAbsolute } from '../../components'

screens/Profile1/Email.js

@@ -3,8 +3,6 @@ import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import { Icon } from 'react-native-elements'
 import PropTypes from 'prop-types'
 
-import mainColor from './constants'
-
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
@@ -17,7 +15,7 @@ const styles = StyleSheet.create({
     marginBottom: 5,
   },
   emailIcon: {
-    color: mainColor,
+    color: 'gray',
     fontSize: 30,
   },
   emailNameColumn: {

screens/Profile1/Profile.js

@@ -1,10 +1,10 @@
 import React, { Component } from 'react'
 import { Card, Icon } from 'react-native-elements'
 import {
+  FlatList,
   Image,
   ImageBackground,
   Linking,
-  FlatList,
   Platform,
   ScrollView,
   StyleSheet,

screens/Profile1/Separator.js

@@ -10,10 +10,10 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
   },
   separator: {
-    flex: 8,
-    flexDirection: 'row',
     borderColor: '#EDEDED',
     borderWidth: 0.8,
+    flex: 8,
+    flexDirection: 'row',
   },
 })
 

screens/Profile2/Post.js

@@ -70,7 +70,7 @@ const Post = ({ containerStyle, user, image, createdDate, sentences }) => (
     <View style={styles.wordRow}>
       <Text style={styles.wordText}>{sentences}</Text>
     </View>
-    {image && <Image style={styles.postImage} source={{ uri: image }} />}
+    {image && <Image style={styles.postImage} source={{uri: image}} />}
   </View>
 )
 

screens/Profile2/Profile.js

@@ -157,11 +157,11 @@ class Profile2 extends Component {
 
   renderTabBar = props => {
     return <TabBar
-      {...props}
       indicatorStyle={styles.indicatorTab}
       renderLabel={this.renderLabel(props)}
       pressOpacity={0.8}
       style={styles.tabBar}
+      {...props}
     />
   };
 
@@ -205,14 +205,6 @@ class Profile2 extends Component {
     }
   }
 
-  renderPager = props => {
-    return Platform.OS === 'ios' ? (
-      <TabViewPagerScroll {...props} />
-    ) : (
-      <TabViewPagerPan {...props} />
-    )
-  }
-
   renderContactHeader = () => {
     const { avatar, name, bio } = this.props
 
@@ -221,9 +213,7 @@ class Profile2 extends Component {
         <View style={styles.userRow}>
           <Image
             style={styles.userImage}
-            source={{
-              uri: avatar,
-            }}
+            source={{uri: avatar}}
           />
           <View style={styles.userNameRow}>
             <Text style={styles.userNameText}>{name}</Text>
@@ -276,8 +266,6 @@ class Profile2 extends Component {
               navigationState={this.state.tabs}
               renderScene={this.renderScene}
               renderTabBar={this.renderTabBar}
-              // renderPager={this._renderPager}
-              // renderHeader={this._renderHeader}
               onIndexChange={this.handleIndexChange}
             />
           </View>

screens/Profile3/Post.js

@@ -25,7 +25,7 @@ const Post = ({
               height: postWidth * (imageHeight / imageWidth),
             },
           ]}
-          source={{ uri: image }}
+          source={{uri: image}}
         />
       )}
     </View>