├── .eslintignore ├── tsconfig.json ├── models ├── Brands.ts ├── Category.ts ├── SearchCategory.ts ├── UsersInfo.ts └── item.ts ├── assets ├── icon.png ├── splash.png ├── favicon.png └── adaptive-icon.png ├── database ├── images │ ├── products │ │ ├── 001.jpg │ │ ├── 002.jpg │ │ ├── 003.jpg │ │ ├── Mi1.png │ │ ├── Mi2.png │ │ ├── Mi3.png │ │ ├── boat1.png │ │ ├── boat2.png │ │ ├── boat3.png │ │ ├── boult1.png │ │ ├── boult2.png │ │ └── boult3.png │ └── accessories │ │ ├── boatairpods1.png │ │ ├── boatairpods2.png │ │ ├── boatairpods3.png │ │ ├── boatrockerz1.png │ │ ├── boatrockerz2.png │ │ ├── boatrockerz3.png │ │ ├── boultairbass1.png │ │ ├── boultairbass2.png │ │ ├── boultairbass3.png │ │ ├── boatbassheads1.png │ │ ├── boatbassheads2.png │ │ └── boatbassheads3.png └── Database.ts ├── babel.config.js ├── .gitignore ├── metro.config.js ├── .prettierrc.json ├── index.js ├── react-native.config.js ├── eas.json ├── utils └── sanitizeUrlParams.ts ├── .eslintrc.json ├── App.tsx ├── components ├── BrandCard.tsx ├── Message.tsx ├── Converstaion.tsx ├── ImageCard.tsx └── ScrollCard.tsx ├── app.json ├── firebaseConfig.js ├── router ├── routes.ts ├── MainNavigator.tsx └── TabNavigator.tsx ├── package.json ├── screens ├── Chat.tsx ├── AddItems.tsx ├── Inbox.tsx ├── Search.tsx ├── Settings.tsx ├── Profile.tsx ├── Home.tsx ├── OnBoarding.tsx ├── LogIn.tsx └── ProductInfo.tsx └── hooks └── useHttpApi.ts /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/react-native/tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /models/Brands.ts: -------------------------------------------------------------------------------- 1 | export interface Brands { 2 | id:string, 3 | name:string 4 | } -------------------------------------------------------------------------------- /models/Category.ts: -------------------------------------------------------------------------------- 1 | export interface Category { 2 | label: string; 3 | value: string; 4 | } 5 | -------------------------------------------------------------------------------- /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ilesoviy/solana_online_store-FrontEnd/HEAD/assets/icon.png -------------------------------------------------------------------------------- /assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ilesoviy/solana_online_store-FrontEnd/HEAD/assets/splash.png -------------------------------------------------------------------------------- /assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ilesoviy/solana_online_store-FrontEnd/HEAD/assets/favicon.png -------------------------------------------------------------------------------- /assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ilesoviy/solana_online_store-FrontEnd/HEAD/assets/adaptive-icon.png -------------------------------------------------------------------------------- /models/SearchCategory.ts: -------------------------------------------------------------------------------- 1 | export interface SearchCategory { 2 | id:string, 3 | name: string, 4 | icon: string 5 | 6 | } -------------------------------------------------------------------------------- /database/images/products/001.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ilesoviy/solana_online_store-FrontEnd/HEAD/database/images/products/001.jpg -------------------------------------------------------------------------------- /database/images/products/002.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ilesoviy/solana_online_store-FrontEnd/HEAD/database/images/products/002.jpg -------------------------------------------------------------------------------- /database/images/products/003.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ilesoviy/solana_online_store-FrontEnd/HEAD/database/images/products/003.jpg -------------------------------------------------------------------------------- /database/images/products/Mi1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ilesoviy/solana_online_store-FrontEnd/HEAD/database/images/products/Mi1.png -------------------------------------------------------------------------------- /database/images/products/Mi2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ilesoviy/solana_online_store-FrontEnd/HEAD/database/images/products/Mi2.png -------------------------------------------------------------------------------- /database/images/products/Mi3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ilesoviy/solana_online_store-FrontEnd/HEAD/database/images/products/Mi3.png -------------------------------------------------------------------------------- /database/images/products/boat1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ilesoviy/solana_online_store-FrontEnd/HEAD/database/images/products/boat1.png -------------------------------------------------------------------------------- /database/images/products/boat2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ilesoviy/solana_online_store-FrontEnd/HEAD/database/images/products/boat2.png -------------------------------------------------------------------------------- /database/images/products/boat3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ilesoviy/solana_online_store-FrontEnd/HEAD/database/images/products/boat3.png -------------------------------------------------------------------------------- /database/images/products/boult1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ilesoviy/solana_online_store-FrontEnd/HEAD/database/images/products/boult1.png -------------------------------------------------------------------------------- /database/images/products/boult2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ilesoviy/solana_online_store-FrontEnd/HEAD/database/images/products/boult2.png -------------------------------------------------------------------------------- /database/images/products/boult3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ilesoviy/solana_online_store-FrontEnd/HEAD/database/images/products/boult3.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /database/images/accessories/boatairpods1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ilesoviy/solana_online_store-FrontEnd/HEAD/database/images/accessories/boatairpods1.png -------------------------------------------------------------------------------- /database/images/accessories/boatairpods2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ilesoviy/solana_online_store-FrontEnd/HEAD/database/images/accessories/boatairpods2.png -------------------------------------------------------------------------------- /database/images/accessories/boatairpods3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ilesoviy/solana_online_store-FrontEnd/HEAD/database/images/accessories/boatairpods3.png -------------------------------------------------------------------------------- /database/images/accessories/boatrockerz1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ilesoviy/solana_online_store-FrontEnd/HEAD/database/images/accessories/boatrockerz1.png -------------------------------------------------------------------------------- /database/images/accessories/boatrockerz2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ilesoviy/solana_online_store-FrontEnd/HEAD/database/images/accessories/boatrockerz2.png -------------------------------------------------------------------------------- /database/images/accessories/boatrockerz3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ilesoviy/solana_online_store-FrontEnd/HEAD/database/images/accessories/boatrockerz3.png -------------------------------------------------------------------------------- /database/images/accessories/boultairbass1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ilesoviy/solana_online_store-FrontEnd/HEAD/database/images/accessories/boultairbass1.png -------------------------------------------------------------------------------- /database/images/accessories/boultairbass2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ilesoviy/solana_online_store-FrontEnd/HEAD/database/images/accessories/boultairbass2.png -------------------------------------------------------------------------------- /database/images/accessories/boultairbass3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ilesoviy/solana_online_store-FrontEnd/HEAD/database/images/accessories/boultairbass3.png -------------------------------------------------------------------------------- /database/images/accessories/boatbassheads1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ilesoviy/solana_online_store-FrontEnd/HEAD/database/images/accessories/boatbassheads1.png -------------------------------------------------------------------------------- /database/images/accessories/boatbassheads2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ilesoviy/solana_online_store-FrontEnd/HEAD/database/images/accessories/boatbassheads2.png -------------------------------------------------------------------------------- /database/images/accessories/boatbassheads3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ilesoviy/solana_online_store-FrontEnd/HEAD/database/images/accessories/boatbassheads3.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .expo/ 3 | dist/ 4 | npm-debug.* 5 | *.jks 6 | *.p8 7 | *.p12 8 | *.key 9 | *.mobileprovision 10 | *.orig.* 11 | web-build/ 12 | 13 | # macOS 14 | .DS_Store 15 | -------------------------------------------------------------------------------- /models/UsersInfo.ts: -------------------------------------------------------------------------------- 1 | export interface UsersInfo { 2 | id:string, 3 | name:string, 4 | surname:string, 5 | email:string, 6 | source:string, 7 | bio:string, 8 | starRating:number, 9 | numberReviews:number 10 | } -------------------------------------------------------------------------------- /metro.config.js: -------------------------------------------------------------------------------- 1 | // Learn more https://docs.expo.io/guides/customizing-metro 2 | const { getDefaultConfig } = require('expo/metro-config'); 3 | 4 | const defaultConfig = getDefaultConfig(__dirname); 5 | defaultConfig.resolver.assetExts.push('cjs'); 6 | 7 | module.exports = defaultConfig; -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "always", 3 | "bracketSpacing": true, 4 | "jsxBracketSameLine": false, 5 | "jsxSingleQuote": false, 6 | "quoteProps": "as-needed", 7 | "singleQuote": true, 8 | "semi": true, 9 | "printWidth": 100, 10 | "useTabs": false, 11 | "tabWidth": 2, 12 | "trailingComma": "es5" 13 | } 14 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import { registerRootComponent } from 'expo'; 2 | 3 | import App from './App'; 4 | 5 | // registerRootComponent calls AppRegistry.registerComponent('main', () => App); 6 | // It also ensures that whether you load the app in Expo Go or in a native build, 7 | // the environment is set up appropriately 8 | registerRootComponent(App); 9 | -------------------------------------------------------------------------------- /models/item.ts: -------------------------------------------------------------------------------- 1 | export interface Item { 2 | id: string; 3 | category: string; 4 | productName: string; 5 | productPrice: number; 6 | description: string; 7 | detail: number; 8 | offPercentage?: number; 9 | userVendor?: string; 10 | productImage: string; 11 | likes: number; 12 | productImageList: string[]; 13 | } 14 | -------------------------------------------------------------------------------- /react-native.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | dependency: { 3 | platforms: { 4 | // iOS specific properties go here 5 | ios: {}, 6 | // Android specific properties go here 7 | android: {}, 8 | }, 9 | }, 10 | 'react-native-google-signin': { 11 | platforms: { 12 | android: null 13 | } 14 | } 15 | }; 16 | -------------------------------------------------------------------------------- /eas.json: -------------------------------------------------------------------------------- 1 | { 2 | "build": { 3 | "preview": { 4 | "android": { 5 | "buildType": "apk" 6 | } 7 | }, 8 | "preview2": { 9 | "android": { 10 | "gradleCommand": ":app:assembleRelease" 11 | } 12 | }, 13 | "preview3": { 14 | "developmentClient": true 15 | }, 16 | "production": {} 17 | } 18 | } -------------------------------------------------------------------------------- /utils/sanitizeUrlParams.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Sanitizes url params deleting null or undefined values 3 | * @param queryParams an objcet to be turned in url params 4 | * @returns 5 | */ 6 | export default function sanitizeUrlParams(queryParams: { [x: string]: any }) { 7 | const qp = Object.entries(queryParams).filter( 8 | (entry) => entry[1] !== null && entry[1] !== undefined 9 | ); 10 | return Object.fromEntries(qp); 11 | } 12 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "es2021": true, 4 | "node": true 5 | }, 6 | "extends": ["plugin:react/recommended", "airbnb", "airbnb/hooks", "prettier", "prettier/react"], 7 | "parserOptions": { 8 | "ecmaFeatures": { 9 | "jsx": true 10 | }, 11 | "ecmaVersion": 12, 12 | "sourceType": "module" 13 | }, 14 | "plugins": ["react", "react-native"], 15 | "rules": {}, 16 | "overrides": [{ "files": ["*.ts", "*.tsx"] }] 17 | } 18 | -------------------------------------------------------------------------------- /App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { NavigationContainer } from '@react-navigation/native'; 3 | import MainNavigator from './router/MainNavigator'; 4 | import { extendTheme, NativeBaseProvider } from 'native-base'; 5 | 6 | const theme = extendTheme({}); 7 | 8 | const App = () => { 9 | return ( 10 | 11 | 12 | 13 | 14 | 15 | ); 16 | }; 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /components/BrandCard.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View, Text, TouchableOpacity } from 'react-native'; 3 | import { COLOURS } from '../database/Database'; 4 | 5 | const ScrollBrand = ({ data }: { data: any }) => { 6 | return ( 7 | 25 | 26 | {data.name} 27 | 28 | 29 | ); 30 | }; 31 | 32 | export default ScrollBrand; 33 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "FrontApp", 4 | "slug": "FrontApp", 5 | "version": "1.0.0", 6 | "orientation": "portrait", 7 | "icon": "./assets/icon.png", 8 | "userInterfaceStyle": "light", 9 | "splash": { 10 | "image": "./assets/splash.png", 11 | "resizeMode": "contain", 12 | "backgroundColor": "#ffffff" 13 | }, 14 | "updates": { 15 | "fallbackToCacheTimeout": 0 16 | }, 17 | "assetBundlePatterns": [ 18 | "**/*" 19 | ], 20 | "ios": { 21 | "supportsTablet": true 22 | }, 23 | "android": { 24 | "adaptiveIcon": { 25 | "foregroundImage": "./assets/adaptive-icon.png", 26 | "backgroundColor": "#FFFFFF" 27 | }, 28 | "package": "com.newstar121.FrontApp" 29 | }, 30 | "web": { 31 | "favicon": "./assets/favicon.png" 32 | }, 33 | "extra": { 34 | "eas": { 35 | "projectId": "2e75b1aa-6f1b-4041-832b-0e11720e1781" 36 | } 37 | }, 38 | "scheme": "mycoolredirect" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /firebaseConfig.js: -------------------------------------------------------------------------------- 1 | import { initializeApp } from 'firebase/app'; 2 | 3 | // Optionally import the services that you want to use 4 | // import {...} from "firebase/auth"; 5 | // import {...} from "firebase/database"; 6 | // import {...} from "firebase/firestore"; 7 | // import {...} from "firebase/functions"; 8 | // import {...} from "firebase/storage"; 9 | 10 | // Initialize Firebase 11 | const firebaseConfig = { 12 | apiKey: 'AIzaSyBveNCE-zzLYVnXsfA3eA-EaFN25e2Vr0A', 13 | authDomain: "frontapp-28f45.firebaseapp.com", 14 | projectId: "frontapp-28f45", 15 | storageBucket: "frontapp-28f45.appspot.com", 16 | messagingSenderId: "1064351666274", 17 | appId: "1:1064351666274:web:25e862ad6cf31e4639813b", 18 | databaseURL: 'https://frontapp-28f45.firebaseio.com', 19 | }; 20 | 21 | const firebase = initializeApp(firebaseConfig); 22 | // For more information on how to access Firebase in your project, 23 | // see the Firebase documentation: https://firebase.google.com/docs/web/setup#access-firebase 24 | // export const firebaseAuth = getAuth(app); 25 | export default firebase; -------------------------------------------------------------------------------- /router/routes.ts: -------------------------------------------------------------------------------- 1 | import { NativeStackScreenProps } from '@react-navigation/native-stack'; 2 | import { BottomTabScreenProps } from '@react-navigation/bottom-tabs'; 3 | import { CompositeScreenProps } from '@react-navigation/native'; 4 | import { Item } from '../models/Item'; 5 | 6 | export type MainStackParamList = { 7 | OnBoarding: undefined; 8 | LogIn: undefined; 9 | Settings: undefined; 10 | HomeTabs: undefined; 11 | Product: { product: Item }; 12 | AddItems: undefined; 13 | Chat: undefined; 14 | }; 15 | 16 | export type HomeTabsParamList = { 17 | Home: undefined; 18 | Search: undefined; 19 | AddItems: undefined; 20 | Inbox: undefined; 21 | Profile: undefined; 22 | }; 23 | 24 | export type MainStackScreenProps = NativeStackScreenProps< 25 | MainStackParamList, 26 | T 27 | >; 28 | 29 | export type HomeTabsScreenProps = CompositeScreenProps< 30 | BottomTabScreenProps, 31 | MainStackScreenProps 32 | >; 33 | 34 | declare global { 35 | namespace ReactNavigation { 36 | interface RootParamList extends MainStackParamList {} 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /router/MainNavigator.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { createNativeStackNavigator } from '@react-navigation/native-stack'; 3 | import { MainStackParamList } from './routes'; 4 | import Settings from '../screens/Settings'; 5 | import AddItems from '../screens/AddItems'; 6 | import ProductInfo from '../screens/ProductInfo'; 7 | import Chat from '../screens/Chat'; 8 | import HomeTabsNavigator from './TabNavigator'; 9 | import OnBoarding from '../screens/OnBoarding'; 10 | import LogIn from '../screens/LogIn'; 11 | 12 | const MainStack = createNativeStackNavigator(); 13 | export default function MainNavigator() { 14 | return ( 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /components/Message.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View, Text, TouchableOpacity, Image } from 'react-native'; 3 | import { COLOURS } from '../database/Database'; 4 | 5 | const labelStyles = { 6 | }; 7 | 8 | const Message = ({ data }: { data: any; }) => { 9 | return ( 10 | 16 | 17 | 21 | 22 | 42 | {data.message} 43 | 44 | 45 | 46 | ); 47 | }; 48 | 49 | export default Message; 50 | -------------------------------------------------------------------------------- /components/Converstaion.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View, Text, TouchableOpacity, Image } from 'react-native'; 3 | import { COLOURS } from '../database/Database'; 4 | 5 | const labelStyles = { 6 | }; 7 | 8 | const Conversation = ({ data, onPress }: { data: any; onPress: (id: string) => void }) => { 9 | return ( 10 | onPress(data.id)} 12 | style={{ 13 | margin: 14, 14 | }} 15 | 16 | > 17 | 21 | 22 | 30 | 31 | 35 | {data.fullname || 'John'} 36 | {data.time || 'now'} 37 | 38 | {data.message || 'This is a test message'} 39 | 40 | 41 | 42 | 43 | ); 44 | }; 45 | 46 | export default Conversation; 47 | -------------------------------------------------------------------------------- /components/ImageCard.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View, TouchableOpacity, Image } from 'react-native'; 3 | import { COLOURS } from '../database/Database'; 4 | 5 | const ImageCard = ({ data, onPress }: { data: any; onPress: (id: string) => void }) => { 6 | return ( 7 | onPress(data.id)} 9 | style={{ 10 | width: '8rem', 11 | height: '8rem', 12 | margin: '0.5rem', 13 | // backgroundColor: COLOURS.white, 14 | // borderRadius: 30, 15 | // borderColor: '#000', 16 | // shadowColor: '#000', 17 | // shadowOffset: { 18 | // width: 0, 19 | // height: 5, 20 | // }, 21 | // shadowOpacity: 0.6, 22 | // shadowRadius: 16.0, 23 | elevation: 15, 24 | }} 25 | > 26 | 37 | 47 | 48 | 49 | ); 50 | }; 51 | export default ImageCard; 52 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "frontapp", 3 | "version": "1.0.0", 4 | "main": "node_modules/expo/AppEntry.js", 5 | "scripts": { 6 | "start": "expo start", 7 | "android": "cross-env ENVFILE=.env.dev expo start --android", 8 | "ios": "cross-env ENVFILE=.env.dev expo start --ios", 9 | "web": "expo start --web" 10 | }, 11 | "dependencies": { 12 | "@aws-sdk/client-s3": "^3.272.0", 13 | "@expo/webpack-config": "^0.17.2", 14 | "@heroicons/react": "^2.0.14", 15 | "@react-native-async-storage/async-storage": "^1.17.11", 16 | "@react-navigation/bottom-tabs": "^6.5.3", 17 | "@react-navigation/native": "^6.1.2", 18 | "@react-navigation/native-stack": "^6.9.8", 19 | "axios": "^1.3.4", 20 | "cross-env": "^7.0.3", 21 | "expo": "^47.0.13", 22 | "expo-status-bar": "~1.4.2", 23 | "native-base": "^3.4.28", 24 | "react": "18.1.0", 25 | "react-dom": "18.1.0", 26 | "react-native": "0.70.5", 27 | "react-native-config": "^1.5.0", 28 | "react-native-dynamic-vector-icons": "^1.3.0", 29 | "react-native-element-dropdown": "^2.6.0", 30 | "react-native-elements": "^3.4.3", 31 | "react-native-form-component": "^2.6.8", 32 | "react-native-linear-gradient": "^2.6.2", 33 | "react-native-navigation": "^7.31.1", 34 | "react-native-safe-area-context": "3.3.2", 35 | "react-native-screens": "^3.19.0", 36 | "react-native-svg": "12.1.1", 37 | "react-native-svg-transformer": "^1.0.0", 38 | "react-native-vector-icons": "^9.2.0", 39 | "react-native-web": "~0.18.9", 40 | "react-navigation": "^4.4.4", 41 | "react-number-format": "^5.1.3" 42 | }, 43 | "devDependencies": { 44 | "@babel/core": "^7.12.9", 45 | "@tsconfig/react-native": "^2.0.3", 46 | "@types/jest": "^29.4.0", 47 | "@types/react": "^18.0.28", 48 | "@types/react-test-renderer": "^18.0.0", 49 | "eslint": "^8.35.0", 50 | "eslint-config-prettier": "^8.6.0", 51 | "eslint-plugin-react-native": "^4.0.0", 52 | "prettier": "^2.8.4", 53 | "typescript": "^4.9.5" 54 | }, 55 | "private": true 56 | } 57 | -------------------------------------------------------------------------------- /components/ScrollCard.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View, Text, TouchableOpacity, Image } from 'react-native'; 3 | import { COLOURS } from '../database/Database'; 4 | import Ionicons from 'react-native-vector-icons/Ionicons'; 5 | 6 | const ScrollCard = ({ data, onPress }: { data: any; onPress: (id: string) => void }) => { 7 | return ( 8 | onPress(data.id)} 10 | style={{ 11 | width: 140, 12 | marginVertical: 14, 13 | marginRight: 10, 14 | backgroundColor: COLOURS.white, 15 | padding: 10, 16 | borderRadius: 30, 17 | 18 | shadowColor: '#000', 19 | shadowOffset: { 20 | width: 0, 21 | height: 5, 22 | }, 23 | shadowOpacity: 0.6, 24 | shadowRadius: 16.0, 25 | 26 | elevation: 15, 27 | }} 28 | > 29 | 40 | 48 | 49 | 58 | $ {data.productPrice} 59 | 66 | {data.likes} 67 | 68 | 69 | 70 | 80 | 85 | Size: {data.detail} 86 | 87 | 88 | 89 | ); 90 | }; 91 | export default ScrollCard; 92 | -------------------------------------------------------------------------------- /screens/Chat.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { View, Text, StatusBar, TextInput, Button, FlatList, StyleSheet, TouchableOpacity } from 'react-native'; 3 | 4 | import Entypo from 'react-native-vector-icons/Entypo'; 5 | import { COLOURS } from '../database/Database'; 6 | import { MainStackScreenProps } from '../router/routes'; 7 | import Message from '../components/Message'; 8 | 9 | const Chat = ({ route, navigation }: MainStackScreenProps<'Chat'>) => { 10 | const [messages, setMessages] = useState([]); 11 | const [newMessage, setNewMessage] = useState(''); 12 | 13 | const handleSubmit = () => { 14 | setMessages([{isMe: Math.random() * 10 > 5, message:newMessage }, ]); 15 | setNewMessage(''); 16 | }; 17 | 18 | return ( 19 | 26 | 27 | 28 | 35 | 36 | navigation.goBack()}> 37 | 47 | 48 | 55 | Messages 56 | 57 | 58 | 59 | 60 | 61 | } 70 | /> 71 | 72 | 73 | 74 |