├── .expo-shared
    └── assets.json
├── .gitignore
├── App.js
├── README.md
├── app.json
├── assets
    ├── app.gif
    ├── banner.png
    ├── icon.png
    ├── logo.png
    ├── movie1.jpg
    ├── movie2.jpg
    ├── movie3.jpg
    ├── movie4.jpg
    ├── poster.jpg
    ├── splash.png
    └── splash2.png
├── babel.config.js
├── components
    ├── Header.js
    ├── Hero.js
    └── Movies.js
├── package.json
├── screen
    └── Home.js
└── yarn.lock


/.expo-shared/assets.json:
--------------------------------------------------------------------------------
1 | {
2 |   "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
3 |   "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
4 | }
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules/**/*
 2 | .expo/*
 3 | npm-debug.*
 4 | *.jks
 5 | *.p8
 6 | *.p12
 7 | *.key
 8 | *.mobileprovision
 9 | *.orig.*
10 | web-build/
11 | web-report/
12 | 
13 | # macOS
14 | .DS_Store
15 | 


--------------------------------------------------------------------------------
/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import Home from './screen/Home'
 4 | 
 5 | const App = () => {
 6 | 	return <Home />
 7 | }
 8 | 
 9 | export default App
10 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <h1 align="center">
 2 | <br>
 3 |   <img src="https://github.com/reginaldop/netflix-html-css/blob/master/images/netflix-logo-2-1.png" width="150">
 4 | <br>
 5 | <br>
 6 | Netflix React Native
 7 | </h1>
 8 | 
 9 | <p align="center">Recreating Netflix React Native with styled components</p>
10 | <p align="center">Watch on <a href="https://www.youtube.com/watch?v=UTfGq8iaSEQ&t">Youtube</a></p>
11 | 
12 | <div align="center">
13 |    <a href="https://www.youtube.com/watch?v=UTfGq8iaSEQ&t">
14 |    <img align="center" src="https://github.com/reginaldop/netflix-react-native/blob/master/assets/app.gif" width="230px">
15 |    </a>
16 | 
17 | </div>
18 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"expo": {
 3 | 		"name": "Netflix",
 4 | 		"slug": "Netflix",
 5 | 		"platforms": ["ios", "android", "web"],
 6 | 		"version": "1.0.0",
 7 | 		"orientation": "portrait",
 8 | 		"icon": "./assets/icon.png",
 9 | 		"splash": {
10 | 			"image": "./assets/splash2.png",
11 | 			"resizeMode": "cover",
12 | 			"backgroundColor": "#000000"
13 | 		},
14 | 		"updates": {
15 | 			"fallbackToCacheTimeout": 0
16 | 		},
17 | 		"assetBundlePatterns": ["**/*"],
18 | 		"ios": {
19 | 			"supportsTablet": true
20 | 		}
21 | 	}
22 | }
23 | 


--------------------------------------------------------------------------------
/assets/app.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reginaldop/netflix-react-native/718a46fb28a5f805fe6e67823a45d640685d1157/assets/app.gif


--------------------------------------------------------------------------------
/assets/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reginaldop/netflix-react-native/718a46fb28a5f805fe6e67823a45d640685d1157/assets/banner.png


--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reginaldop/netflix-react-native/718a46fb28a5f805fe6e67823a45d640685d1157/assets/icon.png


--------------------------------------------------------------------------------
/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reginaldop/netflix-react-native/718a46fb28a5f805fe6e67823a45d640685d1157/assets/logo.png


--------------------------------------------------------------------------------
/assets/movie1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reginaldop/netflix-react-native/718a46fb28a5f805fe6e67823a45d640685d1157/assets/movie1.jpg


--------------------------------------------------------------------------------
/assets/movie2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reginaldop/netflix-react-native/718a46fb28a5f805fe6e67823a45d640685d1157/assets/movie2.jpg


--------------------------------------------------------------------------------
/assets/movie3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reginaldop/netflix-react-native/718a46fb28a5f805fe6e67823a45d640685d1157/assets/movie3.jpg


--------------------------------------------------------------------------------
/assets/movie4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reginaldop/netflix-react-native/718a46fb28a5f805fe6e67823a45d640685d1157/assets/movie4.jpg


--------------------------------------------------------------------------------
/assets/poster.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reginaldop/netflix-react-native/718a46fb28a5f805fe6e67823a45d640685d1157/assets/poster.jpg


--------------------------------------------------------------------------------
/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reginaldop/netflix-react-native/718a46fb28a5f805fe6e67823a45d640685d1157/assets/splash.png


--------------------------------------------------------------------------------
/assets/splash2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reginaldop/netflix-react-native/718a46fb28a5f805fe6e67823a45d640685d1157/assets/splash2.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = function(api) {
2 |   api.cache(true);
3 |   return {
4 |     presets: ['babel-preset-expo'],
5 |   };
6 | };
7 | 


--------------------------------------------------------------------------------
/components/Header.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import styled from 'styled-components/native'
 4 | 
 5 | const Container = styled.View`
 6 | 	align-items: center;
 7 | 	flex-direction: row;
 8 | 	justify-content: space-between;
 9 | 	padding: 25px 25px 0 25px;
10 | 	width: 100%;
11 | `
12 | 
13 | const Logo = styled.Image`
14 | 	width: 20px;
15 | 	height: 40px;
16 | `
17 | 
18 | const Menu = styled.Text`
19 | 	font-size: 18px;
20 | 	color: #fff;
21 | 	letter-spacing: 0.1px;
22 | `
23 | 
24 | const Header = () => {
25 | 	return (
26 | 		<Container>
27 | 			<Logo resizeMode='contain' source={require('../assets/logo.png')} />
28 | 			<Menu>Séries</Menu>
29 | 			<Menu>Filmes</Menu>
30 | 			<Menu>Minha lista</Menu>
31 | 		</Container>
32 | 	)
33 | }
34 | 
35 | export default Header
36 | 


--------------------------------------------------------------------------------
/components/Hero.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | 
  3 | import styled from 'styled-components/native'
  4 | 
  5 | import { Feather, Ionicons } from '@expo/vector-icons'
  6 | 
  7 | const Container = styled.View`
  8 | 	position: absolute;
  9 | 	width: 100%;
 10 | 	align-items: center;
 11 | 	bottom: 8px;
 12 | `
 13 | 
 14 | const Banner = styled.Image`
 15 | 	height: 100px;
 16 | `
 17 | 
 18 | const Tags = styled.View`
 19 | 	justify-content: center;
 20 | 	margin-top: 20px;
 21 | 	flex-direction: row;
 22 | `
 23 | 
 24 | const MenuTag = styled.Text`
 25 | 	color: #fff;
 26 | 	padding: 0 8px;
 27 | 	font-size: 13px;
 28 | `
 29 | 
 30 | const Separator = styled.View`
 31 | 	width: 3px;
 32 | 	height: 3px;
 33 | 	background-color: #e8e8e8;
 34 | 	margin: 6px 0;
 35 | 	border-radius: 3px;
 36 | `
 37 | 
 38 | const MenuHero = styled.View`
 39 | 	width: 90%;
 40 | 	margin-top: 15px;
 41 | 	flex-direction: row;
 42 | 	justify-content: space-between;
 43 | 	align-items: center;
 44 | `
 45 | 
 46 | const Button = styled.TouchableOpacity`
 47 | 	align-items: center;
 48 | `
 49 | 
 50 | const TextButton = styled.Text`
 51 | 	color: #fff;
 52 | 	font-size: 13px;
 53 | 	margin-top: 3px;
 54 | `
 55 | 
 56 | const Play = styled.TouchableOpacity`
 57 | 	flex-direction: row;
 58 | 	background-color: #fff;
 59 | 	width: 142px;
 60 | 	height: 32px;
 61 | 	border-radius: 2px;
 62 | 	align-items: center;
 63 | 	justify-content: center;
 64 | `
 65 | 
 66 | const TextButtonPlay = styled.Text`
 67 | 	font-size: 15px;
 68 | 	font-weight: bold;
 69 | 	padding-left: 5px;
 70 | `
 71 | 
 72 | const Hero = () => {
 73 | 	return (
 74 | 		<Container>
 75 | 			<Banner resizeMode='contain' source={require('../assets/banner.png')} />
 76 | 			<Tags>
 77 | 				<MenuTag>Envolvente</MenuTag>
 78 | 				<Separator />
 79 | 				<MenuTag>Empolgantes</MenuTag>
 80 | 			</Tags>
 81 | 			<MenuHero>
 82 | 				<Button>
 83 | 					<Feather name='plus' size={26} color='#FFF' />
 84 | 					<TextButton>Minha lista</TextButton>
 85 | 				</Button>
 86 | 
 87 | 				<Play>
 88 | 					<Ionicons name='ios-play' size={26} />
 89 | 					<TextButtonPlay>Assistir</TextButtonPlay>
 90 | 				</Play>
 91 | 
 92 | 				<Button>
 93 | 					<Feather name='info' size={22} color='#FFF' />
 94 | 					<TextButton>Saiba mais</TextButton>
 95 | 				</Button>
 96 | 			</MenuHero>
 97 | 		</Container>
 98 | 	)
 99 | }
100 | 
101 | export default Hero
102 | 


--------------------------------------------------------------------------------
/components/Movies.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Dimensions } from 'react-native'
 3 | 
 4 | import styled from 'styled-components/native'
 5 | 
 6 | const Container = styled.View`
 7 | 	padding: 20px 0;
 8 | `
 9 | 
10 | const Label = styled.Text`
11 | 	color: #fff;
12 | 	font-size: 16px;
13 | 	margin: 0 0 5px 10px;
14 | `
15 | const MovieScroll = styled.ScrollView`
16 | 	padding-left: 10px;
17 | `
18 | 
19 | const MoviePoster = styled.Image`
20 | 	width: ${Math.round((Dimensions.get('window').width * 28) / 100)}px;
21 | 	height: 150px;
22 | `
23 | 
24 | const MovieCard = styled.View`
25 | 	padding-right: 9px;
26 | `
27 | 
28 | const Movies = ({ label, item }) => {
29 | 	return (
30 | 		<Container>
31 | 			<Label>{label}</Label>
32 | 			<MovieScroll horizontal>
33 | 				{item.map((movie, item) => {
34 | 					return (
35 | 						<MovieCard key={String(item)}>
36 | 							<MoviePoster resizeMode='cover' source={movie} />
37 | 						</MovieCard>
38 | 					)
39 | 				})}
40 | 			</MovieScroll>
41 | 		</Container>
42 | 	)
43 | }
44 | 
45 | export default Movies
46 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"main": "node_modules/expo/AppEntry.js",
 3 | 	"scripts": {
 4 | 		"start": "expo start",
 5 | 		"android": "expo start --android",
 6 | 		"ios": "expo start --ios",
 7 | 		"web": "expo start --web",
 8 | 		"eject": "expo eject"
 9 | 	},
10 | 	"dependencies": {
11 | 		"expo": "^37.0.0",
12 | 		"react": "16.9.0",
13 | 		"react-dom": "16.9.0",
14 | 		"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
15 | 		"react-native-web": "^0.11.7",
16 | 		"styled-components": "^5.1.0"
17 | 	},
18 | 	"devDependencies": {
19 | 		"@babel/core": "^7.8.6",
20 | 		"babel-preset-expo": "^8.1.0"
21 | 	},
22 | 	"private": true
23 | }
24 | 


--------------------------------------------------------------------------------
/screen/Home.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { StatusBar, Dimensions } from 'react-native'
 4 | 
 5 | import { LinearGradient } from 'expo-linear-gradient'
 6 | 
 7 | import styled from 'styled-components/native'
 8 | 
 9 | import Header from '../components/Header'
10 | import Hero from '../components/Hero'
11 | import Movies from '../components/Movies'
12 | 
13 | const api = [
14 | 	require('../assets/movie1.jpg'),
15 | 	require('../assets/movie2.jpg'),
16 | 	require('../assets/movie3.jpg'),
17 | 	require('../assets/movie4.jpg')
18 | ]
19 | 
20 | const Container = styled.ScrollView`
21 | 	flex: 1;
22 | 	background-color: #000;
23 | `
24 | 
25 | const Poster = styled.ImageBackground`
26 | 	width: 100%;
27 | 	height: ${(Dimensions.get('window').height * 81) / 100}px;
28 | `
29 | 
30 | const Gradient = styled(LinearGradient)`
31 | 	height: 100%;
32 | `
33 | 
34 | const Home = () => {
35 | 	return (
36 | 		<>
37 | 			<StatusBar
38 | 				translucent
39 | 				backgroundColor='transparent'
40 | 				barStyle='light-content'
41 | 			/>
42 | 			<Container>
43 | 				<Poster source={require('../assets/poster.jpg')}>
44 | 					<Gradient
45 | 						locations={[0, 0.2, 0.6, 0.93]}
46 | 						colors={[
47 | 							'rgba(0,0,0,0.5)',
48 | 							'rgba(0,0,0,0.0)',
49 | 							'rgba(0,0,0,0.0)',
50 | 							'rgba(0,0,0,1)'
51 | 						]}>
52 | 						<Header />
53 | 						<Hero />
54 | 					</Gradient>
55 | 				</Poster>
56 | 				<Movies label='Recomendados' item={api} />
57 | 				<Movies label='Top 10' item={api} />
58 | 			</Container>
59 | 		</>
60 | 	)
61 | }
62 | 
63 | export default Home
64 | 


--------------------------------------------------------------------------------