├── src
├── @types
│ └── png.d.ts
├── assets
│ └── plate.png
├── components
│ ├── Plate
│ │ ├── styles.ts
│ │ └── index.tsx
│ ├── Button
│ │ ├── styles.ts
│ │ └── index.tsx
│ ├── Header
│ │ ├── styles.ts
│ │ └── index.tsx
│ ├── Footer
│ │ ├── index.tsx
│ │ └── styles.ts
│ └── Toggle
│ │ ├── styles.ts
│ │ └── index.tsx
├── screens
│ └── Details
│ │ ├── styles.ts
│ │ └── index.tsx
└── styles
│ └── theme.ts
├── assets
├── icon.png
├── splash.png
├── favicon.png
├── adaptive-icon.png
└── Screenshot from 2021-09-01 13-26-55.png
├── tsconfig.json
├── babel.config.js
├── .gitignore
├── .expo-shared
└── assets.json
├── App.tsx
├── app.json
├── package.json
└── README.md
/src/@types/png.d.ts:
--------------------------------------------------------------------------------
1 | declare module "*.png";
2 |
--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/orodrigogo/cookapp/HEAD/assets/icon.png
--------------------------------------------------------------------------------
/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/orodrigogo/cookapp/HEAD/assets/splash.png
--------------------------------------------------------------------------------
/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/orodrigogo/cookapp/HEAD/assets/favicon.png
--------------------------------------------------------------------------------
/src/assets/plate.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/orodrigogo/cookapp/HEAD/src/assets/plate.png
--------------------------------------------------------------------------------
/assets/adaptive-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/orodrigogo/cookapp/HEAD/assets/adaptive-icon.png
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "expo/tsconfig.base",
3 | "compilerOptions": {
4 | "strict": true
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/assets/Screenshot from 2021-09-01 13-26-55.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/orodrigogo/cookapp/HEAD/assets/Screenshot from 2021-09-01 13-26-55.png
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = function(api) {
2 | api.cache(true);
3 | return {
4 | presets: ['babel-preset-expo'],
5 | };
6 | };
7 |
--------------------------------------------------------------------------------
/src/components/Plate/styles.ts:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | export const styles = StyleSheet.create({
4 | plate: {
5 | flex: 1,
6 | },
7 | });
--------------------------------------------------------------------------------
/.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 |
--------------------------------------------------------------------------------
/.expo-shared/assets.json:
--------------------------------------------------------------------------------
1 | {
2 | "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
3 | "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
4 | }
5 |
--------------------------------------------------------------------------------
/src/screens/Details/styles.ts:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 | import { theme } from '../../styles/theme';
3 |
4 | export const styles = StyleSheet.create({
5 | container: {
6 | flex: 1,
7 | padding: 24,
8 | backgroundColor: theme.colors.white
9 | },
10 | });
--------------------------------------------------------------------------------
/src/styles/theme.ts:
--------------------------------------------------------------------------------
1 | export const theme = {
2 | colors: {
3 | orange: '#BF612A',
4 | white: '#f7f7f7',
5 | brown: '#591C27',
6 | gray: '#afaca3',
7 | red: '#A61B34',
8 | },
9 |
10 | fonts: {
11 | primary400: 'Ubuntu_400Regular',
12 | primary500: 'Ubuntu_500Medium',
13 | primary700: 'Ubuntu_700Bold',
14 | }
15 | };
--------------------------------------------------------------------------------
/src/components/Plate/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Image } from 'react-native';
3 |
4 | import { styles } from './styles';
5 | import plateImg from '../../assets/plate.png';
6 |
7 | export function Plate() {
8 | return (
9 |
14 | );
15 | }
--------------------------------------------------------------------------------
/src/components/Button/styles.ts:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 | import { theme } from '../../styles/theme';
3 |
4 | export const styles = StyleSheet.create({
5 | button: {
6 | backgroundColor: theme.colors.red,
7 | height: 50,
8 | width: 200,
9 | borderRadius: 50,
10 | paddingHorizontal: 10,
11 | justifyContent: 'space-around',
12 | alignItems: 'center',
13 | flexDirection: 'row',
14 | },
15 | text: {
16 | color: theme.colors.white,
17 | fontSize: 16
18 | },
19 | });
--------------------------------------------------------------------------------
/src/screens/Details/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { View } from 'react-native';
3 |
4 | import { Header } from '../../components/Header';
5 | import { Footer } from '../../components/Footer';
6 | import { Toggle } from '../../components/Toggle';
7 | import { Plate } from '../../components/Plate';
8 |
9 | import { styles } from './styles';
10 |
11 | export function Details() {
12 | return (
13 |
14 |
15 |
16 |
17 |
18 |
19 | );
20 | }
--------------------------------------------------------------------------------
/App.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import AppLoading from 'expo-app-loading';
3 | import {
4 | useFonts,
5 | Ubuntu_400Regular,
6 | Ubuntu_500Medium,
7 | Ubuntu_700Bold
8 | } from '@expo-google-fonts/ubuntu';
9 |
10 | import { Details } from './src/screens/Details';
11 |
12 | export default function App() {
13 | const [fontsLoaded] = useFonts({
14 | Ubuntu_400Regular,
15 | Ubuntu_500Medium,
16 | Ubuntu_700Bold,
17 | });
18 |
19 | if (!fontsLoaded) {
20 | return ;
21 | }
22 |
23 | return (
24 |
25 | );
26 | }
--------------------------------------------------------------------------------
/src/components/Button/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Feather } from '@expo/vector-icons';
3 | import { TouchableOpacity, Text } from 'react-native';
4 |
5 | import { styles } from './styles';
6 | import { theme } from '../../styles/theme';
7 |
8 | export function Button() {
9 | return (
10 |
14 |
15 | Add to Card
16 |
17 |
18 |
23 |
24 | );
25 | }
--------------------------------------------------------------------------------
/src/components/Header/styles.ts:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 | import { theme } from '../../styles/theme';
3 |
4 | export const styles = StyleSheet.create({
5 | container: {
6 | width: '100%',
7 | flexDirection: 'row',
8 | justifyContent: 'space-between',
9 | alignItems: 'center',
10 | marginTop: 40,
11 | marginBottom: 20,
12 | },
13 | title: {
14 | fontFamily: theme.fonts.primary700,
15 | color: theme.colors.brown,
16 | fontSize: 28,
17 | },
18 | subtitle: {
19 | fontFamily: theme.fonts.primary500,
20 | color: theme.colors.orange,
21 | fontSize: 20,
22 | alignSelf: 'flex-end',
23 | },
24 | });
--------------------------------------------------------------------------------
/src/components/Footer/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { View, Text } from 'react-native';
3 |
4 | import { styles } from './styles';
5 | import { Button } from '../Button';
6 |
7 | export function Footer() {
8 | return (
9 |
10 |
11 | Detail
12 |
13 |
14 |
15 | Get 50% discount on the special and delicious sushi
16 | and stay connected for further discounts.
17 |
18 |
19 |
20 |
21 | $22
22 |
23 |
24 |
25 |
26 |
27 | );
28 | }
--------------------------------------------------------------------------------
/src/components/Header/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Feather } from '@expo/vector-icons';
3 | import { View, Text } from 'react-native';
4 |
5 | import { styles } from './styles';
6 | import { theme } from '../../styles/theme';
7 |
8 | export function Header() {
9 | return (
10 |
11 |
16 |
17 |
18 |
19 | Oriental Food
20 |
21 |
22 |
23 | Special Sushi
24 |
25 |
26 |
27 | );
28 | }
--------------------------------------------------------------------------------
/src/components/Footer/styles.ts:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 | import { theme } from '../../styles/theme';
3 |
4 | export const styles = StyleSheet.create({
5 | footer: {
6 | width: '100%',
7 | flexDirection: 'row',
8 | justifyContent: 'space-between',
9 | alignItems: 'center'
10 | },
11 | price: {
12 | fontFamily: theme.fonts.primary700,
13 | color: theme.colors.brown,
14 | fontSize: 34
15 | },
16 | label: {
17 | fontFamily: theme.fonts.primary700,
18 | color: theme.colors.brown,
19 | fontSize: 17,
20 | },
21 | text: {
22 | fontFamily: theme.fonts.primary400,
23 | color: theme.colors.gray,
24 | fontSize: 14,
25 | lineHeight: 18,
26 | marginVertical: 15
27 | }
28 | });
--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "expo": {
3 | "name": "cookapp",
4 | "slug": "cookapp",
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 | "**/*"
18 | ],
19 | "ios": {
20 | "supportsTablet": true
21 | },
22 | "android": {
23 | "adaptiveIcon": {
24 | "foregroundImage": "./assets/adaptive-icon.png",
25 | "backgroundColor": "#FFFFFF"
26 | }
27 | },
28 | "web": {
29 | "favicon": "./assets/favicon.png"
30 | }
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/components/Toggle/styles.ts:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 | import { theme } from '../../styles/theme';
3 |
4 | export const styles = StyleSheet.create({
5 | container: {
6 | position: 'absolute',
7 | zIndex: 1,
8 | top: 150,
9 | left: 24,
10 |
11 | width: 70,
12 | height: 170,
13 | overflow: 'hidden',
14 |
15 | backgroundColor: theme.colors.red,
16 | borderBottomEndRadius: 30,
17 | borderBottomStartRadius: 30,
18 | borderTopEndRadius: 30,
19 | alignItems: 'center',
20 | paddingVertical: 24
21 | },
22 | info: {
23 | marginTop: 17
24 | },
25 | label: {
26 | fontFamily: theme.fonts.primary400,
27 | color: theme.colors.white,
28 | fontSize: 14
29 | },
30 | value: {
31 | fontFamily: theme.fonts.primary700,
32 | color: theme.colors.white,
33 | fontSize: 15
34 | },
35 | });
--------------------------------------------------------------------------------
/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-google-fonts/roboto": "^0.2.0",
12 | "@expo-google-fonts/ubuntu": "^0.2.0",
13 | "expo": "~42.0.1",
14 | "expo-app-loading": "^1.1.2",
15 | "expo-font": "~9.2.1",
16 | "expo-status-bar": "~1.0.4",
17 | "react": "16.13.1",
18 | "react-dom": "16.13.1",
19 | "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
20 | "react-native-web": "~0.13.12"
21 | },
22 | "devDependencies": {
23 | "@babel/core": "^7.9.0",
24 | "@types/react": "~16.9.35",
25 | "@types/react-native": "~0.63.2",
26 | "typescript": "~4.0.0"
27 | },
28 | "private": true
29 | }
30 |
--------------------------------------------------------------------------------
/src/components/Toggle/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Feather } from '@expo/vector-icons';
3 | import { View, Text } from 'react-native';
4 |
5 | import { styles } from './styles';
6 | import { theme } from '../../styles/theme';
7 |
8 | export function Toggle() {
9 | return (
10 |
11 |
16 |
17 |
18 |
19 | Calories
20 |
21 |
22 |
23 | 150
24 |
25 |
26 |
27 |
28 |
29 | Weight
30 |
31 |
32 |
33 | 190g
34 |
35 |
36 |
37 | );
38 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](https://youtu.be/wb6bHqSQAgc)
2 |
3 | **Minhas redes sociais:**
4 |
5 | [](https://www.instagram.com/rodrigo.goncalves.s/)
6 | [](https://www.linkedin.com/in/rodrigo-gon%C3%A7alves-santana/)
7 | [](https://www.twitch.tv/rodrigogoncalvess)
8 | [](https://twitter.com/rodrigogsdev)
9 |
--------------------------------------------------------------------------------