├── .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;
--------------------------------------------------------------------------------