.gitignore

@@ -16,7 +16,8 @@ buck-out/
 .LSOverride
 
 # Icon must end with two \r
-Icon
+Icon
+
 
 # Thumbnails
 ._*
@@ -56,6 +57,7 @@ out/
 # Gradle files
 .gradle/
 build/
+.idea/
 
 # Local configuration file (sdk path, etc)
 local.properties

README.md

@@ -9,48 +9,58 @@ It works well with both IOS and Android.
 ## Availables pages
 
 > This is the list of the availables pages with this source code:
-* Home
-* Shop
-* Single product
-* Product gallery
-* Cart
-* Search
-*  WishList
-* Newsletter
-* Contact
-* Find us (A map)
-* Login/Sign up
-* Payment
-* *Profil* Coming soon
+* [Home](./src/page/Home.js)
+* [Shop](./src/page/Category.js)
+* [Single product](./src/page/Product.js)
+* [Product gallery](./src/page/ImageGallery.js)
+* [Cart](./src/page/Cart.js)
+* [Search](./src/page/Search.js)
+* [WishList](./src/page/WishList.js)
+* [Newsletter](./src/page/Newsletter.js)
+* [Contact](./src/page/Contact.js)
+* [Find us (A map)](./src/page/Map.js)
+* [Login](./src/page/Login.js)/[Sign up](./src/page/Signup.js)
+* [Payment](./src/page/Checkout.js)
+
+### Coming Soon
+* Profile
 
 
 ## Installation
 
 > Follow these steps to install and test the app:
-1. Clone or download this repo
-2. Navigate to the main Shop folder and run `npm install`
-3. Run `react-native run-ios` or `react-native run-android` to test on your emulator or on your device
+
+```
+git clone git@github.com:ATF19/react-native-shop-ui.git
+cd react-native-shop-ui
+npm install
+```
+
+> For iOS users:
+
+```
+react-native run-ios
+```
+
+> For Android users
+
+```
+react-native run-android
+```
 
 ## Download a demo
 
 > You can download the demo APK by [Clicking here](https://www.dropbox.com/s/42l8vvq61xx6bzh/shop.apk "Download Shop APK")
 
 ## Screenshots
 
-![alt text](http://res.cloudinary.com/atf19/image/upload/c_scale,h_500/v1501416468/1_f6hiw0.png) ![alt text](http://res.cloudinary.com/atf19/image/upload/c_scale,h_500/v1501416464/2_rmuosc.png)
-![alt text](http://res.cloudinary.com/atf19/image/upload/c_scale,h_500/v1501416466/3_xbithf.png) ![alt text](http://res.cloudinary.com/atf19/image/upload/c_scale,h_500/v1501416465/4_mz9us1.png)
-![alt text](http://res.cloudinary.com/atf19/image/upload/c_scale,h_500/v1501416465/5_u7cedw.png) ![alt text](http://res.cloudinary.com/atf19/image/upload/c_scale,h_500/v1501416460/6_toto6s.png)
-![alt text](http://res.cloudinary.com/atf19/image/upload/c_scale,h_500/v1501416470/7_h2onpd.png) ![alt text](http://res.cloudinary.com/atf19/image/upload/c_scale,h_500/v1501416468/8_zporkh.png)
-![alt text](http://res.cloudinary.com/atf19/image/upload/c_scale,h_500/v1501416471/9_yk5qog.png) ![alt text](http://res.cloudinary.com/atf19/image/upload/c_scale,h_500/v1501416470/10_psx6ys.png)
-![alt text](http://res.cloudinary.com/atf19/image/upload/c_scale,h_500/v1503520367/12_xwbj6w.png) ![alt text](http://res.cloudinary.com/atf19/image/upload/c_scale,h_500/v1503520366/13_yca0zj.png)
-![alt text](http://res.cloudinary.com/atf19/image/upload/c_scale,h_500/v1503520840/14_nuzhkn.png) ![alt text](http://res.cloudinary.com/atf19/image/upload/c_scale,h_500/v1503520840/15_vttiyz.png) 
-![alt text](http://res.cloudinary.com/atf19/image/upload/c_scale,h_500/v1501416468/11_mxtfkz.png)
-
-
+Click [here](screenshots/README.md)
 
 ## Documentation
 
-> ### Coming soon
+Updating the codebase will require changes to the `.js` files in the [src/](./src/) folder. Individual pages can be edited by editing the `.js` files in [src/page/](./src/page/). Re-usable components can be edited by editing the `.js` files in [src/component/](./src/component/).
+
+To contribute your changes to the main repository, create a pull request from your fork [here](https://github.com/ATF19/react-native-shop-ui/compare?expand=1) (click the `compare across forks` link make your repository the source repository)
 
 ## Contact
 

android/app/build.gradle

@@ -90,8 +90,8 @@ def enableSeparateBuildPerCPUArchitecture = false
 def enableProguardInReleaseBuilds = false
 
 android {
-    compileSdkVersion 23
-    buildToolsVersion "23.0.1"
+    compileSdkVersion 27
+    buildToolsVersion '27.0.3'
 
     defaultConfig {
         applicationId "com.shop"

android/build.gradle

@@ -3,9 +3,10 @@
 buildscript {
     repositories {
         jcenter()
+        google()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:2.2.3'
+        classpath 'com.android.tools.build:gradle:3.1.4'
 
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files
@@ -20,5 +21,6 @@ allprojects {
             // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
             url "$rootDir/../node_modules/react-native/android"
         }
+        google()
     }
 }

android/gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,6 @@
+#Tue Aug 28 12:34:12 IST 2018
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip

package.json

@@ -7,20 +7,20 @@
     "test": "jest"
   },
   "dependencies": {
-    "native-base": "^2.2.1",
-    "react": "16.0.0-alpha.12",
-    "react-native": "0.46.2",
-    "react-native-drawer": "^2.3.0",
-    "react-native-image-gallery": "^1.1.0",
-    "react-native-maps": "^0.15.3",
-    "react-native-router-flux": "^4.0.0-beta.9",
-    "react-native-snap-carousel": "^2.4.0"
+    "native-base": "2.7.2",
+    "react": "16.4.1",
+    "react-native": "0.56.0",
+    "react-native-drawer": "^2.5.0",
+    "react-native-image-gallery": "2.1.5",
+    "react-native-maps": "0.21.0",
+    "react-native-router-flux": "4.0.1",
+    "react-native-snap-carousel": "3.7.2"
   },
   "devDependencies": {
-    "babel-jest": "20.0.3",
-    "babel-preset-react-native": "2.1.0",
-    "jest": "20.0.4",
-    "react-test-renderer": "16.0.0-alpha.12"
+    "babel-jest": "23.4.0",
+    "babel-preset-react-native": "^5",
+    "jest": "23.4.1",
+    "react-test-renderer": "16.4.1"
   },
   "jest": {
     "preset": "react-native"

screenshots/README.md

@@ -0,0 +1,10 @@
+## Screenshots
+
+![alt text](http://res.cloudinary.com/atf19/image/upload/c_scale,h_500/v1501416468/1_f6hiw0.png) ![alt text](http://res.cloudinary.com/atf19/image/upload/c_scale,h_500/v1501416464/2_rmuosc.png)
+![alt text](http://res.cloudinary.com/atf19/image/upload/c_scale,h_500/v1501416466/3_xbithf.png) ![alt text](http://res.cloudinary.com/atf19/image/upload/c_scale,h_500/v1501416465/4_mz9us1.png)
+![alt text](http://res.cloudinary.com/atf19/image/upload/c_scale,h_500/v1501416465/5_u7cedw.png) ![alt text](http://res.cloudinary.com/atf19/image/upload/c_scale,h_500/v1501416460/6_toto6s.png)
+![alt text](http://res.cloudinary.com/atf19/image/upload/c_scale,h_500/v1501416470/7_h2onpd.png) ![alt text](http://res.cloudinary.com/atf19/image/upload/c_scale,h_500/v1501416468/8_zporkh.png)
+![alt text](http://res.cloudinary.com/atf19/image/upload/c_scale,h_500/v1501416471/9_yk5qog.png) ![alt text](http://res.cloudinary.com/atf19/image/upload/c_scale,h_500/v1501416470/10_psx6ys.png)
+![alt text](http://res.cloudinary.com/atf19/image/upload/c_scale,h_500/v1503520367/12_xwbj6w.png) ![alt text](http://res.cloudinary.com/atf19/image/upload/c_scale,h_500/v1503520366/13_yca0zj.png)
+![alt text](http://res.cloudinary.com/atf19/image/upload/c_scale,h_500/v1503520840/14_nuzhkn.png) ![alt text](http://res.cloudinary.com/atf19/image/upload/c_scale,h_500/v1503520840/15_vttiyz.png) 
+![alt text](http://res.cloudinary.com/atf19/image/upload/c_scale,h_500/v1501416468/11_mxtfkz.png)

src/page/Product.js

@@ -13,7 +13,7 @@ import Carousel, { Pagination } from 'react-native-snap-carousel';
 import Colors from '../Colors';
 import Text from '../component/Text';
 import Navbar from '../component/Navbar';
-import {default as ProductComponent} from '../component/Product';
+import { default as ProductComponent } from '../component/Product';
 
 export default class Product extends Component {
 
@@ -30,7 +30,7 @@ export default class Product extends Component {
 
   componentWillMount() {
     //get the product with id of this.props.product.id from your server
-    this.setState({product: dummyProduct});
+    this.setState({ product: dummyProduct });
   }
 
   componentDidMount() {
@@ -45,61 +45,65 @@ export default class Product extends Component {
 
   render() {
     var left = (
-      <Left style={{flex:1}}>
+      <Left style={{ flex: 1 }}>
         <Button onPress={() => Actions.pop()} transparent>
           <Icon name='ios-arrow-back' />
         </Button>
       </Left>
     );
     var right = (
-      <Right style={{flex:1}}>
+      <Right style={{ flex: 1 }}>
         <Button onPress={() => Actions.search()} transparent>
-          <Icon name='ios-search-outline' />
+          <Icon name='ios-search' />
         </Button>
         <Button onPress={() => Actions.cart()} transparent>
           <Icon name='ios-cart' />
         </Button>
       </Right>
     );
-    return(
-      <Container style={{backgroundColor: '#fdfdfd'}}>
+    return (
+      <Container style={{ backgroundColor: '#fdfdfd' }}>
         <Navbar left={left} right={right} title={this.props.product.title} />
         <Content>
+
+
+
+
           <Carousel
-              ref={(carousel) => { this._carousel = carousel; }}
-              sliderWidth={Dimensions.get('window').width}
-              itemWidth={Dimensions.get('window').width}
-              onSnapToItem={(index) => this.setState({ activeSlide: index }) }
-              enableSnap={true}
-            >
-                {this.renderImages()}
-            </Carousel>
-            <Pagination
-              dotsLength={this.state.product.images.length}
-              activeDotIndex={this.state.activeSlide}
-              containerStyle={{ backgroundColor: 'transparent',paddingTop: 0, paddingBottom: 0, marginTop: -15 }}
-              dotStyle={{
-                  width: 10,
-                  height: 10,
-                  borderRadius: 5,
-                  marginHorizontal: 2,
-                  backgroundColor: 'rgba(255, 255, 255, 0.92)'
-              }}
-              inactiveDotOpacity={0.4}
-              inactiveDotScale={0.6}
-            />
-          <View style={{backgroundColor: '#fdfdfd', paddingTop: 10, paddingBottom: 10, paddingLeft: 12, paddingRight: 12, alignItems: 'center'}}>
+            data={this.state.product.images}
+            renderItem={this._renderItem}
+            ref={(carousel) => { this._carousel = carousel; }}
+            sliderWidth={Dimensions.get('window').width}
+            itemWidth={Dimensions.get('window').width}
+            onSnapToItem={(index) => this.setState({ activeSlide: index })}
+            enableSnap={true}
+          />
+          <Pagination
+            dotsLength={this.state.product.images.length}
+            activeDotIndex={this.state.activeSlide}
+            containerStyle={{ backgroundColor: 'transparent', paddingTop: 0, paddingBottom: 0, marginTop: -15 }}
+            dotStyle={{
+              width: 10,
+              height: 10,
+              borderRadius: 5,
+              marginHorizontal: 2,
+              backgroundColor: 'rgba(255, 255, 255, 0.92)'
+            }}
+            inactiveDotOpacity={0.4}
+            inactiveDotScale={0.6}
+          />
+          <View style={{ backgroundColor: '#fdfdfd', paddingTop: 10, paddingBottom: 10, paddingLeft: 12, paddingRight: 12, alignItems: 'center' }}>
             <Grid>
               <Col size={3}>
-                <Text style={{fontSize: 18}}>{this.state.product.title}</Text>
+                <Text style={{ fontSize: 18 }}>{this.state.product.title}</Text>
               </Col>
               <Col>
-                <Text style={{fontSize: 20, fontWeight: 'bold'}}>{this.state.product.price}</Text>
+                <Text style={{ fontSize: 20, fontWeight: 'bold' }}>{this.state.product.price}</Text>
               </Col>
             </Grid>
-            <Grid style={{marginTop: 15}}>
+            <Grid style={{ marginTop: 15 }}>
               <Col>
-                <View style={{flex: 1, justifyContent: 'center'}}>
+                <View style={{ flex: 1, justifyContent: 'center' }}>
                   <Text>Color:</Text>
                 </View>
               </Col>
@@ -109,15 +113,15 @@ export default class Product extends Component {
                   placeholder="Select a color"
                   note={true}
                   selectedValue={this.state.selectedColor}
-                  onValueChange={(color) => this.setState({selectedColor: color})}
+                  onValueChange={(color) => this.setState({ selectedColor: color })}
                 >
                   {this.renderColors()}
                 </Picker>
               </Col>
             </Grid>
             <Grid>
               <Col>
-                <View style={{flex: 1, justifyContent: 'center'}}>
+                <View style={{ flex: 1, justifyContent: 'center' }}>
                   <Text>Size:</Text>
                 </View>
               </Col>
@@ -127,81 +131,77 @@ export default class Product extends Component {
                   placeholder="Select a size"
                   note={true}
                   selectedValue={this.state.selectedSize}
-                  onValueChange={(size) => this.setState({selectedSize: size})}
+                  onValueChange={(size) => this.setState({ selectedSize: size })}
                 >
                   {this.renderSize()}
                 </Picker>
               </Col>
             </Grid>
             <Grid>
               <Col>
-                <View style={{flex: 1, justifyContent: 'center'}}>
+                <View style={{ flex: 1, justifyContent: 'center' }}>
                   <Text>Quantity:</Text>
                 </View>
               </Col>
               <Col size={3}>
-                <View style={{flex: 1, flexDirection: 'row'}}>
-                  <Button style={{flex: 1}} icon light onPress={() => this.setState({quantity: this.state.quantity>1 ? this.state.quantity-1 : 1})} >
-                    <Icon name='ios-remove-outline' />
+                <View style={{ flex: 1, flexDirection: 'row' }}>
+                  <Button block icon transparent onPress={() => this.setState({ quantity: this.state.quantity > 1 ? this.state.quantity - 1 : 1 })} >
+                    <Icon name='ios-remove' style={{ color: Colors.navbarBackgroundColor }} />
                   </Button>
-                  <View style={{flex: 4, justifyContent: 'center', alignItems: 'center', paddingLeft: 30, paddingRight: 30}}>
-                    <Text style={{fontSize: 18}}>{this.state.quantity}</Text>
+                  <View style={{ flex: 4, justifyContent: 'center', alignItems: 'center', paddingLeft: 30, paddingRight: 30 }}>
+                    <Text style={{ fontSize: 18 }}>{this.state.quantity}</Text>
                   </View>
-                  <Button style={{flex: 1}} icon light onPress={() => this.setState({quantity: this.state.quantity+1})}>
-                    <Icon name='ios-add' />
+                  <Button block icon transparent onPress={() => this.setState({ quantity: this.state.quantity + 1 })}>
+                    <Icon style={{ color: Colors.navbarBackgroundColor }} name='ios-add' />
                   </Button>
                 </View>
               </Col>
             </Grid>
-            <Grid style={{marginTop: 15}}>
+            <Grid style={{ marginTop: 15 }}>
               <Col size={3}>
-                <Button block onPress={this.addToCart.bind(this)} style={{backgroundColor: Colors.navbarBackgroundColor}}>
-                  <Text style={{color: "#fdfdfd", marginLeft: 5}}>Add to cart</Text>
+                <Button block onPress={this.addToCart.bind(this)} style={{ backgroundColor: Colors.navbarBackgroundColor }}>
+                  <Text style={{ color: "#fdfdfd", marginLeft: 5 }}>Add to cart</Text>
                 </Button>
               </Col>
               <Col>
-              <Button block onPress={this.addToWishlist.bind(this)} icon transparent style={{backgroundColor: '#fdfdfd'}}>
-                <Icon style={{color: Colors.navbarBackgroundColor}} name='ios-heart' />
-              </Button>
+                <Button block onPress={this.addToWishlist.bind(this)} icon transparent style={{ backgroundColor: '#fdfdfd' }}>
+                  <Icon style={{ color: Colors.navbarBackgroundColor }} name='ios-heart' />
+                </Button>
               </Col>
             </Grid>
-            <View style={{marginTop: 15, padding: 10, borderWidth: 1, borderRadius: 3, borderColor: 'rgba(149, 165, 166, 0.3)'}}>
-              <Text style={{marginBottom: 5}}>Description</Text>
-              <View style={{width: 50, height: 1, backgroundColor: 'rgba(44, 62, 80, 0.5)', marginLeft: 7, marginBottom: 10}} />
+            <View style={{ marginTop: 15, padding: 10, borderWidth: 1, borderRadius: 3, borderColor: 'rgba(149, 165, 166, 0.3)' }}>
+              <Text style={{ marginBottom: 5 }}>Description</Text>
+              <View style={{ width: 50, height: 1, backgroundColor: 'rgba(44, 62, 80, 0.5)', marginLeft: 7, marginBottom: 10 }} />
               <NBText note>
                 {this.state.product.description}
               </NBText>
             </View>
           </View>
-          <View style={{marginTop: 15, paddingLeft: 12, paddingRight: 12}}>
-            <Text style={{marginBottom: 5}}>Similar items</Text>
-            <View style={{width: 50, height: 1, backgroundColor: 'rgba(44, 62, 80, 0.5)', marginLeft: 7, marginBottom: 10}} />
+          <View style={{ marginTop: 15, paddingLeft: 12, paddingRight: 12 }}>
+            <Text style={{ marginBottom: 5 }}>Similar items</Text>
+            <View style={{ width: 50, height: 1, backgroundColor: 'rgba(44, 62, 80, 0.5)', marginLeft: 7, marginBottom: 10 }} />
             {this.renderSimilairs()}
           </View>
         </Content>
       </Container>
     );
   }
-
-  renderImages() {
-    let images = [];
-    this.state.product.images.map((img, i) => {
-      images.push(
-          <TouchableWithoutFeedback
-            key={i}
-            onPress={() => this.openGallery(i)}
-          >
-            <Image
-              source={{uri: img}}
-              style={{width: Dimensions.get('window').width, height: 350}}
-              resizeMode="cover"
-            />
-          </TouchableWithoutFeedback>
-      );
-    });
-    return images;
+  _renderItem = ({ item, index }) => {
+    return (
+      <TouchableWithoutFeedback
+        key={index}
+        onPress={() => this.openGallery(index)}
+      >
+        <Image
+          source={{ uri: item }}
+          style={{ width: Dimensions.get('window').width, height: 350 }}
+          resizeMode="cover"
+        />
+      </TouchableWithoutFeedback>
+    );
   }
 
+
   renderColors() {
     let colors = [];
     this.state.product.colors.map((color, i) => {
@@ -225,29 +225,29 @@ export default class Product extends Component {
   renderSimilairs() {
     let items = [];
     let stateItems = this.state.product.similarItems;
-    for(var i=0; i<stateItems.length; i+=2 ) {
-      if(stateItems[i+1]) {
+    for (var i = 0; i < stateItems.length; i += 2) {
+      if (stateItems[i + 1]) {
         items.push(
           <Grid key={i}>
             <ProductComponent key={stateItems[i].id} product={stateItems[i]} />
-            <ProductComponent key={stateItems[i+1].id} product={stateItems[i+1]} isRight />
+            <ProductComponent key={stateItems[i + 1].id} product={stateItems[i + 1]} isRight />
           </Grid>
         );
       }
       else {
         items.push(
           <Grid key={i}>
             <ProductComponent key={stateItems[i].id} product={stateItems[i]} />
-            <Col key={i+1} />
+            <Col key={i + 1} />
           </Grid>
         );
       }
     }
     return items;
   }
 
-  openGallery(pos) {
-    Actions.imageGallery({images: this.state.product.images, position: pos});
+  openGallery = (pos) => {
+    Actions.imageGallery({ images: this.state.product.images, position: pos });
   }
 
   addToCart() {
@@ -256,11 +256,11 @@ export default class Product extends Component {
     product['size'] = this.state.selectedSize;
     product['quantity'] = this.state.quantity;
     AsyncStorage.getItem("CART", (err, res) => {
-      if(!res) AsyncStorage.setItem("CART",JSON.stringify([product]));
+      if (!res) AsyncStorage.setItem("CART", JSON.stringify([product]));
       else {
         var items = JSON.parse(res);
         items.push(product);
-        AsyncStorage.setItem("CART",JSON.stringify(items));
+        AsyncStorage.setItem("CART", JSON.stringify(items));
       }
       Toast.show({
         text: 'Product added to your cart !',
@@ -276,18 +276,18 @@ export default class Product extends Component {
     var product = this.state.product;
     var success = true;
     AsyncStorage.getItem("WISHLIST", (err, res) => {
-      if(!res) AsyncStorage.setItem("WISHLIST",JSON.stringify([product]));
+      if (!res) AsyncStorage.setItem("WISHLIST", JSON.stringify([product]));
       else {
         var items = JSON.parse(res);
-        if(this.search(items, product)) {
+        if (this.search(items, product)) {
           success = false
         }
         else {
           items.push(product);
-          AsyncStorage.setItem("WISHLIST",JSON.stringify(items));
+          AsyncStorage.setItem("WISHLIST", JSON.stringify(items));
         }
       }
-      if(success) {
+      if (success) {
         Toast.show({
           text: 'Product added to your wishlist !',
           position: 'bottom',
@@ -309,8 +309,8 @@ export default class Product extends Component {
   }
 
   search(array, object) {
-    for(var i=0; i<array.length; i++)
-      if(JSON.stringify(array[i]) === JSON.stringify(object))
+    for (var i = 0; i < array.length; i++)
+      if (JSON.stringify(array[i]) === JSON.stringify(object))
         return true;
     return false;
   }
@@ -333,8 +333,8 @@ const dummyProduct = {
   sizes: ['S', 'M', 'L', 'XL', 'XXL'],
   category: 'MAN',
   similarItems: [
-    {id: 10, title: 'V NECK T-SHIRT', price: '29$', image: 'http://res.cloudinary.com/atf19/image/upload/c_crop,g_face,h_250,x_248/v1500465308/fashion-men-s-individuality-black-and-white-157675_wnctss.jpg'},
-    {id: 11, title: 'V NECK T-SHIRT', price: '29$', image: 'http://res.cloudinary.com/atf19/image/upload/c_crop,h_250/v1500465308/pexels-photo-179909_ddlsmt.jpg'},
-    {id: 12, title: 'V NECK T-SHIRT', price: '29$', image: 'http://res.cloudinary.com/atf19/image/upload/c_crop,h_250/v1500465308/pexels-photo-179909_ddlsmt.jpg'}
+    { id: 10, title: 'V NECK T-SHIRT', price: '29$', image: 'http://res.cloudinary.com/atf19/image/upload/c_crop,g_face,h_250,x_248/v1500465308/fashion-men-s-individuality-black-and-white-157675_wnctss.jpg' },
+    { id: 11, title: 'V NECK T-SHIRT', price: '29$', image: 'http://res.cloudinary.com/atf19/image/upload/c_crop,h_250/v1500465308/pexels-photo-179909_ddlsmt.jpg' },
+    { id: 12, title: 'V NECK T-SHIRT', price: '29$', image: 'http://res.cloudinary.com/atf19/image/upload/c_crop,h_250/v1500465308/pexels-photo-179909_ddlsmt.jpg' }
   ]
 };