├── src ├── redux │ ├── ActionCreators.js │ ├── ActionTypes.js │ └── ConfigureStore.js ├── image.png ├── screens │ ├── DrawerContainer │ │ ├── logo.jpg │ │ ├── styles.js │ │ └── DrawerContainer.js │ ├── About │ │ ├── styles.js │ │ └── AboutScreen.js │ ├── MyOrder │ │ ├── header.js │ │ ├── orders.js │ │ ├── styles.js │ │ └── OrderDetailsScreen.js │ ├── OrderDetails │ │ ├── header.js │ │ ├── orders.js │ │ ├── styles.js │ │ └── OrderDetailsScreen.js │ ├── Home │ │ ├── styles.js │ │ └── HomeScreen.js │ ├── Categories │ │ ├── styles.js │ │ └── CategoriesScreen.js │ ├── ItemsList │ │ ├── styles.js │ │ └── ItemsListScreen.js │ ├── Search │ │ ├── styles.js │ │ └── SearchScreen.js │ ├── Splash │ │ ├── styles.js │ │ └── SplashScreen.js │ ├── Contact │ │ ├── ContactScreen.js │ │ └── styles.js │ ├── Checkout │ │ ├── styles.js │ │ └── CheckoutScreen.js │ ├── ItemDetails │ │ ├── styles.js │ │ └── ItemDetailsScreen.js │ ├── login │ │ ├── style.js │ │ └── login.js │ └── Cart │ │ ├── CartItem.js │ │ ├── styles.js │ │ └── CartScreen.js ├── components │ ├── MenuImage │ │ ├── styles.js │ │ └── MenuImage.js │ └── MenuButton │ │ ├── styles.js │ │ └── MenuButton.js ├── AppStyles.js └── navigations │ └── AppNavigation.js ├── .idea ├── .gitignore ├── vcs.xml ├── modules.xml ├── store.iml └── codeStyles │ └── Project.xml ├── assets ├── logo.jpg ├── logo.png ├── logo1.png ├── favicon.png ├── icons │ ├── clear.png │ ├── menu.png │ ├── search.png │ └── backArrow.png └── fonts │ ├── ComicNeue-Bold.ttf │ ├── ComicNeue-Regular.ttf │ └── LilitaOne-Regular.ttf ├── babel.config.js ├── .expo-shared └── assets.json ├── .gitignore ├── app.json ├── App.js ├── package.json └── README.md /src/redux/ActionCreators.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.idea/.gitignore: -------------------------------------------------------------------------------- 1 | # Default ignored files 2 | /workspace.xml -------------------------------------------------------------------------------- /src/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ahtrahdis7/my-market-react-native/HEAD/src/image.png -------------------------------------------------------------------------------- /assets/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ahtrahdis7/my-market-react-native/HEAD/assets/logo.jpg -------------------------------------------------------------------------------- /assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ahtrahdis7/my-market-react-native/HEAD/assets/logo.png -------------------------------------------------------------------------------- /assets/logo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ahtrahdis7/my-market-react-native/HEAD/assets/logo1.png -------------------------------------------------------------------------------- /assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ahtrahdis7/my-market-react-native/HEAD/assets/favicon.png -------------------------------------------------------------------------------- /assets/icons/clear.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ahtrahdis7/my-market-react-native/HEAD/assets/icons/clear.png -------------------------------------------------------------------------------- /assets/icons/menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ahtrahdis7/my-market-react-native/HEAD/assets/icons/menu.png -------------------------------------------------------------------------------- /assets/icons/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ahtrahdis7/my-market-react-native/HEAD/assets/icons/search.png -------------------------------------------------------------------------------- /assets/icons/backArrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ahtrahdis7/my-market-react-native/HEAD/assets/icons/backArrow.png -------------------------------------------------------------------------------- /assets/fonts/ComicNeue-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ahtrahdis7/my-market-react-native/HEAD/assets/fonts/ComicNeue-Bold.ttf -------------------------------------------------------------------------------- /assets/fonts/ComicNeue-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ahtrahdis7/my-market-react-native/HEAD/assets/fonts/ComicNeue-Regular.ttf -------------------------------------------------------------------------------- /assets/fonts/LilitaOne-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ahtrahdis7/my-market-react-native/HEAD/assets/fonts/LilitaOne-Regular.ttf -------------------------------------------------------------------------------- /src/screens/DrawerContainer/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ahtrahdis7/my-market-react-native/HEAD/src/screens/DrawerContainer/logo.jpg -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/redux/ActionTypes.js: -------------------------------------------------------------------------------- 1 | export const CATEGORIES_LOADING = 'CATEGORIES_LOADING'; 2 | export const CART_LOADING = 'CART_LOADING'; 3 | export const ITEMS_LOADING = 'ITEMS_LOADING'; 4 | export const ADD_TO_CART = 'ADD_TO_CART'; 5 | -------------------------------------------------------------------------------- /src/components/MenuImage/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | headerButtonContainer: { 5 | padding: 10 6 | }, 7 | menu: { 8 | paddingLeft: 10, 9 | } 10 | }); 11 | 12 | export default styles; 13 | -------------------------------------------------------------------------------- /src/screens/About/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | container: { 5 | flex: 1, 6 | justifyContent: 'center', 7 | alignItems: 'center' 8 | } 9 | }); 10 | 11 | export default styles; 12 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/screens/MyOrder/header.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View, Text } from 'react-native'; 3 | import styles from './styles'; 4 | 5 | export default function Header() { 6 | return ( 7 | 8 | Orders 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /src/screens/OrderDetails/header.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View, Text } from 'react-native'; 3 | import styles from './styles'; 4 | 5 | export default function Header() { 6 | return ( 7 | 8 | Orders 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /src/screens/About/AboutScreen.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Text, View } from 'react-native'; 3 | import styles from './styles'; 4 | 5 | 6 | export default function AboutScreen() { 7 | return ( 8 | 9 | About Us 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /src/screens/Home/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | import { RecipeCard } from '../../AppStyles'; 3 | 4 | const styles = StyleSheet.create({ 5 | container: RecipeCard.container, 6 | photo: RecipeCard.photo, 7 | title: RecipeCard.title, 8 | category: RecipeCard.category 9 | }); 10 | 11 | export default styles; 12 | -------------------------------------------------------------------------------- /src/screens/Categories/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | import { RecipeCard } from '../../AppStyles'; 3 | 4 | const styles = StyleSheet.create({ 5 | container: RecipeCard.container, 6 | photo: RecipeCard.photo, 7 | title: RecipeCard.title, 8 | category: RecipeCard.category, 9 | }); 10 | 11 | export default styles; 12 | -------------------------------------------------------------------------------- /src/screens/ItemsList/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | import { RecipeCard } from '../../AppStyles'; 3 | 4 | const styles = StyleSheet.create({ 5 | container: RecipeCard.container, 6 | photo: RecipeCard.photo, 7 | title: RecipeCard.title, 8 | category: RecipeCard.category 9 | }); 10 | 11 | export default styles; 12 | -------------------------------------------------------------------------------- /src/screens/Search/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | import { RecipeCard } from '../../AppStyles'; 3 | 4 | const styles = StyleSheet.create({ 5 | container: RecipeCard.container, 6 | photo: RecipeCard.photo, 7 | title: RecipeCard.title, 8 | category: RecipeCard.category 9 | }); 10 | 11 | export default styles; 12 | -------------------------------------------------------------------------------- /.idea/store.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/screens/Splash/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | container: { 5 | flex: 1, 6 | justifyContent: 'center', 7 | alignItems: 'center', 8 | backgroundColor: '#2cd18a' 9 | }, 10 | photo: { 11 | width: 150, 12 | height: 150 13 | } 14 | }); 15 | 16 | export default styles; 17 | -------------------------------------------------------------------------------- /src/redux/ConfigureStore.js: -------------------------------------------------------------------------------- 1 | import {createStore, combineReducers, applyMiddleware} from 'redux'; 2 | import thunk from 'redux-thunk'; 3 | import logger from 'redux-logger'; 4 | 5 | 6 | export const ConfigureStore = () => { 7 | const store = createStore( 8 | combineReducers({ 9 | //as per the provided API 10 | }), 11 | applyMiddleware(thunk, logger) 12 | ); 13 | return store; 14 | } -------------------------------------------------------------------------------- /src/screens/DrawerContainer/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | content: { 5 | flex: 1, 6 | marginTop: 30, 7 | flexDirection: 'row', 8 | justifyContent: 'center', 9 | 10 | }, 11 | container: { 12 | flex: 1, 13 | alignItems: 'flex-start', 14 | }, 15 | logo: { 16 | height: 100, 17 | width: 200, 18 | alignSelf: 'center' 19 | } 20 | }); 21 | 22 | export default styles; 23 | -------------------------------------------------------------------------------- /src/screens/Contact/ContactScreen.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Text, View, Image } from 'react-native'; 3 | import styles from './styles'; 4 | 5 | 6 | export default function ContactScreen() { 7 | 8 | return ( 9 | 10 | Contact Details 11 | Rakesh : +919337898487 12 | Samir : +919439818005 13 | 14 | ); 15 | } 16 | 17 | -------------------------------------------------------------------------------- /src/screens/Contact/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | container: { 5 | flex: 1, 6 | alignItems: 'center', 7 | marginTop: '30%', 8 | padding: 20, 9 | }, 10 | head: { 11 | fontFamily: 'comic-bold', 12 | fontSize: 24, 13 | fontWeight: '600', 14 | padding: 20 15 | }, 16 | text: { 17 | fontSize: 20, 18 | fontWeight: '500', 19 | padding: 2, 20 | fontFamily: 'comic-bold' 21 | } 22 | 23 | }); 24 | 25 | export default styles; 26 | -------------------------------------------------------------------------------- /src/components/MenuButton/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | btnClickContain: { 5 | flexDirection: 'row', 6 | padding: 5, 7 | marginTop: 5, 8 | marginBottom: 5 9 | }, 10 | btnContainer: { 11 | flex: 1, 12 | flexDirection: 'row', 13 | alignItems: 'flex-start', 14 | }, 15 | btnIcon: { 16 | height: 25, 17 | width: 25 18 | }, 19 | btnText: { 20 | fontSize: 20, 21 | fontFamily:'comic-bold', 22 | fontWeight:'500', 23 | marginLeft: 15, 24 | marginTop: 4 25 | } 26 | }); 27 | 28 | export default styles; 29 | -------------------------------------------------------------------------------- /src/screens/Splash/SplashScreen.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | FlatList, 4 | ScrollView, 5 | Text, 6 | View, 7 | TouchableOpacity, 8 | AsyncImageAnimated, 9 | Image, 10 | TouchableHighlight 11 | } from 'react-native'; 12 | import styles from './styles'; 13 | 14 | export default class SplashScreen extends React.Component { 15 | constructor(props) { 16 | super(props); 17 | } 18 | render() { 19 | return ( 20 | 21 | 22 | 23 | ); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/components/MenuImage/MenuImage.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { TouchableOpacity, Image } from 'react-native'; 3 | import PropTypes from 'prop-types'; 4 | 5 | import { MaterialIcons } from '@expo/vector-icons'; 6 | import styles from './styles'; 7 | 8 | export default class MenuImage extends React.Component { 9 | render() { 10 | return ( 11 | 12 | 13 | 14 | ); 15 | } 16 | } 17 | 18 | MenuImage.propTypes = { 19 | onPress: PropTypes.func 20 | }; 21 | -------------------------------------------------------------------------------- /src/screens/Checkout/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | container: { 5 | flex: 1, 6 | padding: 20, 7 | marginTop: 20, 8 | fontFamily: 'comic-bold' 9 | }, 10 | input: { 11 | borderWidth: 1, 12 | borderColor: '#ddd', 13 | padding: 10, 14 | fontSize: 18, 15 | borderRadius: 6, 16 | margin: 5, 17 | fontFamily: 'comic-bold' 18 | }, 19 | placeorder: { 20 | backgroundColor: '#008037', 21 | borderRadius: 5, 22 | height: 45, 23 | marginTop: 20, 24 | fontFamily: 'comic-bold' 25 | } 26 | }); 27 | 28 | export default styles; 29 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "Mo supermkt", 4 | "slug": "mosupermkt", 5 | "version": "1.0.0", 6 | "orientation": "portrait", 7 | "icon": "./assets/logo1.png", 8 | "splash": { 9 | "image": "./assets/logo.png", 10 | "resizeMode": "contain", 11 | "backgroundColor": "#ffffff" 12 | }, 13 | "updates": { 14 | "fallbackToCacheTimeout": 0 15 | }, 16 | "assetBundlePatterns": ["**/*"], 17 | "ios": { 18 | "bundleIdentifier": "com.mosupermkt.mosupermkt" 19 | }, 20 | "web": { 21 | "favicon": "./assets/favicon.png" 22 | }, 23 | "android": { 24 | "package": "com.mosupermkt.mosupermkt", 25 | "versionCode": 1 26 | }, 27 | "description": "" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import AppContainer from './src/navigations/AppNavigation'; 3 | import { AppLoading } from 'expo'; 4 | 5 | import * as Font from 'expo-font'; 6 | 7 | const getFonts = () => Font.loadAsync({ 8 | 'comic-regular': require('./assets/fonts/ComicNeue-Regular.ttf'), 9 | 'comic-bold': require('./assets/fonts/ComicNeue-Bold.ttf'), 10 | 'lilita-regular': require('./assets/fonts/LilitaOne-Regular.ttf') 11 | }); 12 | 13 | export default function App() { 14 | const [fontsLoaded, setFontsLoaded] = useState(false); 15 | 16 | if (fontsLoaded) { 17 | return ( 18 | 19 | ); 20 | } else { 21 | return ( 22 | setFontsLoaded(true)} 25 | /> 26 | ) 27 | } 28 | }; 29 | 30 | -------------------------------------------------------------------------------- /src/screens/MyOrder/orders.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { StyleSheet, TouchableOpacity, Text, View } from 'react-native'; 3 | import { MaterialIcons } from '@expo/vector-icons'; 4 | import styles from './styles' 5 | 6 | export default function TodoItem({ pressHandler, item }) { 7 | return ( 8 | 9 | 10 | OrderId : {item.key} 11 | Product Name : {item.productName} 12 | Price : {item.price} 13 | Quantity : {item.quantity} 14 | Contact : {item.Contact} 15 | Address : {item.Address} 16 | 17 | 18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /src/screens/OrderDetails/orders.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { StyleSheet, TouchableOpacity, Text, View } from 'react-native'; 3 | import { MaterialIcons } from '@expo/vector-icons'; 4 | import styles from './styles' 5 | 6 | export default function TodoItem({ pressHandler, item }) { 7 | return ( 8 | 9 | 10 | OrderId : {item.key} 11 | Costumer Name : {item.CustName} 12 | Contact : {item.Contact} 13 | Address : {item.Address} 14 | pressHandler(item.key)} name='check-circle' Text="done" size={18} color='#545' /> 15 | 16 | 17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /src/components/MenuButton/MenuButton.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { TouchableHighlight, Image, Text, View } from 'react-native'; 3 | import PropTypes from 'prop-types'; 4 | import styles from './styles'; 5 | 6 | export default class MenuButton extends React.Component { 7 | render() { 8 | return ( 9 | 14 | 15 | 16 | {this.props.title} 17 | 18 | 19 | ); 20 | } 21 | } 22 | 23 | MenuButton.propTypes = { 24 | onPress: PropTypes.func, 25 | source: PropTypes.number, 26 | title: PropTypes.string 27 | }; 28 | -------------------------------------------------------------------------------- /src/screens/ItemDetails/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet, Dimensions, Platform } from 'react-native'; 2 | 3 | const { width: viewportWidth } = Dimensions.get('window'); 4 | 5 | const styles = StyleSheet.create({ 6 | container: { 7 | backgroundColor: 'white', 8 | flex: 1, 9 | justifyContent: 'center', 10 | alignItems: "center", 11 | padding: 10, 12 | margin: 10 13 | }, 14 | title: { 15 | fontSize: 20, 16 | }, 17 | price: { 18 | fontFamily: 'comic-bold', 19 | paddingTop: 22, 20 | marginHorizontal: 30, 21 | fontSize: 20, 22 | }, 23 | review: { 24 | paddingTop: 10, 25 | fontSize: 18, 26 | fontWeight: 'bold' 27 | }, 28 | photo: { 29 | height: 450, 30 | width: 450 31 | }, 32 | addbtn: { 33 | backgroundColor: "#008037", 34 | margin: 20, 35 | padding: 8, 36 | fontFamily: 'lilita-regular', 37 | } 38 | }); 39 | export default styles; 40 | -------------------------------------------------------------------------------- /src/screens/MyOrder/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | item: { 5 | flex: 1, 6 | padding: 16, 7 | marginTop: 16, 8 | borderColor: '#bbb', 9 | borderWidth: 1, 10 | borderStyle: "dashed", 11 | borderRadius: 1, 12 | borderRadius: 10, 13 | flexDirection: 'column', 14 | }, 15 | itemText: { 16 | marginLeft: 10, 17 | }, 18 | done: { 19 | flex: 1, 20 | alignSelf: "flex-end", 21 | fontSize: 30 22 | }, 23 | container: { 24 | flex: 1, 25 | backgroundColor: '#fff', 26 | }, 27 | list: { 28 | marginTop: 20, 29 | flex: 1, 30 | paddingLeft: "10%", 31 | paddingRight: "10%" 32 | }, 33 | header: { 34 | height: 50, 35 | backgroundColor: '#008037', 36 | justifyContent: 'center' 37 | }, 38 | title: { 39 | textAlign: 'center', 40 | color: '#fff', 41 | fontSize: 20, 42 | fontWeight: 'bold', 43 | } 44 | }); 45 | 46 | export default styles; 47 | -------------------------------------------------------------------------------- /src/screens/OrderDetails/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | item: { 5 | flex: 1, 6 | padding: 16, 7 | marginTop: 16, 8 | borderColor: '#bbb', 9 | borderWidth: 1, 10 | borderStyle: "dashed", 11 | borderRadius: 1, 12 | borderRadius: 10, 13 | flexDirection: 'column', 14 | }, 15 | itemText: { 16 | marginLeft: 10, 17 | }, 18 | done: { 19 | flex: 1, 20 | alignSelf: "flex-end", 21 | fontSize: 30 22 | }, 23 | container: { 24 | flex: 1, 25 | backgroundColor: '#fff', 26 | }, 27 | list: { 28 | marginTop: 20, 29 | flex: 1, 30 | paddingLeft: "10%", 31 | paddingRight: "10%" 32 | }, 33 | header: { 34 | height: 50, 35 | backgroundColor: '#008037', 36 | justifyContent: 'center' 37 | }, 38 | title: { 39 | textAlign: 'center', 40 | color: '#fff', 41 | fontSize: 20, 42 | fontWeight: 'bold', 43 | } 44 | }); 45 | 46 | export default styles; 47 | -------------------------------------------------------------------------------- /src/AppStyles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet, Dimensions } from 'react-native'; 2 | 3 | // screen sizing 4 | const { width, height } = Dimensions.get('window'); 5 | // orientation must fixed 6 | const SCREEN_WIDTH = width < height ? width : height; 7 | 8 | const recipeNumColums = 2; 9 | // item size 10 | const RECIPE_ITEM_HEIGHT = 160; 11 | const RECIPE_ITEM_MARGIN = 20; 12 | 13 | // 2 photos per width 14 | export const RecipeCard = StyleSheet.create({ 15 | container: { 16 | flex: 1, 17 | justifyContent: 'center', 18 | alignItems: 'center', 19 | marginLeft: RECIPE_ITEM_MARGIN, 20 | marginTop: 13, 21 | marginBottom: 7, 22 | width: (SCREEN_WIDTH - (recipeNumColums + 1) * RECIPE_ITEM_MARGIN) / recipeNumColums, 23 | height: RECIPE_ITEM_HEIGHT + 45, 24 | borderColor: '#545454', 25 | borderWidth: 0.15, 26 | borderRadius: 5 27 | }, 28 | photo: { 29 | width: (SCREEN_WIDTH - (recipeNumColums + 1) * RECIPE_ITEM_MARGIN) / recipeNumColums, 30 | height: RECIPE_ITEM_HEIGHT - 20, 31 | borderRadius: 5, 32 | borderBottomLeftRadius: 0, 33 | borderBottomRightRadius: 0 34 | }, 35 | title: { 36 | flex: 1, 37 | fontFamily: 'comic-bold', 38 | fontSize: 18, 39 | textAlign: 'center', 40 | color: '#545454', 41 | height: 200, 42 | marginTop: 15, 43 | marginRight: 5, 44 | marginLeft: 5, 45 | }, 46 | }); 47 | -------------------------------------------------------------------------------- /src/screens/MyOrder/OrderDetailsScreen.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { View, FlatList, AsyncStorage } from 'react-native'; 3 | import OrderItem from './orders'; 4 | import styles from './styles'; 5 | 6 | export default async function App() { 7 | const [orders, setorder] = useState([ 8 | { key: '1', productName: 'atta 5kg', price: '200', quantity: '1', Contact: "+919876543210", Address: "Shaheed Nagar 1st line" }, 9 | { key: '2', productName: 'oil 1ltr', price: '100', quantity: '2', Contact: "+919876543210", Address: "Shaheed Nagar 1st line" }, 10 | ]); 11 | // var orders = [] 12 | // var user = await AsyncStorage.getItem('user'); 13 | // var parsed = JSON.parse(user); 14 | // await fetch('http://testdeployment-env.eba-eqdcmu3a.us-east-2.elasticbeanstalk.com/api/cart/getCart', { 15 | // method: 'POST', 16 | // body: JSON.stringify({ 17 | // phone: parsed.phone 18 | // }) 19 | // }) 20 | // .then(res => res.json()) 21 | // .then((res) => orders.) 22 | 23 | return ( 24 | 25 | 26 | ( 29 | 30 | )} 31 | /> 32 | 33 | 34 | ); 35 | } 36 | 37 | -------------------------------------------------------------------------------- /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-native-community/masked-view": "0.1.5", 12 | "expo": "^38.0.8", 13 | "expo-status-bar": "^1.0.2", 14 | "formik": "^2.1.5", 15 | "react": "~16.11.0", 16 | "react-dom": "~16.11.0", 17 | "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz", 18 | "react-native-elements": "^2.0.4", 19 | "react-native-fbsdk": "^2.0.0", 20 | "react-native-gesture-handler": "~1.5.0", 21 | "react-native-reanimated": "~1.4.0", 22 | "react-native-responsive-screen": "^1.4.1", 23 | "react-native-safe-area-context": "0.6.0", 24 | "react-native-screens": "2.0.0-alpha.12", 25 | "react-native-searchbar": "^1.16.0", 26 | "react-native-snap-carousel": "^3.8.0", 27 | "react-native-vector-icons": "^6.6.0", 28 | "react-native-web": "~0.11.7", 29 | "react-navigation": "^4.3.5", 30 | "react-navigation-drawer": "^2.4.9", 31 | "react-navigation-stack": "^2.3.9", 32 | "react-redux": "^7.2.0", 33 | "redux": "^4.0.5", 34 | "redux-logger": "^3.0.6", 35 | "redux-thunk": "^2.3.0" 36 | }, 37 | "devDependencies": { 38 | "@babel/core": "^7.8.6", 39 | "babel-preset-expo": "~8.1.0" 40 | }, 41 | "private": true 42 | } 43 | -------------------------------------------------------------------------------- /src/screens/OrderDetails/OrderDetailsScreen.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { View, FlatList } from 'react-native'; 3 | import Header from './header'; 4 | import OrderItem from './orders'; 5 | import styles from './styles'; 6 | 7 | export default function App() { 8 | const [orders, setorder] = useState([ 9 | { CustName: 'Ramachandra Panda', key: '1', Contact: "+919876543210", Address: "Shaheed Nagar 1st line" }, 10 | { CustName: 'Harekrushna Mishra', key: '2', Contact: "+919876543210", Address: "Baramunda 3rd line" }, 11 | { CustName: 'Ajitesh Panda', key: '3', Contact: "+919876543210", Address: "Gothapatna 2nd line" }, 12 | { CustName: 'Sidhrtha Mallick', key: '4', Contact: "+919876543210", Address: "Master Canteen 3rd line" }, 13 | ]); 14 | 15 | const pressHandler = (key) => { 16 | const msg = "OrderId " + key + " Delivered Successfully" 17 | alert(msg); 18 | setorder(prevorder => { 19 | return prevorder.filter(todo => todo.key != key); 20 | }); 21 | }; 22 | 23 | return ( 24 | 25 | {/*
*/} 26 | 27 | ( 30 | 31 | )} 32 | /> 33 | 34 | 35 | ); 36 | } 37 | 38 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ECommerce app usign react-native and expo-cli 2 | 3 | Checkout our eCommerce admin app at : https://github.com/ahtrahdis7/my-market-admin 4 | 5 | ## Screens 6 | 7 | ![1](https://user-images.githubusercontent.com/44672399/126171337-b58495c4-f067-4af0-9b07-da20ad1f6ac8.png) 8 | ![2](https://user-images.githubusercontent.com/44672399/126171324-29287f0b-8ff4-4147-92b6-d53914c0d1d3.png) 9 | 10 | ## Features/Screens 11 | - OTP Based Login 12 | - Home Screen 13 | - Categories Screen 14 | - Local Storage Cart 15 | - Add/Remove Cart 16 | - Product Details Screen 17 | ## Tech Stack 18 |
19 | 20 | 21 | expo 22 | 23 | 24 | 25 | native 26 | 27 | 28 | 29 | navigation 30 | 31 | 32 |
33 | 34 | ## Development 35 | This project doesot require basic react native setup to get up and running. Install the expo-sdk and get started. Read more about expo at: https://expo.io 36 | Run the below commands in sequence to start the development server in expo. 37 | In order to start the development server without expo, read the React Native docs at https://reactnative.dev 38 | 
39 | 1. git clone https://github.com/ahtrahdis7/e-commerce-store-react-native.git
40 | 2. cd my-market
41 | 3. yarn add expo
42 | 4. expo install or yarn install
43 | 5. expo start
44 |
45 | 46 | ### If you find this repo useful, please give a `Star`, and let others know about it. 47 | 48 | ### !! Happy Coding !! 49 | -------------------------------------------------------------------------------- /src/screens/ItemDetails/ItemDetailsScreen.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Image, 4 | View, 5 | Text, 6 | Dimensions, 7 | AsyncStorage, ScrollView, 8 | } from 'react-native'; 9 | import { Button } from 'react-native-elements'; 10 | import styles from './styles'; 11 | 12 | const { width: viewportWidth } = Dimensions.get('window'); 13 | 14 | async function addtocart(props) { 15 | const itemDetails = props.getParam('item'); 16 | var user = await AsyncStorage.getItem('user'); 17 | var parsedUser = JSON.parse(user); 18 | 19 | if (parsedUser == null) { 20 | alert('Please Login to continue') 21 | } else { 22 | parsedUser.cart.push(itemDetails); 23 | } 24 | AsyncStorage.setItem('user', JSON.stringify(parsedUser)); 25 | 26 | user = await AsyncStorage.getItem('user'); 27 | parsedUser = JSON.parse(user); 28 | alert('Item added to cart successfully'); 29 | } 30 | export default class RecipeScreen extends React.Component { 31 | static navigationOptions = ({ navigation }) => { 32 | return { 33 | title: navigation.getParam('item').name.toUpperCase(), 34 | }; 35 | } 36 | 37 | 38 | 39 | render() { 40 | const itemDetails = this.props.navigation.getParam('item'); 41 | // console.log(itemDetails) 42 | return ( 43 | 44 | 45 | 46 | 47 | 48 | {itemDetails.name} 49 | Rs.{itemDetails.price} 50 |