├── .babelrc ├── .gitignore ├── .watchmanconfig ├── App.js ├── LICENSE ├── Readme.md ├── Screens └── LoginScreen.js ├── app.json ├── assets ├── icon.png ├── india.png ├── login_bg.jpg └── splash.png ├── demo └── Uber-Ui-Demo.gif ├── package-lock.json └── package.json /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["babel-preset-expo"], 3 | "env": { 4 | "development": { 5 | "plugins": ["transform-react-jsx-source"] 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/**/* 2 | .expo/* 3 | npm-debug.* 4 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View } from 'react-native'; 3 | import { StackNavigator } from 'react-navigation' 4 | import LoginScreen from './Screens/LoginScreen' 5 | 6 | export default class App extends React.Component { 7 | render() { 8 | return ( 9 | 10 | ); 11 | } 12 | } 13 | 14 | const AppStackNavigator = StackNavigator({ 15 | LoginScreen: { screen: LoginScreen } 16 | }) 17 | 18 | const styles = StyleSheet.create({ 19 | container: { 20 | flex: 1, 21 | backgroundColor: '#fff', 22 | alignItems: 'center', 23 | justifyContent: 'center', 24 | }, 25 | }); 26 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Varun Nath 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | # Uber App UI Clone in React Native(Expo) 2 | 3 | ![Alt Text](https://github.com/nathvarun/Uber-App-UI-Clone-React-Native/blob/master/demo/Uber-Ui-Demo.gif?raw=true) 4 | 5 | 6 | ## YouTube Tutorial Video 7 | * ### [Uber UI Clone Login Screen](https://www.youtube.com/watch?v=e1xi0NfpkfI&list=PLy9JCsy2u97lqwG1DiaUA9RPloJ0Ok2wb) 8 | 9 | ## Installation Instructions 10 | 11 | ```js 12 | $ git clone https://github.com/nathvarun/Uber-App-UI-Clone-React-Native.git 13 | $ cd /Uber-App-UI-Clone-React-Native 14 | $ npm install 15 | ``` -------------------------------------------------------------------------------- /Screens/LoginScreen.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet, 6 | ImageBackground, 7 | TextInput, 8 | TouchableOpacity, 9 | Image, 10 | Animated, 11 | Dimensions, 12 | Keyboard, 13 | Platform 14 | } from "react-native"; 15 | 16 | import { Icon } from 'native-base' 17 | const SCREEN_HEIGHT = Dimensions.get('window').height 18 | import * as Animatable from 'react-native-animatable' 19 | 20 | class LoginScreen extends Component { 21 | 22 | static navigationOptions = { 23 | header: null 24 | } 25 | 26 | constructor() { 27 | super() 28 | 29 | this.state = { 30 | placeholderText: 'Enter your mobile number' 31 | } 32 | } 33 | componentWillMount() { 34 | 35 | this.loginHeight = new Animated.Value(150) 36 | 37 | this.keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow) 38 | 39 | this.keyboardWillHideListener = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide) 40 | 41 | this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this.keyboardWillShow) 42 | 43 | this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.keyboardWillHide) 44 | 45 | this.keyboardHeight = new Animated.Value(0) 46 | this.forwardArrowOpacity = new Animated.Value(0) 47 | this.borderBottomWidth = new Animated.Value(0) 48 | } 49 | 50 | keyboardWillShow = (event) => { 51 | 52 | if (Platform.OS == 'android') { 53 | duration = 100 54 | } 55 | else { 56 | duration = event.duration 57 | } 58 | 59 | Animated.parallel([ 60 | 61 | Animated.timing(this.keyboardHeight, { 62 | duration: duration + 100, 63 | toValue: event.endCoordinates.height + 10 64 | }), 65 | Animated.timing(this.forwardArrowOpacity, { 66 | duration: duration, 67 | toValue: 1 68 | }), 69 | Animated.timing(this.borderBottomWidth, { 70 | duration: duration, 71 | toValue: 1 72 | }) 73 | 74 | ]).start() 75 | 76 | } 77 | 78 | keyboardWillHide = (event) => { 79 | 80 | if (Platform.OS == 'android') { 81 | duration = 100 82 | } 83 | else { 84 | duration = event.duration 85 | } 86 | 87 | Animated.parallel([ 88 | 89 | Animated.timing(this.keyboardHeight, { 90 | duration: duration + 100, 91 | toValue: 0 92 | }), 93 | Animated.timing(this.forwardArrowOpacity, { 94 | duration: duration, 95 | toValue: 0 96 | }), 97 | Animated.timing(this.borderBottomWidth, { 98 | duration: event.duration, 99 | toValue: 0 100 | }) 101 | 102 | ]).start() 103 | } 104 | 105 | 106 | 107 | increaseHeightOfLogin = () => { 108 | 109 | this.setState({ placeholderText: '092123456789' }) 110 | Animated.timing(this.loginHeight, { 111 | toValue: SCREEN_HEIGHT, 112 | duration: 500 113 | }).start(() => { 114 | 115 | this.refs.textInputMobile.focus() 116 | }) 117 | } 118 | 119 | decreaseHeightOfLogin = () => { 120 | 121 | Keyboard.dismiss() 122 | Animated.timing(this.loginHeight, { 123 | toValue: 150, 124 | duration: 500 125 | }).start() 126 | } 127 | render() { 128 | const headerTextOpacity = this.loginHeight.interpolate({ 129 | inputRange: [150, SCREEN_HEIGHT], 130 | outputRange: [1, 0] 131 | }) 132 | const marginTop = this.loginHeight.interpolate({ 133 | inputRange: [150, SCREEN_HEIGHT], 134 | outputRange: [25, 100] 135 | }) 136 | const headerBackArrowOpacity = this.loginHeight.interpolate({ 137 | inputRange: [150, SCREEN_HEIGHT], 138 | outputRange: [0, 1] 139 | }) 140 | const titleTextLeft = this.loginHeight.interpolate({ 141 | inputRange: [150, SCREEN_HEIGHT], 142 | outputRange: [100, 25] 143 | }) 144 | const titleTextBottom = this.loginHeight.interpolate({ 145 | inputRange: [150, 400, SCREEN_HEIGHT], 146 | outputRange: [0, 0, 100] 147 | }) 148 | const titleTextOpacity = this.loginHeight.interpolate({ 149 | inputRange: [150, SCREEN_HEIGHT], 150 | outputRange: [0, 1] 151 | }) 152 | 153 | 154 | 155 | 156 | return ( 157 | 158 | 159 | 169 | this.decreaseHeightOfLogin()} 171 | > 172 | 173 | 174 | 175 | 176 | 190 | 191 | 192 | 193 | 197 | 198 | 201 | UBER 202 | 203 | 204 | 205 | {/** BOTTOM HALF **/} 206 | 207 | 208 | 215 | 223 | Get moving with Uber 226 | 227 | 228 | this.increaseHeightOfLogin()} 230 | > 231 | 238 | 247 | Enter your mobile number 248 | 249 | 250 | 251 | 255 | 263 | +91 268 | 269 | 276 | 277 | 278 | 279 | 280 | 281 | 292 | 297 | Or connect using a social account 298 | 299 | 300 | 301 | 302 | 303 | 304 | ); 305 | } 306 | } 307 | export default LoginScreen; 308 | 309 | const styles = StyleSheet.create({ 310 | container: { 311 | flex: 1, 312 | alignItems: 'center', 313 | justifyContent: 'center' 314 | } 315 | }); -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "uber-clone-youtube", 4 | "description": "This project is really great.", 5 | "slug": "uber-clone-youtube", 6 | "privacy": "public", 7 | "sdkVersion": "25.0.0", 8 | "platforms": ["ios", "android"], 9 | "version": "1.0.0", 10 | "orientation": "portrait", 11 | "icon": "./assets/icon.png", 12 | "splash": { 13 | "image": "./assets/splash.png", 14 | "resizeMode": "contain", 15 | "backgroundColor": "#ffffff" 16 | }, 17 | "ios": { 18 | "supportsTablet": true 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/Uber-App-UI-Clone-React-Native/78a92c29774a1bcc462deccaebab613d5e9b584d/assets/icon.png -------------------------------------------------------------------------------- /assets/india.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/Uber-App-UI-Clone-React-Native/78a92c29774a1bcc462deccaebab613d5e9b584d/assets/india.png -------------------------------------------------------------------------------- /assets/login_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/Uber-App-UI-Clone-React-Native/78a92c29774a1bcc462deccaebab613d5e9b584d/assets/login_bg.jpg -------------------------------------------------------------------------------- /assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/Uber-App-UI-Clone-React-Native/78a92c29774a1bcc462deccaebab613d5e9b584d/assets/splash.png -------------------------------------------------------------------------------- /demo/Uber-Ui-Demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/Uber-App-UI-Clone-React-Native/78a92c29774a1bcc462deccaebab613d5e9b584d/demo/Uber-Ui-Demo.gif -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "private": true, 4 | "dependencies": { 5 | "expo": "^25.0.0", 6 | "native-base": "^2.3.10", 7 | "react": "16.2.0", 8 | "react-native": "https://github.com/expo/react-native/archive/sdk-25.0.0.tar.gz", 9 | "react-native-animatable": "^1.2.4", 10 | "react-navigation": "^1.5.1" 11 | } 12 | } 13 | --------------------------------------------------------------------------------