├── .babelrc ├── .gitignore ├── .watchmanconfig ├── App.js ├── License ├── Project Files ├── 01. Instagram Clone │ ├── App.js │ ├── Components │ │ ├── AppTabNavigator │ │ │ ├── AddMediaTab.js │ │ │ ├── HomeTab.js │ │ │ ├── LikesTab.js │ │ │ ├── ProfileTab.js │ │ │ └── SearchTab.js │ │ ├── CardComponent.js │ │ └── MainScreen.js │ └── assets │ │ ├── feed_images │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ └── 3.png │ │ ├── icon.png │ │ ├── me.png │ │ └── splash.png ├── 03. Instagram Stories Header │ ├── App.js │ ├── Components │ │ ├── AppTabNavigator │ │ │ ├── AddMediaTab.js │ │ │ ├── HomeTab.js │ │ │ ├── LikesTab.js │ │ │ ├── ProfileTab.js │ │ │ └── SearchTab.js │ │ ├── CardComponent.js │ │ └── MainScreen.js │ └── assets │ │ ├── StoriesHeaderThumbnails │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ ├── 6.jpg │ │ └── 7.jpg │ │ ├── feed_images │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ └── 3.png │ │ ├── icon.png │ │ ├── me.jpg │ │ └── splash.png ├── 04. Instagram Profile Tab │ ├── App.js │ ├── Components │ │ ├── AppTabNavigator │ │ │ ├── AddMediaTab.js │ │ │ ├── HomeTab.js │ │ │ ├── LikesTab.js │ │ │ ├── ProfileTab.js │ │ │ └── SearchTab.js │ │ ├── CardComponent.js │ │ └── MainScreen.js │ └── assets │ │ ├── StoriesHeaderThumbnails │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ ├── 6.jpg │ │ └── 7.jpg │ │ ├── feed_images │ │ ├── 1.jpg │ │ ├── 10.jpg │ │ ├── 11.jpg │ │ ├── 12.jpg │ │ ├── 2.jpg │ │ ├── 3.png │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ ├── 6.jpg │ │ ├── 7.jpg │ │ ├── 8.png │ │ └── 9.jpg │ │ ├── icon.png │ │ ├── me.jpg │ │ └── splash.png ├── 05. #1 Snapchat Swipe UI │ ├── App.js │ ├── app.json │ ├── package-lock.json │ └── package.json ├── 06. #2 Snapchat Camera UI │ ├── App.js │ ├── Components │ │ └── Camera.js │ ├── app.json │ └── package.json ├── 07.#1,#2 Inshorts UI Clone Swipe Deck │ ├── App.js │ ├── app.json │ ├── assets │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.jpg │ │ ├── 4.png │ │ ├── 5.png │ │ ├── icon.png │ │ └── splash.png │ ├── package-lock.json │ └── package.json ├── 08. #3 Inshorts UI Clone Swipe Deck Animation │ ├── App.js │ ├── app.json │ ├── assets │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.jpg │ │ ├── 4.png │ │ ├── 5.png │ │ ├── icon.png │ │ └── splash.png │ ├── package-lock.json │ └── package.json ├── 09. Apple Music UI │ ├── App.js │ ├── app.json │ ├── assets │ │ └── Hotelcalifornia.jpg │ └── package.json ├── 10. Uber UI Clone │ ├── App.js │ ├── Readme.md │ ├── app.json │ ├── assets │ │ ├── icon.png │ │ ├── india.png │ │ ├── login_bg.jpg │ │ └── splash.png │ └── package.json ├── 11. Amazon UI │ ├── #1. The Header Component │ │ ├── App.js │ │ ├── app.json │ │ ├── assets │ │ │ ├── icon.png │ │ │ ├── recommended_1.jpg │ │ │ ├── recommended_2.jpg │ │ │ ├── recommended_3.jpg │ │ │ ├── splash.png │ │ │ ├── swiper_2.jpg │ │ │ └── swiper_3.jpg │ │ ├── package-lock.json │ │ ├── package.json │ │ └── screens 2 │ │ │ └── HomeScreen.js │ ├── #2. Recommendations View │ │ ├── App.js │ │ ├── app.json │ │ ├── assets │ │ │ ├── icon.png │ │ │ ├── recommended_1.jpg │ │ │ ├── recommended_2.jpg │ │ │ ├── recommended_3.jpg │ │ │ ├── splash.png │ │ │ ├── swiper_2.jpg │ │ │ └── swiper_3.jpg │ │ ├── components │ │ │ └── RecommendedCardItem.js │ │ ├── package-lock.json │ │ ├── package.json │ │ └── screens │ │ │ └── HomeScreen.js │ └── #3. Customize Drawer Navigator │ │ ├── App.js │ │ ├── app.json │ │ ├── assets │ │ ├── icon.png │ │ ├── recommended_1.jpg │ │ ├── recommended_2.jpg │ │ ├── recommended_3.jpg │ │ ├── splash.png │ │ ├── swiper_2.jpg │ │ └── swiper_3.jpg │ │ ├── components │ │ └── RecommendedCardItem.js │ │ ├── package-lock.json │ │ ├── package.json │ │ └── screens │ │ └── HomeScreen.js ├── 12 Tinder Swipe Deck │ ├── #1 Setup UI & add PanResponder │ │ ├── App.js │ │ ├── app.json │ │ ├── assets │ │ │ ├── 1.jpg │ │ │ ├── 2.jpg │ │ │ ├── 3.jpg │ │ │ ├── 4.jpg │ │ │ ├── 5.jpg │ │ │ ├── icon.png │ │ │ └── splash.png │ │ └── package.json │ └── #2 Complete Animation │ │ ├── App.js │ │ ├── app.json │ │ ├── assets │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ ├── icon.png │ │ └── splash.png │ │ └── package.json ├── 12. Airbnb UI │ ├── #1 Tab Navigator And Header │ │ ├── App.js │ │ ├── app.json │ │ ├── assets │ │ │ ├── airbnb.png │ │ │ ├── experiences.jpg │ │ │ ├── home.jpg │ │ │ ├── icon.png │ │ │ ├── restaurant.jpg │ │ │ └── splash.png │ │ ├── package-lock.json │ │ ├── package.json │ │ └── screens │ │ │ ├── Explore.js │ │ │ ├── Inbox.js │ │ │ ├── Profile.js │ │ │ ├── Saved.js │ │ │ └── Trips.js │ ├── #2 Horizontal ScrollView │ │ ├── App.js │ │ ├── app.json │ │ ├── assets │ │ │ ├── airbnb.png │ │ │ ├── experiences.jpg │ │ │ ├── home.jpg │ │ │ ├── icon.png │ │ │ ├── restaurant.jpg │ │ │ └── splash.png │ │ ├── package-lock.json │ │ ├── package.json │ │ └── screens │ │ │ ├── Explore.js │ │ │ ├── Inbox.js │ │ │ ├── Profile.js │ │ │ ├── Saved.js │ │ │ ├── Trips.js │ │ │ └── components │ │ │ └── Explore │ │ │ └── Category.js │ ├── #3 Recommended Homes │ │ ├── App.js │ │ ├── app.json │ │ ├── assets │ │ │ ├── airbnb.png │ │ │ ├── experiences.jpg │ │ │ ├── home.jpg │ │ │ ├── icon.png │ │ │ ├── restaurant.jpg │ │ │ └── splash.png │ │ ├── package-lock.json │ │ ├── package.json │ │ └── screens │ │ │ ├── Explore.js │ │ │ ├── Inbox.js │ │ │ ├── Profile.js │ │ │ ├── Saved.js │ │ │ ├── Trips.js │ │ │ └── components │ │ │ └── Explore │ │ │ ├── Category.js │ │ │ └── Home.js │ └── #4 Animated Header │ │ ├── App.js │ │ ├── app.json │ │ ├── assets │ │ ├── airbnb.png │ │ ├── experiences.jpg │ │ ├── home.jpg │ │ ├── icon.png │ │ ├── restaurant.jpg │ │ └── splash.png │ │ ├── package-lock.json │ │ ├── package.json │ │ └── screens │ │ ├── Explore.js │ │ ├── Inbox.js │ │ ├── Profile.js │ │ ├── Saved.js │ │ ├── Trips.js │ │ └── components │ │ └── Explore │ │ ├── Category.js │ │ ├── Home.js │ │ └── Tag.js ├── 14. Apple App of the day │ ├── #1. Basic Layout │ │ ├── App.js │ │ ├── app.json │ │ ├── assets │ │ │ ├── 1.jpg │ │ │ ├── 2.jpg │ │ │ ├── 3.jpg │ │ │ ├── 4.jpg │ │ │ ├── icon.png │ │ │ └── splash.png │ │ └── package.json │ ├── #2. Opening Animation │ │ ├── App.js │ │ ├── app.json │ │ ├── assets │ │ │ ├── 1.jpg │ │ │ ├── 2.jpg │ │ │ ├── 3.jpg │ │ │ ├── 4.jpg │ │ │ ├── icon.png │ │ │ └── splash.png │ │ └── package.json │ └── #3. Closing Animation │ │ ├── App.js │ │ ├── app.json │ │ ├── assets │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── icon.png │ │ └── splash.png │ │ └── package.json └── 15. Udemy Searchbar Animation │ ├── App.js │ ├── app.json │ ├── assets │ ├── icon.png │ └── splash.png │ └── package.json ├── Readme.md ├── app.json ├── assets ├── feed_images │ ├── 1.jpg │ ├── 2.jpg │ └── 3.png ├── icon.png ├── me.png └── splash.png ├── 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, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet 6 | } from "react-native"; 7 | 8 | import { List, ListItem } from 'native-base' 9 | 10 | class App extends Component { 11 | render() { 12 | return ( 13 | 14 | 15 | 16 | Copy the project files from the respective folder into the Root of the app 17 | 18 | 19 | Run npm install 20 | 21 | 22 | Thats it! 23 | 24 | 25 | 26 | ); 27 | } 28 | } 29 | export default App; 30 | 31 | const styles = StyleSheet.create({ 32 | container: { 33 | flex: 1, 34 | alignItems: 'center', 35 | justifyContent: 'center' 36 | } 37 | }); -------------------------------------------------------------------------------- /License: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 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 | -------------------------------------------------------------------------------- /Project Files/01. Instagram Clone/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View } from 'react-native'; 3 | import { StackNavigator } from 'react-navigation' 4 | import MainScreen from './Components/MainScreen' 5 | 6 | export default class App extends React.Component { 7 | render() { 8 | return ( 9 | 10 | ); 11 | } 12 | 13 | } 14 | 15 | const AppStackNavigator = StackNavigator({ 16 | 17 | Main: { 18 | screen: MainScreen 19 | } 20 | }) 21 | 22 | 23 | const styles = StyleSheet.create({ 24 | container: { 25 | flex: 1, 26 | backgroundColor: '#fff', 27 | alignItems: 'center', 28 | justifyContent: 'center', 29 | }, 30 | }); 31 | -------------------------------------------------------------------------------- /Project Files/01. Instagram Clone/Components/AppTabNavigator/AddMediaTab.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet 6 | } from "react-native"; 7 | 8 | import { Icon } from 'native-base' 9 | 10 | class AddMediaTab extends Component { 11 | 12 | static navigationOptions = { 13 | 14 | tabBarIcon: ({ tintColor }) => ( 15 | 16 | ) 17 | } 18 | 19 | render() { 20 | return ( 21 | 22 | AddMediaTab 23 | 24 | ); 25 | } 26 | } 27 | export default AddMediaTab; 28 | 29 | const styles = StyleSheet.create({ 30 | container: { 31 | flex: 1, 32 | alignItems: 'center', 33 | justifyContent: 'center' 34 | } 35 | }); -------------------------------------------------------------------------------- /Project Files/01. Instagram Clone/Components/AppTabNavigator/HomeTab.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet 6 | } from "react-native"; 7 | 8 | import { Container, Content, Icon } from 'native-base' 9 | import CardComponent from '../CardComponent' 10 | 11 | class HomeTab extends Component { 12 | 13 | static navigationOptions = { 14 | 15 | tabBarIcon: ({ tintColor }) => ( 16 | 17 | ) 18 | } 19 | 20 | render() { 21 | return ( 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | ); 30 | } 31 | } 32 | export default HomeTab; 33 | 34 | const styles = StyleSheet.create({ 35 | container: { 36 | flex: 1, 37 | backgroundColor: 'white' 38 | } 39 | }); -------------------------------------------------------------------------------- /Project Files/01. Instagram Clone/Components/AppTabNavigator/LikesTab.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet 6 | } from "react-native"; 7 | 8 | import { Icon } from 'native-base' 9 | 10 | 11 | class LikesTab extends Component { 12 | 13 | static navigationOptions = { 14 | 15 | tabBarIcon: ({ tintColor }) => ( 16 | 17 | ) 18 | } 19 | 20 | render() { 21 | return ( 22 | 23 | LikesTab 24 | 25 | ); 26 | } 27 | } 28 | export default LikesTab; 29 | 30 | const styles = StyleSheet.create({ 31 | container: { 32 | flex: 1, 33 | alignItems: 'center', 34 | justifyContent: 'center' 35 | } 36 | }); -------------------------------------------------------------------------------- /Project Files/01. Instagram Clone/Components/AppTabNavigator/ProfileTab.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet 6 | } from "react-native"; 7 | 8 | import { Icon } from 'native-base' 9 | 10 | class ProfileTab extends Component { 11 | 12 | static navigationOptions = { 13 | 14 | tabBarIcon: ({ tintColor }) => ( 15 | 16 | ) 17 | } 18 | 19 | render() { 20 | return ( 21 | 22 | ProfileTab 23 | 24 | ); 25 | } 26 | } 27 | export default ProfileTab; 28 | 29 | const styles = StyleSheet.create({ 30 | container: { 31 | flex: 1, 32 | alignItems: 'center', 33 | justifyContent: 'center' 34 | } 35 | }); -------------------------------------------------------------------------------- /Project Files/01. Instagram Clone/Components/AppTabNavigator/SearchTab.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet 6 | } from "react-native"; 7 | 8 | import { Icon } from 'native-base' 9 | 10 | class SearchTab extends Component { 11 | 12 | static navigationOptions = { 13 | 14 | tabBarIcon: ({ tintColor }) => ( 15 | 16 | ) 17 | } 18 | 19 | render() { 20 | return ( 21 | 22 | SearchTab 23 | 24 | ); 25 | } 26 | } 27 | export default SearchTab; 28 | 29 | const styles = StyleSheet.create({ 30 | container: { 31 | flex: 1, 32 | alignItems: 'center', 33 | justifyContent: 'center' 34 | } 35 | }); -------------------------------------------------------------------------------- /Project Files/01. Instagram Clone/Components/CardComponent.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet, 6 | Image 7 | } from "react-native"; 8 | 9 | import { Card, CardItem, Thumbnail, Body, Left, Right, Button, Icon } from 'native-base' 10 | 11 | class CardComponent extends Component { 12 | 13 | render() { 14 | 15 | const images = { 16 | 17 | "1": require('../assets/feed_images/1.jpg'), 18 | "2": require('../assets/feed_images/2.jpg'), 19 | "3": require('../assets/feed_images/3.png') 20 | } 21 | 22 | return ( 23 | 24 | 25 | 26 | 27 | 28 | Varun 29 | Jan 15, 2018 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 41 | 44 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | {this.props.likes} 54 | 55 | 56 | 57 | 58 | varun 59 | 60 | Ea do Lorem occaecat laborum do. Minim ullamco ipsum minim eiusmod dolore cupidatat magna exercitation amet proident qui. Est do irure magna dolor adipisicing do quis labore excepteur. Commodo veniam dolore cupidatat nulla consectetur do nostrud ea cupidatat ullamco labore. Consequat ullamco nulla ullamco minim. 61 | 62 | 63 | 64 | 65 | ); 66 | } 67 | } 68 | export default CardComponent; 69 | 70 | const styles = StyleSheet.create({ 71 | container: { 72 | flex: 1, 73 | alignItems: 'center', 74 | justifyContent: 'center' 75 | } 76 | }); -------------------------------------------------------------------------------- /Project Files/01. Instagram Clone/Components/MainScreen.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet, 6 | Platform 7 | } from "react-native"; 8 | 9 | import HomeTab from './AppTabNavigator/HomeTab' 10 | import SearchTab from './AppTabNavigator/SearchTab' 11 | import AddMediaTab from './AppTabNavigator/AddMediaTab' 12 | import LikesTab from './AppTabNavigator/LikesTab' 13 | import ProfileTab from './AppTabNavigator/ProfileTab' 14 | 15 | import { TabNavigator } from 'react-navigation' 16 | import { Icon } from 'native-base' 17 | 18 | class MainScreen extends Component { 19 | 20 | static navigationOptions = { 21 | 22 | headerLeft: , 23 | title: "Instagram", 24 | headerRight: 25 | } 26 | 27 | render() { 28 | return ( 29 | 30 | ); 31 | } 32 | } 33 | export default MainScreen; 34 | 35 | const AppTabNavigator = TabNavigator({ 36 | 37 | HomeTab: { 38 | screen: HomeTab 39 | }, 40 | SearchTab: { 41 | screen: SearchTab 42 | 43 | }, 44 | AddMediaTab: { 45 | screen: AddMediaTab 46 | }, 47 | LikesTab: { 48 | screen: LikesTab 49 | }, 50 | ProfileTab: { 51 | screen: ProfileTab 52 | } 53 | 54 | }, { 55 | animationEnabled: true, 56 | swipeEnabled: true, 57 | tabBarPosition: "bottom", 58 | tabBarOptions: { 59 | style: { 60 | ...Platform.select({ 61 | android: { 62 | backgroundColor: 'white' 63 | } 64 | }) 65 | }, 66 | activeTintColor: '#000', 67 | inactiveTintColor: '#d1cece', 68 | showLabel: false, 69 | showIcon: true 70 | } 71 | }) 72 | 73 | const styles = StyleSheet.create({ 74 | container: { 75 | flex: 1, 76 | alignItems: 'center', 77 | justifyContent: 'center' 78 | } 79 | }); -------------------------------------------------------------------------------- /Project Files/01. Instagram Clone/assets/feed_images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/01. Instagram Clone/assets/feed_images/1.jpg -------------------------------------------------------------------------------- /Project Files/01. Instagram Clone/assets/feed_images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/01. Instagram Clone/assets/feed_images/2.jpg -------------------------------------------------------------------------------- /Project Files/01. Instagram Clone/assets/feed_images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/01. Instagram Clone/assets/feed_images/3.png -------------------------------------------------------------------------------- /Project Files/01. Instagram Clone/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/01. Instagram Clone/assets/icon.png -------------------------------------------------------------------------------- /Project Files/01. Instagram Clone/assets/me.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/01. Instagram Clone/assets/me.png -------------------------------------------------------------------------------- /Project Files/01. Instagram Clone/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/01. Instagram Clone/assets/splash.png -------------------------------------------------------------------------------- /Project Files/03. Instagram Stories Header/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View } from 'react-native'; 3 | import { StackNavigator } from 'react-navigation' 4 | import MainScreen from './Components/MainScreen' 5 | 6 | export default class App extends React.Component { 7 | render() { 8 | return ( 9 | 10 | ); 11 | } 12 | 13 | } 14 | 15 | const AppStackNavigator = StackNavigator({ 16 | 17 | Main: { 18 | screen: MainScreen 19 | } 20 | }) 21 | 22 | 23 | const styles = StyleSheet.create({ 24 | container: { 25 | flex: 1, 26 | backgroundColor: '#fff', 27 | alignItems: 'center', 28 | justifyContent: 'center', 29 | }, 30 | }); 31 | -------------------------------------------------------------------------------- /Project Files/03. Instagram Stories Header/Components/AppTabNavigator/AddMediaTab.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet 6 | } from "react-native"; 7 | 8 | import { Icon } from 'native-base' 9 | 10 | class AddMediaTab extends Component { 11 | 12 | static navigationOptions = { 13 | 14 | tabBarIcon: ({ tintColor }) => ( 15 | 16 | ) 17 | } 18 | 19 | render() { 20 | return ( 21 | 22 | AddMediaTab 23 | 24 | ); 25 | } 26 | } 27 | export default AddMediaTab; 28 | 29 | const styles = StyleSheet.create({ 30 | container: { 31 | flex: 1, 32 | alignItems: 'center', 33 | justifyContent: 'center' 34 | } 35 | }); -------------------------------------------------------------------------------- /Project Files/03. Instagram Stories Header/Components/AppTabNavigator/HomeTab.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet, 6 | ScrollView 7 | } from "react-native"; 8 | 9 | import { Container, Content, Icon, Thumbnail } from 'native-base' 10 | import CardComponent from '../CardComponent' 11 | 12 | class HomeTab extends Component { 13 | 14 | static navigationOptions = { 15 | 16 | tabBarIcon: ({ tintColor }) => ( 17 | 18 | ) 19 | } 20 | 21 | render() { 22 | return ( 23 | 24 | 25 | 26 | 27 | 28 | Stories 29 | 30 | 31 | 32 | Watch All 33 | 34 | 35 | 36 | 46 | 49 | 52 | 55 | 58 | 59 | 62 | 65 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | ); 78 | } 79 | } 80 | export default HomeTab; 81 | 82 | const styles = StyleSheet.create({ 83 | container: { 84 | flex: 1, 85 | backgroundColor: 'white' 86 | } 87 | }); -------------------------------------------------------------------------------- /Project Files/03. Instagram Stories Header/Components/AppTabNavigator/LikesTab.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet 6 | } from "react-native"; 7 | 8 | import { Icon } from 'native-base' 9 | 10 | 11 | class LikesTab extends Component { 12 | 13 | static navigationOptions = { 14 | 15 | tabBarIcon: ({ tintColor }) => ( 16 | 17 | ) 18 | } 19 | 20 | render() { 21 | return ( 22 | 23 | LikesTab 24 | 25 | ); 26 | } 27 | } 28 | export default LikesTab; 29 | 30 | const styles = StyleSheet.create({ 31 | container: { 32 | flex: 1, 33 | alignItems: 'center', 34 | justifyContent: 'center' 35 | } 36 | }); -------------------------------------------------------------------------------- /Project Files/03. Instagram Stories Header/Components/AppTabNavigator/ProfileTab.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet 6 | } from "react-native"; 7 | 8 | import { Icon } from 'native-base' 9 | 10 | class ProfileTab extends Component { 11 | 12 | static navigationOptions = { 13 | 14 | tabBarIcon: ({ tintColor }) => ( 15 | 16 | ) 17 | } 18 | 19 | render() { 20 | return ( 21 | 22 | ProfileTab 23 | 24 | ); 25 | } 26 | } 27 | export default ProfileTab; 28 | 29 | const styles = StyleSheet.create({ 30 | container: { 31 | flex: 1, 32 | alignItems: 'center', 33 | justifyContent: 'center' 34 | } 35 | }); -------------------------------------------------------------------------------- /Project Files/03. Instagram Stories Header/Components/AppTabNavigator/SearchTab.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet 6 | } from "react-native"; 7 | 8 | import { Icon } from 'native-base' 9 | 10 | class SearchTab extends Component { 11 | 12 | static navigationOptions = { 13 | 14 | tabBarIcon: ({ tintColor }) => ( 15 | 16 | ) 17 | } 18 | 19 | render() { 20 | return ( 21 | 22 | SearchTab 23 | 24 | ); 25 | } 26 | } 27 | export default SearchTab; 28 | 29 | const styles = StyleSheet.create({ 30 | container: { 31 | flex: 1, 32 | alignItems: 'center', 33 | justifyContent: 'center' 34 | } 35 | }); -------------------------------------------------------------------------------- /Project Files/03. Instagram Stories Header/Components/CardComponent.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet, 6 | Image 7 | } from "react-native"; 8 | 9 | import { Card, CardItem, Thumbnail, Body, Left, Right, Button, Icon } from 'native-base' 10 | 11 | class CardComponent extends Component { 12 | 13 | render() { 14 | 15 | const images = { 16 | 17 | "1": require('../assets/feed_images/1.jpg'), 18 | "2": require('../assets/feed_images/2.jpg'), 19 | "3": require('../assets/feed_images/3.png') 20 | } 21 | 22 | return ( 23 | 24 | 25 | 26 | 27 | 28 | Varun 29 | Jan 15, 2018 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 41 | 44 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | {this.props.likes} likes 54 | 55 | 56 | 57 | 58 | varun 59 | 60 | Ea do Lorem occaecat laborum do. Minim ullamco ipsum minim eiusmod dolore cupidatat magna exercitation amet proident qui. Est do irure magna dolor adipisicing do quis labore excepteur. Commodo veniam dolore cupidatat nulla consectetur do nostrud ea cupidatat ullamco labore. Consequat ullamco nulla ullamco minim. 61 | 62 | 63 | 64 | 65 | ); 66 | } 67 | } 68 | export default CardComponent; 69 | 70 | const styles = StyleSheet.create({ 71 | container: { 72 | flex: 1, 73 | alignItems: 'center', 74 | justifyContent: 'center' 75 | } 76 | }); -------------------------------------------------------------------------------- /Project Files/03. Instagram Stories Header/Components/MainScreen.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet, 6 | Platform 7 | } from "react-native"; 8 | 9 | import HomeTab from './AppTabNavigator/HomeTab' 10 | import SearchTab from './AppTabNavigator/SearchTab' 11 | import AddMediaTab from './AppTabNavigator/AddMediaTab' 12 | import LikesTab from './AppTabNavigator/LikesTab' 13 | import ProfileTab from './AppTabNavigator/ProfileTab' 14 | 15 | import { TabNavigator } from 'react-navigation' 16 | import { Icon } from 'native-base' 17 | 18 | class MainScreen extends Component { 19 | 20 | static navigationOptions = { 21 | 22 | headerLeft: , 23 | title: "Instagram", 24 | headerRight: 25 | } 26 | 27 | render() { 28 | return ( 29 | 30 | ); 31 | } 32 | } 33 | export default MainScreen; 34 | 35 | const AppTabNavigator = TabNavigator({ 36 | 37 | HomeTab: { 38 | screen: HomeTab 39 | }, 40 | SearchTab: { 41 | screen: SearchTab 42 | 43 | }, 44 | AddMediaTab: { 45 | screen: AddMediaTab 46 | }, 47 | LikesTab: { 48 | screen: LikesTab 49 | }, 50 | ProfileTab: { 51 | screen: ProfileTab 52 | } 53 | 54 | }, { 55 | animationEnabled: true, 56 | swipeEnabled: true, 57 | tabBarPosition: "bottom", 58 | tabBarOptions: { 59 | style: { 60 | ...Platform.select({ 61 | android: { 62 | backgroundColor: 'white' 63 | } 64 | }) 65 | }, 66 | activeTintColor: '#000', 67 | inactiveTintColor: '#d1cece', 68 | showLabel: false, 69 | showIcon: true 70 | } 71 | }) 72 | 73 | const styles = StyleSheet.create({ 74 | container: { 75 | flex: 1, 76 | alignItems: 'center', 77 | justifyContent: 'center' 78 | } 79 | }); -------------------------------------------------------------------------------- /Project Files/03. Instagram Stories Header/assets/StoriesHeaderThumbnails/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/03. Instagram Stories Header/assets/StoriesHeaderThumbnails/1.jpg -------------------------------------------------------------------------------- /Project Files/03. Instagram Stories Header/assets/StoriesHeaderThumbnails/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/03. Instagram Stories Header/assets/StoriesHeaderThumbnails/2.jpg -------------------------------------------------------------------------------- /Project Files/03. Instagram Stories Header/assets/StoriesHeaderThumbnails/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/03. Instagram Stories Header/assets/StoriesHeaderThumbnails/3.jpg -------------------------------------------------------------------------------- /Project Files/03. Instagram Stories Header/assets/StoriesHeaderThumbnails/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/03. Instagram Stories Header/assets/StoriesHeaderThumbnails/4.jpg -------------------------------------------------------------------------------- /Project Files/03. Instagram Stories Header/assets/StoriesHeaderThumbnails/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/03. Instagram Stories Header/assets/StoriesHeaderThumbnails/5.jpg -------------------------------------------------------------------------------- /Project Files/03. Instagram Stories Header/assets/StoriesHeaderThumbnails/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/03. Instagram Stories Header/assets/StoriesHeaderThumbnails/6.jpg -------------------------------------------------------------------------------- /Project Files/03. Instagram Stories Header/assets/StoriesHeaderThumbnails/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/03. Instagram Stories Header/assets/StoriesHeaderThumbnails/7.jpg -------------------------------------------------------------------------------- /Project Files/03. Instagram Stories Header/assets/feed_images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/03. Instagram Stories Header/assets/feed_images/1.jpg -------------------------------------------------------------------------------- /Project Files/03. Instagram Stories Header/assets/feed_images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/03. Instagram Stories Header/assets/feed_images/2.jpg -------------------------------------------------------------------------------- /Project Files/03. Instagram Stories Header/assets/feed_images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/03. Instagram Stories Header/assets/feed_images/3.png -------------------------------------------------------------------------------- /Project Files/03. Instagram Stories Header/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/03. Instagram Stories Header/assets/icon.png -------------------------------------------------------------------------------- /Project Files/03. Instagram Stories Header/assets/me.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/03. Instagram Stories Header/assets/me.jpg -------------------------------------------------------------------------------- /Project Files/03. Instagram Stories Header/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/03. Instagram Stories Header/assets/splash.png -------------------------------------------------------------------------------- /Project Files/04. Instagram Profile Tab/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View } from 'react-native'; 3 | import { StackNavigator } from 'react-navigation' 4 | import MainScreen from './Components/MainScreen' 5 | 6 | export default class App extends React.Component { 7 | render() { 8 | return ( 9 | 10 | ); 11 | } 12 | 13 | } 14 | 15 | const AppStackNavigator = StackNavigator({ 16 | 17 | Main: { 18 | screen: MainScreen 19 | } 20 | }) 21 | 22 | 23 | const styles = StyleSheet.create({ 24 | container: { 25 | flex: 1, 26 | backgroundColor: '#fff', 27 | alignItems: 'center', 28 | justifyContent: 'center', 29 | }, 30 | }); 31 | -------------------------------------------------------------------------------- /Project Files/04. Instagram Profile Tab/Components/AppTabNavigator/AddMediaTab.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet 6 | } from "react-native"; 7 | 8 | import { Icon } from 'native-base' 9 | 10 | class AddMediaTab extends Component { 11 | 12 | static navigationOptions = { 13 | 14 | tabBarIcon: ({ tintColor }) => ( 15 | 16 | ) 17 | } 18 | 19 | render() { 20 | return ( 21 | 22 | AddMediaTab 23 | 24 | ); 25 | } 26 | } 27 | export default AddMediaTab; 28 | 29 | const styles = StyleSheet.create({ 30 | container: { 31 | flex: 1, 32 | alignItems: 'center', 33 | justifyContent: 'center' 34 | } 35 | }); -------------------------------------------------------------------------------- /Project Files/04. Instagram Profile Tab/Components/AppTabNavigator/HomeTab.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet, 6 | ScrollView 7 | } from "react-native"; 8 | 9 | import { Container, Content, Icon, Thumbnail, Header, Left, Right, Body } from 'native-base' 10 | import CardComponent from '../CardComponent' 11 | 12 | class HomeTab extends Component { 13 | 14 | static navigationOptions = { 15 | 16 | tabBarIcon: ({ tintColor }) => ( 17 | 18 | ) 19 | } 20 | 21 | render() { 22 | return ( 23 | 24 |
25 | 26 | Instagram 27 | 28 |
29 | 30 | 31 | 32 | 33 | Stories 34 | 35 | 36 | 37 | Watch All 38 | 39 | 40 | 41 | 51 | 54 | 57 | 60 | 63 | 64 | 67 | 70 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | ); 83 | } 84 | } 85 | export default HomeTab; 86 | 87 | const styles = StyleSheet.create({ 88 | container: { 89 | flex: 1, 90 | backgroundColor: 'white' 91 | } 92 | }); -------------------------------------------------------------------------------- /Project Files/04. Instagram Profile Tab/Components/AppTabNavigator/LikesTab.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet 6 | } from "react-native"; 7 | 8 | import { Icon } from 'native-base' 9 | 10 | 11 | class LikesTab extends Component { 12 | 13 | static navigationOptions = { 14 | 15 | tabBarIcon: ({ tintColor }) => ( 16 | 17 | ) 18 | } 19 | 20 | render() { 21 | return ( 22 | 23 | LikesTab 24 | 25 | ); 26 | } 27 | } 28 | export default LikesTab; 29 | 30 | const styles = StyleSheet.create({ 31 | container: { 32 | flex: 1, 33 | alignItems: 'center', 34 | justifyContent: 'center' 35 | } 36 | }); -------------------------------------------------------------------------------- /Project Files/04. Instagram Profile Tab/Components/AppTabNavigator/SearchTab.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet 6 | } from "react-native"; 7 | 8 | import { Icon } from 'native-base' 9 | 10 | class SearchTab extends Component { 11 | 12 | static navigationOptions = { 13 | 14 | tabBarIcon: ({ tintColor }) => ( 15 | 16 | ) 17 | } 18 | 19 | render() { 20 | return ( 21 | 22 | SearchTab 23 | 24 | ); 25 | } 26 | } 27 | export default SearchTab; 28 | 29 | const styles = StyleSheet.create({ 30 | container: { 31 | flex: 1, 32 | alignItems: 'center', 33 | justifyContent: 'center' 34 | } 35 | }); -------------------------------------------------------------------------------- /Project Files/04. Instagram Profile Tab/Components/CardComponent.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet, 6 | Image 7 | } from "react-native"; 8 | 9 | import { Card, CardItem, Thumbnail, Body, Left, Right, Button, Icon } from 'native-base' 10 | 11 | class CardComponent extends Component { 12 | 13 | render() { 14 | 15 | const images = { 16 | 17 | "1": require('../assets/feed_images/1.jpg'), 18 | "2": require('../assets/feed_images/2.jpg'), 19 | "3": require('../assets/feed_images/3.png') 20 | } 21 | 22 | return ( 23 | 24 | 25 | 26 | 27 | 28 | Varun 29 | Jan 15, 2018 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 41 | 44 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | {this.props.likes} likes 54 | 55 | 56 | 57 | 58 | varun 59 | Ea do Lorem occaecat laborum do. Minim ullamco ipsum minim eiusmod dolore cupidatat magna exercitation amet proident qui. Est do irure magna dolor adipisicing do quis labore excepteur. Commodo veniam dolore cupidatat nulla consectetur do nostrud ea cupidatat ullamco labore. Consequat ullamco nulla ullamco minim. 60 | 61 | 62 | 63 | 64 | ); 65 | } 66 | } 67 | export default CardComponent; 68 | 69 | const styles = StyleSheet.create({ 70 | container: { 71 | flex: 1, 72 | alignItems: 'center', 73 | justifyContent: 'center' 74 | } 75 | }); -------------------------------------------------------------------------------- /Project Files/04. Instagram Profile Tab/Components/MainScreen.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet, 6 | Platform 7 | } from "react-native"; 8 | 9 | import HomeTab from './AppTabNavigator/HomeTab' 10 | import SearchTab from './AppTabNavigator/SearchTab' 11 | import AddMediaTab from './AppTabNavigator/AddMediaTab' 12 | import LikesTab from './AppTabNavigator/LikesTab' 13 | import ProfileTab from './AppTabNavigator/ProfileTab' 14 | 15 | import { TabNavigator } from 'react-navigation' 16 | import { Icon } from 'native-base' 17 | 18 | class MainScreen extends Component { 19 | 20 | // static navigationOptions = { 21 | 22 | // headerLeft: , 23 | // title: "Instagram", 24 | // headerRight: 25 | // } 26 | static navigationOptions = { 27 | header: null 28 | } 29 | 30 | render() { 31 | return ( 32 | 33 | ); 34 | } 35 | } 36 | export default MainScreen; 37 | 38 | const AppTabNavigator = TabNavigator({ 39 | 40 | HomeTab: { 41 | screen: HomeTab 42 | }, 43 | SearchTab: { 44 | screen: SearchTab 45 | 46 | }, 47 | AddMediaTab: { 48 | screen: AddMediaTab 49 | }, 50 | LikesTab: { 51 | screen: LikesTab 52 | }, 53 | ProfileTab: { 54 | screen: ProfileTab 55 | } 56 | 57 | }, { 58 | animationEnabled: true, 59 | swipeEnabled: true, 60 | tabBarPosition: "bottom", 61 | tabBarOptions: { 62 | style: { 63 | ...Platform.select({ 64 | android: { 65 | backgroundColor: 'white' 66 | } 67 | }) 68 | }, 69 | activeTintColor: '#000', 70 | inactiveTintColor: '#d1cece', 71 | showLabel: false, 72 | showIcon: true 73 | } 74 | }) 75 | 76 | const styles = StyleSheet.create({ 77 | container: { 78 | flex: 1, 79 | alignItems: 'center', 80 | justifyContent: 'center' 81 | } 82 | }); -------------------------------------------------------------------------------- /Project Files/04. Instagram Profile Tab/assets/StoriesHeaderThumbnails/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/04. Instagram Profile Tab/assets/StoriesHeaderThumbnails/1.jpg -------------------------------------------------------------------------------- /Project Files/04. Instagram Profile Tab/assets/StoriesHeaderThumbnails/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/04. Instagram Profile Tab/assets/StoriesHeaderThumbnails/2.jpg -------------------------------------------------------------------------------- /Project Files/04. Instagram Profile Tab/assets/StoriesHeaderThumbnails/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/04. Instagram Profile Tab/assets/StoriesHeaderThumbnails/3.jpg -------------------------------------------------------------------------------- /Project Files/04. Instagram Profile Tab/assets/StoriesHeaderThumbnails/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/04. Instagram Profile Tab/assets/StoriesHeaderThumbnails/4.jpg -------------------------------------------------------------------------------- /Project Files/04. Instagram Profile Tab/assets/StoriesHeaderThumbnails/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/04. Instagram Profile Tab/assets/StoriesHeaderThumbnails/5.jpg -------------------------------------------------------------------------------- /Project Files/04. Instagram Profile Tab/assets/StoriesHeaderThumbnails/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/04. Instagram Profile Tab/assets/StoriesHeaderThumbnails/6.jpg -------------------------------------------------------------------------------- /Project Files/04. Instagram Profile Tab/assets/StoriesHeaderThumbnails/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/04. Instagram Profile Tab/assets/StoriesHeaderThumbnails/7.jpg -------------------------------------------------------------------------------- /Project Files/04. Instagram Profile Tab/assets/feed_images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/04. Instagram Profile Tab/assets/feed_images/1.jpg -------------------------------------------------------------------------------- /Project Files/04. Instagram Profile Tab/assets/feed_images/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/04. Instagram Profile Tab/assets/feed_images/10.jpg -------------------------------------------------------------------------------- /Project Files/04. Instagram Profile Tab/assets/feed_images/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/04. Instagram Profile Tab/assets/feed_images/11.jpg -------------------------------------------------------------------------------- /Project Files/04. Instagram Profile Tab/assets/feed_images/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/04. Instagram Profile Tab/assets/feed_images/12.jpg -------------------------------------------------------------------------------- /Project Files/04. Instagram Profile Tab/assets/feed_images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/04. Instagram Profile Tab/assets/feed_images/2.jpg -------------------------------------------------------------------------------- /Project Files/04. Instagram Profile Tab/assets/feed_images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/04. Instagram Profile Tab/assets/feed_images/3.png -------------------------------------------------------------------------------- /Project Files/04. Instagram Profile Tab/assets/feed_images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/04. Instagram Profile Tab/assets/feed_images/4.jpg -------------------------------------------------------------------------------- /Project Files/04. Instagram Profile Tab/assets/feed_images/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/04. Instagram Profile Tab/assets/feed_images/5.jpg -------------------------------------------------------------------------------- /Project Files/04. Instagram Profile Tab/assets/feed_images/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/04. Instagram Profile Tab/assets/feed_images/6.jpg -------------------------------------------------------------------------------- /Project Files/04. Instagram Profile Tab/assets/feed_images/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/04. Instagram Profile Tab/assets/feed_images/7.jpg -------------------------------------------------------------------------------- /Project Files/04. Instagram Profile Tab/assets/feed_images/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/04. Instagram Profile Tab/assets/feed_images/8.png -------------------------------------------------------------------------------- /Project Files/04. Instagram Profile Tab/assets/feed_images/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/04. Instagram Profile Tab/assets/feed_images/9.jpg -------------------------------------------------------------------------------- /Project Files/04. Instagram Profile Tab/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/04. Instagram Profile Tab/assets/icon.png -------------------------------------------------------------------------------- /Project Files/04. Instagram Profile Tab/assets/me.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/04. Instagram Profile Tab/assets/me.jpg -------------------------------------------------------------------------------- /Project Files/04. Instagram Profile Tab/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/04. Instagram Profile Tab/assets/splash.png -------------------------------------------------------------------------------- /Project Files/05. #1 Snapchat Swipe UI/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View } from 'react-native'; 3 | 4 | import { Container, Content } from 'native-base' 5 | import Swiper from 'react-native-swiper' 6 | 7 | const styles = StyleSheet.create({ 8 | slideDefault: { 9 | flex: 1, 10 | justifyContent: 'center', 11 | alignItems: 'center', 12 | backgroundColor: '#9DD6EB' 13 | }, 14 | text: { 15 | color: 'white', 16 | fontSize: 30, 17 | fontWeight: 'bold' 18 | } 19 | }) 20 | export default class App extends React.Component { 21 | 22 | constructor() { 23 | super() 24 | this.state = { 25 | outerScrollEnabled: true 26 | } 27 | } 28 | 29 | verticalScroll = (index) => { 30 | if (index !== 1) { 31 | this.setState({ 32 | outerScrollEnabled: false 33 | }) 34 | } 35 | else { 36 | this.setState({ 37 | outerScrollEnabled: true 38 | }) 39 | } 40 | } 41 | 42 | render() { 43 | return ( 44 | 45 | 46 | 52 | 53 | 54 | Chat 55 | 56 | this.verticalScroll(index)} 62 | > 63 | 64 | Search 65 | 66 | 67 | Camera 68 | 69 | 70 | Memories 71 | 72 | 73 | 74 | Stories 75 | 76 | 77 | 78 | 79 | ); 80 | } 81 | } 82 | 83 | -------------------------------------------------------------------------------- /Project Files/05. #1 Snapchat Swipe UI/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "snapchat-clone-youtube", 4 | "description": "This project is really great.", 5 | "slug": "snapchat-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 | -------------------------------------------------------------------------------- /Project Files/05. #1 Snapchat Swipe UI/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.8", 7 | "react": "16.2.0", 8 | "react-native": "https://github.com/expo/react-native/archive/sdk-25.0.0.tar.gz", 9 | "react-native-swiper": "^1.5.13" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Project Files/06. #2 Snapchat Camera UI/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View } from 'react-native'; 3 | 4 | import { Container, Content } from 'native-base' 5 | import Swiper from 'react-native-swiper' 6 | 7 | import Camera from './Components/Camera' 8 | const styles = StyleSheet.create({ 9 | slideDefault: { 10 | flex: 1, 11 | justifyContent: 'center', 12 | alignItems: 'center', 13 | backgroundColor: '#9DD6EB' 14 | }, 15 | text: { 16 | color: 'white', 17 | fontSize: 30, 18 | fontWeight: 'bold' 19 | } 20 | }) 21 | export default class App extends React.Component { 22 | 23 | constructor() { 24 | super() 25 | this.state = { 26 | outerScrollEnabled: true 27 | } 28 | } 29 | 30 | verticalScroll = (index) => { 31 | if (index !== 1) { 32 | this.setState({ 33 | outerScrollEnabled: false 34 | }) 35 | } 36 | else { 37 | this.setState({ 38 | outerScrollEnabled: true 39 | }) 40 | } 41 | } 42 | 43 | render() { 44 | return ( 45 | 46 | 47 | 53 | 54 | 55 | Chat 56 | 57 | this.verticalScroll(index)} 63 | > 64 | 65 | Search 66 | 67 | 68 | 69 | 70 | 71 | Memories 72 | 73 | 74 | 75 | Stories 76 | 77 | 78 | 79 | 80 | ); 81 | } 82 | } 83 | 84 | -------------------------------------------------------------------------------- /Project Files/06. #2 Snapchat Camera UI/Components/Camera.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet 6 | } from "react-native"; 7 | 8 | import { Camera, Permissions } from 'expo' 9 | 10 | import { Container, Content, Header, Item, Icon, Input, Button } from 'native-base' 11 | import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons' 12 | 13 | class CameraComponent extends Component { 14 | 15 | state = { 16 | hasCameraPermission: null, 17 | type: Camera.Constants.Type.back 18 | } 19 | 20 | async componentWillMount() { 21 | const { status } = await Permissions.askAsync(Permissions.CAMERA); 22 | this.setState({ hasCameraPermission: status === 'granted' }) 23 | } 24 | 25 | render() { 26 | const { hasCameraPermission } = this.state 27 | 28 | if (hasCameraPermission === null) { 29 | return 30 | } 31 | else if (hasCameraPermission === false) { 32 | return No access to camera 33 | } 34 | else { 35 | return ( 36 | 37 | 38 | 39 |
45 | 46 | 47 | 48 | 49 | 50 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | { 63 | this.setState({ 64 | type: this.state.type === Camera.Constants.Type.back ? 65 | Camera.Constants.Type.front : 66 | Camera.Constants.Type.back 67 | }) 68 | }} 69 | name="ios-reverse-camera" style={{ color: 'white', fontWeight: 'bold' }} /> 70 | 71 |
72 | 73 | 74 | 77 | 78 | 79 | 82 | 83 | 84 | 87 | 88 | 89 | 90 | 91 | ) 92 | } 93 | } 94 | } 95 | export default CameraComponent; 96 | 97 | const styles = StyleSheet.create({ 98 | container: { 99 | flex: 1, 100 | alignItems: 'center', 101 | justifyContent: 'center' 102 | } 103 | }); -------------------------------------------------------------------------------- /Project Files/06. #2 Snapchat Camera UI/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "snapchat-clone-youtube", 4 | "description": "This project is really great.", 5 | "slug": "snapchat-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 | -------------------------------------------------------------------------------- /Project Files/06. #2 Snapchat Camera UI/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.8", 7 | "react": "16.2.0", 8 | "react-native": "https://github.com/expo/react-native/archive/sdk-25.0.0.tar.gz", 9 | "react-native-swiper": "^1.5.13" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Project Files/07.#1,#2 Inshorts UI Clone Swipe Deck/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet, 6 | Dimensions, 7 | Image, 8 | Animated, 9 | PanResponder 10 | } from "react-native"; 11 | 12 | const SCREEN_HEIGHT = Dimensions.get("window").height 13 | const SCREEN_WIDTH = Dimensions.get("window").width 14 | 15 | const ARTICLES = [ 16 | { id: "1", uri: require('./assets/1.png') }, 17 | { id: "2", uri: require('./assets/2.png') }, 18 | { id: "3", uri: require('./assets/3.jpg') }, 19 | { id: "4", uri: require('./assets/4.png') }, 20 | { id: "5", uri: require('./assets/5.png') }, 21 | ] 22 | 23 | class DeckSwiper extends Component { 24 | 25 | constructor(props) { 26 | super(props) 27 | 28 | this.position = new Animated.ValueXY() 29 | this.state = { 30 | currentIndex: 0 31 | } 32 | 33 | } 34 | 35 | componentWillMount() { 36 | 37 | this.PanResponder = PanResponder.create({ 38 | 39 | onStartShouldSetPanResponder: (e, gestureState) => true, 40 | onPanResponderMove: (evt, gestureState) => { 41 | 42 | this.position.setValue({ y: gestureState.dy }) 43 | }, 44 | onPanResponderRelease: (evt, gestureState) => { 45 | 46 | if (-gestureState.dy > 50 && -gestureState.vy > 0.7) { 47 | 48 | Animated.timing(this.position, { 49 | toValue: ({ x: 0, y: -SCREEN_HEIGHT }), 50 | duration: 400 51 | }).start(() => { 52 | 53 | this.setState({ currentIndex: this.state.currentIndex + 1 }) 54 | this.position.setValue({ x: 0, y: 0 }) 55 | 56 | }) 57 | } 58 | else { 59 | Animated.spring(this.position, { 60 | toValue: ({ x: 0, y: 0 }) 61 | }).start() 62 | } 63 | } 64 | }) 65 | 66 | } 67 | renderArticles = () => { 68 | 69 | return ARTICLES.map((item, i) => { 70 | 71 | if (i < this.state.currentIndex) { 72 | return null 73 | } 74 | if (i == this.state.currentIndex) { 75 | 76 | return ( 77 | 78 | 81 | 82 | 83 | 84 | 87 | 88 | 89 | 90 | Labore irure excepteur deserunt qui. Occaecat do consequat velit adipisicing consequat reprehenderit incididunt duis irure ea consequat ipsum Lorem dolor. Culpa consectetur nisi officia excepteur anim mollit nostrud ut voluptate. Quis velit dolore fugiat veniam eu labore adipisicing ipsum incididunt ad amet. Do veniam adipisicing veniam commodo exercitation officia et commodo Lorem nostrud culpa tempor dolor. 91 | Labore irure excepteur deserunt qui. Occaecat do consequat velit adipisicing consequat reprehenderit incididunt duis irure ea consequat ipsum Lorem dolor. Culpa consectetur nisi officia excepteur anim mollit nostrud ut voluptate. Quis velit dolore fugiat veniam eu labore adipisicing ipsum incididunt ad amet. Do veniam adipisicing veniam commodo exercitation officia et commodo Lorem nostrud culpa tempor dolor. 92 | Labore irure excepteur deserunt qui. Occaecat do consequat velit adipisicing consequat reprehenderit incididunt duis irure ea consequat ipsum Lorem dolor. Culpa consectetur nisi officia excepteur anim mollit nostrud ut voluptate. Quis velit dolore fugiat veniam eu labore adipisicing ipsum incididunt ad amet. Do veniam adipisicing veniam commodo exercitation officia et commodo Lorem nostrud culpa tempor dolor. 93 | 94 | 95 | 96 | 97 | ) 98 | } 99 | else { 100 | 101 | return ( 102 | 105 | 106 | 107 | 108 | 111 | 112 | 113 | 114 | Labore irure excepteur deserunt qui. Occaecat do consequat velit adipisicing consequat reprehenderit incididunt duis irure ea consequat ipsum Lorem dolor. Culpa consectetur nisi officia excepteur anim mollit nostrud ut voluptate. Quis velit dolore fugiat veniam eu labore adipisicing ipsum incididunt ad amet. Do veniam adipisicing veniam commodo exercitation officia et commodo Lorem nostrud culpa tempor dolor. 115 | Labore irure excepteur deserunt qui. Occaecat do consequat velit adipisicing consequat reprehenderit incididunt duis irure ea consequat ipsum Lorem dolor. Culpa consectetur nisi officia excepteur anim mollit nostrud ut voluptate. Quis velit dolore fugiat veniam eu labore adipisicing ipsum incididunt ad amet. Do veniam adipisicing veniam commodo exercitation officia et commodo Lorem nostrud culpa tempor dolor. 116 | Labore irure excepteur deserunt qui. Occaecat do consequat velit adipisicing consequat reprehenderit incididunt duis irure ea consequat ipsum Lorem dolor. Culpa consectetur nisi officia excepteur anim mollit nostrud ut voluptate. Quis velit dolore fugiat veniam eu labore adipisicing ipsum incididunt ad amet. Do veniam adipisicing veniam commodo exercitation officia et commodo Lorem nostrud culpa tempor dolor. 117 | 118 | 119 | 120 | 121 | ) 122 | 123 | } 124 | }).reverse() 125 | 126 | } 127 | 128 | render() { 129 | return ( 130 | 131 | {this.renderArticles()} 132 | 133 | ); 134 | } 135 | } 136 | export default DeckSwiper; 137 | 138 | const styles = StyleSheet.create({ 139 | container: { 140 | flex: 1, 141 | alignItems: 'center', 142 | justifyContent: 'center' 143 | } 144 | }); -------------------------------------------------------------------------------- /Project Files/07.#1,#2 Inshorts UI Clone Swipe Deck/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "react-native-animations", 4 | "description": "This project is really great.", 5 | "slug": "react-native-animations", 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 | -------------------------------------------------------------------------------- /Project Files/07.#1,#2 Inshorts UI Clone Swipe Deck/assets/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/07.#1,#2 Inshorts UI Clone Swipe Deck/assets/1.png -------------------------------------------------------------------------------- /Project Files/07.#1,#2 Inshorts UI Clone Swipe Deck/assets/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/07.#1,#2 Inshorts UI Clone Swipe Deck/assets/2.png -------------------------------------------------------------------------------- /Project Files/07.#1,#2 Inshorts UI Clone Swipe Deck/assets/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/07.#1,#2 Inshorts UI Clone Swipe Deck/assets/3.jpg -------------------------------------------------------------------------------- /Project Files/07.#1,#2 Inshorts UI Clone Swipe Deck/assets/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/07.#1,#2 Inshorts UI Clone Swipe Deck/assets/4.png -------------------------------------------------------------------------------- /Project Files/07.#1,#2 Inshorts UI Clone Swipe Deck/assets/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/07.#1,#2 Inshorts UI Clone Swipe Deck/assets/5.png -------------------------------------------------------------------------------- /Project Files/07.#1,#2 Inshorts UI Clone Swipe Deck/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/07.#1,#2 Inshorts UI Clone Swipe Deck/assets/icon.png -------------------------------------------------------------------------------- /Project Files/07.#1,#2 Inshorts UI Clone Swipe Deck/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/07.#1,#2 Inshorts UI Clone Swipe Deck/assets/splash.png -------------------------------------------------------------------------------- /Project Files/07.#1,#2 Inshorts UI Clone Swipe Deck/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "private": true, 4 | "dependencies": { 5 | "expo": "^25.0.0", 6 | "react": "16.2.0", 7 | "react-native": "https://github.com/expo/react-native/archive/sdk-25.0.0.tar.gz" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /Project Files/08. #3 Inshorts UI Clone Swipe Deck Animation/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "react-native-animations", 4 | "description": "This project is really great.", 5 | "slug": "react-native-animations", 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 | -------------------------------------------------------------------------------- /Project Files/08. #3 Inshorts UI Clone Swipe Deck Animation/assets/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/08. #3 Inshorts UI Clone Swipe Deck Animation/assets/1.png -------------------------------------------------------------------------------- /Project Files/08. #3 Inshorts UI Clone Swipe Deck Animation/assets/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/08. #3 Inshorts UI Clone Swipe Deck Animation/assets/2.png -------------------------------------------------------------------------------- /Project Files/08. #3 Inshorts UI Clone Swipe Deck Animation/assets/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/08. #3 Inshorts UI Clone Swipe Deck Animation/assets/3.jpg -------------------------------------------------------------------------------- /Project Files/08. #3 Inshorts UI Clone Swipe Deck Animation/assets/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/08. #3 Inshorts UI Clone Swipe Deck Animation/assets/4.png -------------------------------------------------------------------------------- /Project Files/08. #3 Inshorts UI Clone Swipe Deck Animation/assets/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/08. #3 Inshorts UI Clone Swipe Deck Animation/assets/5.png -------------------------------------------------------------------------------- /Project Files/08. #3 Inshorts UI Clone Swipe Deck Animation/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/08. #3 Inshorts UI Clone Swipe Deck Animation/assets/icon.png -------------------------------------------------------------------------------- /Project Files/08. #3 Inshorts UI Clone Swipe Deck Animation/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/08. #3 Inshorts UI Clone Swipe Deck Animation/assets/splash.png -------------------------------------------------------------------------------- /Project Files/08. #3 Inshorts UI Clone Swipe Deck Animation/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "private": true, 4 | "dependencies": { 5 | "expo": "^25.0.0", 6 | "react": "16.2.0", 7 | "react-native": "https://github.com/expo/react-native/archive/sdk-25.0.0.tar.gz" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /Project Files/09. Apple Music UI/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "apple-music-ui-clone", 4 | "description": "This project is really great.", 5 | "slug": "apple-music-ui-clone", 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 | -------------------------------------------------------------------------------- /Project Files/09. Apple Music UI/assets/Hotelcalifornia.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/09. Apple Music UI/assets/Hotelcalifornia.jpg -------------------------------------------------------------------------------- /Project Files/09. Apple Music UI/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "private": true, 4 | "dependencies": { 5 | "expo": "^25.0.0", 6 | "react": "16.2.0", 7 | "react-native": "https://github.com/expo/react-native/archive/sdk-25.0.0.tar.gz" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /Project Files/10. Uber UI Clone/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 | -------------------------------------------------------------------------------- /Project Files/10. Uber UI Clone/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 | ``` -------------------------------------------------------------------------------- /Project Files/10. Uber UI Clone/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 | -------------------------------------------------------------------------------- /Project Files/10. Uber UI Clone/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/10. Uber UI Clone/assets/icon.png -------------------------------------------------------------------------------- /Project Files/10. Uber UI Clone/assets/india.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/10. Uber UI Clone/assets/india.png -------------------------------------------------------------------------------- /Project Files/10. Uber UI Clone/assets/login_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/10. Uber UI Clone/assets/login_bg.jpg -------------------------------------------------------------------------------- /Project Files/10. Uber UI Clone/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/10. Uber UI Clone/assets/splash.png -------------------------------------------------------------------------------- /Project Files/10. Uber UI Clone/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 | -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#1. The Header Component/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View } from 'react-native'; 3 | 4 | import { DrawerNavigator } from 'react-navigation' 5 | import HomeScreen from './screens/HomeScreen' 6 | export default class App extends React.Component { 7 | render() { 8 | return ( 9 | 10 | ); 11 | } 12 | } 13 | 14 | const AppDrawerNavigator = new DrawerNavigator({ 15 | 16 | HomeScreen: { screen: HomeScreen } 17 | }) 18 | 19 | const styles = StyleSheet.create({ 20 | container: { 21 | flex: 1, 22 | backgroundColor: '#fff', 23 | alignItems: 'center', 24 | justifyContent: 'center', 25 | }, 26 | }); 27 | -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#1. The Header Component/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "amzon-ui-clone-youtube", 4 | "description": "This project is really great.", 5 | "slug": "amzon-ui-clone-youtube", 6 | "privacy": "public", 7 | "sdkVersion": "26.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 | "updates": { 18 | "fallbackToCacheTimeout": 0 19 | }, 20 | "assetBundlePatterns": [ 21 | "**/*" 22 | ], 23 | "ios": { 24 | "supportsTablet": true 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#1. The Header Component/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/11. Amazon UI/#1. The Header Component/assets/icon.png -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#1. The Header Component/assets/recommended_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/11. Amazon UI/#1. The Header Component/assets/recommended_1.jpg -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#1. The Header Component/assets/recommended_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/11. Amazon UI/#1. The Header Component/assets/recommended_2.jpg -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#1. The Header Component/assets/recommended_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/11. Amazon UI/#1. The Header Component/assets/recommended_3.jpg -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#1. The Header Component/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/11. Amazon UI/#1. The Header Component/assets/splash.png -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#1. The Header Component/assets/swiper_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/11. Amazon UI/#1. The Header Component/assets/swiper_2.jpg -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#1. The Header Component/assets/swiper_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/11. Amazon UI/#1. The Header Component/assets/swiper_3.jpg -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#1. The Header Component/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "private": true, 4 | "dependencies": { 5 | "expo": "^26.0.0", 6 | "i": "^0.3.6", 7 | "native-base": "^2.4.1", 8 | "react": "16.3.0-alpha.1", 9 | "react-native": "https://github.com/expo/react-native/archive/sdk-26.0.0.tar.gz", 10 | "react-native-star-rating": "^1.0.9", 11 | "react-native-swiper": "^1.5.13", 12 | "react-navigation": "^1.5.11" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#1. The Header Component/screens 2/HomeScreen.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet, 6 | TouchableOpacity, 7 | Platform, 8 | StatusBar, 9 | Image 10 | } from "react-native"; 11 | 12 | import { Container, Content, Header, Left, Right, Icon, Item, Input, Card, CardItem } from 'native-base' 13 | 14 | import FAIcon from 'react-native-vector-icons/FontAwesome' 15 | import Swiper from 'react-native-swiper' 16 | 17 | import RecommendedCardItem from '../components/RecommendedCardItem' 18 | class HomeScreen extends Component { 19 | render() { 20 | return ( 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 | 32 | 33 | 34 | 35 | Shop by 36 | Category 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | Hello, Varun Nath 52 | 53 | Your Account 54 | 55 | 56 | 57 | 61 | 62 | 65 | 66 | 67 | 70 | 71 | 72 | 75 | 76 | 77 | 78 | 79 | 80 | Your Recommendations 81 | 82 | 83 | 92 | 101 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | ); 118 | } 119 | } 120 | export default HomeScreen; 121 | 122 | const styles = StyleSheet.create({ 123 | container: { 124 | flex: 1, 125 | alignItems: 'center', 126 | justifyContent: 'center' 127 | }, 128 | androidHeader: { 129 | ...Platform.select({ 130 | android: { 131 | paddingTop: StatusBar.currentHeight, 132 | } 133 | }) 134 | } 135 | }); -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#2. Recommendations View/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View } from 'react-native'; 3 | 4 | import { DrawerNavigator } from 'react-navigation' 5 | import HomeScreen from './screens/HomeScreen' 6 | export default class App extends React.Component { 7 | render() { 8 | return ( 9 | 10 | ); 11 | } 12 | } 13 | 14 | const AppDrawerNavigator = new DrawerNavigator({ 15 | 16 | HomeScreen: { screen: HomeScreen } 17 | }) 18 | 19 | const styles = StyleSheet.create({ 20 | container: { 21 | flex: 1, 22 | backgroundColor: '#fff', 23 | alignItems: 'center', 24 | justifyContent: 'center', 25 | }, 26 | }); 27 | -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#2. Recommendations View/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "amzon-ui-clone-youtube", 4 | "description": "This project is really great.", 5 | "slug": "amzon-ui-clone-youtube", 6 | "privacy": "public", 7 | "sdkVersion": "26.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 | "updates": { 18 | "fallbackToCacheTimeout": 0 19 | }, 20 | "assetBundlePatterns": [ 21 | "**/*" 22 | ], 23 | "ios": { 24 | "supportsTablet": true 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#2. Recommendations View/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/11. Amazon UI/#2. Recommendations View/assets/icon.png -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#2. Recommendations View/assets/recommended_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/11. Amazon UI/#2. Recommendations View/assets/recommended_1.jpg -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#2. Recommendations View/assets/recommended_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/11. Amazon UI/#2. Recommendations View/assets/recommended_2.jpg -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#2. Recommendations View/assets/recommended_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/11. Amazon UI/#2. Recommendations View/assets/recommended_3.jpg -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#2. Recommendations View/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/11. Amazon UI/#2. Recommendations View/assets/splash.png -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#2. Recommendations View/assets/swiper_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/11. Amazon UI/#2. Recommendations View/assets/swiper_2.jpg -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#2. Recommendations View/assets/swiper_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/11. Amazon UI/#2. Recommendations View/assets/swiper_3.jpg -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#2. Recommendations View/components/RecommendedCardItem.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet, 6 | Image 7 | } from "react-native"; 8 | 9 | import { Card, CardItem, Right } from 'native-base' 10 | import StarRating from 'react-native-star-rating' 11 | class RecommendedCardItem extends Component { 12 | render() { 13 | return ( 14 | 15 | 16 | 17 | 19 | 20 | 21 | {this.props.itemName} 22 | {this.props.itemCreator} 23 | {this.props.itemPrice} 24 | 25 | You save 26 | ${this.props.savings} 27 | 28 | 38 | 39 | 40 | ); 41 | } 42 | } 43 | export default RecommendedCardItem; 44 | 45 | const styles = StyleSheet.create({ 46 | container: { 47 | flex: 1, 48 | alignItems: 'center', 49 | justifyContent: 'center' 50 | } 51 | }); -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#2. Recommendations View/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "private": true, 4 | "dependencies": { 5 | "expo": "^26.0.0", 6 | "i": "^0.3.6", 7 | "native-base": "^2.4.1", 8 | "react": "16.3.0-alpha.1", 9 | "react-native": "https://github.com/expo/react-native/archive/sdk-26.0.0.tar.gz", 10 | "react-native-star-rating": "^1.0.9", 11 | "react-native-swiper": "^1.5.13", 12 | "react-navigation": "^1.5.11" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#2. Recommendations View/screens/HomeScreen.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet, 6 | TouchableOpacity, 7 | Platform, 8 | StatusBar, 9 | Image 10 | } from "react-native"; 11 | 12 | import { Container, Content, Header, Left, Right, Icon, Item, Input, Card, CardItem } from 'native-base' 13 | 14 | import FAIcon from 'react-native-vector-icons/FontAwesome' 15 | import Swiper from 'react-native-swiper' 16 | 17 | import RecommendedCardItem from '../components/RecommendedCardItem' 18 | class HomeScreen extends Component { 19 | render() { 20 | return ( 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 | 32 | 33 | 34 | 35 | Shop by 36 | Category 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | Hello, Varun Nath 52 | 53 | Your Account 54 | 55 | 56 | 57 | 61 | 62 | 65 | 66 | 67 | 70 | 71 | 72 | 75 | 76 | 77 | 78 | 79 | 80 | Your Recommendations 81 | 82 | 83 | 92 | 101 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | ); 118 | } 119 | } 120 | export default HomeScreen; 121 | 122 | const styles = StyleSheet.create({ 123 | container: { 124 | flex: 1, 125 | alignItems: 'center', 126 | justifyContent: 'center' 127 | }, 128 | androidHeader: { 129 | ...Platform.select({ 130 | android: { 131 | paddingTop: StatusBar.currentHeight, 132 | } 133 | }) 134 | } 135 | }); -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#3. Customize Drawer Navigator/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, FlatList, Platform, StatusBar } from 'react-native'; 3 | 4 | import { DrawerNavigator } from 'react-navigation' 5 | import HomeScreen from './screens/HomeScreen' 6 | 7 | 8 | import { Icon, Container, Content, Header, Left, Body, Right, List, ListItem } from 'native-base' 9 | 10 | 11 | export default class App extends React.Component { 12 | render() { 13 | return ( 14 | 15 | ); 16 | } 17 | } 18 | 19 | 20 | const CustomDrawerContentComponent = (props) => { 21 | return ( 22 | 23 |
24 | 25 | 26 | Hello, Varun 27 | 28 |
29 | 30 | ( 35 | 36 | 37 | {item} 38 | 39 | 40 | )} 41 | 42 | 43 | 44 | /> 45 | ( 51 | 52 | 53 | {item} 54 | 55 | 56 | )} 57 | 58 | 59 | 60 | /> 61 | 62 | ( 68 | 69 | 70 | {item} 71 | 72 | 73 | )} 74 | 75 | 76 | 77 | /> 78 | 79 | 80 | ) 81 | } 82 | 83 | const AppDrawerNavigator = new DrawerNavigator({ 84 | 85 | HomeScreen: { screen: HomeScreen } 86 | }, { 87 | drawerPosition: 'left', 88 | contentComponent: CustomDrawerContentComponent, 89 | drawerOpenRoute: 'DrawerOpen', 90 | drawerCloseRoute: 'DrawerClose', 91 | drawerToggleRoute: 'DrawerToggle' 92 | 93 | }) 94 | 95 | const styles = StyleSheet.create({ 96 | container: { 97 | flex: 1, 98 | backgroundColor: '#fff', 99 | alignItems: 'center', 100 | justifyContent: 'center', 101 | }, 102 | androidHeader: { 103 | ...Platform.select({ 104 | android: { 105 | paddingTop: StatusBar.currentHeight, 106 | } 107 | }) 108 | } 109 | }); 110 | -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#3. Customize Drawer Navigator/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "amzon-ui-clone-youtube", 4 | "description": "This project is really great.", 5 | "slug": "amzon-ui-clone-youtube", 6 | "privacy": "public", 7 | "sdkVersion": "26.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 | "updates": { 18 | "fallbackToCacheTimeout": 0 19 | }, 20 | "assetBundlePatterns": [ 21 | "**/*" 22 | ], 23 | "ios": { 24 | "supportsTablet": true 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#3. Customize Drawer Navigator/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/11. Amazon UI/#3. Customize Drawer Navigator/assets/icon.png -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#3. Customize Drawer Navigator/assets/recommended_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/11. Amazon UI/#3. Customize Drawer Navigator/assets/recommended_1.jpg -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#3. Customize Drawer Navigator/assets/recommended_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/11. Amazon UI/#3. Customize Drawer Navigator/assets/recommended_2.jpg -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#3. Customize Drawer Navigator/assets/recommended_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/11. Amazon UI/#3. Customize Drawer Navigator/assets/recommended_3.jpg -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#3. Customize Drawer Navigator/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/11. Amazon UI/#3. Customize Drawer Navigator/assets/splash.png -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#3. Customize Drawer Navigator/assets/swiper_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/11. Amazon UI/#3. Customize Drawer Navigator/assets/swiper_2.jpg -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#3. Customize Drawer Navigator/assets/swiper_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/11. Amazon UI/#3. Customize Drawer Navigator/assets/swiper_3.jpg -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#3. Customize Drawer Navigator/components/RecommendedCardItem.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet, 6 | Image 7 | } from "react-native"; 8 | 9 | import { Card, CardItem, Right } from 'native-base' 10 | import StarRating from 'react-native-star-rating' 11 | class RecommendedCardItem extends Component { 12 | render() { 13 | return ( 14 | 15 | 16 | 17 | 19 | 20 | 21 | {this.props.itemName} 22 | {this.props.itemCreator} 23 | {this.props.itemPrice} 24 | 25 | You save 26 | ${this.props.savings} 27 | 28 | 38 | 39 | 40 | ); 41 | } 42 | } 43 | export default RecommendedCardItem; 44 | 45 | const styles = StyleSheet.create({ 46 | container: { 47 | flex: 1, 48 | alignItems: 'center', 49 | justifyContent: 'center' 50 | } 51 | }); -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#3. Customize Drawer Navigator/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "private": true, 4 | "dependencies": { 5 | "expo": "^26.0.0", 6 | "i": "^0.3.6", 7 | "native-base": "^2.4.1", 8 | "react": "16.3.0-alpha.1", 9 | "react-native": "https://github.com/expo/react-native/archive/sdk-26.0.0.tar.gz", 10 | "react-native-star-rating": "^1.0.9", 11 | "react-native-swiper": "^1.5.13", 12 | "react-navigation": "^1.5.11" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /Project Files/11. Amazon UI/#3. Customize Drawer Navigator/screens/HomeScreen.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet, 6 | TouchableOpacity, 7 | Platform, 8 | StatusBar, 9 | Image 10 | } from "react-native"; 11 | 12 | import { Container, Content, Header, Left, Right, Icon, Item, Input, Card, CardItem } from 'native-base' 13 | 14 | import FAIcon from 'react-native-vector-icons/FontAwesome' 15 | import Swiper from 'react-native-swiper' 16 | 17 | import RecommendedCardItem from '../components/RecommendedCardItem' 18 | class HomeScreen extends Component { 19 | render() { 20 | return ( 21 | 22 |
23 | 24 | this.props.navigation.navigate('DrawerOpen')} name="md-menu" style={{ color: 'white', marginRight: 15 }} /> 25 | 26 | 27 | 28 | 29 | 30 |
31 | 32 | 33 | 34 | 35 | Shop by 36 | Category 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | Hello, Varun Nath 52 | 53 | Your Account 54 | 55 | 56 | 57 | 61 | 62 | 65 | 66 | 67 | 70 | 71 | 72 | 75 | 76 | 77 | 78 | 79 | 80 | Your Recommendations 81 | 82 | 83 | 92 | 101 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | ); 118 | } 119 | } 120 | export default HomeScreen; 121 | 122 | const styles = StyleSheet.create({ 123 | container: { 124 | flex: 1, 125 | alignItems: 'center', 126 | justifyContent: 'center' 127 | }, 128 | androidHeader: { 129 | ...Platform.select({ 130 | android: { 131 | paddingTop: StatusBar.currentHeight, 132 | } 133 | }) 134 | } 135 | }); -------------------------------------------------------------------------------- /Project Files/12 Tinder Swipe Deck/#1 Setup UI & add PanResponder/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Dimensions, Image, Animated, PanResponder } from 'react-native'; 3 | 4 | const SCREEN_HEIGHT = Dimensions.get('window').height 5 | const SCREEN_WIDTH = Dimensions.get('window').width 6 | const Users = [ 7 | { id: "1", uri: require('./assets/1.jpg') }, 8 | { id: "2", uri: require('./assets/2.jpg') }, 9 | { id: "3", uri: require('./assets/3.jpg') }, 10 | { id: "4", uri: require('./assets/4.jpg') }, 11 | { id: "5", uri: require('./assets/5.jpg') }, 12 | ] 13 | 14 | export default class App extends React.Component { 15 | 16 | constructor() { 17 | super() 18 | 19 | this.position = new Animated.ValueXY() 20 | this.state = { 21 | currentIndex: 0 22 | } 23 | } 24 | componentWillMount() { 25 | this.PanResponder = PanResponder.create({ 26 | 27 | onStartShouldSetPanResponder: (evt, gestureState) => true, 28 | onPanResponderMove: (evt, gestureState) => { 29 | 30 | this.position.setValue({ x: gestureState.dx, y: gestureState.dy }) 31 | }, 32 | onPanResponderRelease: (evt, gestureState) => { 33 | 34 | } 35 | }) 36 | } 37 | 38 | renderUsers = () => { 39 | 40 | return Users.map((item, i) => { 41 | 42 | return ( 43 | 46 | 47 | 50 | 51 | 52 | ) 53 | }).reverse() 54 | } 55 | 56 | render() { 57 | return ( 58 | 59 | 60 | 61 | 62 | 63 | {this.renderUsers()} 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | ); 73 | } 74 | } 75 | 76 | const styles = StyleSheet.create({ 77 | container: { 78 | flex: 1, 79 | backgroundColor: '#fff', 80 | alignItems: 'center', 81 | justifyContent: 'center', 82 | }, 83 | }); 84 | -------------------------------------------------------------------------------- /Project Files/12 Tinder Swipe Deck/#1 Setup UI & add PanResponder/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "tinder-ui-clone-youtube", 4 | "description": "This project is really great.", 5 | "slug": "tinder-ui-clone-youtube", 6 | "privacy": "public", 7 | "sdkVersion": "27.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 | "updates": { 18 | "fallbackToCacheTimeout": 0 19 | }, 20 | "assetBundlePatterns": [ 21 | "**/*" 22 | ], 23 | "ios": { 24 | "supportsTablet": true 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /Project Files/12 Tinder Swipe Deck/#1 Setup UI & add PanResponder/assets/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12 Tinder Swipe Deck/#1 Setup UI & add PanResponder/assets/1.jpg -------------------------------------------------------------------------------- /Project Files/12 Tinder Swipe Deck/#1 Setup UI & add PanResponder/assets/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12 Tinder Swipe Deck/#1 Setup UI & add PanResponder/assets/2.jpg -------------------------------------------------------------------------------- /Project Files/12 Tinder Swipe Deck/#1 Setup UI & add PanResponder/assets/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12 Tinder Swipe Deck/#1 Setup UI & add PanResponder/assets/3.jpg -------------------------------------------------------------------------------- /Project Files/12 Tinder Swipe Deck/#1 Setup UI & add PanResponder/assets/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12 Tinder Swipe Deck/#1 Setup UI & add PanResponder/assets/4.jpg -------------------------------------------------------------------------------- /Project Files/12 Tinder Swipe Deck/#1 Setup UI & add PanResponder/assets/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12 Tinder Swipe Deck/#1 Setup UI & add PanResponder/assets/5.jpg -------------------------------------------------------------------------------- /Project Files/12 Tinder Swipe Deck/#1 Setup UI & add PanResponder/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12 Tinder Swipe Deck/#1 Setup UI & add PanResponder/assets/icon.png -------------------------------------------------------------------------------- /Project Files/12 Tinder Swipe Deck/#1 Setup UI & add PanResponder/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12 Tinder Swipe Deck/#1 Setup UI & add PanResponder/assets/splash.png -------------------------------------------------------------------------------- /Project Files/12 Tinder Swipe Deck/#1 Setup UI & add PanResponder/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "private": true, 4 | "dependencies": { 5 | "expo": "^27.0.1", 6 | "react": "16.3.1", 7 | "react-native": "https://github.com/expo/react-native/archive/sdk-27.0.0.tar.gz" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /Project Files/12 Tinder Swipe Deck/#2 Complete Animation/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "tinder-ui-clone-youtube", 4 | "description": "This project is really great.", 5 | "slug": "tinder-ui-clone-youtube", 6 | "privacy": "public", 7 | "sdkVersion": "27.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 | "updates": { 18 | "fallbackToCacheTimeout": 0 19 | }, 20 | "assetBundlePatterns": [ 21 | "**/*" 22 | ], 23 | "ios": { 24 | "supportsTablet": true 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /Project Files/12 Tinder Swipe Deck/#2 Complete Animation/assets/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12 Tinder Swipe Deck/#2 Complete Animation/assets/1.jpg -------------------------------------------------------------------------------- /Project Files/12 Tinder Swipe Deck/#2 Complete Animation/assets/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12 Tinder Swipe Deck/#2 Complete Animation/assets/2.jpg -------------------------------------------------------------------------------- /Project Files/12 Tinder Swipe Deck/#2 Complete Animation/assets/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12 Tinder Swipe Deck/#2 Complete Animation/assets/3.jpg -------------------------------------------------------------------------------- /Project Files/12 Tinder Swipe Deck/#2 Complete Animation/assets/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12 Tinder Swipe Deck/#2 Complete Animation/assets/4.jpg -------------------------------------------------------------------------------- /Project Files/12 Tinder Swipe Deck/#2 Complete Animation/assets/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12 Tinder Swipe Deck/#2 Complete Animation/assets/5.jpg -------------------------------------------------------------------------------- /Project Files/12 Tinder Swipe Deck/#2 Complete Animation/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12 Tinder Swipe Deck/#2 Complete Animation/assets/icon.png -------------------------------------------------------------------------------- /Project Files/12 Tinder Swipe Deck/#2 Complete Animation/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12 Tinder Swipe Deck/#2 Complete Animation/assets/splash.png -------------------------------------------------------------------------------- /Project Files/12 Tinder Swipe Deck/#2 Complete Animation/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "private": true, 4 | "dependencies": { 5 | "expo": "^27.0.1", 6 | "react": "16.3.1", 7 | "react-native": "https://github.com/expo/react-native/archive/sdk-27.0.0.tar.gz" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#1 Tab Navigator And Header/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Image } from 'react-native'; 3 | 4 | import { createBottomTabNavigator } from 'react-navigation' 5 | import Icon from 'react-native-vector-icons/Ionicons' 6 | import Explore from './screens/Explore' 7 | import Saved from './screens/Saved' 8 | import Inbox from './screens/Inbox' 9 | import Trips from './screens/Trips' 10 | 11 | 12 | export default createBottomTabNavigator({ 13 | Explore: { 14 | screen: Explore, 15 | navigationOptions: { 16 | tabBarLabel: 'EXPLORE', 17 | tabBarIcon: ({ tintColor }) => ( 18 | 19 | ) 20 | } 21 | }, 22 | Saved: { 23 | screen: Saved, 24 | navigationOptions: { 25 | tabBarLabel: 'SAVED', 26 | tabBarIcon: ({ tintColor }) => ( 27 | 28 | ) 29 | } 30 | }, 31 | Trips: { 32 | screen: Trips, 33 | navigationOptions: { 34 | tabBarLabel: 'TRIPS', 35 | tabBarIcon: ({ tintColor }) => ( 36 | 37 | ) 38 | } 39 | }, 40 | Inbox: { 41 | screen: Inbox, 42 | navigationOptions: { 43 | tabBarLabel: 'INBOX', 44 | tabBarIcon: ({ tintColor }) => ( 45 | 46 | ) 47 | } 48 | }, 49 | Profile: { 50 | screen: Inbox, 51 | navigationOptions: { 52 | tabBarLabel: 'PROFILE', 53 | tabBarIcon: ({ tintColor }) => ( 54 | 55 | ) 56 | } 57 | } 58 | }, { 59 | tabBarOptions: { 60 | activeTintColor: 'red', 61 | inactiveTintColor: 'grey', 62 | style: { 63 | backgroundColor: 'white', 64 | borderTopWidth: 0, 65 | shadowOffset: { width: 5, height: 3 }, 66 | shadowColor: 'black', 67 | shadowOpacity: 0.5, 68 | elevation: 5 69 | } 70 | } 71 | }) 72 | 73 | const styles = StyleSheet.create({ 74 | container: { 75 | flex: 1, 76 | backgroundColor: '#fff', 77 | alignItems: 'center', 78 | justifyContent: 'center', 79 | }, 80 | }); 81 | -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#1 Tab Navigator And Header/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "airbnb-ui-youtube", 4 | "description": "This project is really great.", 5 | "slug": "airbnb-ui-youtube", 6 | "privacy": "public", 7 | "sdkVersion": "27.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 | "updates": { 18 | "fallbackToCacheTimeout": 0 19 | }, 20 | "assetBundlePatterns": [ 21 | "**/*" 22 | ], 23 | "ios": { 24 | "supportsTablet": true 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#1 Tab Navigator And Header/assets/airbnb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12. Airbnb UI/#1 Tab Navigator And Header/assets/airbnb.png -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#1 Tab Navigator And Header/assets/experiences.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12. Airbnb UI/#1 Tab Navigator And Header/assets/experiences.jpg -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#1 Tab Navigator And Header/assets/home.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12. Airbnb UI/#1 Tab Navigator And Header/assets/home.jpg -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#1 Tab Navigator And Header/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12. Airbnb UI/#1 Tab Navigator And Header/assets/icon.png -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#1 Tab Navigator And Header/assets/restaurant.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12. Airbnb UI/#1 Tab Navigator And Header/assets/restaurant.jpg -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#1 Tab Navigator And Header/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12. Airbnb UI/#1 Tab Navigator And Header/assets/splash.png -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#1 Tab Navigator And Header/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "private": true, 4 | "dependencies": { 5 | "expo": "^27.0.1", 6 | "react": "16.3.1", 7 | "react-native": "https://github.com/expo/react-native/archive/sdk-27.0.0.tar.gz", 8 | "react-native-star-rating": "^1.0.9", 9 | "react-navigation": "^2.0.4" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#1 Tab Navigator And Header/screens/Explore.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet, 6 | SafeAreaView, 7 | TextInput, 8 | Platform, 9 | StatusBar 10 | } from "react-native"; 11 | import Icon from 'react-native-vector-icons/Ionicons' 12 | 13 | class Explore extends Component { 14 | 15 | componentWillMount() { 16 | this.startHeaderHeight = 80 17 | if (Platform.OS == 'android') { 18 | this.startHeaderHeight = 100 + StatusBar.currentHeight 19 | } 20 | } 21 | 22 | render() { 23 | return ( 24 | 25 | 26 | 27 | 36 | 37 | 43 | 44 | 45 | 46 | 47 | ); 48 | } 49 | } 50 | export default Explore; 51 | 52 | const styles = StyleSheet.create({ 53 | container: { 54 | flex: 1, 55 | alignItems: 'center', 56 | justifyContent: 'center' 57 | } 58 | }); -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#1 Tab Navigator And Header/screens/Inbox.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet 6 | } from "react-native"; 7 | 8 | class Inbox extends Component { 9 | render() { 10 | return ( 11 | 12 | Inbox 13 | 14 | ); 15 | } 16 | } 17 | export default Inbox; 18 | 19 | const styles = StyleSheet.create({ 20 | container: { 21 | flex: 1, 22 | alignItems: 'center', 23 | justifyContent: 'center' 24 | } 25 | }); -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#1 Tab Navigator And Header/screens/Profile.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet 6 | } from "react-native"; 7 | 8 | class Profile extends Component { 9 | render() { 10 | return ( 11 | 12 | Profile 13 | 14 | ); 15 | } 16 | } 17 | export default Profile; 18 | 19 | const styles = StyleSheet.create({ 20 | container: { 21 | flex: 1, 22 | alignItems: 'center', 23 | justifyContent: 'center' 24 | } 25 | }); -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#1 Tab Navigator And Header/screens/Saved.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet 6 | } from "react-native"; 7 | 8 | class Saved extends Component { 9 | render() { 10 | return ( 11 | 12 | Saved 13 | 14 | ); 15 | } 16 | } 17 | export default Saved; 18 | 19 | const styles = StyleSheet.create({ 20 | container: { 21 | flex: 1, 22 | alignItems: 'center', 23 | justifyContent: 'center' 24 | } 25 | }); -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#1 Tab Navigator And Header/screens/Trips.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet 6 | } from "react-native"; 7 | 8 | class Trips extends Component { 9 | render() { 10 | return ( 11 | 12 | Trips 13 | 14 | ); 15 | } 16 | } 17 | export default Trips; 18 | 19 | const styles = StyleSheet.create({ 20 | container: { 21 | flex: 1, 22 | alignItems: 'center', 23 | justifyContent: 'center' 24 | } 25 | }); -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#2 Horizontal ScrollView /App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Image } from 'react-native'; 3 | 4 | import { createBottomTabNavigator } from 'react-navigation' 5 | import Icon from 'react-native-vector-icons/Ionicons' 6 | import Explore from './screens/Explore' 7 | import Saved from './screens/Saved' 8 | import Inbox from './screens/Inbox' 9 | import Trips from './screens/Trips' 10 | 11 | 12 | export default createBottomTabNavigator({ 13 | Explore: { 14 | screen: Explore, 15 | navigationOptions: { 16 | tabBarLabel: 'EXPLORE', 17 | tabBarIcon: ({ tintColor }) => ( 18 | 19 | ) 20 | } 21 | }, 22 | Saved: { 23 | screen: Saved, 24 | navigationOptions: { 25 | tabBarLabel: 'SAVED', 26 | tabBarIcon: ({ tintColor }) => ( 27 | 28 | ) 29 | } 30 | }, 31 | Trips: { 32 | screen: Trips, 33 | navigationOptions: { 34 | tabBarLabel: 'TRIPS', 35 | tabBarIcon: ({ tintColor }) => ( 36 | 37 | ) 38 | } 39 | }, 40 | Inbox: { 41 | screen: Inbox, 42 | navigationOptions: { 43 | tabBarLabel: 'INBOX', 44 | tabBarIcon: ({ tintColor }) => ( 45 | 46 | ) 47 | } 48 | }, 49 | Profile: { 50 | screen: Inbox, 51 | navigationOptions: { 52 | tabBarLabel: 'PROFILE', 53 | tabBarIcon: ({ tintColor }) => ( 54 | 55 | ) 56 | } 57 | } 58 | }, { 59 | tabBarOptions: { 60 | activeTintColor: 'red', 61 | inactiveTintColor: 'grey', 62 | style: { 63 | backgroundColor: 'white', 64 | borderTopWidth: 0, 65 | shadowOffset: { width: 5, height: 3 }, 66 | shadowColor: 'black', 67 | shadowOpacity: 0.5, 68 | elevation: 5 69 | } 70 | } 71 | }) 72 | 73 | const styles = StyleSheet.create({ 74 | container: { 75 | flex: 1, 76 | backgroundColor: '#fff', 77 | alignItems: 'center', 78 | justifyContent: 'center', 79 | }, 80 | }); 81 | -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#2 Horizontal ScrollView /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "airbnb-ui-youtube", 4 | "description": "This project is really great.", 5 | "slug": "airbnb-ui-youtube", 6 | "privacy": "public", 7 | "sdkVersion": "27.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 | "updates": { 18 | "fallbackToCacheTimeout": 0 19 | }, 20 | "assetBundlePatterns": [ 21 | "**/*" 22 | ], 23 | "ios": { 24 | "supportsTablet": true 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#2 Horizontal ScrollView /assets/airbnb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12. Airbnb UI/#2 Horizontal ScrollView /assets/airbnb.png -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#2 Horizontal ScrollView /assets/experiences.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12. Airbnb UI/#2 Horizontal ScrollView /assets/experiences.jpg -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#2 Horizontal ScrollView /assets/home.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12. Airbnb UI/#2 Horizontal ScrollView /assets/home.jpg -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#2 Horizontal ScrollView /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12. Airbnb UI/#2 Horizontal ScrollView /assets/icon.png -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#2 Horizontal ScrollView /assets/restaurant.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12. Airbnb UI/#2 Horizontal ScrollView /assets/restaurant.jpg -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#2 Horizontal ScrollView /assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12. Airbnb UI/#2 Horizontal ScrollView /assets/splash.png -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#2 Horizontal ScrollView /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "private": true, 4 | "dependencies": { 5 | "expo": "^27.0.1", 6 | "react": "16.3.1", 7 | "react-native": "https://github.com/expo/react-native/archive/sdk-27.0.0.tar.gz", 8 | "react-native-star-rating": "^1.0.9", 9 | "react-navigation": "^2.0.4" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#2 Horizontal ScrollView /screens/Explore.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet, 6 | SafeAreaView, 7 | TextInput, 8 | Platform, 9 | StatusBar, 10 | ScrollView, 11 | Image, 12 | Dimensions 13 | } from "react-native"; 14 | import Icon from 'react-native-vector-icons/Ionicons' 15 | import Category from './components/Explore/Category' 16 | 17 | const { height, width } = Dimensions.get('window') 18 | 19 | class Explore extends Component { 20 | 21 | componentWillMount() { 22 | this.startHeaderHeight = 80 23 | if (Platform.OS == 'android') { 24 | this.startHeaderHeight = 100 + StatusBar.currentHeight 25 | } 26 | } 27 | 28 | render() { 29 | return ( 30 | 31 | 32 | 33 | 42 | 43 | 49 | 50 | 51 | 54 | 55 | 56 | What can we help you find, Varun? 57 | 58 | 59 | 60 | 64 | 67 | 70 | 73 | 74 | 75 | 76 | 77 | Introducing Airbnb Plus 78 | 79 | 80 | A new selection of homes verified for quality & comfort 81 | 82 | 83 | 84 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | ); 97 | } 98 | } 99 | export default Explore; 100 | 101 | const styles = StyleSheet.create({ 102 | container: { 103 | flex: 1, 104 | alignItems: 'center', 105 | justifyContent: 'center' 106 | } 107 | }); -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#2 Horizontal ScrollView /screens/Inbox.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet 6 | } from "react-native"; 7 | 8 | class Inbox extends Component { 9 | render() { 10 | return ( 11 | 12 | Inbox 13 | 14 | ); 15 | } 16 | } 17 | export default Inbox; 18 | 19 | const styles = StyleSheet.create({ 20 | container: { 21 | flex: 1, 22 | alignItems: 'center', 23 | justifyContent: 'center' 24 | } 25 | }); -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#2 Horizontal ScrollView /screens/Profile.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet 6 | } from "react-native"; 7 | 8 | class Profile extends Component { 9 | render() { 10 | return ( 11 | 12 | Profile 13 | 14 | ); 15 | } 16 | } 17 | export default Profile; 18 | 19 | const styles = StyleSheet.create({ 20 | container: { 21 | flex: 1, 22 | alignItems: 'center', 23 | justifyContent: 'center' 24 | } 25 | }); -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#2 Horizontal ScrollView /screens/Saved.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet 6 | } from "react-native"; 7 | 8 | class Saved extends Component { 9 | render() { 10 | return ( 11 | 12 | Saved 13 | 14 | ); 15 | } 16 | } 17 | export default Saved; 18 | 19 | const styles = StyleSheet.create({ 20 | container: { 21 | flex: 1, 22 | alignItems: 'center', 23 | justifyContent: 'center' 24 | } 25 | }); -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#2 Horizontal ScrollView /screens/Trips.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet 6 | } from "react-native"; 7 | 8 | class Trips extends Component { 9 | render() { 10 | return ( 11 | 12 | Trips 13 | 14 | ); 15 | } 16 | } 17 | export default Trips; 18 | 19 | const styles = StyleSheet.create({ 20 | container: { 21 | flex: 1, 22 | alignItems: 'center', 23 | justifyContent: 'center' 24 | } 25 | }); -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#2 Horizontal ScrollView /screens/components/Explore/Category.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet, 6 | Image 7 | } from "react-native"; 8 | 9 | class Category extends Component { 10 | render() { 11 | return ( 12 | 13 | 14 | 17 | 18 | 19 | {this.props.name} 20 | 21 | 22 | ); 23 | } 24 | } 25 | export default Category; 26 | 27 | const styles = StyleSheet.create({ 28 | container: { 29 | flex: 1, 30 | alignItems: 'center', 31 | justifyContent: 'center' 32 | } 33 | }); -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#3 Recommended Homes/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Image } from 'react-native'; 3 | 4 | import { createBottomTabNavigator } from 'react-navigation' 5 | import Icon from 'react-native-vector-icons/Ionicons' 6 | import Explore from './screens/Explore' 7 | import Saved from './screens/Saved' 8 | import Inbox from './screens/Inbox' 9 | import Trips from './screens/Trips' 10 | 11 | 12 | export default createBottomTabNavigator({ 13 | Explore: { 14 | screen: Explore, 15 | navigationOptions: { 16 | tabBarLabel: 'EXPLORE', 17 | tabBarIcon: ({ tintColor }) => ( 18 | 19 | ) 20 | } 21 | }, 22 | Saved: { 23 | screen: Saved, 24 | navigationOptions: { 25 | tabBarLabel: 'SAVED', 26 | tabBarIcon: ({ tintColor }) => ( 27 | 28 | ) 29 | } 30 | }, 31 | Trips: { 32 | screen: Trips, 33 | navigationOptions: { 34 | tabBarLabel: 'TRIPS', 35 | tabBarIcon: ({ tintColor }) => ( 36 | 37 | ) 38 | } 39 | }, 40 | Inbox: { 41 | screen: Inbox, 42 | navigationOptions: { 43 | tabBarLabel: 'INBOX', 44 | tabBarIcon: ({ tintColor }) => ( 45 | 46 | ) 47 | } 48 | }, 49 | Profile: { 50 | screen: Inbox, 51 | navigationOptions: { 52 | tabBarLabel: 'PROFILE', 53 | tabBarIcon: ({ tintColor }) => ( 54 | 55 | ) 56 | } 57 | } 58 | }, { 59 | tabBarOptions: { 60 | activeTintColor: 'red', 61 | inactiveTintColor: 'grey', 62 | style: { 63 | backgroundColor: 'white', 64 | borderTopWidth: 0, 65 | shadowOffset: { width: 5, height: 3 }, 66 | shadowColor: 'black', 67 | shadowOpacity: 0.5, 68 | elevation: 5 69 | } 70 | } 71 | }) 72 | 73 | const styles = StyleSheet.create({ 74 | container: { 75 | flex: 1, 76 | backgroundColor: '#fff', 77 | alignItems: 'center', 78 | justifyContent: 'center', 79 | }, 80 | }); 81 | -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#3 Recommended Homes/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "airbnb-ui-youtube", 4 | "description": "This project is really great.", 5 | "slug": "airbnb-ui-youtube", 6 | "privacy": "public", 7 | "sdkVersion": "27.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 | "updates": { 18 | "fallbackToCacheTimeout": 0 19 | }, 20 | "assetBundlePatterns": [ 21 | "**/*" 22 | ], 23 | "ios": { 24 | "supportsTablet": true 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#3 Recommended Homes/assets/airbnb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12. Airbnb UI/#3 Recommended Homes/assets/airbnb.png -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#3 Recommended Homes/assets/experiences.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12. Airbnb UI/#3 Recommended Homes/assets/experiences.jpg -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#3 Recommended Homes/assets/home.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12. Airbnb UI/#3 Recommended Homes/assets/home.jpg -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#3 Recommended Homes/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12. Airbnb UI/#3 Recommended Homes/assets/icon.png -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#3 Recommended Homes/assets/restaurant.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12. Airbnb UI/#3 Recommended Homes/assets/restaurant.jpg -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#3 Recommended Homes/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12. Airbnb UI/#3 Recommended Homes/assets/splash.png -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#3 Recommended Homes/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "private": true, 4 | "dependencies": { 5 | "expo": "^27.0.1", 6 | "react": "16.3.1", 7 | "react-native": "https://github.com/expo/react-native/archive/sdk-27.0.0.tar.gz", 8 | "react-native-star-rating": "^1.0.9", 9 | "react-navigation": "^2.0.4" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#3 Recommended Homes/screens/Explore.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet, 6 | SafeAreaView, 7 | TextInput, 8 | Platform, 9 | StatusBar, 10 | ScrollView, 11 | Image, 12 | Dimensions 13 | } from "react-native"; 14 | import Icon from 'react-native-vector-icons/Ionicons' 15 | import Category from './components/Explore/Category' 16 | import Home from './components/Explore/Home' 17 | const { height, width } = Dimensions.get('window') 18 | class Explore extends Component { 19 | 20 | componentWillMount() { 21 | this.startHeaderHeight = 80 22 | if (Platform.OS == 'android') { 23 | this.startHeaderHeight = 100 + StatusBar.currentHeight 24 | } 25 | } 26 | 27 | render() { 28 | return ( 29 | 30 | 31 | 32 | 41 | 42 | 48 | 49 | 50 | 53 | 54 | 55 | What can we help you find, Varun? 56 | 57 | 58 | 59 | 63 | 66 | 69 | 72 | 73 | 74 | 75 | 76 | Introducing Airbnb Plus 77 | 78 | 79 | A new selection of homes verified for quality & comfort 80 | 81 | 82 | 83 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | Homes around the world 94 | 95 | 96 | 102 | 108 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | ); 123 | } 124 | } 125 | export default Explore; 126 | 127 | const styles = StyleSheet.create({ 128 | container: { 129 | flex: 1, 130 | alignItems: 'center', 131 | justifyContent: 'center' 132 | } 133 | }); -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#3 Recommended Homes/screens/Inbox.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet 6 | } from "react-native"; 7 | 8 | class Inbox extends Component { 9 | render() { 10 | return ( 11 | 12 | Inbox 13 | 14 | ); 15 | } 16 | } 17 | export default Inbox; 18 | 19 | const styles = StyleSheet.create({ 20 | container: { 21 | flex: 1, 22 | alignItems: 'center', 23 | justifyContent: 'center' 24 | } 25 | }); -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#3 Recommended Homes/screens/Profile.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet 6 | } from "react-native"; 7 | 8 | class Profile extends Component { 9 | render() { 10 | return ( 11 | 12 | Profile 13 | 14 | ); 15 | } 16 | } 17 | export default Profile; 18 | 19 | const styles = StyleSheet.create({ 20 | container: { 21 | flex: 1, 22 | alignItems: 'center', 23 | justifyContent: 'center' 24 | } 25 | }); -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#3 Recommended Homes/screens/Saved.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet 6 | } from "react-native"; 7 | 8 | class Saved extends Component { 9 | render() { 10 | return ( 11 | 12 | Saved 13 | 14 | ); 15 | } 16 | } 17 | export default Saved; 18 | 19 | const styles = StyleSheet.create({ 20 | container: { 21 | flex: 1, 22 | alignItems: 'center', 23 | justifyContent: 'center' 24 | } 25 | }); -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#3 Recommended Homes/screens/Trips.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet 6 | } from "react-native"; 7 | 8 | class Trips extends Component { 9 | render() { 10 | return ( 11 | 12 | Trips 13 | 14 | ); 15 | } 16 | } 17 | export default Trips; 18 | 19 | const styles = StyleSheet.create({ 20 | container: { 21 | flex: 1, 22 | alignItems: 'center', 23 | justifyContent: 'center' 24 | } 25 | }); -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#3 Recommended Homes/screens/components/Explore/Category.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet, 6 | Image 7 | } from "react-native"; 8 | 9 | class Category extends Component { 10 | render() { 11 | return ( 12 | 13 | 14 | 17 | 18 | 19 | {this.props.name} 20 | 21 | 22 | ); 23 | } 24 | } 25 | export default Category; 26 | 27 | const styles = StyleSheet.create({ 28 | container: { 29 | flex: 1, 30 | alignItems: 'center', 31 | justifyContent: 'center' 32 | } 33 | }); -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#3 Recommended Homes/screens/components/Explore/Home.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet, 6 | Image 7 | } from "react-native"; 8 | import StarRating from 'react-native-star-rating' 9 | class Home extends Component { 10 | render() { 11 | return ( 12 | 13 | 14 | 17 | 18 | 19 | {this.props.type} 20 | {this.props.name} 21 | {this.props.price}$ 22 | 29 | 30 | 31 | ); 32 | } 33 | } 34 | export default Home; 35 | 36 | const styles = StyleSheet.create({ 37 | container: { 38 | flex: 1, 39 | alignItems: 'center', 40 | justifyContent: 'center' 41 | } 42 | }); -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#4 Animated Header/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Image } from 'react-native'; 3 | 4 | import { createBottomTabNavigator } from 'react-navigation' 5 | import Icon from 'react-native-vector-icons/Ionicons' 6 | import Explore from './screens/Explore' 7 | import Saved from './screens/Saved' 8 | import Inbox from './screens/Inbox' 9 | import Trips from './screens/Trips' 10 | 11 | 12 | export default createBottomTabNavigator({ 13 | Explore: { 14 | screen: Explore, 15 | navigationOptions: { 16 | tabBarLabel: 'EXPLORE', 17 | tabBarIcon: ({ tintColor }) => ( 18 | 19 | ) 20 | } 21 | }, 22 | Saved: { 23 | screen: Saved, 24 | navigationOptions: { 25 | tabBarLabel: 'SAVED', 26 | tabBarIcon: ({ tintColor }) => ( 27 | 28 | ) 29 | } 30 | }, 31 | Trips: { 32 | screen: Trips, 33 | navigationOptions: { 34 | tabBarLabel: 'TRIPS', 35 | tabBarIcon: ({ tintColor }) => ( 36 | 37 | ) 38 | } 39 | }, 40 | Inbox: { 41 | screen: Inbox, 42 | navigationOptions: { 43 | tabBarLabel: 'INBOX', 44 | tabBarIcon: ({ tintColor }) => ( 45 | 46 | ) 47 | } 48 | }, 49 | Profile: { 50 | screen: Inbox, 51 | navigationOptions: { 52 | tabBarLabel: 'PROFILE', 53 | tabBarIcon: ({ tintColor }) => ( 54 | 55 | ) 56 | } 57 | } 58 | }, { 59 | tabBarOptions: { 60 | activeTintColor: 'red', 61 | inactiveTintColor: 'grey', 62 | style: { 63 | backgroundColor: 'white', 64 | borderTopWidth: 0, 65 | shadowOffset: { width: 5, height: 3 }, 66 | shadowColor: 'black', 67 | shadowOpacity: 0.5, 68 | elevation: 5 69 | } 70 | } 71 | }) 72 | 73 | const styles = StyleSheet.create({ 74 | container: { 75 | flex: 1, 76 | backgroundColor: '#fff', 77 | alignItems: 'center', 78 | justifyContent: 'center', 79 | }, 80 | }); 81 | -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#4 Animated Header/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "airbnb-ui-youtube", 4 | "description": "This project is really great.", 5 | "slug": "airbnb-ui-youtube", 6 | "privacy": "public", 7 | "sdkVersion": "27.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 | "updates": { 18 | "fallbackToCacheTimeout": 0 19 | }, 20 | "assetBundlePatterns": [ 21 | "**/*" 22 | ], 23 | "ios": { 24 | "supportsTablet": true 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#4 Animated Header/assets/airbnb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12. Airbnb UI/#4 Animated Header/assets/airbnb.png -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#4 Animated Header/assets/experiences.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12. Airbnb UI/#4 Animated Header/assets/experiences.jpg -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#4 Animated Header/assets/home.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12. Airbnb UI/#4 Animated Header/assets/home.jpg -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#4 Animated Header/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12. Airbnb UI/#4 Animated Header/assets/icon.png -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#4 Animated Header/assets/restaurant.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12. Airbnb UI/#4 Animated Header/assets/restaurant.jpg -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#4 Animated Header/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/12. Airbnb UI/#4 Animated Header/assets/splash.png -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#4 Animated Header/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "private": true, 4 | "dependencies": { 5 | "expo": "^27.0.1", 6 | "react": "16.3.1", 7 | "react-native": "https://github.com/expo/react-native/archive/sdk-27.0.0.tar.gz", 8 | "react-native-star-rating": "^1.0.9", 9 | "react-navigation": "^2.0.4" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#4 Animated Header/screens/Inbox.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet 6 | } from "react-native"; 7 | 8 | class Inbox extends Component { 9 | render() { 10 | return ( 11 | 12 | Inbox 13 | 14 | ); 15 | } 16 | } 17 | export default Inbox; 18 | 19 | const styles = StyleSheet.create({ 20 | container: { 21 | flex: 1, 22 | alignItems: 'center', 23 | justifyContent: 'center' 24 | } 25 | }); -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#4 Animated Header/screens/Profile.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet 6 | } from "react-native"; 7 | 8 | class Profile extends Component { 9 | render() { 10 | return ( 11 | 12 | Profile 13 | 14 | ); 15 | } 16 | } 17 | export default Profile; 18 | 19 | const styles = StyleSheet.create({ 20 | container: { 21 | flex: 1, 22 | alignItems: 'center', 23 | justifyContent: 'center' 24 | } 25 | }); -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#4 Animated Header/screens/Saved.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet 6 | } from "react-native"; 7 | 8 | class Saved extends Component { 9 | render() { 10 | return ( 11 | 12 | Saved 13 | 14 | ); 15 | } 16 | } 17 | export default Saved; 18 | 19 | const styles = StyleSheet.create({ 20 | container: { 21 | flex: 1, 22 | alignItems: 'center', 23 | justifyContent: 'center' 24 | } 25 | }); -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#4 Animated Header/screens/Trips.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet 6 | } from "react-native"; 7 | 8 | class Trips extends Component { 9 | render() { 10 | return ( 11 | 12 | Trips 13 | 14 | ); 15 | } 16 | } 17 | export default Trips; 18 | 19 | const styles = StyleSheet.create({ 20 | container: { 21 | flex: 1, 22 | alignItems: 'center', 23 | justifyContent: 'center' 24 | } 25 | }); -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#4 Animated Header/screens/components/Explore/Category.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet, 6 | Image 7 | } from "react-native"; 8 | 9 | class Category extends Component { 10 | render() { 11 | return ( 12 | 13 | 14 | 17 | 18 | 19 | {this.props.name} 20 | 21 | 22 | ); 23 | } 24 | } 25 | export default Category; 26 | 27 | const styles = StyleSheet.create({ 28 | container: { 29 | flex: 1, 30 | alignItems: 'center', 31 | justifyContent: 'center' 32 | } 33 | }); -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#4 Animated Header/screens/components/Explore/Home.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet, 6 | Image 7 | } from "react-native"; 8 | import StarRating from 'react-native-star-rating' 9 | class Home extends Component { 10 | render() { 11 | return ( 12 | 13 | 14 | 17 | 18 | 19 | {this.props.type} 20 | {this.props.name} 21 | {this.props.price}$ 22 | 29 | 30 | 31 | ); 32 | } 33 | } 34 | export default Home; 35 | 36 | const styles = StyleSheet.create({ 37 | container: { 38 | flex: 1, 39 | alignItems: 'center', 40 | justifyContent: 'center' 41 | } 42 | }); -------------------------------------------------------------------------------- /Project Files/12. Airbnb UI/#4 Animated Header/screens/components/Explore/Tag.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet 6 | } from "react-native"; 7 | 8 | class Tag extends Component { 9 | render() { 10 | return ( 11 | 12 | {this.props.name} 13 | 14 | ); 15 | } 16 | } 17 | export default Tag; 18 | 19 | const styles = StyleSheet.create({ 20 | container: { 21 | flex: 1, 22 | alignItems: 'center', 23 | justifyContent: 'center' 24 | } 25 | }); -------------------------------------------------------------------------------- /Project Files/14. Apple App of the day/#1. Basic Layout/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Image, TouchableWithoutFeedback, Animated, Dimensions, SafeAreaView } from 'react-native'; 3 | 4 | let SCREEN_WIDTH = Dimensions.get('window').width 5 | let SCREEN_HEIGHT = Dimensions.get('window').height 6 | var images = [ 7 | { id: 1, src: require('./assets/1.jpg') }, 8 | { id: 2, src: require('./assets/2.jpg') }, 9 | { id: 3, src: require('./assets/3.jpg') }, 10 | { id: 4, src: require('./assets/4.jpg') }, 11 | 12 | ] 13 | 14 | export default class App extends React.Component { 15 | render() { 16 | return ( 17 | 18 | 19 | {images.map(image => { 20 | return ( 21 | 22 | 25 | 28 | 29 | 30 | ) 31 | })} 32 | 33 | 34 | ); 35 | } 36 | } 37 | 38 | const styles = StyleSheet.create({ 39 | container: { 40 | flex: 1, 41 | backgroundColor: '#fff', 42 | alignItems: 'center', 43 | justifyContent: 'center', 44 | }, 45 | }); 46 | -------------------------------------------------------------------------------- /Project Files/14. Apple App of the day/#1. Basic Layout/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "apple-app-of-the-day-youtube", 4 | "description": "This project is really great.", 5 | "slug": "apple-app-of-the-day-youtube", 6 | "privacy": "public", 7 | "sdkVersion": "28.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 | "updates": { 18 | "fallbackToCacheTimeout": 0 19 | }, 20 | "assetBundlePatterns": [ 21 | "**/*" 22 | ], 23 | "ios": { 24 | "supportsTablet": true 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /Project Files/14. Apple App of the day/#1. Basic Layout/assets/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/14. Apple App of the day/#1. Basic Layout/assets/1.jpg -------------------------------------------------------------------------------- /Project Files/14. Apple App of the day/#1. Basic Layout/assets/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/14. Apple App of the day/#1. Basic Layout/assets/2.jpg -------------------------------------------------------------------------------- /Project Files/14. Apple App of the day/#1. Basic Layout/assets/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/14. Apple App of the day/#1. Basic Layout/assets/3.jpg -------------------------------------------------------------------------------- /Project Files/14. Apple App of the day/#1. Basic Layout/assets/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/14. Apple App of the day/#1. Basic Layout/assets/4.jpg -------------------------------------------------------------------------------- /Project Files/14. Apple App of the day/#1. Basic Layout/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/14. Apple App of the day/#1. Basic Layout/assets/icon.png -------------------------------------------------------------------------------- /Project Files/14. Apple App of the day/#1. Basic Layout/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/14. Apple App of the day/#1. Basic Layout/assets/splash.png -------------------------------------------------------------------------------- /Project Files/14. Apple App of the day/#1. Basic Layout/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "private": true, 4 | "dependencies": { 5 | "expo": "^28.0.0", 6 | "react": "16.3.1", 7 | "react-native": "https://github.com/expo/react-native/archive/sdk-28.0.0.tar.gz" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /Project Files/14. Apple App of the day/#2. Opening Animation/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Image, TouchableWithoutFeedback, Animated, Dimensions, SafeAreaView } from 'react-native'; 3 | 4 | let SCREEN_WIDTH = Dimensions.get('window').width 5 | let SCREEN_HEIGHT = Dimensions.get('window').height 6 | var images = [ 7 | { id: 1, src: require('./assets/1.jpg') }, 8 | { id: 2, src: require('./assets/2.jpg') }, 9 | { id: 3, src: require('./assets/3.jpg') }, 10 | { id: 4, src: require('./assets/4.jpg') }, 11 | 12 | ] 13 | 14 | export default class App extends React.Component { 15 | render() { 16 | return ( 17 | 18 | 19 | {images.map(image => { 20 | return ( 21 | 22 | 25 | 28 | 29 | 30 | ) 31 | })} 32 | 33 | 34 | ); 35 | } 36 | } 37 | 38 | const styles = StyleSheet.create({ 39 | container: { 40 | flex: 1, 41 | backgroundColor: '#fff', 42 | alignItems: 'center', 43 | justifyContent: 'center', 44 | }, 45 | }); 46 | -------------------------------------------------------------------------------- /Project Files/14. Apple App of the day/#2. Opening Animation/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "apple-app-of-the-day-youtube", 4 | "description": "This project is really great.", 5 | "slug": "apple-app-of-the-day-youtube", 6 | "privacy": "public", 7 | "sdkVersion": "28.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 | "updates": { 18 | "fallbackToCacheTimeout": 0 19 | }, 20 | "assetBundlePatterns": [ 21 | "**/*" 22 | ], 23 | "ios": { 24 | "supportsTablet": true 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /Project Files/14. Apple App of the day/#2. Opening Animation/assets/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/14. Apple App of the day/#2. Opening Animation/assets/1.jpg -------------------------------------------------------------------------------- /Project Files/14. Apple App of the day/#2. Opening Animation/assets/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/14. Apple App of the day/#2. Opening Animation/assets/2.jpg -------------------------------------------------------------------------------- /Project Files/14. Apple App of the day/#2. Opening Animation/assets/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/14. Apple App of the day/#2. Opening Animation/assets/3.jpg -------------------------------------------------------------------------------- /Project Files/14. Apple App of the day/#2. Opening Animation/assets/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/14. Apple App of the day/#2. Opening Animation/assets/4.jpg -------------------------------------------------------------------------------- /Project Files/14. Apple App of the day/#2. Opening Animation/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/14. Apple App of the day/#2. Opening Animation/assets/icon.png -------------------------------------------------------------------------------- /Project Files/14. Apple App of the day/#2. Opening Animation/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/14. Apple App of the day/#2. Opening Animation/assets/splash.png -------------------------------------------------------------------------------- /Project Files/14. Apple App of the day/#2. Opening Animation/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "private": true, 4 | "dependencies": { 5 | "expo": "^28.0.0", 6 | "react": "16.3.1", 7 | "react-native": "https://github.com/expo/react-native/archive/sdk-28.0.0.tar.gz" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /Project Files/14. Apple App of the day/#3. Closing Animation/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "apple-app-of-the-day-youtube", 4 | "description": "This project is really great.", 5 | "slug": "apple-app-of-the-day-youtube", 6 | "privacy": "public", 7 | "sdkVersion": "28.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 | "updates": { 18 | "fallbackToCacheTimeout": 0 19 | }, 20 | "assetBundlePatterns": [ 21 | "**/*" 22 | ], 23 | "ios": { 24 | "supportsTablet": true 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /Project Files/14. Apple App of the day/#3. Closing Animation/assets/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/14. Apple App of the day/#3. Closing Animation/assets/1.jpg -------------------------------------------------------------------------------- /Project Files/14. Apple App of the day/#3. Closing Animation/assets/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/14. Apple App of the day/#3. Closing Animation/assets/2.jpg -------------------------------------------------------------------------------- /Project Files/14. Apple App of the day/#3. Closing Animation/assets/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/14. Apple App of the day/#3. Closing Animation/assets/3.jpg -------------------------------------------------------------------------------- /Project Files/14. Apple App of the day/#3. Closing Animation/assets/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/14. Apple App of the day/#3. Closing Animation/assets/4.jpg -------------------------------------------------------------------------------- /Project Files/14. Apple App of the day/#3. Closing Animation/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/14. Apple App of the day/#3. Closing Animation/assets/icon.png -------------------------------------------------------------------------------- /Project Files/14. Apple App of the day/#3. Closing Animation/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/14. Apple App of the day/#3. Closing Animation/assets/splash.png -------------------------------------------------------------------------------- /Project Files/14. Apple App of the day/#3. Closing Animation/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "private": true, 4 | "dependencies": { 5 | "expo": "^28.0.0", 6 | "react": "16.3.1", 7 | "react-native": "https://github.com/expo/react-native/archive/sdk-28.0.0.tar.gz" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /Project Files/15. Udemy Searchbar Animation/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet, 6 | TextInput, 7 | FlatList, 8 | Keyboard 9 | } from "react-native"; 10 | 11 | import * as Animatable from 'react-native-animatable' 12 | 13 | const listItems = ['Development', 'Business', 'IT & Software', 'Office Productivity', 'Personal Development', 'Design', 'Marketing', 'LifeStyle', 'Photography', 'Health & Fitness', 'Teacher Training', 'Music'] 14 | 15 | 16 | import Icon from 'react-native-vector-icons/Ionicons' 17 | class App extends Component { 18 | 19 | state = { 20 | searchBarFocused: false 21 | } 22 | 23 | componentDidMount() { 24 | this.keyboardDidShow = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow) 25 | this.keyboardWillShow = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow) 26 | this.keyboardWillHide = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide) 27 | 28 | 29 | } 30 | 31 | keyboardDidShow = () => { 32 | this.setState({ searchBarFocused: true }) 33 | } 34 | 35 | keyboardWillShow = () => { 36 | this.setState({ searchBarFocused: true }) 37 | } 38 | 39 | keyboardWillHide = () => { 40 | this.setState({ searchBarFocused: false }) 41 | } 42 | render() { 43 | return ( 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | {item}} 60 | keyExtractor={(item, index) => index.toString()} 61 | /> 62 | 63 | ); 64 | } 65 | } 66 | export default App; 67 | 68 | const styles = StyleSheet.create({ 69 | container: { 70 | flex: 1, 71 | alignItems: 'center', 72 | justifyContent: 'center' 73 | } 74 | }); -------------------------------------------------------------------------------- /Project Files/15. Udemy Searchbar Animation/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "udemy-ui", 4 | "description": "This project is really great.", 5 | "slug": "udemy-ui", 6 | "privacy": "public", 7 | "sdkVersion": "30.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 | "updates": { 18 | "fallbackToCacheTimeout": 0 19 | }, 20 | "assetBundlePatterns": [ 21 | "**/*" 22 | ], 23 | "ios": { 24 | "supportsTablet": true 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /Project Files/15. Udemy Searchbar Animation/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/15. Udemy Searchbar Animation/assets/icon.png -------------------------------------------------------------------------------- /Project Files/15. Udemy Searchbar Animation/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/Project Files/15. Udemy Searchbar Animation/assets/splash.png -------------------------------------------------------------------------------- /Project Files/15. Udemy Searchbar Animation/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "empty-project-template", 3 | "main": "node_modules/expo/AppEntry.js", 4 | "private": true, 5 | "scripts": { 6 | "start": "expo start", 7 | "android": "expo start --android", 8 | "ios": "expo start --ios", 9 | "eject": "expo eject" 10 | }, 11 | "dependencies": { 12 | "expo": "^30.0.1", 13 | "react": "16.3.1", 14 | "react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz", 15 | "react-native-animatable": "^1.3.0", 16 | "react-native-vector-icons": "^6.0.2" 17 | } 18 | } -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | [![N|Solid](https://i0.wp.com/unsureprogrammercom.files.wordpress.com/2018/04/expo.png?ssl=1&w=450)   2 | [![N|Solid](https://nativebase.io/assets/img/front-page-icon.png)](https://nodesource.com/products/nsolid)   3 | Drawing 4 | 5 | # React Native Layout Series Project Files 6 | 7 | ## Check out the tutorial 8 | 9 | - [React Native Layout Series Unsure Programmer](https://www.youtube.com/watch?v=cgg1HidN4mQ&list=PLy9JCsy2u97l3tMqxpw5H1ePTR-eJai-4) 10 | 11 | 12 | ## How To Use ? 13 | 14 | - Copy the project files from the respective Project folder into the Root Folder of the app 15 | - Run ``` npm install``` 16 | - Thats It! 17 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "instagram-clone-youtube", 4 | "description": "This project is really great.", 5 | "slug": "instagram-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/feed_images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/assets/feed_images/1.jpg -------------------------------------------------------------------------------- /assets/feed_images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/assets/feed_images/2.jpg -------------------------------------------------------------------------------- /assets/feed_images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/assets/feed_images/3.png -------------------------------------------------------------------------------- /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/assets/icon.png -------------------------------------------------------------------------------- /assets/me.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/assets/me.png -------------------------------------------------------------------------------- /assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathvarun/React-Native-Layout-Tutorial-Series/10bde194d257c6539d2ff636ce1107717ba3869a/assets/splash.png -------------------------------------------------------------------------------- /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.7", 7 | "react": "16.2.0", 8 | "react-native": "https://github.com/expo/react-native/archive/sdk-25.0.0.tar.gz", 9 | "react-navigation": "^1.0.0-beta.27" 10 | } 11 | } 12 | --------------------------------------------------------------------------------