├── .expo-shared └── assets.json ├── .gitignore ├── App.js ├── README.md ├── app.json ├── assets ├── adaptive-icon.png ├── favicon.png ├── icon.png ├── icons │ ├── apple-1.png │ ├── apple.png │ ├── facebook.png │ ├── google.png │ └── sneaker-icon.png ├── login │ ├── profile-img.jpg │ ├── sneaker_1.jpg │ ├── sneaker_2.jpg │ ├── sneaker_3.jpg │ └── sneaker_4.jpg ├── product-images │ ├── nike │ │ ├── air-force-1-mens │ │ │ ├── air-force-1-crater(1).png │ │ │ ├── air-force-1-crater(2).png │ │ │ └── air-force-1-crater(3).png │ │ ├── air-jordan-retro-3 │ │ │ ├── air-jordan-retro-3(1).png │ │ │ ├── air-jordan-retro-3(2).png │ │ │ ├── air-jordan-retro-3(3).png │ │ │ └── air-jordan-retro-3(4).png │ │ ├── air-max-270 │ │ │ ├── air-max-270(1).png │ │ │ ├── air-max-270(2).png │ │ │ └── air-max-270(3).png │ │ ├── air-max-95 │ │ │ ├── air-max-95(1).png │ │ │ ├── air-max-95(2).png │ │ │ └── air-max-95(3).png │ │ ├── air-max-97 │ │ │ ├── air-max-97(1).png │ │ │ ├── air-max-97(2).png │ │ │ └── air-max-97(3).png │ │ ├── air-monarch-iv │ │ │ ├── air-monarch-iv(1).png │ │ │ ├── air-monarch-iv(2).png │ │ │ └── air-monarch-iv(3).png │ │ ├── air-zoom-pegasus-38 │ │ │ ├── air-zoom-pegasus(1).png │ │ │ ├── air-zoom-pegasus(2).png │ │ │ └── air-zoom-pegasus(3).png │ │ ├── free-metcon-4 │ │ │ ├── free-metcon-4(1).png │ │ │ ├── free-metcon-4(2).png │ │ │ └── free-metcon-4(3).png │ │ ├── jordan-delta-2-sp │ │ │ ├── jordan-delta-2-sp(1).png │ │ │ ├── jordan-delta-2-sp(2).png │ │ │ ├── jordan-delta-2-sp(3).png │ │ │ └── jordan-delta-2-sp(4).png │ │ └── lebron-witness-6 │ │ │ ├── lebron-witness-6(1).png │ │ │ ├── lebron-witness-6(2).png │ │ │ └── lebron-witness-6(3).png │ ├── puma │ │ ├── fuse-training │ │ │ ├── FUSE-Training(1).png │ │ │ ├── FUSE-Training(2).png │ │ │ └── FUSE-Training(3).png │ │ ├── rs-dreamer │ │ │ ├── rs-dreamer(1).png │ │ │ ├── rs-dreamer(2).png │ │ │ └── rs-dreamer(3).png │ │ ├── rs-fast │ │ │ ├── rs-fast(1).png │ │ │ ├── rs-fast(2).png │ │ │ └── rs-fast(3).png │ │ ├── rs-z │ │ │ ├── RS-Z(1).png │ │ │ ├── RS-Z(2).png │ │ │ └── RS-Z(3).png │ │ └── suede-classic-xxi │ │ │ ├── Suede-Classic-XXI(1).png │ │ │ ├── Suede-Classic-XXI(2).png │ │ │ └── Suede-Classic-XXI(3).png │ └── test │ │ ├── mastercard.png │ │ ├── pd-1.png │ │ ├── pd-2.png │ │ ├── pd-3.png │ │ ├── pd-4.png │ │ ├── pd-5.png │ │ ├── pd-6.png │ │ ├── pd-7.png │ │ ├── pd-8.png │ │ └── visa.png └── splash.png ├── babel.config.js ├── navigation └── Tabs.js ├── package-lock.json ├── package.json ├── screens ├── Cart.js ├── CartItems.js ├── Checkout.js ├── Home.js ├── Login.js ├── Product.js ├── Profile.js └── SignUp.js ├── screenshots ├── 1.jpg ├── 10.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg ├── 7.jpg ├── 8.jpg └── 9.jpg └── utilities ├── Colors.js ├── Products.js └── database.js /.expo-shared/assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true, 3 | "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true 4 | } 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .expo/ 3 | npm-debug.* 4 | *.jks 5 | *.p8 6 | *.p12 7 | *.key 8 | *.mobileprovision 9 | *.orig.* 10 | web-build/ 11 | 12 | # macOS 13 | .DS_Store 14 | -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {StyleSheet, Text, View} from 'react-native'; 3 | import {NavigationContainer} from "@react-navigation/native"; 4 | import {createNativeStackNavigator} from "@react-navigation/native-stack"; 5 | import Login from "./screens/Login"; 6 | import Home from './screens/Home'; 7 | import SignUp from './screens/SignUp'; 8 | import Product from './screens/Product'; 9 | import Cart from './screens/Cart'; 10 | import Checkout from './screens/Checkout'; 11 | import Tabs from './navigation/Tabs'; 12 | 13 | export default function App() { 14 | const stack = createNativeStackNavigator(); 15 | return ( 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | {/* Bottom Navigation */} 27 | 28 | 29 | 30 | 31 | 32 | ); 33 | } 34 | 35 | const styles = StyleSheet.create({ 36 | container: { 37 | flex: 1, 38 | }, 39 | }); 40 | 41 | 42 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ecommerce-app-react 2 | This is an ecommerce mobile app designed with react native. 3 |

4 | 5 |      6 | 7 |      8 | 9 |      10 | 11 |      12 | 13 |      14 | 15 |      16 | 17 |      18 | 19 |      20 | 21 |      22 | 23 |

24 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "shopping_app", 4 | "slug": "shopping_app", 5 | "version": "1.0.0", 6 | "orientation": "portrait", 7 | "icon": "./assets/icon.png", 8 | "splash": { 9 | "image": "./assets/splash.png", 10 | "resizeMode": "contain", 11 | "backgroundColor": "#ffffff" 12 | }, 13 | "updates": { 14 | "fallbackToCacheTimeout": 0 15 | }, 16 | "assetBundlePatterns": [ 17 | "**/*" 18 | ], 19 | "ios": { 20 | "supportsTablet": true 21 | }, 22 | "android": { 23 | "adaptiveIcon": { 24 | "foregroundImage": "./assets/adaptive-icon.png", 25 | "backgroundColor": "#FFFFFF" 26 | } 27 | }, 28 | "web": { 29 | "favicon": "./assets/favicon.png" 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/adaptive-icon.png -------------------------------------------------------------------------------- /assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/favicon.png -------------------------------------------------------------------------------- /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/icon.png -------------------------------------------------------------------------------- /assets/icons/apple-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/icons/apple-1.png -------------------------------------------------------------------------------- /assets/icons/apple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/icons/apple.png -------------------------------------------------------------------------------- /assets/icons/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/icons/facebook.png -------------------------------------------------------------------------------- /assets/icons/google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/icons/google.png -------------------------------------------------------------------------------- /assets/icons/sneaker-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/icons/sneaker-icon.png -------------------------------------------------------------------------------- /assets/login/profile-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/login/profile-img.jpg -------------------------------------------------------------------------------- /assets/login/sneaker_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/login/sneaker_1.jpg -------------------------------------------------------------------------------- /assets/login/sneaker_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/login/sneaker_2.jpg -------------------------------------------------------------------------------- /assets/login/sneaker_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/login/sneaker_3.jpg -------------------------------------------------------------------------------- /assets/login/sneaker_4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/login/sneaker_4.jpg -------------------------------------------------------------------------------- /assets/product-images/nike/air-force-1-mens/air-force-1-crater(1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/nike/air-force-1-mens/air-force-1-crater(1).png -------------------------------------------------------------------------------- /assets/product-images/nike/air-force-1-mens/air-force-1-crater(2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/nike/air-force-1-mens/air-force-1-crater(2).png -------------------------------------------------------------------------------- /assets/product-images/nike/air-force-1-mens/air-force-1-crater(3).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/nike/air-force-1-mens/air-force-1-crater(3).png -------------------------------------------------------------------------------- /assets/product-images/nike/air-jordan-retro-3/air-jordan-retro-3(1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/nike/air-jordan-retro-3/air-jordan-retro-3(1).png -------------------------------------------------------------------------------- /assets/product-images/nike/air-jordan-retro-3/air-jordan-retro-3(2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/nike/air-jordan-retro-3/air-jordan-retro-3(2).png -------------------------------------------------------------------------------- /assets/product-images/nike/air-jordan-retro-3/air-jordan-retro-3(3).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/nike/air-jordan-retro-3/air-jordan-retro-3(3).png -------------------------------------------------------------------------------- /assets/product-images/nike/air-jordan-retro-3/air-jordan-retro-3(4).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/nike/air-jordan-retro-3/air-jordan-retro-3(4).png -------------------------------------------------------------------------------- /assets/product-images/nike/air-max-270/air-max-270(1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/nike/air-max-270/air-max-270(1).png -------------------------------------------------------------------------------- /assets/product-images/nike/air-max-270/air-max-270(2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/nike/air-max-270/air-max-270(2).png -------------------------------------------------------------------------------- /assets/product-images/nike/air-max-270/air-max-270(3).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/nike/air-max-270/air-max-270(3).png -------------------------------------------------------------------------------- /assets/product-images/nike/air-max-95/air-max-95(1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/nike/air-max-95/air-max-95(1).png -------------------------------------------------------------------------------- /assets/product-images/nike/air-max-95/air-max-95(2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/nike/air-max-95/air-max-95(2).png -------------------------------------------------------------------------------- /assets/product-images/nike/air-max-95/air-max-95(3).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/nike/air-max-95/air-max-95(3).png -------------------------------------------------------------------------------- /assets/product-images/nike/air-max-97/air-max-97(1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/nike/air-max-97/air-max-97(1).png -------------------------------------------------------------------------------- /assets/product-images/nike/air-max-97/air-max-97(2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/nike/air-max-97/air-max-97(2).png -------------------------------------------------------------------------------- /assets/product-images/nike/air-max-97/air-max-97(3).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/nike/air-max-97/air-max-97(3).png -------------------------------------------------------------------------------- /assets/product-images/nike/air-monarch-iv/air-monarch-iv(1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/nike/air-monarch-iv/air-monarch-iv(1).png -------------------------------------------------------------------------------- /assets/product-images/nike/air-monarch-iv/air-monarch-iv(2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/nike/air-monarch-iv/air-monarch-iv(2).png -------------------------------------------------------------------------------- /assets/product-images/nike/air-monarch-iv/air-monarch-iv(3).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/nike/air-monarch-iv/air-monarch-iv(3).png -------------------------------------------------------------------------------- /assets/product-images/nike/air-zoom-pegasus-38/air-zoom-pegasus(1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/nike/air-zoom-pegasus-38/air-zoom-pegasus(1).png -------------------------------------------------------------------------------- /assets/product-images/nike/air-zoom-pegasus-38/air-zoom-pegasus(2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/nike/air-zoom-pegasus-38/air-zoom-pegasus(2).png -------------------------------------------------------------------------------- /assets/product-images/nike/air-zoom-pegasus-38/air-zoom-pegasus(3).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/nike/air-zoom-pegasus-38/air-zoom-pegasus(3).png -------------------------------------------------------------------------------- /assets/product-images/nike/free-metcon-4/free-metcon-4(1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/nike/free-metcon-4/free-metcon-4(1).png -------------------------------------------------------------------------------- /assets/product-images/nike/free-metcon-4/free-metcon-4(2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/nike/free-metcon-4/free-metcon-4(2).png -------------------------------------------------------------------------------- /assets/product-images/nike/free-metcon-4/free-metcon-4(3).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/nike/free-metcon-4/free-metcon-4(3).png -------------------------------------------------------------------------------- /assets/product-images/nike/jordan-delta-2-sp/jordan-delta-2-sp(1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/nike/jordan-delta-2-sp/jordan-delta-2-sp(1).png -------------------------------------------------------------------------------- /assets/product-images/nike/jordan-delta-2-sp/jordan-delta-2-sp(2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/nike/jordan-delta-2-sp/jordan-delta-2-sp(2).png -------------------------------------------------------------------------------- /assets/product-images/nike/jordan-delta-2-sp/jordan-delta-2-sp(3).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/nike/jordan-delta-2-sp/jordan-delta-2-sp(3).png -------------------------------------------------------------------------------- /assets/product-images/nike/jordan-delta-2-sp/jordan-delta-2-sp(4).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/nike/jordan-delta-2-sp/jordan-delta-2-sp(4).png -------------------------------------------------------------------------------- /assets/product-images/nike/lebron-witness-6/lebron-witness-6(1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/nike/lebron-witness-6/lebron-witness-6(1).png -------------------------------------------------------------------------------- /assets/product-images/nike/lebron-witness-6/lebron-witness-6(2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/nike/lebron-witness-6/lebron-witness-6(2).png -------------------------------------------------------------------------------- /assets/product-images/nike/lebron-witness-6/lebron-witness-6(3).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/nike/lebron-witness-6/lebron-witness-6(3).png -------------------------------------------------------------------------------- /assets/product-images/puma/fuse-training/FUSE-Training(1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/puma/fuse-training/FUSE-Training(1).png -------------------------------------------------------------------------------- /assets/product-images/puma/fuse-training/FUSE-Training(2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/puma/fuse-training/FUSE-Training(2).png -------------------------------------------------------------------------------- /assets/product-images/puma/fuse-training/FUSE-Training(3).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/puma/fuse-training/FUSE-Training(3).png -------------------------------------------------------------------------------- /assets/product-images/puma/rs-dreamer/rs-dreamer(1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/puma/rs-dreamer/rs-dreamer(1).png -------------------------------------------------------------------------------- /assets/product-images/puma/rs-dreamer/rs-dreamer(2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/puma/rs-dreamer/rs-dreamer(2).png -------------------------------------------------------------------------------- /assets/product-images/puma/rs-dreamer/rs-dreamer(3).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/puma/rs-dreamer/rs-dreamer(3).png -------------------------------------------------------------------------------- /assets/product-images/puma/rs-fast/rs-fast(1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/puma/rs-fast/rs-fast(1).png -------------------------------------------------------------------------------- /assets/product-images/puma/rs-fast/rs-fast(2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/puma/rs-fast/rs-fast(2).png -------------------------------------------------------------------------------- /assets/product-images/puma/rs-fast/rs-fast(3).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/puma/rs-fast/rs-fast(3).png -------------------------------------------------------------------------------- /assets/product-images/puma/rs-z/RS-Z(1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/puma/rs-z/RS-Z(1).png -------------------------------------------------------------------------------- /assets/product-images/puma/rs-z/RS-Z(2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/puma/rs-z/RS-Z(2).png -------------------------------------------------------------------------------- /assets/product-images/puma/rs-z/RS-Z(3).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/puma/rs-z/RS-Z(3).png -------------------------------------------------------------------------------- /assets/product-images/puma/suede-classic-xxi/Suede-Classic-XXI(1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/puma/suede-classic-xxi/Suede-Classic-XXI(1).png -------------------------------------------------------------------------------- /assets/product-images/puma/suede-classic-xxi/Suede-Classic-XXI(2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/puma/suede-classic-xxi/Suede-Classic-XXI(2).png -------------------------------------------------------------------------------- /assets/product-images/puma/suede-classic-xxi/Suede-Classic-XXI(3).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/puma/suede-classic-xxi/Suede-Classic-XXI(3).png -------------------------------------------------------------------------------- /assets/product-images/test/mastercard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/test/mastercard.png -------------------------------------------------------------------------------- /assets/product-images/test/pd-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/test/pd-1.png -------------------------------------------------------------------------------- /assets/product-images/test/pd-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/test/pd-2.png -------------------------------------------------------------------------------- /assets/product-images/test/pd-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/test/pd-3.png -------------------------------------------------------------------------------- /assets/product-images/test/pd-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/test/pd-4.png -------------------------------------------------------------------------------- /assets/product-images/test/pd-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/test/pd-5.png -------------------------------------------------------------------------------- /assets/product-images/test/pd-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/test/pd-6.png -------------------------------------------------------------------------------- /assets/product-images/test/pd-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/test/pd-7.png -------------------------------------------------------------------------------- /assets/product-images/test/pd-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/test/pd-8.png -------------------------------------------------------------------------------- /assets/product-images/test/visa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/product-images/test/visa.png -------------------------------------------------------------------------------- /assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/assets/splash.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /navigation/Tabs.js: -------------------------------------------------------------------------------- 1 | import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; 2 | import { SimpleLineIcons, Foundation, Ionicons } from '@expo/vector-icons'; 3 | import React from 'react'; 4 | import Home from "../screens/Home"; 5 | import Profile from '../screens/Profile'; 6 | 7 | const Tab = createBottomTabNavigator(); 8 | 9 | const Tabs = () => { 10 | return( 11 | 12 | 13 | {/* Home Screen */} 14 | ( 17 | 18 | ), 19 | }} /> 20 | 21 | {/* Profile Screen */} 22 | ( 24 | 25 | ), 26 | }}/> 27 | 28 | 29 | ); 30 | } 31 | 32 | export default Tabs; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "scripts": { 4 | "start": "expo start", 5 | "android": "expo start --android", 6 | "ios": "expo start --ios", 7 | "web": "expo start --web", 8 | "eject": "expo eject" 9 | }, 10 | "dependencies": { 11 | "@react-navigation/bottom-tabs": "^6.0.9", 12 | "@react-navigation/native": "^6.0.6", 13 | "@react-navigation/native-stack": "^6.2.5", 14 | "expo": "^43.0.0", 15 | "expo-status-bar": "~1.1.0", 16 | "react": "17.0.1", 17 | "react-dom": "17.0.1", 18 | "react-native": "0.64.2", 19 | "react-native-elements": "^3.4.2", 20 | "react-native-gesture-handler": "~1.10.2", 21 | "react-native-reanimated": "~2.2.0", 22 | "react-native-safe-area-context": "3.3.2", 23 | "react-native-screens": "~3.8.0", 24 | "react-native-web": "0.17.1" 25 | }, 26 | "devDependencies": { 27 | "@babel/core": "^7.12.9" 28 | }, 29 | "private": true 30 | } 31 | -------------------------------------------------------------------------------- /screens/Cart.js: -------------------------------------------------------------------------------- 1 | import { StatusBar } from 'expo-status-bar'; 2 | import React, { useState } from 'react'; 3 | import { Button, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View, Image } from 'react-native'; 4 | import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'; 5 | import { Ionicons, Feather, FontAwesome5 } from '@expo/vector-icons'; 6 | import Colors from "../utilities/Colors"; 7 | import cartItems from './CartItems'; 8 | 9 | 10 | export default function Cart({navigation}) { 11 | const [brand, setBrand] = useState("Nike"); // state to handle which brand's shoes are diplayed 12 | let totalPrice = 0; 13 | console.log(cartItems); 14 | 15 | return ( 16 | 17 | 18 | {/* Homepage top-nav */} 19 | 23 | {navigation.navigate("Home")}}> 24 | 25 | 26 | 27 | 28 | Cart 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | {/* cart items*/} 40 | 41 | 42 | { 43 | cartItems.map((item, index) => { 44 | // update totalPrice 45 | totalPrice += parseInt(item.price); 46 | return( 47 | 48 | 49 | 50 | 51 | 52 | 53 | {item.name} 54 | Men's Shoe 55 | 56 | 57 | 58 | 59 | ${item.price} 60 | .00 61 | 62 | 63 | 64 | 65 | - 66 | 67 | 1 68 | 69 | + 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | ); 78 | }) 79 | } 80 | 81 | 82 | 83 | 84 | {/* Total amount */} 85 | 86 | 87 | 88 | Total 89 | 90 | 91 | {totalPrice}.00 92 | 93 | 94 | 95 | 96 | {/* Checkout button */} 97 | navigation.navigate("Checkout")}> 105 | Checkout 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | ); 114 | } 115 | 116 | const styles = StyleSheet.create({ 117 | container: { 118 | flex: 1, 119 | paddingHorizontal: 22, 120 | marginTop: 10, 121 | backgroundColor: Colors.background, 122 | }, 123 | }); 124 | 125 | -------------------------------------------------------------------------------- /screens/CartItems.js: -------------------------------------------------------------------------------- 1 | // cartItems receive objects added to cart. 2 | const cartItems = []; 3 | 4 | export default cartItems; -------------------------------------------------------------------------------- /screens/Checkout.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Button, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View, Image, Alert } from 'react-native'; 3 | import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'; 4 | import { Ionicons, Feather, FontAwesome5, MaterialCommunityIcons, Entypo } from '@expo/vector-icons'; 5 | import Colors from "../utilities/Colors"; 6 | 7 | 8 | 9 | export default function Checkout({navigation}) { 10 | const [brand, setBrand] = useState("Nike"); // state to handle which brand's shoes are diplayed 11 | const pds = [ 12 | require("../assets/product-images/test/pd-1.png"), 13 | require("../assets/product-images/test/pd-2.png"), 14 | require("../assets/product-images/test/pd-3.png"), 15 | require("../assets/product-images/test/pd-4.png"), 16 | require("../assets/product-images/test/pd-5.png"), 17 | ] 18 | 19 | return ( 20 | 21 | 22 | {/* Homepage top-nav */} 23 | 27 | {navigation.navigate("Cart")}}> 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | Payment Method 43 | 44 | {/* Credit Cards */} 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | ****4358 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | ****3123 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | Add New Card 78 | 79 | 80 | 81 | 82 | 83 | {/* Total amount to pay */} 84 | 85 | Total 86 | 87 | 88 | $000.00 89 | 90 | 91 | 92 | 93 | {/* Confirm checkout button */} 94 | 95 | Alert.alert("", "Payment Processed.\n Thank you.")}> 105 | 106 | Make Payment 107 | 108 | 109 | 110 | 111 | 112 | ); 113 | } 114 | 115 | const styles = StyleSheet.create({ 116 | container: { 117 | flex: 1, 118 | paddingHorizontal: 22, 119 | marginTop: 10, 120 | backgroundColor: Colors.background, 121 | }, 122 | }); 123 | 124 | -------------------------------------------------------------------------------- /screens/Home.js: -------------------------------------------------------------------------------- 1 | import { StatusBar } from 'expo-status-bar'; 2 | import React, { useState } from 'react'; 3 | import { Button, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View, Image } from 'react-native'; 4 | import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'; 5 | import { Ionicons, Feather, FontAwesome5 } from '@expo/vector-icons'; 6 | import Colors from "../utilities/Colors"; 7 | import Products from '../utilities/database'; 8 | 9 | 10 | 11 | export default function Home({navigation}) { 12 | const [brand, setBrand] = useState("Nike"); // state to handle which brand's shoes are diplayed 13 | 14 | return ( 15 | 16 | 17 | {/* Homepage top-nav */} 18 | 22 | navigation.navigate("Profile")}> 23 | 24 | 25 | navigation.navigate("Cart")}> 26 | 27 | 28 | 29 | 30 | 31 | Perfect Shoes 32 | For perfect style 33 | 34 | 35 | 36 | 37 | {/* search bar */} 38 | 47 | 48 | 49 | 50 | 51 | {/* filter icon */} 52 | 60 | 61 | 62 | 63 | 64 | {/* Product listings based on categories */} 65 | 66 | 67 | 68 | ); 69 | } 70 | 71 | const styles = StyleSheet.create({ 72 | container: { 73 | flex: 1, 74 | paddingHorizontal: 22, 75 | marginTop: 10, 76 | backgroundColor: Colors.background, 77 | }, 78 | product: { 79 | backgroundColor: '#fff', 80 | paddingHorizontal: 7, 81 | paddingVertical: 18, 82 | borderRadius: 15, 83 | marginBottom: 15, 84 | // shadowColor: '#000', 85 | // shadowOffset: { 86 | // width: 3, 87 | // height: 2, 88 | // }, 89 | // shadowOpacity: 1.25, 90 | // shadowRadius: 0.84, 91 | elevation: 1, 92 | }, 93 | 94 | brandButtons: { 95 | paddingHorizontal: 15, 96 | paddingVertical: 10, 97 | backgroundColor: '#fff', 98 | borderRadius: 10, 99 | }, 100 | selectedBrandButton: { 101 | backgroundColor: Colors.primary, 102 | }, 103 | brandLabel: { 104 | color: "black", 105 | }, 106 | selectedBrandLabel: { 107 | color: "#fff", 108 | } 109 | }); 110 | 111 | 112 | const ProductList = ({ 113 | values, 114 | products, 115 | selectedBrand, 116 | setSelectedBrand, 117 | navigation, 118 | }) => ( 119 | 120 | 121 | {/* shoe brands */} 122 | 123 | { 124 | values.map(value => { 125 | return( 126 | setSelectedBrand(value)}> 127 | {value} 128 | 129 | ); 130 | }) 131 | } 132 | 133 | 134 | 135 | 142 | 143 | { 144 | products.map((product, index) => { 145 | if (product.type == selectedBrand){ 146 | return( 147 | {navigation.navigate('Product', {index: index})}} > 148 | 149 | 150 | 151 | {product.name} 152 | 153 | ${product.price} 154 | .00 155 | 156 | 157 | 158 | ); 159 | } 160 | }) 161 | } 162 | 163 | 164 | 165 | 166 | 167 | 168 | ); 169 | -------------------------------------------------------------------------------- /screens/Login.js: -------------------------------------------------------------------------------- 1 | import { StatusBar } from 'expo-status-bar'; 2 | import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'; 3 | import React from 'react'; 4 | import { Button, StyleSheet, Text, View, Image, TouchableOpacity, TextInput, ScrollView } from 'react-native'; 5 | import Colors from "../utilities/Colors"; 6 | 7 | export default function Login({navigation}) { 8 | const login_images = [require("../assets/login/sneaker_2.jpg")]; 9 | return ( 10 | 11 | 12 | {/* Logo */} 13 | 14 | 20 | TheSneakerStore 21 | 22 | 23 | {/* Login__Images */} 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | {/* Social-media logins */} 32 | 33 | 34 | {/* line */} 35 | 36 | 37 | 38 | Login 39 | 40 | 41 | 42 | 43 | {/* login with google */} 44 | {navigation.navigate("Main");}}> 45 | 46 | Continue with Google 47 | 48 | 49 | {navigation.navigate("Main");}}> 50 | 51 | Continue with Facebook 52 | 53 | 54 | {navigation.navigate("Main");}}> 55 | 56 | Continue with Apple 57 | 58 | 59 | 60 | Don't have an account? 61 | 62 | {navigation.navigate("Sign Up");}}>Sign Up 68 | 69 | 70 | 71 | 72 | 73 | ); 74 | } 75 | 76 | const styles = StyleSheet.create({ 77 | container: { 78 | flex: 1, 79 | backgroundColor: Colors.background, 80 | paddingHorizontal: 35, 81 | }, 82 | 83 | social_buttons: { 84 | flexDirection: 'row', 85 | alignItems: 'center', 86 | paddingHorizontal: 30, 87 | paddingVertical: 15, 88 | borderWidth: 1, 89 | borderColor: Colors.brown, 90 | backgroundColor: "#fff", 91 | marginBottom: 10, 92 | justifyContent: 'center' 93 | }, 94 | 95 | login_fields: { 96 | paddingHorizontal: 10, 97 | paddingVertical: 10, 98 | borderWidth: 1, 99 | borderColor: Colors.brown, 100 | backgroundColor: "#fff", 101 | marginBottom: 10, 102 | }, 103 | login_images: { 104 | width: 280, 105 | height: 380, 106 | borderRadius: 15, 107 | marginRight: 10, 108 | } 109 | }); 110 | -------------------------------------------------------------------------------- /screens/Product.js: -------------------------------------------------------------------------------- 1 | import { StatusBar } from 'expo-status-bar'; 2 | import React, { useState } from 'react'; 3 | import { Button, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View, Image, Modal } from 'react-native'; 4 | import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'; 5 | import { Ionicons, Feather, FontAwesome5, FontAwesome } from '@expo/vector-icons'; 6 | import Colors from "../utilities/Colors"; 7 | import Products from '../utilities/database'; 8 | import cartItems from './CartItems'; 9 | 10 | 11 | 12 | export default function Product({route, navigation}) { 13 | const [modalVisibility, changeModalVisibility] = useState(false); // state to handle modal visibility 14 | const [currentShot, selectShot] = useState(0); // state to handle which brand's shoes are diplayed 15 | 16 | // data from home screen 17 | const {index} = route.params; 18 | const product_item = Products[index] 19 | const product_name = product_item.name; 20 | const pd_shots = product_item.images 21 | 22 | return ( 23 | 24 | 25 | {/* A modal */} 26 | 27 | {/* Modal content */} 28 | 29 | Item added to Cart successfully. 30 | 31 | {navigation.navigate("Cart")}}> 32 | Go to Cart 33 | 34 | 35 | {navigation.navigate("Home")}}> 36 | Continue Shopping 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | {/* Product top-nav */} 45 | 49 | {navigation.navigate("Home")}}> 50 | 51 | 52 | 53 | 54 | Product Details 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | Men's Shoe 66 | {product_name} 67 | 68 | 69 | 4.9 70 | (120 Reviews) 71 | 72 | 73 | 74 | {/* Handles various product shots */} 75 | 76 | 77 | 78 | 79 | {/* Product details */} 80 | 89 | 90 | {/* Product Colors */} 91 | 92 | Color 93 | 94 | 95 | 96 | 97 | 98 | {/* Product description */} 99 | 100 | Description 101 | 102 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do e 103 | iusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 104 | Read more. 105 | 106 | 107 | 108 | {/* Product Sizes */} 109 | 110 | 111 | Size 112 | 113 | 114 | 115 | UK 116 | US 117 | EU 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 40 127 | 128 | 129 | 41 130 | 131 | 132 | 42 133 | 134 | 135 | 43 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | {/* Add to Cart button */} 144 | 145 | {cartItems.push(product_item), changeModalVisibility(true)}}> 153 | Add to Cart 154 | 155 | 156 | 157 | 158 | ); 159 | } 160 | 161 | const styles = StyleSheet.create({ 162 | container: { 163 | paddingHorizontal: 22, 164 | backgroundColor: Colors.background, 165 | }, 166 | product_shots: { 167 | paddingVertical: 10, 168 | paddingHorizontal: 4, 169 | backgroundColor: "#fff", 170 | marginVertical: 5, 171 | borderRadius: 10, 172 | borderWidth: 1, 173 | borderColor: Colors.textSecondary 174 | }, 175 | selected_shot: { 176 | borderWidth: 2, 177 | borderColor: Colors.primary, 178 | }, 179 | sizes: { 180 | padding: 15, 181 | borderWidth: 1, 182 | borderRadius: 15, 183 | marginRight: 15, 184 | borderColor: Colors.textPrimary 185 | }, 186 | modal: { 187 | justifyContent: 'center', 188 | alignItems: 'center', 189 | backgroundColor : Colors.titleColor, 190 | height: 300 , 191 | width: '80%', 192 | borderRadius:10, 193 | borderWidth: 1, 194 | borderColor: '#fff', 195 | position: 'absolute', 196 | top: 250, 197 | left: 40, 198 | } 199 | }); 200 | 201 | const ProductShots = ({ 202 | shots, 203 | selectedShot, 204 | selectShot, 205 | navigation, 206 | }) => ( 207 | 208 | 209 | 210 | 211 | {/* Product shots */} 212 | { 213 | shots.map((shot, index) => { 214 | return( 215 | selectShot(index)}> 216 | 217 | 218 | ); 219 | }) 220 | } 221 | 222 | 223 | 224 | 225 | ); -------------------------------------------------------------------------------- /screens/Profile.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Button, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View, Image } from 'react-native'; 3 | import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'; 4 | import { Ionicons, Feather, FontAwesome5, MaterialCommunityIcons, Entypo, FontAwesome } from '@expo/vector-icons'; 5 | import Colors from "../utilities/Colors"; 6 | 7 | 8 | 9 | export default function Profile({navigation}) { 10 | const [brand, setBrand] = useState("Nike"); // state to handle which brand's shoes are diplayed 11 | const pds = [ 12 | require("../assets/product-images/test/pd-1.png"), 13 | require("../assets/product-images/test/pd-2.png"), 14 | require("../assets/product-images/test/pd-3.png"), 15 | require("../assets/product-images/test/pd-4.png"), 16 | require("../assets/product-images/test/pd-5.png"), 17 | ] 18 | 19 | return ( 20 | 21 | 22 | {/* Profile top-nav */} 23 | 28 | {navigation.navigate("Home")}}> 29 | 30 | 31 | 32 | 33 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | {/* Line */} 46 | 47 | 48 | {/* Profile card */} 49 | 50 | 51 | {/* Profile Image */} 52 | 53 | 54 | 55 | 56 | 57 | Welcome 58 | Mr. Baakir Qara 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | {/* Line */} 68 | 69 | 70 | {/* Profile options */} 71 | 72 | 73 | 74 | 75 | Settings 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | My Cards 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | Orders 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | Settings 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | {/* Support Card */} 108 | 109 | 110 | How can we help you ? 111 | 112 | 113 | {/* Privacy-policy */} 114 | 115 | Privacy Policy 116 | 117 | Imprint 118 | 119 | English 120 | 121 | 122 | 123 | {/* Confirm checkout button 124 | 125 | navigation.navigate("Cart")}> 135 | 136 | Confirm 137 | 138 | */} 139 | 140 | 141 | 142 | ); 143 | } 144 | 145 | const styles = StyleSheet.create({ 146 | container: { 147 | flex: 1, 148 | paddingHorizontal: 22, 149 | marginTop: 10, 150 | backgroundColor: Colors.background, 151 | }, 152 | }); 153 | 154 | -------------------------------------------------------------------------------- /screens/SignUp.js: -------------------------------------------------------------------------------- 1 | import { StatusBar } from 'expo-status-bar'; 2 | import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'; 3 | import React from 'react'; 4 | import { Button, StyleSheet, Text, View, Image, TouchableOpacity, TextInput, ScrollView } from 'react-native'; 5 | import Colors from "../utilities/Colors"; 6 | 7 | export default function SignUp({navigation}) { 8 | const login_images = [require("../assets/login/sneaker_2.jpg")]; 9 | return ( 10 | 11 | 12 | 18 | TheSneakerStore 19 | 20 | 21 | {/* sign-up fields */} 22 | 23 | Create an account. 30 | 31 | 32 | 33 | {navigation.navigate("Home");}}> 41 | Continue 42 | 43 | 44 | 45 | 46 | {/* Social-media logins */} 47 | 48 | 49 | {/* line */} 50 | 51 | 52 | 53 | or 54 | 55 | 56 | 57 | 58 | {/* login with google */} 59 | {navigation.navigate("Main");}}> 60 | 61 | Sign Up with Google 62 | 63 | 64 | {navigation.navigate("Main");}}> 65 | 66 | Sign Up with Google 67 | 68 | 69 | {navigation.navigate("Main");}}> 70 | 71 | Sign Up with Google 72 | 73 | 74 | 75 | Already have an account? 76 | 77 | {navigation.navigate("Login");}}>Login 83 | 84 | 85 | 86 | 87 | 88 | ); 89 | } 90 | 91 | const styles = StyleSheet.create({ 92 | container: { 93 | flex: 1, 94 | backgroundColor: Colors.background, 95 | paddingHorizontal: 35, 96 | }, 97 | 98 | social_buttons: { 99 | flexDirection: 'row', 100 | alignItems: 'center', 101 | paddingHorizontal: 30, 102 | paddingVertical: 15, 103 | borderWidth: 1, 104 | borderColor: Colors.brown, 105 | backgroundColor: "#fff", 106 | marginBottom: 10, 107 | justifyContent: 'center' 108 | }, 109 | 110 | login_fields: { 111 | paddingHorizontal: 10, 112 | paddingVertical: 10, 113 | borderWidth: 1, 114 | borderColor: Colors.brown, 115 | backgroundColor: "#fff", 116 | marginBottom: 10, 117 | }, 118 | 119 | }); 120 | -------------------------------------------------------------------------------- /screenshots/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/screenshots/1.jpg -------------------------------------------------------------------------------- /screenshots/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/screenshots/10.jpg -------------------------------------------------------------------------------- /screenshots/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/screenshots/2.jpg -------------------------------------------------------------------------------- /screenshots/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/screenshots/3.jpg -------------------------------------------------------------------------------- /screenshots/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/screenshots/4.jpg -------------------------------------------------------------------------------- /screenshots/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/screenshots/5.jpg -------------------------------------------------------------------------------- /screenshots/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/screenshots/6.jpg -------------------------------------------------------------------------------- /screenshots/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/screenshots/7.jpg -------------------------------------------------------------------------------- /screenshots/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/screenshots/8.jpg -------------------------------------------------------------------------------- /screenshots/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janprince/ecommerce-app-react/a9f714b006c142bcdc009280c4fcd916af05588e/screenshots/9.jpg -------------------------------------------------------------------------------- /utilities/Colors.js: -------------------------------------------------------------------------------- 1 | const Colors = { 2 | primary: "#ff8749", 3 | background: "#f6f8fc", 4 | ash: "#9EA2AA", 5 | secondary: "#FE3C10", 6 | brown: "#D6C1BB", 7 | black: "#121114", 8 | textSecondary: "#4C515E", 9 | textPrimary: "#747f96", 10 | titleColor: "#233352" 11 | } 12 | 13 | export default Colors; 14 | -------------------------------------------------------------------------------- /utilities/Products.js: -------------------------------------------------------------------------------- 1 | const Products = [ 2 | {id: 1, name: "Nike Air Jordan X", price: "135", images: [], type: "Nike"}, 3 | {id: 1, name: "Nike Sky Moon", price: "130", images: [], type: "Nike"}, 4 | {id: 1, name: "Nike Zoom Air Xr", price: "135", images: [], type: "Nike"}, 5 | {id: 1, name: "Nike Running Air", price: "135", images: [], type: "Nike"}, 6 | 7 | ] 8 | 9 | 10 | export default Products; -------------------------------------------------------------------------------- /utilities/database.js: -------------------------------------------------------------------------------- 1 | 2 | // Simulates a database of products. 3 | 4 | const Products =[ 5 | // Nike 6 | {name: "Air Zoom Pegasus 38", price: "130", type: "Nike", images:[ 7 | require("../assets/product-images/nike/air-zoom-pegasus-38/air-zoom-pegasus(1).png"), 8 | require("../assets/product-images/nike/air-zoom-pegasus-38/air-zoom-pegasus(2).png"), 9 | require("../assets/product-images/nike/air-zoom-pegasus-38/air-zoom-pegasus(3).png") 10 | ]}, 11 | 12 | {name: "Air Jordan 3 Retro", price: "155", type: "Nike", images:[ 13 | require("../assets/product-images/nike/air-jordan-retro-3/air-jordan-retro-3(1).png"), 14 | require("../assets/product-images/nike/air-jordan-retro-3/air-jordan-retro-3(2).png"), 15 | require("../assets/product-images/nike/air-jordan-retro-3/air-jordan-retro-3(1).png") 16 | ]}, 17 | 18 | {name: "Lebron Witness 6", price: "145", type: "Nike", images:[ 19 | require("../assets/product-images/nike/lebron-witness-6/lebron-witness-6(1).png"), 20 | require("../assets/product-images/nike/lebron-witness-6/lebron-witness-6(2).png"), 21 | require("../assets/product-images/nike/lebron-witness-6/lebron-witness-6(3).png") 22 | ]}, 23 | 24 | {name: "Air Max 97", price: "150", type: "Nike", images:[ 25 | require("../assets/product-images/nike/air-max-97/air-max-97(1).png"), 26 | require("../assets/product-images/nike/air-max-97/air-max-97(3).png"), 27 | require("../assets/product-images/nike/air-max-97/air-max-97(2).png") 28 | ]}, 29 | 30 | {name: "Air Force 1 Crater", price: "105", type: "Nike", images:[ 31 | require("../assets/product-images/nike/air-force-1-mens/air-force-1-crater(1).png"), 32 | require("../assets/product-images/nike/air-force-1-mens/air-force-1-crater(2).png"), 33 | require("../assets/product-images/nike/air-force-1-mens/air-force-1-crater(3).png") 34 | ]}, 35 | 36 | {name: "Air Max 95", price: "145", type: "Nike", images:[ 37 | require("../assets/product-images/nike/air-max-95/air-max-95(1).png"), 38 | require("../assets/product-images/nike/air-max-95/air-max-95(2).png"), 39 | require("../assets/product-images/nike/air-max-95/air-max-95(3).png") 40 | ]}, 41 | 42 | {name: "Air Max 270", price: "199", type: "Nike", images:[ 43 | require("../assets/product-images/nike/air-max-270/air-max-270(1).png"), 44 | require("../assets/product-images/nike/air-max-270/air-max-270(2).png"), 45 | require("../assets/product-images/nike/air-max-270/air-max-270(3).png") 46 | ]}, 47 | 48 | {name: "Free Metcon 4", price: "140", type: "Nike", images:[ 49 | require("../assets/product-images/nike/free-metcon-4/free-metcon-4(1).png"), 50 | require("../assets/product-images/nike/free-metcon-4/free-metcon-4(2).png"), 51 | require("../assets/product-images/nike/free-metcon-4/free-metcon-4(3).png") 52 | ]}, 53 | 54 | {name: "Jordan Delta 2 SP", price: "160", type: "Nike", images:[ 55 | require("../assets/product-images/nike/jordan-delta-2-sp/jordan-delta-2-sp(1).png"), 56 | require("../assets/product-images/nike/jordan-delta-2-sp/jordan-delta-2-sp(2).png"), 57 | require("../assets/product-images/nike/jordan-delta-2-sp/jordan-delta-2-sp(3).png") 58 | ]}, 59 | 60 | {name: "Air Monarch IV", price: "170", type: "Nike", images:[ 61 | require("../assets/product-images/nike/air-monarch-iv/air-monarch-iv(1).png"), 62 | require("../assets/product-images/nike/air-monarch-iv/air-monarch-iv(2).png"), 63 | require("../assets/product-images/nike/air-monarch-iv/air-monarch-iv(3).png") 64 | ]}, 65 | 66 | // Puma 67 | {name: "RS-Z", price: "110", type: "Puma", images:[ 68 | require("../assets/product-images/puma/rs-z/RS-Z(1).png"), 69 | require("../assets/product-images/puma/rs-z/RS-Z(2).png"), 70 | require("../assets/product-images/puma/rs-z/RS-Z(3).png") 71 | ]}, 72 | 73 | {name: "RS-Dreamer", price: "190", type: "Puma", images:[ 74 | require("../assets/product-images/puma/rs-dreamer/rs-dreamer(1).png"), 75 | require("../assets/product-images/puma/rs-dreamer/rs-dreamer(2).png"), 76 | require("../assets/product-images/puma/rs-dreamer/rs-dreamer(3).png") 77 | ]}, 78 | 79 | {name: "Suede Classic XXI", price: "300", type: "Puma", images:[ 80 | require("../assets/product-images/puma/suede-classic-xxi/Suede-Classic-XXI(1).png"), 81 | require("../assets/product-images/puma/suede-classic-xxi/Suede-Classic-XXI(2).png"), 82 | require("../assets/product-images/puma/suede-classic-xxi/Suede-Classic-XXI(3).png") 83 | ]}, 84 | 85 | {name: "Fuse Training", price: "170", type: "Puma", images:[ 86 | require("../assets/product-images/puma/fuse-training/FUSE-Training(1).png"), 87 | require("../assets/product-images/puma/fuse-training/FUSE-Training(2).png"), 88 | require("../assets/product-images/puma/fuse-training/FUSE-Training(3).png") 89 | ]}, 90 | 91 | {name: "RS-FAST", price: "300", type: "Puma", images:[ 92 | require("../assets/product-images/puma/rs-fast/rs-fast(1).png"), 93 | require("../assets/product-images/puma/rs-fast/rs-fast(2).png"), 94 | require("../assets/product-images/puma/rs-fast/rs-fast(3).png") 95 | ]}, 96 | 97 | {name: "RS-FAST", price: "300", type: "Adidas", images:[ 98 | require("../assets/product-images/puma/rs-fast/rs-fast(1).png"), 99 | require("../assets/product-images/puma/rs-fast/rs-fast(2).png"), 100 | require("../assets/product-images/puma/rs-fast/rs-fast(3).png") 101 | ]}, 102 | 103 | {name: "Free Metcon 4", price: "140", type: "New Balance", images:[ 104 | require("../assets/product-images/nike/free-metcon-4/free-metcon-4(1).png"), 105 | require("../assets/product-images/nike/free-metcon-4/free-metcon-4(2).png"), 106 | require("../assets/product-images/nike/free-metcon-4/free-metcon-4(3).png") 107 | ]}, 108 | 109 | {name: "Jordan Delta 2 SP", price: "160", type: "Adidas", images:[ 110 | require("../assets/product-images/nike/jordan-delta-2-sp/jordan-delta-2-sp(1).png"), 111 | require("../assets/product-images/nike/jordan-delta-2-sp/jordan-delta-2-sp(2).png"), 112 | require("../assets/product-images/nike/jordan-delta-2-sp/jordan-delta-2-sp(3).png") 113 | ]}, 114 | 115 | {name: "Air Monarch IV", price: "170", type: "New Balance", images:[ 116 | require("../assets/product-images/nike/air-monarch-iv/air-monarch-iv(1).png"), 117 | require("../assets/product-images/nike/air-monarch-iv/air-monarch-iv(2).png"), 118 | require("../assets/product-images/nike/air-monarch-iv/air-monarch-iv(3).png") 119 | ]}, 120 | 121 | {name: "Air Max 270", price: "199", type: "Adidas", images:[ 122 | require("../assets/product-images/nike/air-max-270/air-max-270(1).png"), 123 | require("../assets/product-images/nike/air-max-270/air-max-270(2).png"), 124 | require("../assets/product-images/nike/air-max-270/air-max-270(3).png") 125 | ]}, 126 | 127 | {name: "Free Metcon 4", price: "140", type: "Adidas", images:[ 128 | require("../assets/product-images/nike/free-metcon-4/free-metcon-4(1).png"), 129 | require("../assets/product-images/nike/free-metcon-4/free-metcon-4(2).png"), 130 | require("../assets/product-images/nike/free-metcon-4/free-metcon-4(3).png") 131 | ]}, 132 | 133 | {name: "Jordan Delta 2 SP", price: "160", type: "New Balance", images:[ 134 | require("../assets/product-images/nike/jordan-delta-2-sp/jordan-delta-2-sp(1).png"), 135 | require("../assets/product-images/nike/jordan-delta-2-sp/jordan-delta-2-sp(2).png"), 136 | require("../assets/product-images/nike/jordan-delta-2-sp/jordan-delta-2-sp(3).png") 137 | ]}, 138 | 139 | {name: "Air Monarch IV", price: "170", type: "Adidas", images:[ 140 | require("../assets/product-images/nike/air-monarch-iv/air-monarch-iv(1).png"), 141 | require("../assets/product-images/nike/air-monarch-iv/air-monarch-iv(2).png"), 142 | require("../assets/product-images/nike/air-monarch-iv/air-monarch-iv(3).png") 143 | ]}, 144 | 145 | ] 146 | 147 | export default Products; --------------------------------------------------------------------------------