├── .expo-shared └── assets.json ├── .gitignore ├── App.js ├── README.md ├── app.json ├── assets ├── app.gif ├── favicon.png ├── icon.png ├── logo.png ├── post1.jpg ├── post2.jpg ├── splash.png ├── story1.jpg ├── story2.jpg ├── story3.jpg ├── story4.jpg ├── user1.jpg ├── user2.jpg ├── user3.jpg ├── user4.jpg └── user5.jpg ├── babel.config.js ├── components ├── AppBar.js ├── Avatar.js ├── Feed.js ├── Story.js ├── ToolBar.js └── Users.js ├── package.json └── 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 | 12 | # macOS 13 | .DS_Store 14 | -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import { StatusBar, ScrollView } from 'react-native' 4 | 5 | import styled from 'styled-components/native' 6 | 7 | import AppBar from './components/AppBar' 8 | import ToolBar from './components/ToolBar' 9 | import Users from './components/Users' 10 | import Story from './components/Story' 11 | import Feed from './components/Feed' 12 | 13 | const Container = styled.SafeAreaView` 14 | flex: 1; 15 | ` 16 | 17 | const App = () => { 18 | return ( 19 | <> 20 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | ) 35 | } 36 | 37 | export default App 38 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |
4 |
5 | Facebook Clone React Native 6 |

7 | 8 |

Recreating Facebook Clone React Native with styled components

9 |

Watch on Youtube

10 | 11 |
12 | 13 | 14 | 15 | 16 |
17 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "facebook", 4 | "slug": "facebook", 5 | "version": "1.0.0", 6 | "orientation": "portrait", 7 | "icon": "./assets/icon.png", 8 | "splash": { 9 | "image": "./assets/splash.png", 10 | "resizeMode": "contain", 11 | "backgroundColor": "#ffffff" 12 | }, 13 | "updates": { 14 | "fallbackToCacheTimeout": 0 15 | }, 16 | "assetBundlePatterns": ["**/*"], 17 | "ios": { 18 | "supportsTablet": true 19 | }, 20 | "web": { 21 | "favicon": "./assets/favicon.png" 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /assets/app.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reginaldop/facebook-clone-react-native/34b71ef16e05ad389b22dc9933e8255cc95b127b/assets/app.gif -------------------------------------------------------------------------------- /assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reginaldop/facebook-clone-react-native/34b71ef16e05ad389b22dc9933e8255cc95b127b/assets/favicon.png -------------------------------------------------------------------------------- /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reginaldop/facebook-clone-react-native/34b71ef16e05ad389b22dc9933e8255cc95b127b/assets/icon.png -------------------------------------------------------------------------------- /assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reginaldop/facebook-clone-react-native/34b71ef16e05ad389b22dc9933e8255cc95b127b/assets/logo.png -------------------------------------------------------------------------------- /assets/post1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reginaldop/facebook-clone-react-native/34b71ef16e05ad389b22dc9933e8255cc95b127b/assets/post1.jpg -------------------------------------------------------------------------------- /assets/post2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reginaldop/facebook-clone-react-native/34b71ef16e05ad389b22dc9933e8255cc95b127b/assets/post2.jpg -------------------------------------------------------------------------------- /assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reginaldop/facebook-clone-react-native/34b71ef16e05ad389b22dc9933e8255cc95b127b/assets/splash.png -------------------------------------------------------------------------------- /assets/story1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reginaldop/facebook-clone-react-native/34b71ef16e05ad389b22dc9933e8255cc95b127b/assets/story1.jpg -------------------------------------------------------------------------------- /assets/story2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reginaldop/facebook-clone-react-native/34b71ef16e05ad389b22dc9933e8255cc95b127b/assets/story2.jpg -------------------------------------------------------------------------------- /assets/story3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reginaldop/facebook-clone-react-native/34b71ef16e05ad389b22dc9933e8255cc95b127b/assets/story3.jpg -------------------------------------------------------------------------------- /assets/story4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reginaldop/facebook-clone-react-native/34b71ef16e05ad389b22dc9933e8255cc95b127b/assets/story4.jpg -------------------------------------------------------------------------------- /assets/user1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reginaldop/facebook-clone-react-native/34b71ef16e05ad389b22dc9933e8255cc95b127b/assets/user1.jpg -------------------------------------------------------------------------------- /assets/user2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reginaldop/facebook-clone-react-native/34b71ef16e05ad389b22dc9933e8255cc95b127b/assets/user2.jpg -------------------------------------------------------------------------------- /assets/user3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reginaldop/facebook-clone-react-native/34b71ef16e05ad389b22dc9933e8255cc95b127b/assets/user3.jpg -------------------------------------------------------------------------------- /assets/user4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reginaldop/facebook-clone-react-native/34b71ef16e05ad389b22dc9933e8255cc95b127b/assets/user4.jpg -------------------------------------------------------------------------------- /assets/user5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reginaldop/facebook-clone-react-native/34b71ef16e05ad389b22dc9933e8255cc95b127b/assets/user5.jpg -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /components/AppBar.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import styled from 'styled-components/native' 4 | 5 | import { Feather, MaterialCommunityIcons } from '@expo/vector-icons' 6 | 7 | const Container = styled.View` 8 | width: 100%; 9 | height: 58px; 10 | padding: 0 11px; 11 | align-items: center; 12 | flex-direction: row; 13 | justify-content: space-between; 14 | ` 15 | const Text = styled.Text` 16 | color: #3a86e9; 17 | font-size: 25px; 18 | font-weight: bold; 19 | letter-spacing: -0.3px; 20 | ` 21 | const Row = styled.View` 22 | flex-direction: row; 23 | ` 24 | const Button = styled.TouchableOpacity` 25 | width: 42px; 26 | height: 42px; 27 | border-radius: 21px; 28 | background: #eeeeee; 29 | align-items: center; 30 | justify-content: center; 31 | margin-left: 16px; 32 | ` 33 | 34 | const AppBar = () => { 35 | return ( 36 | 37 | facebook 38 | 39 | 42 | 43 | 46 | 47 | 48 | ) 49 | } 50 | 51 | export default AppBar 52 | -------------------------------------------------------------------------------- /components/Avatar.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import styled from 'styled-components/native' 4 | 5 | const Container = styled.View` 6 | width: 40px; 7 | height: 40px; 8 | position: relative; 9 | ` 10 | const User = styled.Image` 11 | width: 40px; 12 | height: 40px; 13 | border-radius: 20px; 14 | border-color: #1777f2; 15 | border-width: ${props => (props.story ? '3px' : 0)}; 16 | ` 17 | const UserActive = styled.View` 18 | width: 15px; 19 | height: 15px; 20 | border-radius: 8px; 21 | background: #4bcb1f; 22 | position: absolute; 23 | bottom: -2px; 24 | right: -2px; 25 | border-width: 2px; 26 | border-color: #ffffff; 27 | ` 28 | 29 | const Avatar = ({ source, online, story }) => { 30 | return ( 31 | 32 | 33 | {online && } 34 | 35 | ) 36 | } 37 | 38 | export default Avatar 39 | -------------------------------------------------------------------------------- /components/Feed.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import { View } from 'react-native' 4 | 5 | import styled from 'styled-components/native' 6 | 7 | import { 8 | Entypo, 9 | AntDesign, 10 | MaterialCommunityIcons 11 | } from '@expo/vector-icons' 12 | 13 | import Avatar from './Avatar' 14 | 15 | const Container = styled.View` 16 | flex: 1; 17 | ` 18 | const Header = styled.View` 19 | height: 50px; 20 | flex-direction: row; 21 | align-items: center; 22 | justify-content: space-between; 23 | margin-top: 6px; 24 | padding: 0 11px; 25 | ` 26 | const Row = styled.View` 27 | align-items: center; 28 | flex-direction: row; 29 | ` 30 | const User = styled.Text` 31 | font-size: 12px; 32 | font-weight: bold; 33 | color: #222121; 34 | ` 35 | const Time = styled.Text` 36 | font-size: 9px; 37 | color: #747476; 38 | ` 39 | const Post = styled.Text` 40 | font-size: 12px; 41 | color: #222121; 42 | line-height: 16px; 43 | padding: 0 11px; 44 | ` 45 | const Photo = styled.Image` 46 | margin-top: 9px; 47 | width: 100%; 48 | height: 300px; 49 | ` 50 | const Footer = styled.View` 51 | padding: 0 11px; 52 | ` 53 | const FooterCount = styled.View` 54 | flex-direction: row; 55 | justify-content: space-between; 56 | padding: 9px 0; 57 | ` 58 | const IconCount = styled.View` 59 | background: #1878f3; 60 | width: 20px; 61 | height: 20px; 62 | border-radius: 10px; 63 | align-items: center; 64 | justify-content: center; 65 | margin-right: 6px; 66 | ` 67 | const TextCount = styled.Text` 68 | font-size: 11px; 69 | color: #424040; 70 | ` 71 | const Separator = styled.View` 72 | width: 100%; 73 | height: 1px; 74 | background: #f9f9f9; 75 | ` 76 | const FooterMenu = styled.View` 77 | flex-direction: row; 78 | justify-content: space-between; 79 | padding: 9px 0; 80 | ` 81 | const Button = styled.TouchableOpacity` 82 | flex-direction: row; 83 | ` 84 | const Icon = styled.View` 85 | margin-right: 6px; 86 | ` 87 | const Text = styled.Text` 88 | font-size: 12px; 89 | color: #424040; 90 | ` 91 | const BottomDivider = styled.View` 92 | width: 100%; 93 | height: 9px; 94 | background: #f0f2f5; 95 | ` 96 | 97 | const Feed = () => { 98 | return ( 99 | <> 100 | 101 |
102 | 103 | 106 | 107 | Regi P 108 | 109 | 110 | 115 | 120 | 121 | 122 | 123 | 124 | 129 |
130 | 131 | 132 | Crie na prática uma aplicação utilizando NextJS, 133 | ReactJS, React Native e Strap Api. 134 | 135 | 136 | 137 |
138 | 139 | 140 | 141 | 146 | 147 | 88 likes 148 | 149 | 2k comments 150 | 151 | 152 | 153 | 154 | 155 | 165 | 166 | 176 | 177 | 187 | 188 |
189 | 190 | 191 | 192 | 193 |
194 | 195 | 198 | 199 | Wanessa J 200 | 201 | 202 | 207 | 212 | 213 | 214 | 215 | 216 | 221 |
222 | 223 | Post user 224 | 225 | 226 |
227 | 228 | 229 | 230 | 235 | 236 | 88 likes 237 | 238 | 2k comments 239 | 240 | 241 | 242 | 243 | 244 | 254 | 255 | 265 | 266 | 276 | 277 |
278 | 279 | 280 | 281 | ) 282 | } 283 | 284 | export default Feed 285 | -------------------------------------------------------------------------------- /components/Story.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import { ScrollView } from 'react-native' 4 | 5 | import styled from 'styled-components/native' 6 | 7 | import { AntDesign } from '@expo/vector-icons' 8 | 9 | import Avatar from './Avatar' 10 | 11 | const Container = styled.View` 12 | width: 100%; 13 | height: 192px; 14 | flex-direction: row; 15 | align-items: center; 16 | ` 17 | const Card = styled.View` 18 | width: 106px; 19 | height: 170px; 20 | position: relative; 21 | margin-right: 8px; 22 | ` 23 | const CardStory = styled.Image` 24 | width: 100%; 25 | height: 170px; 26 | border-radius: 12px; 27 | ` 28 | const CardUser = styled.View` 29 | position: absolute; 30 | top: 8px; 31 | left: 8px; 32 | background: #ffffff; 33 | border-radius: 20px; 34 | width: 39px; 35 | height: 39px; 36 | align-items: center; 37 | justify-content: center; 38 | ` 39 | const CardFooter = styled.View` 40 | width: 100%; 41 | position: absolute; 42 | bottom: 12px; 43 | left: 9px; 44 | ` 45 | const Text = styled.Text` 46 | font-size: 13px; 47 | font-weight: bold; 48 | color: #ffffff; 49 | text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); 50 | ` 51 | const BottomDivider = styled.View` 52 | width: 100%; 53 | height: 9px; 54 | background: #f0f2f5; 55 | ` 56 | 57 | const Story = () => { 58 | return ( 59 | <> 60 | 61 | 65 | 66 | 69 | 70 | 75 | 76 | 77 | Add To Story 78 | 79 | 80 | 81 | 82 | 85 | 86 | 90 | 91 | 92 | Wanessa J 93 | 94 | 95 | 96 | 97 | 100 | 101 | 105 | 106 | 107 | Regi P 108 | 109 | 110 | 111 | 112 | 115 | 116 | 120 | 121 | 122 | Anna M 123 | 124 | 125 | 126 | 127 | 128 | 129 | ) 130 | } 131 | 132 | export default Story 133 | -------------------------------------------------------------------------------- /components/ToolBar.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import styled from 'styled-components/native' 4 | 5 | import { 6 | Ionicons, 7 | MaterialIcons, 8 | MaterialCommunityIcons 9 | } from '@expo/vector-icons' 10 | 11 | import Avatar from './Avatar' 12 | 13 | const Container = styled.View` 14 | width: 100%; 15 | height: 92px; 16 | ` 17 | const Row = styled.View` 18 | flex-direction: row; 19 | background: #ffffff; 20 | width: 100%; 21 | padding: 0 11px; 22 | align-items: center; 23 | ` 24 | const Input = styled.TextInput` 25 | height: 50px; 26 | width: 100%; 27 | padding: 0 8px; 28 | ` 29 | const Divider = styled.View` 30 | width: 100%; 31 | height: 0.5px; 32 | background: #f0f0f0; 33 | ` 34 | const Menu = styled.View` 35 | flex: 1; 36 | flex-direction: row; 37 | align-items: center; 38 | justify-content: center; 39 | height: 42px; 40 | ` 41 | const MenuText = styled.Text` 42 | padding-left: 11px; 43 | font-weight: 500; 44 | font-size: 12px; 45 | ` 46 | const Separator = styled.View` 47 | width: 1px; 48 | height: 26px; 49 | background: #f0f0f0; 50 | ` 51 | const BottomDivider = styled.View` 52 | width: 100%; 53 | height: 9px; 54 | background: #f0f2f5; 55 | ` 56 | 57 | const ToolBar = () => { 58 | return ( 59 | <> 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | Live 70 | 71 | 72 | 73 | 74 | 79 | Photo 80 | 81 | 82 | 83 | 84 | 89 | Room 90 | 91 | 92 | 93 | 94 | 95 | ) 96 | } 97 | 98 | export default ToolBar 99 | -------------------------------------------------------------------------------- /components/Users.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import { ScrollView } from 'react-native' 4 | 5 | import styled from 'styled-components/native' 6 | 7 | import { MaterialCommunityIcons } from '@expo/vector-icons' 8 | 9 | import Avatar from './Avatar' 10 | 11 | const Container = styled.View` 12 | width: 100%; 13 | height: 58px; 14 | flex-direction: row; 15 | align-items: center; 16 | ` 17 | const Room = styled.TouchableOpacity` 18 | width: 115px; 19 | height: 40px; 20 | flex-direction: row; 21 | align-items: center; 22 | border-radius: 20px; 23 | border-width: 1px; 24 | border-color: #82b1ff; 25 | padding: 0 15px; 26 | margin-right: 12px; 27 | ` 28 | const Text = styled.Text` 29 | color: #1777f2; 30 | font-size: 12px; 31 | padding-left: 6px; 32 | ` 33 | const User = styled.View` 34 | margin-right: 13px; 35 | ` 36 | const BottomDivider = styled.View` 37 | width: 100%; 38 | height: 9px; 39 | background: #f0f2f5; 40 | ` 41 | 42 | const Users = () => { 43 | return ( 44 | <> 45 | 46 | 50 | 51 | 56 | Create Room 57 | 58 | 59 | 63 | 64 | 65 | 69 | 70 | 71 | 74 | 75 | 76 | 79 | 80 | 81 | 84 | 85 | 86 | 87 | 88 | 89 | ) 90 | } 91 | 92 | export default Users 93 | -------------------------------------------------------------------------------- /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": "~38.0.8", 12 | "expo-status-bar": "^1.0.2", 13 | "react": "~16.11.0", 14 | "react-dom": "~16.11.0", 15 | "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz", 16 | "react-native-web": "~0.11.7", 17 | "styled-components": "^5.1.1" 18 | }, 19 | "devDependencies": { 20 | "@babel/core": "^7.8.6", 21 | "babel-preset-expo": "~8.1.0" 22 | }, 23 | "private": true 24 | } 25 | --------------------------------------------------------------------------------