├── assets ├── icon.png ├── favicon.png ├── splash.png ├── images │ ├── logo.png │ ├── menu.png │ ├── Model3.jpeg │ ├── ModelS.jpeg │ ├── ModelX.jpeg │ ├── ModelY.jpeg │ ├── SolarRoof.jpeg │ └── SolarPanels.jpeg └── adaptive-icon.png ├── images ├── logo.png ├── Screenshot_1.png └── Screenshot_2.png ├── babel.config.js ├── .expo-shared └── assets.json ├── .gitignore ├── components ├── CarsList │ ├── styles.js │ ├── index.js │ └── cars.js ├── Button │ ├── styles.js │ └── index.js ├── Header │ ├── index.js │ └── styles.js └── CarItem │ ├── index.js │ └── styles.js ├── app.json ├── package.json ├── App.js ├── LICENSE └── README.md /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/tesla-clone-react-native/HEAD/assets/icon.png -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/tesla-clone-react-native/HEAD/images/logo.png -------------------------------------------------------------------------------- /assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/tesla-clone-react-native/HEAD/assets/favicon.png -------------------------------------------------------------------------------- /assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/tesla-clone-react-native/HEAD/assets/splash.png -------------------------------------------------------------------------------- /assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/tesla-clone-react-native/HEAD/assets/images/logo.png -------------------------------------------------------------------------------- /assets/images/menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/tesla-clone-react-native/HEAD/assets/images/menu.png -------------------------------------------------------------------------------- /images/Screenshot_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/tesla-clone-react-native/HEAD/images/Screenshot_1.png -------------------------------------------------------------------------------- /images/Screenshot_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/tesla-clone-react-native/HEAD/images/Screenshot_2.png -------------------------------------------------------------------------------- /assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/tesla-clone-react-native/HEAD/assets/adaptive-icon.png -------------------------------------------------------------------------------- /assets/images/Model3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/tesla-clone-react-native/HEAD/assets/images/Model3.jpeg -------------------------------------------------------------------------------- /assets/images/ModelS.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/tesla-clone-react-native/HEAD/assets/images/ModelS.jpeg -------------------------------------------------------------------------------- /assets/images/ModelX.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/tesla-clone-react-native/HEAD/assets/images/ModelX.jpeg -------------------------------------------------------------------------------- /assets/images/ModelY.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/tesla-clone-react-native/HEAD/assets/images/ModelY.jpeg -------------------------------------------------------------------------------- /assets/images/SolarRoof.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/tesla-clone-react-native/HEAD/assets/images/SolarRoof.jpeg -------------------------------------------------------------------------------- /assets/images/SolarPanels.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlanBinu007/tesla-clone-react-native/HEAD/assets/images/SolarPanels.jpeg -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /components/CarsList/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from "react-native"; 2 | 3 | const styles = StyleSheet.create({ 4 | container: { 5 | width: "100%", 6 | }, 7 | }); 8 | 9 | export default styles; 10 | -------------------------------------------------------------------------------- /components/Button/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from "react-native"; 2 | 3 | const styles = StyleSheet.create({ 4 | container: { 5 | width: "100%", 6 | padding: 10, 7 | }, 8 | button: { 9 | backgroundColor: "white", 10 | height: 40, 11 | justifyContent: "center", 12 | alignItems: "center", 13 | borderRadius: 20, 14 | }, 15 | text: { 16 | fontSize: 12, 17 | fontWeight: "500", 18 | textTransform: "uppercase", 19 | }, 20 | }); 21 | 22 | export default styles; 23 | -------------------------------------------------------------------------------- /components/Header/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Image, View } from "react-native"; 3 | import styles from "./styles"; 4 | 5 | const Header = () => { 6 | return ( 7 | 8 | 12 | 16 | 17 | ); 18 | }; 19 | 20 | export default Header; 21 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "Tesla App", 4 | "slug": "tesla-clone", 5 | "version": "1.0.1", 6 | "orientation": "portrait", 7 | "icon": "./assets/icon.png", 8 | "updates": { 9 | "fallbackToCacheTimeout": 0 10 | }, 11 | "assetBundlePatterns": [ 12 | "**/*" 13 | ], 14 | "ios": { 15 | "supportsTablet": true 16 | }, 17 | "android": { 18 | "package": "com.th3c0d3br34ker.tesla_clone" 19 | }, 20 | "web": { 21 | "favicon": "./assets/favicon.png" 22 | }, 23 | "description": "" 24 | } 25 | } -------------------------------------------------------------------------------- /components/Header/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from "react-native"; 2 | 3 | const styles = StyleSheet.create({ 4 | container: { 5 | width: "100%", 6 | position: "absolute", 7 | top: 50, 8 | zIndex: 100, 9 | paddingHorizontal: 20, 10 | flexDirection: "row", 11 | justifyContent: "space-between", 12 | height: 30, 13 | }, 14 | logo: { 15 | width: 100, 16 | height: 20, 17 | resizeMode: "contain", 18 | }, 19 | menu: { 20 | height: 25, 21 | width: 25, 22 | resizeMode: "contain", 23 | }, 24 | }); 25 | 26 | export default styles; 27 | -------------------------------------------------------------------------------- /components/CarsList/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import CarItem from "../CarItem"; 3 | import Cars from "./cars"; 4 | import { Dimensions, FlatList, View } from "react-native"; 5 | import styles from "./styles"; 6 | 7 | const CarsList = () => { 8 | return ( 9 | 10 | } 13 | snapToAlignment={"start"} 14 | decelerationRate={"fast"} 15 | snapToInterval={Dimensions.get("window").height} 16 | showsVerticalScrollIndicator={false} 17 | /> 18 | 19 | ); 20 | }; 21 | 22 | export default CarsList; 23 | -------------------------------------------------------------------------------- /components/CarItem/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./styles"; 3 | import { View, Text, ImageBackground } from "react-native"; 4 | 5 | const CarItem = ({ car }) => { 6 | const { name, tagline, taglineCTA, image } = car; 7 | return ( 8 | 9 | 10 | 11 | {name} 12 | 13 | {tagline} 14 | 15 | {taglineCTA} 16 | 17 | 18 | 19 | ); 20 | }; 21 | 22 | export default CarItem; 23 | -------------------------------------------------------------------------------- /components/CarItem/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet, Dimensions } from "react-native"; 2 | 3 | const styles = StyleSheet.create({ 4 | carContainer: { 5 | width: "100%", 6 | // height: "100%", 7 | height: Dimensions.get("window").height, 8 | }, 9 | titles: { 10 | marginTop: "30%", 11 | alignItems: "center", 12 | }, 13 | title: { 14 | fontSize: 40, 15 | fontWeight: "500", 16 | }, 17 | subTitle: { 18 | fontSize: 16, 19 | color: "#5c5e62", 20 | }, 21 | subTitleCTA: { 22 | textDecorationLine: "underline", 23 | }, 24 | image: { 25 | width: "100%", 26 | height: "100%", 27 | resizeMode: "cover", 28 | position: "absolute", 29 | }, 30 | }); 31 | 32 | export default styles; 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "publishConfig": { 4 | "registry": "https://npm.pkg.github.com/@AlanBinu007", 5 | }, 6 | "scripts": { 7 | "start": "expo start", 8 | "android": "expo start --android", 9 | "ios": "expo start --ios", 10 | "web": "expo start --web", 11 | "eject": "expo eject" 12 | }, 13 | "dependencies": { 14 | "expo": "~40.0.0", 15 | "expo-status-bar": "~1.0.3", 16 | "react": "16.13.1", 17 | "react-dom": "16.13.1", 18 | "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz", 19 | "react-native-web": "~0.13.12" 20 | }, 21 | "devDependencies": { 22 | "@babel/core": "~7.9.0" 23 | }, 24 | "private": true 25 | } 26 | -------------------------------------------------------------------------------- /components/Button/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Pressable, Text, View, ToastAndroid } from "react-native"; 3 | import styles from "./styles"; 4 | 5 | const Button = ({ type, text }) => { 6 | const backgroundColor = type === "primary" ? "#171A20CC" : "#FFFFFFA6"; 7 | const color = type === "primary" ? "#FFFFFF" : "#171A20CC"; 8 | 9 | return ( 10 | 11 | { 14 | ToastAndroid.show(`${text} Button Pressed!`, ToastAndroid.SHORT); 15 | }} 16 | > 17 | {text} 18 | 19 | 20 | ); 21 | }; 22 | 23 | export default Button; 24 | -------------------------------------------------------------------------------- /components/CarsList/cars.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | id: "111", 4 | name: "Model S", 5 | tagline: "Starting at $69,420 ", 6 | taglineCTA: "", 7 | image: require("../../assets/images/ModelS.jpeg"), 8 | }, 9 | { 10 | id: "222", 11 | name: "Model 3", 12 | tagline: "Order Online for ", 13 | taglineCTA: "Touchless Delivery", 14 | image: require("../../assets/images/Model3.jpeg"), 15 | }, 16 | { 17 | id: "333", 18 | name: "Model X", 19 | tagline: "Order Online for ", 20 | taglineCTA: "Touchless Delivery", 21 | image: require("../../assets/images/ModelX.jpeg"), 22 | }, 23 | { 24 | id: "444", 25 | name: "Model Y", 26 | tagline: "Order Online for ", 27 | taglineCTA: "Touchless Delivery", 28 | image: require("../../assets/images/ModelY.jpeg"), 29 | }, 30 | ]; 31 | -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | import { StatusBar } from "expo-status-bar"; 2 | import React from "react"; 3 | import { StyleSheet, View } from "react-native"; 4 | import CarsList from "./components/CarsList"; 5 | import Header from "./components/Header"; 6 | import Button from "./components/Button"; 7 | 8 | export default function App() { 9 | return ( 10 | 11 | 12 |
13 | 14 |