├── docs └── tripBooking.jpg ├── src ├── assets │ ├── icon.png │ ├── favicon.png │ ├── splash.png │ ├── images │ │ ├── beach.jpeg │ │ ├── home_banner.jpg │ │ ├── ski_villa.jpg │ │ ├── frozen_hills.jpg │ │ ├── climbing_hills.jpg │ │ ├── onboarding_image.jpg │ │ └── ski_villa_banner.jpg │ ├── icons │ │ ├── back_icon.png │ │ ├── bed_icon.png │ │ ├── bus_icon.png │ │ ├── eat_icon.png │ │ ├── home_icon.png │ │ ├── menu_icon.png │ │ ├── star_full.png │ │ ├── star_half.png │ │ ├── taxi_icon.png │ │ ├── user_icon.png │ │ ├── wind_icon.png │ │ ├── compass_icon.png │ │ ├── event_icon.png │ │ ├── parking_icon.png │ │ ├── search_icon.png │ │ ├── star_empty.png │ │ ├── train_icon.png │ │ ├── villa_icon.png │ │ ├── airplane_icon.png │ │ ├── bar_menu_icon.png │ │ └── bookmark_icon.png │ └── fonts │ │ ├── Roboto-Black.ttf │ │ ├── Roboto-Bold.ttf │ │ ├── Roboto-Light.ttf │ │ ├── Roboto-Thin.ttf │ │ ├── Roboto-Italic.ttf │ │ ├── Roboto-Medium.ttf │ │ ├── Roboto-Regular.ttf │ │ ├── Roboto-BoldItalic.ttf │ │ ├── Roboto-ThinItalic.ttf │ │ ├── Roboto-BlackItalic.ttf │ │ ├── Roboto-LightItalic.ttf │ │ ├── Roboto-MediumItalic.ttf │ │ ├── RobotoCondensed-Bold.ttf │ │ ├── RobotoCondensed-Italic.ttf │ │ ├── RobotoCondensed-Light.ttf │ │ ├── RobotoCondensed-Regular.ttf │ │ ├── RobotoCondensed-BoldItalic.ttf │ │ └── RobotoCondensed-LightItalic.ttf ├── screens │ ├── index.js │ ├── Onboarding.js │ ├── Home.js │ └── DestinationDetail.js ├── constants │ ├── index.js │ ├── images.js │ ├── data.js │ ├── icons.js │ └── theme.js └── navigation │ └── tabs.js ├── babel.config.js ├── .prettierrc.js ├── .expo-shared └── assets.json ├── .gitignore ├── README.md ├── app.json ├── package.json └── App.js /docs/tripBooking.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/docs/tripBooking.jpg -------------------------------------------------------------------------------- /src/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/icon.png -------------------------------------------------------------------------------- /src/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/favicon.png -------------------------------------------------------------------------------- /src/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/splash.png -------------------------------------------------------------------------------- /src/assets/images/beach.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/images/beach.jpeg -------------------------------------------------------------------------------- /src/assets/icons/back_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/icons/back_icon.png -------------------------------------------------------------------------------- /src/assets/icons/bed_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/icons/bed_icon.png -------------------------------------------------------------------------------- /src/assets/icons/bus_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/icons/bus_icon.png -------------------------------------------------------------------------------- /src/assets/icons/eat_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/icons/eat_icon.png -------------------------------------------------------------------------------- /src/assets/icons/home_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/icons/home_icon.png -------------------------------------------------------------------------------- /src/assets/icons/menu_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/icons/menu_icon.png -------------------------------------------------------------------------------- /src/assets/icons/star_full.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/icons/star_full.png -------------------------------------------------------------------------------- /src/assets/icons/star_half.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/icons/star_half.png -------------------------------------------------------------------------------- /src/assets/icons/taxi_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/icons/taxi_icon.png -------------------------------------------------------------------------------- /src/assets/icons/user_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/icons/user_icon.png -------------------------------------------------------------------------------- /src/assets/icons/wind_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/icons/wind_icon.png -------------------------------------------------------------------------------- /src/assets/fonts/Roboto-Black.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/fonts/Roboto-Black.ttf -------------------------------------------------------------------------------- /src/assets/fonts/Roboto-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/fonts/Roboto-Bold.ttf -------------------------------------------------------------------------------- /src/assets/fonts/Roboto-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/fonts/Roboto-Light.ttf -------------------------------------------------------------------------------- /src/assets/fonts/Roboto-Thin.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/fonts/Roboto-Thin.ttf -------------------------------------------------------------------------------- /src/assets/icons/compass_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/icons/compass_icon.png -------------------------------------------------------------------------------- /src/assets/icons/event_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/icons/event_icon.png -------------------------------------------------------------------------------- /src/assets/icons/parking_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/icons/parking_icon.png -------------------------------------------------------------------------------- /src/assets/icons/search_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/icons/search_icon.png -------------------------------------------------------------------------------- /src/assets/icons/star_empty.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/icons/star_empty.png -------------------------------------------------------------------------------- /src/assets/icons/train_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/icons/train_icon.png -------------------------------------------------------------------------------- /src/assets/icons/villa_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/icons/villa_icon.png -------------------------------------------------------------------------------- /src/assets/images/home_banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/images/home_banner.jpg -------------------------------------------------------------------------------- /src/assets/images/ski_villa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/images/ski_villa.jpg -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /src/assets/fonts/Roboto-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/fonts/Roboto-Italic.ttf -------------------------------------------------------------------------------- /src/assets/fonts/Roboto-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/fonts/Roboto-Medium.ttf -------------------------------------------------------------------------------- /src/assets/fonts/Roboto-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/fonts/Roboto-Regular.ttf -------------------------------------------------------------------------------- /src/assets/icons/airplane_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/icons/airplane_icon.png -------------------------------------------------------------------------------- /src/assets/icons/bar_menu_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/icons/bar_menu_icon.png -------------------------------------------------------------------------------- /src/assets/icons/bookmark_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/icons/bookmark_icon.png -------------------------------------------------------------------------------- /src/assets/images/frozen_hills.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/images/frozen_hills.jpg -------------------------------------------------------------------------------- /src/assets/fonts/Roboto-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/fonts/Roboto-BoldItalic.ttf -------------------------------------------------------------------------------- /src/assets/fonts/Roboto-ThinItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/fonts/Roboto-ThinItalic.ttf -------------------------------------------------------------------------------- /src/assets/images/climbing_hills.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/images/climbing_hills.jpg -------------------------------------------------------------------------------- /src/assets/images/onboarding_image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/images/onboarding_image.jpg -------------------------------------------------------------------------------- /src/assets/images/ski_villa_banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/images/ski_villa_banner.jpg -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | bracketSpacing: false, 3 | jsxBracketSameLine: true, 4 | singleQuote: true, 5 | trailingComma: 'all', 6 | }; 7 | -------------------------------------------------------------------------------- /src/assets/fonts/Roboto-BlackItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/fonts/Roboto-BlackItalic.ttf -------------------------------------------------------------------------------- /src/assets/fonts/Roboto-LightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/fonts/Roboto-LightItalic.ttf -------------------------------------------------------------------------------- /src/assets/fonts/Roboto-MediumItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/fonts/Roboto-MediumItalic.ttf -------------------------------------------------------------------------------- /src/assets/fonts/RobotoCondensed-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/fonts/RobotoCondensed-Bold.ttf -------------------------------------------------------------------------------- /src/assets/fonts/RobotoCondensed-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/fonts/RobotoCondensed-Italic.ttf -------------------------------------------------------------------------------- /src/assets/fonts/RobotoCondensed-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/fonts/RobotoCondensed-Light.ttf -------------------------------------------------------------------------------- /src/assets/fonts/RobotoCondensed-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/fonts/RobotoCondensed-Regular.ttf -------------------------------------------------------------------------------- /src/assets/fonts/RobotoCondensed-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/fonts/RobotoCondensed-BoldItalic.ttf -------------------------------------------------------------------------------- /src/assets/fonts/RobotoCondensed-LightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/trip-booking-app-react-native/HEAD/src/assets/fonts/RobotoCondensed-LightItalic.ttf -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /src/screens/index.js: -------------------------------------------------------------------------------- 1 | import Home from "./Home"; 2 | import Onboarding from "./Onboarding"; 3 | import DestinationDetail from "./DestinationDetail"; 4 | 5 | export { Home, Onboarding, DestinationDetail }; 6 | -------------------------------------------------------------------------------- /src/constants/index.js: -------------------------------------------------------------------------------- 1 | import icons from './icons'; 2 | import images from './images'; 3 | import theme, {COLORS, SIZES, FONTS, styles} from './theme'; 4 | import {optionItems, destinations} from './data'; 5 | 6 | export { 7 | icons, 8 | images, 9 | theme, 10 | optionItems, 11 | destinations, 12 | COLORS, 13 | SIZES, 14 | FONTS, 15 | styles, 16 | }; 17 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Trip Booking App (UI Mocking) 2 | 3 | A Learning project for React Native Beginner. 4 | 5 | ## Design 6 | 7 | ![Trip Booking Design](./docs/tripBooking.jpg) 8 | 9 | - App Design from [Dribbble](https://dribbble.com/shots/13988973-Digitalz-Ticket) 10 | 11 | ## Stack 12 | 13 | - React Native 14 | - Expo 15 | - React-Navigation 16 | 17 | ## Project Demo 18 | 19 | [Expo Link](https://expo.io/@kelvin9877/tripBooking) - Need Install Expo app in your phone to see it. 20 | -------------------------------------------------------------------------------- /src/constants/images.js: -------------------------------------------------------------------------------- 1 | export const beach = require("../assets/images/beach.jpeg"); 2 | export const climbingHills = require("../assets/images/climbing_hills.jpg"); 3 | export const frozenHills = require("../assets/images/frozen_hills.jpg"); 4 | export const homeBanner = require("../assets/images/home_banner.jpg"); 5 | export const onboardingImage = require("../assets/images/onboarding_image.jpg"); 6 | export const skiVilla = require("../assets/images/ski_villa.jpg"); 7 | export const skiVillaBanner = require("../assets/images/ski_villa_banner.jpg"); 8 | 9 | export default { 10 | beach, 11 | climbingHills, 12 | frozenHills, 13 | homeBanner, 14 | onboardingImage, 15 | skiVilla, 16 | skiVillaBanner, 17 | }; 18 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "Trip Booking App", 4 | "slug": "tripBooking", 5 | "version": "1.0.0", 6 | "orientation": "portrait", 7 | "icon": "./src/assets/icon.png", 8 | "splash": { 9 | "image": "./src/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 | "web": { 23 | "favicon": "./src/assets/favicon.png" 24 | }, 25 | "description": "Trip Booking App Screen Mocking", 26 | "githubUrl": "https://github.com/kelvin8773/trip-booking-app" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /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.10", 12 | "@react-navigation/bottom-tabs": "^5.8.0", 13 | "@react-navigation/native": "^5.7.3", 14 | "@react-navigation/stack": "^5.9.0", 15 | "expo": "~38.0.8", 16 | "expo-font": "~8.2.1", 17 | "expo-linear-gradient": "~8.2.1", 18 | "expo-status-bar": "^1.0.2", 19 | "react": "~16.11.0", 20 | "react-dom": "~16.11.0", 21 | "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz", 22 | "react-native-gesture-handler": "~1.6.0", 23 | "react-native-reanimated": "~1.9.0", 24 | "react-native-safe-area-context": "~3.0.7", 25 | "react-native-screens": "~2.9.0", 26 | "react-native-web": "~0.11.7" 27 | }, 28 | "devDependencies": { 29 | "@babel/core": "^7.8.6", 30 | "babel-preset-expo": "~8.1.0" 31 | }, 32 | "private": true 33 | } 34 | -------------------------------------------------------------------------------- /src/constants/data.js: -------------------------------------------------------------------------------- 1 | import icons from './icons'; 2 | import images from './images'; 3 | 4 | export const optionItems = [ 5 | { 6 | icon: icons.airplane, 7 | bgColor: ['#46aeff', '#5884ff'], 8 | label: 'Flight', 9 | }, 10 | { 11 | icon: icons.train, 12 | bgColor: ['#fddf90', '#fcda13'], 13 | label: 'Train', 14 | }, 15 | { 16 | icon: icons.bus, 17 | bgColor: ['#e973ad', '#da5df2'], 18 | label: 'Bus', 19 | }, 20 | { 21 | icon: icons.taxi, 22 | bgColor: ['#fcaba8', '#fe6bba'], 23 | label: 'Taxi', 24 | }, 25 | { 26 | icon: icons.bed, 27 | bgColor: ['#ffc465', '#ff9c5f'], 28 | label: 'Hotel', 29 | }, 30 | { 31 | icon: icons.eat, 32 | bgColor: ['#7cf1fb', '#4ebefd'], 33 | label: 'Eat', 34 | }, 35 | { 36 | icon: icons.compass, 37 | bgColor: ['#7be993', '#46caaf'], 38 | label: 'Adventure', 39 | }, 40 | { 41 | icon: icons.event, 42 | bgColor: ['#fca397', '#fc7b6c'], 43 | label: 'Event', 44 | }, 45 | ]; 46 | 47 | export const destinations = [ 48 | { 49 | id: 0, 50 | name: 'Ski Villa', 51 | img: images.skiVilla, 52 | }, 53 | { 54 | id: 1, 55 | name: 'Climbing Hills', 56 | img: images.climbingHills, 57 | }, 58 | { 59 | id: 2, 60 | name: 'Frozen Hills', 61 | img: images.frozenHills, 62 | }, 63 | { 64 | id: 3, 65 | name: 'Beach', 66 | img: images.beach, 67 | }, 68 | ]; 69 | 70 | export default {optionItems, destinations}; 71 | -------------------------------------------------------------------------------- /src/constants/icons.js: -------------------------------------------------------------------------------- 1 | export const airplane = require('../assets/icons/airplane_icon.png'); 2 | export const back = require('../assets/icons/back_icon.png'); 3 | export const barMenu = require('../assets/icons/bar_menu_icon.png'); 4 | export const bed = require('../assets/icons/bed_icon.png'); 5 | export const bookmark = require('../assets/icons/bookmark_icon.png'); 6 | export const bus = require('../assets/icons/bus_icon.png'); 7 | export const compass = require('../assets/icons/compass_icon.png'); 8 | export const eat = require('../assets/icons/eat_icon.png'); 9 | export const event = require('../assets/icons/event_icon.png'); 10 | export const home = require('../assets/icons/home_icon.png'); 11 | export const menu = require('../assets/icons/menu_icon.png'); 12 | export const parking = require('../assets/icons/parking_icon.png'); 13 | export const search = require('../assets/icons/search_icon.png'); 14 | export const starEmpty = require('../assets/icons/star_empty.png'); 15 | export const starFull = require('../assets/icons/star_full.png'); 16 | export const starHalf = require('../assets/icons/star_half.png'); 17 | export const taxi = require('../assets/icons/taxi_icon.png'); 18 | export const train = require('../assets/icons/train_icon.png'); 19 | export const user = require('../assets/icons/user_icon.png'); 20 | export const villa = require('../assets/icons/villa_icon.png'); 21 | export const wind = require('../assets/icons/wind_icon.png'); 22 | 23 | export default { 24 | airplane, 25 | back, 26 | barMenu, 27 | bed, 28 | bookmark, 29 | bus, 30 | compass, 31 | eat, 32 | event, 33 | home, 34 | menu, 35 | parking, 36 | search, 37 | starEmpty, 38 | starFull, 39 | starHalf, 40 | taxi, 41 | train, 42 | user, 43 | villa, 44 | wind, 45 | }; 46 | -------------------------------------------------------------------------------- /src/constants/theme.js: -------------------------------------------------------------------------------- 1 | import {Dimensions, StyleSheet} from 'react-native'; 2 | const {width, height} = Dimensions.get('window'); 3 | 4 | export const COLORS = { 5 | // base colors 6 | primary: '#5390ff', // Blue 7 | secondary: '#cacfd9', // Gray 8 | 9 | // colors 10 | black: '#1E1F20', 11 | white: '#FFFFFF', 12 | lightGray: '#eff2f5', 13 | gray: '#8b9097', 14 | }; 15 | export const SIZES = { 16 | // global sizes 17 | base: 8, 18 | font: 14, 19 | radius: 12, 20 | padding: 24, 21 | 22 | // font sizes 23 | largeTitle: 50, 24 | h1: 30, 25 | h2: 22, 26 | h3: 16, 27 | h4: 14, 28 | body1: 30, 29 | body2: 22, 30 | body3: 16, 31 | body4: 14, 32 | 33 | // app dimensions 34 | width, 35 | height, 36 | }; 37 | export const FONTS = { 38 | largeTitle: { 39 | fontFamily: 'Roboto-Black', 40 | fontSize: SIZES.largeTitle, 41 | lineHeight: 55, 42 | }, 43 | h1: {fontFamily: 'Roboto-Black', fontSize: SIZES.h1, lineHeight: 36}, 44 | h2: {fontFamily: 'Roboto-Bold', fontSize: SIZES.h2, lineHeight: 30}, 45 | h3: {fontFamily: 'Roboto-Bold', fontSize: SIZES.h3, lineHeight: 22}, 46 | h4: {fontFamily: 'Roboto-Bold', fontSize: SIZES.h4, lineHeight: 22}, 47 | body1: { 48 | fontFamily: 'Roboto-Regular', 49 | fontSize: SIZES.body1, 50 | lineHeight: 36, 51 | }, 52 | body2: { 53 | fontFamily: 'Roboto-Regular', 54 | fontSize: SIZES.body2, 55 | lineHeight: 30, 56 | }, 57 | body3: { 58 | fontFamily: 'Roboto-Regular', 59 | fontSize: SIZES.body3, 60 | lineHeight: 22, 61 | }, 62 | body4: { 63 | fontFamily: 'Roboto-Regular', 64 | fontSize: SIZES.body4, 65 | lineHeight: 22, 66 | }, 67 | }; 68 | 69 | export const styles = StyleSheet.create({ 70 | container: { 71 | flex: 1, 72 | backgroundColor: COLORS.white, 73 | }, 74 | shadow: { 75 | shadowColor: '#000', 76 | shadowOffset: { 77 | width: 0, 78 | height: 2, 79 | }, 80 | shadowOpacity: 0.25, 81 | shadowRadius: 3.84, 82 | elevation: 5, 83 | }, 84 | }); 85 | 86 | const appTheme = {COLORS, SIZES, FONTS, styles}; 87 | 88 | export default appTheme; 89 | -------------------------------------------------------------------------------- /src/screens/Onboarding.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet, 6 | SafeAreaView, 7 | TouchableOpacity, 8 | Image, 9 | } from 'react-native'; 10 | 11 | import {LinearGradient} from 'expo-linear-gradient'; 12 | 13 | import {COLORS, images, SIZES, FONTS, styles} from '../constants'; 14 | 15 | const Onboarding = ({navigation}) => ( 16 | 17 | 18 | 23 | 24 | 25 | 26 | Digital Ticket 27 | 34 | Easy solution to buy tickets for your travel, business trips, 35 | transportation, lodging and culinary. 36 | 37 | 38 | navigation.navigate('Home')}> 50 | 61 | Start ! 62 | 63 | 64 | 65 | 66 | ); 67 | 68 | export default Onboarding; 69 | -------------------------------------------------------------------------------- /src/navigation/tabs.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Image} from 'react-native'; 3 | import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; 4 | 5 | import {Home} from '../screens'; 6 | import {icons, COLORS} from '../constants'; 7 | 8 | const Tab = createBottomTabNavigator(); 9 | 10 | const tabOptions = { 11 | showLabel: false, 12 | style: { 13 | height: 70, 14 | shadowColor: '#000', 15 | shadowOffset: { 16 | width: 0, 17 | height: 10, 18 | }, 19 | shadowOpacity: 0.53, 20 | shadowRadius: 13.97, 21 | elevation: 21, 22 | }, 23 | }; 24 | 25 | const Tabs = () => ( 26 | ({ 29 | tabBarIcon: ({focused}) => { 30 | const tintColor = focused ? COLORS.primary : COLORS.gray; 31 | switch (route.name) { 32 | case 'Home': 33 | return ( 34 | 39 | ); 40 | case 'Search': 41 | return ( 42 | 47 | ); 48 | case 'Bookmark': 49 | return ( 50 | 55 | ); 56 | case 'Account': 57 | return ( 58 | 63 | ); 64 | } 65 | }, 66 | })}> 67 | 68 | 69 | 70 | 71 | 72 | ); 73 | 74 | export default Tabs; 75 | -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Image, TouchableOpacity} from 'react-native'; 3 | import {AppLoading} from 'expo'; 4 | import {useFonts} from 'expo-font'; 5 | import {createStackNavigator} from '@react-navigation/stack'; 6 | import {NavigationContainer, DefaultTheme} from '@react-navigation/native'; 7 | 8 | // screens 9 | import {Onboarding, DestinationDetail} from './src/screens'; 10 | 11 | // tabs 12 | import Tabs from './src/navigation/tabs'; 13 | 14 | const theme = { 15 | ...DefaultTheme, 16 | colors: { 17 | ...DefaultTheme.colors, 18 | border: 'transparent', 19 | }, 20 | }; 21 | 22 | import {COLORS, SIZES, icons} from './src/constants'; 23 | 24 | const Stack = createStackNavigator(); 25 | 26 | export default function App() { 27 | let [fontsLoaded] = useFonts({ 28 | 'Roboto-Regular': require('./src/assets/fonts/Roboto-Regular.ttf'), 29 | 'Roboto-Bold': require('./src/assets/fonts/Roboto-Bold.ttf'), 30 | 'Roboto-Black': require('./src/assets/fonts/Roboto-Black.ttf'), 31 | }); 32 | 33 | if (!fontsLoaded) { 34 | return ; 35 | } else { 36 | return ( 37 | 38 | 39 | {/* screen */} 40 | ( 50 | console.log('pressed!')}> 55 | 63 | 64 | ), 65 | }} 66 | /> 67 | 72 | {/* tabs */} 73 | ( 82 | 85 | 93 | 94 | ), 95 | headerRight: () => ( 96 | console.log('menu pressed.')}> 99 | 107 | 108 | ), 109 | }} 110 | /> 111 | 112 | 113 | ); 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /src/screens/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | View, 4 | Text, 5 | Image, 6 | StyleSheet, 7 | TouchableOpacity, 8 | FlatList, 9 | } from 'react-native'; 10 | import {LinearGradient} from 'expo-linear-gradient'; 11 | import { 12 | COLORS, 13 | SIZES, 14 | FONTS, 15 | images, 16 | optionItems, 17 | destinations, 18 | styles, 19 | } from '../constants'; 20 | 21 | const Home = ({navigation}) => { 22 | const OptionItem = ({icon, bgColor, label, onPress}) => ( 23 | 30 | 31 | 41 | 46 | 47 | 48 | 49 | {label} 50 | 51 | 52 | ); 53 | 54 | const renderDestination = ({item, index}) => { 55 | const destinationStyle = index === 0 ? {marginLeft: SIZES.padding} : {}; 56 | return ( 57 | { 64 | navigation.navigate('DestinationDetail'); 65 | }}> 66 | 75 | 76 | {item.name} 77 | 78 | 79 | ); 80 | }; 81 | 82 | return ( 83 | 84 | {/* Banner */} 85 | 91 | 96 | 97 | 98 | {/* Options */} 99 | 100 | 106 | {optionItems.slice(0, 4).map(({icon, bgColor, label}, index) => ( 107 | console.log(`${label} Press.`)} 113 | /> 114 | ))} 115 | 116 | 117 | 123 | {optionItems.slice(4).map(({icon, bgColor, label}, index) => ( 124 | console.log(`${label} Press.`)} 130 | /> 131 | ))} 132 | 133 | 134 | 135 | {/* Destination */} 136 | 137 | 143 | Destination 144 | 145 | item.id.toString()} 150 | renderItem={(item, index) => renderDestination(item, index)} 151 | /> 152 | 153 | 154 | ); 155 | }; 156 | 157 | export default Home; 158 | -------------------------------------------------------------------------------- /src/screens/DestinationDetail.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {View, Text, Image, TouchableOpacity} from 'react-native'; 3 | import {COLORS, SIZES, FONTS, styles, images, icons} from '../constants'; 4 | import {LinearGradient} from 'expo-linear-gradient'; 5 | 6 | const StarReview = ({rate}) => { 7 | const stars = []; 8 | const fullStar = Math.floor(rate); 9 | const noStar = Math.floor(5 - rate); 10 | const halfStar = 5 - fullStar - noStar; 11 | 12 | // Full Star 13 | for (let i = 0; i < fullStar; i++) { 14 | stars.push( 15 | , 21 | ); 22 | } 23 | 24 | // Half Star 25 | for (let i = 0; i < halfStar; i++) { 26 | stars.push( 27 | , 33 | ); 34 | } 35 | 36 | // No Star 37 | for (let i = 0; i < noStar; i++) { 38 | stars.push( 39 | , 45 | ); 46 | } 47 | 48 | return ( 49 | 50 | {stars} 51 | 53 | {rate} 54 | 55 | 56 | ); 57 | }; 58 | 59 | const IconLabel = ({icon, label}) => ( 60 | 61 | 62 | 63 | {label} 64 | 65 | 66 | ); 67 | 68 | const DestinationDetail = ({navigation}) => ( 69 | 70 | {/* header */} 71 | 72 | 77 | 78 | 91 | 92 | 93 | 98 | 99 | 104 | Ski Villa 105 | France 106 | 107 | 108 | 109 | 110 | 111 | 112 | Ski Villa offers simple rooms with mountain views in front of the 113 | ski lift to the Ski Resort 114 | 115 | 116 | 117 | 118 | {/* Header Button */} 119 | 127 | 128 | navigation.navigate('Home')}> 129 | 134 | 135 | 136 | 137 | 138 | console.log('menu')}> 139 | 144 | 145 | 146 | 147 | 148 | 149 | {/* body */} 150 | 151 | {/* icons */} 152 | 159 | 160 | 161 | 162 | 163 | 164 | {/* about */} 165 | 170 | About 171 | 173 | Located at the Alps with an altitude of 1,702 meters. The ski area is 174 | the largest ski area in the world and is known as the best place to 175 | ski. Many other facilities, such as fitness center, sauna, steam room 176 | to star-rated restaurants. 177 | 178 | 179 | 180 | 181 | {/* footer */} 182 | 183 | 188 | 189 | 195 | $799 196 | 197 | { 204 | console.log('Booking on pressed'); 205 | }}> 206 | 218 | BOOKING 219 | 220 | 221 | 222 | 223 | 224 | 225 | ); 226 | 227 | export default DestinationDetail; 228 | --------------------------------------------------------------------------------