├── assets
    ├── images
    │   ├── icon.png
    │   ├── logo.png
    │   ├── splash.png
    │   ├── favicon.png
    │   ├── react-logo.png
    │   ├── adaptive-icon.png
    │   ├── react-logo@2x.png
    │   ├── react-logo@3x.png
    │   └── partial-react-logo.png
    └── fonts
    │   └── SpaceMono-Regular.ttf
├── babel.config.js
├── services
    └── api.ts
├── constants
    └── Colors.ts
├── tsconfig.json
├── types
    └── data.ts
├── .gitignore
├── store
    └── data.ts
├── app.json
├── app-example
    ├── +not-found.tsx
    ├── (tabs)
    │   ├── _layout.tsx
    │   ├── index.tsx
    │   └── explore.tsx
    ├── _layout.tsx
    └── +html.tsx
├── app
    ├── _layout.tsx
    ├── index.tsx
    ├── step
    │   └── index.tsx
    ├── create
    │   └── index.tsx
    └── nutrition
    │   └── index.tsx
├── components
    ├── input
    │   ├── index.tsx
    │   └── select.tsx
    └── header
    │   └── index.tsx
├── package.json
├── README.md
└── scripts
    └── reset-project.js


/assets/images/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devfraga/dietaapp-mobile/HEAD/assets/images/icon.png


--------------------------------------------------------------------------------
/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devfraga/dietaapp-mobile/HEAD/assets/images/logo.png


--------------------------------------------------------------------------------
/assets/images/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devfraga/dietaapp-mobile/HEAD/assets/images/splash.png


--------------------------------------------------------------------------------
/assets/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devfraga/dietaapp-mobile/HEAD/assets/images/favicon.png


--------------------------------------------------------------------------------
/assets/images/react-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devfraga/dietaapp-mobile/HEAD/assets/images/react-logo.png


--------------------------------------------------------------------------------
/assets/images/adaptive-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devfraga/dietaapp-mobile/HEAD/assets/images/adaptive-icon.png


--------------------------------------------------------------------------------
/assets/images/react-logo@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devfraga/dietaapp-mobile/HEAD/assets/images/react-logo@2x.png


--------------------------------------------------------------------------------
/assets/images/react-logo@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devfraga/dietaapp-mobile/HEAD/assets/images/react-logo@3x.png


--------------------------------------------------------------------------------
/assets/fonts/SpaceMono-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devfraga/dietaapp-mobile/HEAD/assets/fonts/SpaceMono-Regular.ttf


--------------------------------------------------------------------------------
/assets/images/partial-react-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devfraga/dietaapp-mobile/HEAD/assets/images/partial-react-logo.png


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


--------------------------------------------------------------------------------
/services/api.ts:
--------------------------------------------------------------------------------
1 | 
2 | import axios from "axios";
3 | 
4 | // http://192.168.0.12:3333 /create
5 | export const api = axios.create({
6 |   baseURL: "http://192.168.0.12:3333"
7 | })


--------------------------------------------------------------------------------
/constants/Colors.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | export const colors = {
 3 |   background: '#0F232C',
 4 |   white: '#FFF',
 5 |   green: '#1EB500',
 6 |   orange: '#F79600',
 7 |   blue: '#009AD6',
 8 |   black: '#000'
 9 | };
10 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "expo/tsconfig.base",
 3 |   "compilerOptions": {
 4 |     "strict": true,
 5 |     "paths": {
 6 |       "@/*": [
 7 |         "./*"
 8 |       ]
 9 |     }
10 |   },
11 |   "include": [
12 |     "**/*.ts",
13 |     "**/*.tsx",
14 |     ".expo/types/**/*.ts",
15 |     "expo-env.d.ts"
16 |   ]
17 | }
18 | 


--------------------------------------------------------------------------------
/types/data.ts:
--------------------------------------------------------------------------------
 1 | interface RefeicoesProps{
 2 |   horario: string;
 3 |   nome: string;
 4 |   alimentos: string[];
 5 | }
 6 | 
 7 | export interface Data {
 8 |   nome: string;
 9 |   sexo: string;
10 |   idade: number;
11 |   altura: number;
12 |   peso: number;
13 |   objetivo: number;
14 |   refeicoes: RefeicoesProps[];
15 |   suplementos: string[];
16 | }
17 | 
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules/
 2 | .expo/
 3 | dist/
 4 | npm-debug.*
 5 | *.jks
 6 | *.p8
 7 | *.p12
 8 | *.key
 9 | *.mobileprovision
10 | *.orig.*
11 | web-build/
12 | 
13 | # macOS
14 | .DS_Store
15 | 
16 | # @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
17 | # The following patterns were generated by expo-cli
18 | 
19 | expo-env.d.ts
20 | # @end expo-cli


--------------------------------------------------------------------------------
/store/data.ts:
--------------------------------------------------------------------------------
 1 | import { create } from 'zustand'
 2 | 
 3 | export type User = {
 4 |   name: string;
 5 |   weight: string;
 6 |   age: string;
 7 |   height: string;
 8 |   level: string;
 9 |   objective: string;
10 |   gender: string;
11 | }
12 | 
13 | type DataState = {
14 |   user: User;
15 |   setPageOne: (data: Omit<User, "gender" | "objective" | "level">) => void;
16 |   setPageTwo: (data: Pick<User, "gender" | "objective" | "level">) => void;
17 | }
18 | 
19 | export const useDataStore = create<DataState>((set) => ({
20 |   user: {
21 |     name: "",
22 |     age: "",
23 |     level: "",
24 |     objective: "",
25 |     gender: "",
26 |     height: "",
27 |     weight: ""
28 |   },
29 |   setPageOne: (data) => set((state) => ({ user: {...state.user, ...data} }) ),
30 |   setPageTwo: (data) => set((state) => ({ user: {...state.user, ...data} }) ),
31 | }))
32 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "mobile",
 4 |     "slug": "mobile",
 5 |     "version": "1.0.0",
 6 |     "orientation": "portrait",
 7 |     "icon": "./assets/images/icon.png",
 8 |     "scheme": "myapp",
 9 |     "userInterfaceStyle": "automatic",
10 |     "splash": {
11 |       "image": "./assets/images/splash.png",
12 |       "resizeMode": "contain",
13 |       "backgroundColor": "#ffffff"
14 |     },
15 |     "ios": {
16 |       "supportsTablet": true
17 |     },
18 |     "android": {
19 |       "adaptiveIcon": {
20 |         "foregroundImage": "./assets/images/adaptive-icon.png",
21 |         "backgroundColor": "#ffffff"
22 |       }
23 |     },
24 |     "web": {
25 |       "bundler": "metro",
26 |       "output": "static",
27 |       "favicon": "./assets/images/favicon.png"
28 |     },
29 |     "plugins": [
30 |       "expo-router"
31 |     ],
32 |     "experiments": {
33 |       "typedRoutes": true
34 |     }
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/app-example/+not-found.tsx:
--------------------------------------------------------------------------------
 1 | import { Link, Stack } from 'expo-router';
 2 | import { StyleSheet } from 'react-native';
 3 | 
 4 | import { ThemedText } from '@/components/ThemedText';
 5 | import { ThemedView } from '@/components/ThemedView';
 6 | 
 7 | export default function NotFoundScreen() {
 8 |   return (
 9 |     <>
10 |       <Stack.Screen options={{ title: 'Oops!' }} />
11 |       <ThemedView style={styles.container}>
12 |         <ThemedText type="title">This screen doesn't exist.</ThemedText>
13 |         <Link href="/" style={styles.link}>
14 |           <ThemedText type="link">Go to home screen!</ThemedText>
15 |         </Link>
16 |       </ThemedView>
17 |     </>
18 |   );
19 | }
20 | 
21 | const styles = StyleSheet.create({
22 |   container: {
23 |     flex: 1,
24 |     alignItems: 'center',
25 |     justifyContent: 'center',
26 |     padding: 20,
27 |   },
28 |   link: {
29 |     marginTop: 15,
30 |     paddingVertical: 15,
31 |   },
32 | });
33 | 


--------------------------------------------------------------------------------
/app/_layout.tsx:
--------------------------------------------------------------------------------
 1 | import { Stack } from "expo-router";
 2 | import { QueryClientProvider, QueryClient } from '@tanstack/react-query'
 3 | 
 4 | export default function RootLayout() {
 5 |   const queryClient = new QueryClient();
 6 | 
 7 |   return (
 8 |     <QueryClientProvider client={queryClient}>
 9 |       <Stack>
10 |         <Stack.Screen 
11 |           name="index" 
12 |           options={{
13 |             headerShown: false
14 |           }}
15 |         />
16 |         <Stack.Screen 
17 |           name="step/index" 
18 |           options={{
19 |             headerShown: false
20 |           }}
21 |         />
22 |         <Stack.Screen 
23 |           name="create/index" 
24 |           options={{
25 |             headerShown: false
26 |           }}
27 |         />      
28 |         <Stack.Screen 
29 |           name="nutrition/index" 
30 |           options={{
31 |             headerShown: false
32 |           }}
33 |         />      
34 |       </Stack>
35 |     </QueryClientProvider>
36 |   );
37 | }
38 | 


--------------------------------------------------------------------------------
/app-example/(tabs)/_layout.tsx:
--------------------------------------------------------------------------------
 1 | import { Tabs } from 'expo-router';
 2 | import React from 'react';
 3 | 
 4 | import { TabBarIcon } from '@/components/navigation/TabBarIcon';
 5 | import { Colors } from '@/constants/Colors';
 6 | import { useColorScheme } from '@/hooks/useColorScheme';
 7 | 
 8 | export default function TabLayout() {
 9 |   const colorScheme = useColorScheme();
10 | 
11 |   return (
12 |     <Tabs
13 |       screenOptions={{
14 |         tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
15 |         headerShown: false,
16 |       }}>
17 |       <Tabs.Screen
18 |         name="index"
19 |         options={{
20 |           title: 'Home',
21 |           tabBarIcon: ({ color, focused }) => (
22 |             <TabBarIcon name={focused ? 'home' : 'home-outline'} color={color} />
23 |           ),
24 |         }}
25 |       />
26 |       <Tabs.Screen
27 |         name="explore"
28 |         options={{
29 |           title: 'Explore',
30 |           tabBarIcon: ({ color, focused }) => (
31 |             <TabBarIcon name={focused ? 'code-slash' : 'code-slash-outline'} color={color} />
32 |           ),
33 |         }}
34 |       />
35 |     </Tabs>
36 |   );
37 | }
38 | 


--------------------------------------------------------------------------------
/app-example/_layout.tsx:
--------------------------------------------------------------------------------
 1 | import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
 2 | import { useFonts } from 'expo-font';
 3 | import { Stack } from 'expo-router';
 4 | import * as SplashScreen from 'expo-splash-screen';
 5 | import { useEffect } from 'react';
 6 | import 'react-native-reanimated';
 7 | 
 8 | import { useColorScheme } from '@/hooks/useColorScheme';
 9 | 
10 | // Prevent the splash screen from auto-hiding before asset loading is complete.
11 | SplashScreen.preventAutoHideAsync();
12 | 
13 | export default function RootLayout() {
14 |   const colorScheme = useColorScheme();
15 |   const [loaded] = useFonts({
16 |     SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
17 |   });
18 | 
19 |   useEffect(() => {
20 |     if (loaded) {
21 |       SplashScreen.hideAsync();
22 |     }
23 |   }, [loaded]);
24 | 
25 |   if (!loaded) {
26 |     return null;
27 |   }
28 | 
29 |   return (
30 |     <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
31 |       <Stack>
32 |         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
33 |         <Stack.Screen name="+not-found" />
34 |       </Stack>
35 |     </ThemeProvider>
36 |   );
37 | }
38 | 


--------------------------------------------------------------------------------
/components/input/index.tsx:
--------------------------------------------------------------------------------
 1 | import { View, StyleSheet, Text, TextInput, KeyboardTypeOptions } from 'react-native';
 2 | import { Controller } from 'react-hook-form'
 3 | import { colors } from '../../constants/colors'
 4 | 
 5 | interface InputProps{
 6 |   name: string;
 7 |   control: any;
 8 |   placeholder?: string;
 9 |   rules?: object;
10 |   error?: string;
11 |   keyboardType: KeyboardTypeOptions;
12 | }
13 | 
14 | export function Input({ name, control, placeholder, rules, error, keyboardType }: InputProps) {
15 |  return (
16 |   <View style={styles.container}>
17 |     <Controller
18 |       control={control}
19 |       name={name}
20 |       rules={rules}
21 | 
22 |       render={({ field: { onChange, onBlur, value }}) => (
23 |         <TextInput
24 |          style={styles.input}
25 |          placeholder={placeholder}
26 |          onBlur={onBlur}
27 |          value={value}
28 |          onChangeText={onChange}
29 |          keyboardType={keyboardType}
30 |         />
31 |       )}
32 |     />
33 | 
34 |     {error && <Text style={styles.errorText}>{error}</Text>}
35 |   </View>
36 |   );
37 | }
38 | 
39 | const styles = StyleSheet.create({
40 |   container:{
41 |     marginBottom: 16,
42 |   },
43 |   input:{
44 |     height: 44,
45 |     backgroundColor: colors.white,
46 |     paddingHorizontal: 10,
47 |     borderRadius: 4,
48 |   },
49 |   errorText:{
50 |     color: 'red',
51 |     marginTop: 4,
52 |   }
53 | })


--------------------------------------------------------------------------------
/app-example/+html.tsx:
--------------------------------------------------------------------------------
 1 | import { ScrollViewStyleReset } from 'expo-router/html';
 2 | import { type PropsWithChildren } from 'react';
 3 | 
 4 | /**
 5 |  * This file is web-only and used to configure the root HTML for every web page during static rendering.
 6 |  * The contents of this function only run in Node.js environments and do not have access to the DOM or browser APIs.
 7 |  */
 8 | export default function Root({ children }: PropsWithChildren) {
 9 |   return (
10 |     <html lang="en">
11 |       <head>
12 |         <meta charSet="utf-8" />
13 |         <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
14 |         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
15 | 
16 |         {/*
17 |           Disable body scrolling on web. This makes ScrollView components work closer to how they do on native.
18 |           However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
19 |         */}
20 |         <ScrollViewStyleReset />
21 | 
22 |         {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
23 |         <style dangerouslySetInnerHTML={{ __html: responsiveBackground }} />
24 |         {/* Add any additional <head> elements that you want globally available on web... */}
25 |       </head>
26 |       <body>{children}</body>
27 |     </html>
28 |   );
29 | }
30 | 
31 | const responsiveBackground = `
32 | body {
33 |   background-color: #fff;
34 | }
35 | @media (prefers-color-scheme: dark) {
36 |   body {
37 |     background-color: #000;
38 |   }
39 | }`;
40 | 


--------------------------------------------------------------------------------
/app/index.tsx:
--------------------------------------------------------------------------------
 1 | import { View, Text, Image, StyleSheet, Pressable } from 'react-native'
 2 | import { colors } from '../constants/colors'
 3 | import { Link } from 'expo-router'
 4 | 
 5 | export default function Index(){
 6 |   return(
 7 |     <View style={styles.container}>
 8 |       <Image
 9 |         source={require('../assets/images/logo.png')}
10 |       />
11 | 
12 |       <Text style={styles.title}>
13 |         Dieta<Text style={{ color: colors.white }}>.AI</Text>
14 |       </Text>
15 | 
16 |       <Text style={styles.text}>
17 |         Sua dieta personalizada com inteligência artificial
18 |       </Text>
19 | 
20 |       <Link href="/step" asChild>
21 |         <Pressable style={styles.button}>
22 |           <Text style={styles.buttonText}>Gerar dieta</Text>
23 |         </Pressable>
24 |       </Link>
25 | 
26 |     </View>
27 |   )
28 | }
29 | 
30 | 
31 | const styles = StyleSheet.create({
32 |   container:{
33 |     backgroundColor: colors.background,
34 |     flex:1,
35 |     justifyContent: 'center',
36 |     alignItems: 'center',
37 |     paddingLeft: 16,
38 |     paddingRight: 16,
39 |   },
40 |   title:{
41 |     fontSize: 36,
42 |     fontWeight: 'bold',
43 |     color: colors.green
44 |   },
45 |   text:{
46 |     fontSize: 16, 
47 |     color: colors.white,
48 |     width: 240,
49 |     textAlign: 'center',
50 |     marginTop: 8,
51 |     marginBottom: 8,
52 |   },
53 |   button:{
54 |     backgroundColor: colors.blue,
55 |     width: '100%',
56 |     height: 40,
57 |     borderRadius: 4,
58 |     justifyContent: 'center',
59 |     alignItems: 'center',
60 |     marginTop: 34,
61 |   },
62 |   buttonText:{
63 |     color: colors.white,
64 |     fontSize: 16,
65 |     fontWeight: 'bold'
66 |   }
67 | })


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mobile",
 3 |   "main": "expo-router/entry",
 4 |   "version": "1.0.0",
 5 |   "scripts": {
 6 |     "start": "expo start",
 7 |     "reset-project": "node ./scripts/reset-project.js",
 8 |     "android": "expo start --android",
 9 |     "ios": "expo start --ios",
10 |     "web": "expo start --web",
11 |     "test": "jest --watchAll",
12 |     "lint": "expo lint"
13 |   },
14 |   "jest": {
15 |     "preset": "jest-expo"
16 |   },
17 |   "dependencies": {
18 |     "@expo/vector-icons": "^14.0.2",
19 |     "@hookform/resolvers": "^3.9.0",
20 |     "@react-navigation/native": "^6.0.2",
21 |     "@tanstack/react-query": "^5.56.2",
22 |     "axios": "^1.7.7",
23 |     "expo": "~51.0.28",
24 |     "expo-constants": "~16.0.2",
25 |     "expo-font": "~12.0.9",
26 |     "expo-linking": "~6.3.1",
27 |     "expo-router": "~3.5.23",
28 |     "expo-splash-screen": "~0.27.5",
29 |     "expo-status-bar": "~1.12.1",
30 |     "expo-system-ui": "~3.0.7",
31 |     "expo-web-browser": "~13.0.3",
32 |     "react": "18.2.0",
33 |     "react-dom": "18.2.0",
34 |     "react-hook-form": "^7.53.0",
35 |     "react-native": "0.74.5",
36 |     "react-native-gesture-handler": "~2.16.1",
37 |     "react-native-reanimated": "~3.10.1",
38 |     "react-native-safe-area-context": "4.10.5",
39 |     "react-native-screens": "3.31.1",
40 |     "react-native-web": "~0.19.10",
41 |     "zod": "^3.23.8",
42 |     "zustand": "^4.5.5"
43 |   },
44 |   "devDependencies": {
45 |     "@babel/core": "^7.20.0",
46 |     "@types/jest": "^29.5.12",
47 |     "@types/react": "~18.2.45",
48 |     "@types/react-test-renderer": "^18.0.7",
49 |     "jest": "^29.2.1",
50 |     "jest-expo": "~51.0.3",
51 |     "react-test-renderer": "18.2.0",
52 |     "typescript": "~5.3.3"
53 |   },
54 |   "private": true
55 | }
56 | 


--------------------------------------------------------------------------------
/components/header/index.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   View,
 3 |   StyleSheet, 
 4 |   Pressable, 
 5 |   Text, 
 6 |   SafeAreaView, 
 7 |   Platform, 
 8 |   StatusBar 
 9 | } from "react-native";
10 | 
11 | import { Feather } from '@expo/vector-icons'
12 | import { colors } from '../../constants/colors'
13 | import { router } from 'expo-router'
14 | 
15 | interface HeaderProps{
16 |   step: string;
17 |   title: string;
18 | }
19 | 
20 | export function Header({ step, title }: HeaderProps){
21 |   return(
22 |     <SafeAreaView style={styles.container}>
23 |       <View style={styles.content}>
24 |          <View style={styles.row}>
25 |            <Pressable onPress={ () => router.back() }>
26 |              <Feather name="arrow-left" size={24} color="#000" />
27 |            </Pressable>
28 | 
29 |            <Text style={styles.text}>
30 |             {step} <Feather name="loader" size={16} color="#000" />
31 |            </Text>
32 |          </View> 
33 | 
34 |          <Text style={styles.title}>
35 |          {title}
36 |          </Text>
37 | 
38 |       </View>   
39 |     </SafeAreaView>
40 |   )
41 | }
42 | 
43 | const styles = StyleSheet.create({
44 |   container:{
45 |     backgroundColor: colors.white,
46 |     borderBottomRightRadius: 14,
47 |     borderBottomLeftRadius: 14,
48 |     marginBottom: 14,
49 |     paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight! + 34 : 34
50 |   },
51 |   content:{
52 |     paddingLeft: 16,
53 |     paddingRight: 16,
54 |     paddingBottom: 34,
55 |     borderBottomRightRadius: 14,
56 |     borderBottomLeftRadius: 14,
57 |   },
58 |   row:{
59 |     flexDirection: 'row',
60 |     gap: 8,
61 |     alignItems: 'center'
62 |   },
63 |   text:{
64 |     fontSize:18,
65 |   },
66 |   title:{
67 |     fontSize: 30,
68 |     fontWeight: 'bold',
69 |     color: colors.background
70 |   }
71 | })


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Welcome to your Expo app 👋
 2 | 
 3 | This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
 4 | 
 5 | ## Get started
 6 | 
 7 | 1. Install dependencies
 8 | 
 9 |    ```bash
10 |    npm install
11 |    ```
12 | 
13 | 2. Start the app
14 | 
15 |    ```bash
16 |     npx expo start
17 |    ```
18 | 
19 | In the output, you'll find options to open the app in a
20 | 
21 | - [development build](https://docs.expo.dev/develop/development-builds/introduction/)
22 | - [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
23 | - [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
24 | - [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
25 | 
26 | You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
27 | 
28 | ## Get a fresh project
29 | 
30 | When you're ready, run:
31 | 
32 | ```bash
33 | npm run reset-project
34 | ```
35 | 
36 | This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
37 | 
38 | ## Learn more
39 | 
40 | To learn more about developing your project with Expo, look at the following resources:
41 | 
42 | - [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
43 | - [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
44 | 
45 | ## Join the community
46 | 
47 | Join our community of developers creating universal apps.
48 | 
49 | - [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
50 | - [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.
51 | 


--------------------------------------------------------------------------------
/scripts/reset-project.js:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | 
 3 | /**
 4 |  * This script is used to reset the project to a blank state.
 5 |  * It moves the /app directory to /app-example and creates a new /app directory with an index.tsx and _layout.tsx file.
 6 |  * You can remove the `reset-project` script from package.json and safely delete this file after running it.
 7 |  */
 8 | 
 9 | const fs = require('fs');
10 | const path = require('path');
11 | 
12 | const root = process.cwd();
13 | const oldDirPath = path.join(root, 'app');
14 | const newDirPath = path.join(root, 'app-example');
15 | const newAppDirPath = path.join(root, 'app');
16 | 
17 | const indexContent = `import { Text, View } from "react-native";
18 | 
19 | export default function Index() {
20 |   return (
21 |     <View
22 |       style={{
23 |         flex: 1,
24 |         justifyContent: "center",
25 |         alignItems: "center",
26 |       }}
27 |     >
28 |       <Text>Edit app/index.tsx to edit this screen.</Text>
29 |     </View>
30 |   );
31 | }
32 | `;
33 | 
34 | const layoutContent = `import { Stack } from "expo-router";
35 | 
36 | export default function RootLayout() {
37 |   return (
38 |     <Stack>
39 |       <Stack.Screen name="index" />
40 |     </Stack>
41 |   );
42 | }
43 | `;
44 | 
45 | fs.rename(oldDirPath, newDirPath, (error) => {
46 |   if (error) {
47 |     return console.error(`Error renaming directory: ${error}`);
48 |   }
49 |   console.log('/app moved to /app-example.');
50 | 
51 |   fs.mkdir(newAppDirPath, { recursive: true }, (error) => {
52 |     if (error) {
53 |       return console.error(`Error creating new app directory: ${error}`);
54 |     }
55 |     console.log('New /app directory created.');
56 | 
57 |     const indexPath = path.join(newAppDirPath, 'index.tsx');
58 |     fs.writeFile(indexPath, indexContent, (error) => {
59 |       if (error) {
60 |         return console.error(`Error creating index.tsx: ${error}`);
61 |       }
62 |       console.log('app/index.tsx created.');
63 | 
64 |       const layoutPath = path.join(newAppDirPath, '_layout.tsx');
65 |       fs.writeFile(layoutPath, layoutContent, (error) => {
66 |         if (error) {
67 |           return console.error(`Error creating _layout.tsx: ${error}`);
68 |         }
69 |         console.log('app/_layout.tsx created.');
70 |       });
71 |     });
72 |   });
73 | });
74 | 


--------------------------------------------------------------------------------
/app-example/(tabs)/index.tsx:
--------------------------------------------------------------------------------
 1 | import { Image, StyleSheet, Platform } from 'react-native';
 2 | 
 3 | import { HelloWave } from '@/components/HelloWave';
 4 | import ParallaxScrollView from '@/components/ParallaxScrollView';
 5 | import { ThemedText } from '@/components/ThemedText';
 6 | import { ThemedView } from '@/components/ThemedView';
 7 | 
 8 | export default function HomeScreen() {
 9 |   return (
10 |     <ParallaxScrollView
11 |       headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
12 |       headerImage={
13 |         <Image
14 |           source={require('@/assets/images/partial-react-logo.png')}
15 |           style={styles.reactLogo}
16 |         />
17 |       }>
18 |       <ThemedView style={styles.titleContainer}>
19 |         <ThemedText type="title">Welcome!</ThemedText>
20 |         <HelloWave />
21 |       </ThemedView>
22 |       <ThemedView style={styles.stepContainer}>
23 |         <ThemedText type="subtitle">Step 1: Try it</ThemedText>
24 |         <ThemedText>
25 |           Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.
26 |           Press{' '}
27 |           <ThemedText type="defaultSemiBold">
28 |             {Platform.select({ ios: 'cmd + d', android: 'cmd + m' })}
29 |           </ThemedText>{' '}
30 |           to open developer tools.
31 |         </ThemedText>
32 |       </ThemedView>
33 |       <ThemedView style={styles.stepContainer}>
34 |         <ThemedText type="subtitle">Step 2: Explore</ThemedText>
35 |         <ThemedText>
36 |           Tap the Explore tab to learn more about what's included in this starter app.
37 |         </ThemedText>
38 |       </ThemedView>
39 |       <ThemedView style={styles.stepContainer}>
40 |         <ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
41 |         <ThemedText>
42 |           When you're ready, run{' '}
43 |           <ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '}
44 |           <ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '}
45 |           <ThemedText type="defaultSemiBold">app</ThemedText> to{' '}
46 |           <ThemedText type="defaultSemiBold">app-example</ThemedText>.
47 |         </ThemedText>
48 |       </ThemedView>
49 |     </ParallaxScrollView>
50 |   );
51 | }
52 | 
53 | const styles = StyleSheet.create({
54 |   titleContainer: {
55 |     flexDirection: 'row',
56 |     alignItems: 'center',
57 |     gap: 8,
58 |   },
59 |   stepContainer: {
60 |     gap: 8,
61 |     marginBottom: 8,
62 |   },
63 |   reactLogo: {
64 |     height: 178,
65 |     width: 290,
66 |     bottom: 0,
67 |     left: 0,
68 |     position: 'absolute',
69 |   },
70 | });
71 | 


--------------------------------------------------------------------------------
/app/step/index.tsx:
--------------------------------------------------------------------------------
  1 | import { 
  2 |   View, 
  3 |   Text,  
  4 |   StyleSheet, 
  5 |   Pressable, 
  6 |   ScrollView
  7 |  } from 'react-native'
  8 | import { colors } from '../../constants/colors'
  9 | import { Header } from '../../components/header'
 10 | import { Input } from '../../components/input'
 11 | 
 12 | import { z } from 'zod'
 13 | import { zodResolver } from '@hookform/resolvers/zod'
 14 | import { useForm } from  'react-hook-form'
 15 | import { router } from 'expo-router'
 16 | import { useDataStore } from '../../store/data'
 17 | 
 18 | 
 19 | const schema = z.object({
 20 |   name: z.string().min(1, { message: "O nome é obrigatório"}),
 21 |   weight: z.string().min(1, { message: "O peso é obrigatório"}),
 22 |   age: z.string().min(1, { message: "A idade é obrigatória"}),
 23 |   height: z.string().min(1, { message: "A altura é obrigatória"}),
 24 | })
 25 | 
 26 | type FormData = z.infer<typeof schema>
 27 | 
 28 | export default function Step(){
 29 |   
 30 |   const { control, handleSubmit, formState: { errors, isValid } } = useForm<FormData>({
 31 |     resolver: zodResolver(schema)
 32 |   })
 33 | 
 34 |   const setPageOne = useDataStore(state => state.setPageOne)
 35 | 
 36 | 
 37 |   function handleCreate(data: FormData){
 38 |     console.log("PASSANDO DADOS DA PAGINA 1");
 39 |     
 40 |     setPageOne({
 41 |       name: data.name,
 42 |       weight: data.weight,
 43 |       age: data.age,
 44 |       height: data.height
 45 |     })
 46 | 
 47 |     router.push("/create")
 48 |   }
 49 | 
 50 |   return(
 51 |     <View style={styles.container}>
 52 |       <Header
 53 |         step='Passo 1'
 54 |         title='Vamos começar'
 55 |       />
 56 | 
 57 |       <ScrollView style={styles.content}>
 58 |         <Text style={styles.label}>Nome:</Text>
 59 |         <Input
 60 |           name="name"
 61 |           control={control}
 62 |           placeholder="Digite seu nome..."
 63 |           error={errors.name?.message}
 64 |           keyboardType="default"
 65 |         />
 66 |         
 67 |         <Text style={styles.label}>Seu peso atual:</Text>
 68 |         <Input
 69 |           name="weight"
 70 |           control={control}
 71 |           placeholder="Ex: 75"
 72 |           error={errors.weight?.message}
 73 |           keyboardType="numeric"
 74 |         />     
 75 |         
 76 |         <Text style={styles.label}>Sua altura atual:</Text>
 77 |         <Input
 78 |           name="height"
 79 |           control={control}
 80 |           placeholder="Ex: 1.90"
 81 |           error={errors.height?.message}
 82 |           keyboardType="numeric"
 83 |         />     
 84 |         
 85 |         <Text style={styles.label}>Sua idade atual:</Text>
 86 |         <Input
 87 |           name="age"
 88 |           control={control}
 89 |           placeholder="Ex: 24"
 90 |           error={errors.age?.message}
 91 |           keyboardType="numeric"
 92 |         />
 93 | 
 94 |         <Pressable style={styles.button} onPress={handleSubmit(handleCreate)}>
 95 |           <Text style={styles.buttonText}>Avançar</Text>
 96 |         </Pressable>     
 97 | 
 98 |       </ScrollView>
 99 | 
100 |     </View>
101 |   )
102 | }
103 | 
104 | const styles = StyleSheet.create({
105 |   container:{
106 |     flex:1,
107 |     backgroundColor: colors.background
108 |   },
109 |   content:{
110 |     paddingLeft: 16,
111 |     paddingRight: 16,
112 |   },
113 |   label:{
114 |    fontSize: 16,
115 |    color: colors.white,
116 |    fontWeight: 'bold',
117 |    marginBottom: 8, 
118 |   },
119 |   button:{
120 |     backgroundColor: colors.blue,
121 |     height: 44,
122 |     justifyContent: 'center',
123 |     alignItems: 'center',
124 |     borderRadius: 4,
125 |   },
126 |   buttonText:{
127 |     color: colors.white,
128 |     fontSize: 16,
129 |     fontWeight: 'bold'
130 |   }
131 | })


--------------------------------------------------------------------------------
/components/input/select.tsx:
--------------------------------------------------------------------------------
  1 | import { 
  2 |   View, 
  3 |   StyleSheet, 
  4 |   Text, 
  5 |   TouchableOpacity,
  6 |   FlatList,
  7 |   Modal,
  8 | } from 'react-native';
  9 | import { Controller } from 'react-hook-form'
 10 | import { colors } from '../../constants/colors'
 11 | import { Feather} from '@expo/vector-icons'
 12 | import { useState } from 'react'
 13 | 
 14 | interface OptionsProps{
 15 |   label: string;
 16 |   value: string | number;
 17 | }
 18 | 
 19 | interface SelectProps{
 20 |   name: string;
 21 |   control: any;
 22 |   placeholder?: string;
 23 |   error?: string;
 24 |   options: OptionsProps[]
 25 | }
 26 | 
 27 | export function Select({ name, control, placeholder, error, options }: SelectProps) {
 28 | 
 29 |   const [visible, setVisible] = useState(false);
 30 | 
 31 | 
 32 |  return (
 33 |   <View style={styles.container}>
 34 |     <Controller
 35 |       control={control}
 36 |       name={name}
 37 | 
 38 |       render={({ field: { onChange, onBlur, value }}) => (
 39 |         <>
 40 |           <TouchableOpacity style={styles.select} onPress={() => setVisible(true)}>
 41 |             <Text>
 42 |               {value ? options.find(option => option.value === value)?.label : placeholder }
 43 |             </Text>
 44 |             <Feather name="arrow-down" size={16} color="#000"/>
 45 |           </TouchableOpacity>
 46 | 
 47 | 
 48 |           <Modal
 49 |             visible={visible}
 50 |             animationType="fade"
 51 |             transparent={true}
 52 |             onRequestClose={() => setVisible(false) }
 53 |           > 
 54 |             <TouchableOpacity
 55 |               style={styles.modalContainer}
 56 |               activeOpacity={1}
 57 |               onPress={ () => setVisible(false) }
 58 |             >
 59 | 
 60 |               <TouchableOpacity style={styles.modalContent} activeOpacity={1}>
 61 |                 <FlatList
 62 |                   contentContainerStyle={{ gap: 4 }}
 63 |                   data={options}
 64 |                   keyExtractor={(item) => item.value.toString() }
 65 |                   renderItem={ ({ item }) => (
 66 |                     <TouchableOpacity 
 67 |                       style={styles.option}
 68 |                       onPress={() => {
 69 |                         onChange(item.value)  
 70 |                         setVisible(false)
 71 |                       }}
 72 |                     >
 73 |                       <Text>{item.label}</Text>
 74 |                     </TouchableOpacity>
 75 |                   )}
 76 |                 />
 77 |               </TouchableOpacity>
 78 | 
 79 |             </TouchableOpacity>
 80 |           </Modal>
 81 |         </>
 82 |       )}
 83 |     />
 84 | 
 85 |     {error && <Text style={styles.errorText}>{error}</Text>}
 86 |   </View>
 87 |   );
 88 | }
 89 | 
 90 | const styles = StyleSheet.create({
 91 |   container:{
 92 |     marginBottom: 16,
 93 |   },
 94 |   input:{
 95 |     height: 44,
 96 |     backgroundColor: colors.white,
 97 |     paddingHorizontal: 10,
 98 |     borderRadius: 4,
 99 |   },
100 |   errorText:{
101 |     color: 'red',
102 |     marginTop: 4,
103 |   },
104 |   select:{
105 |     flexDirection: 'row',
106 |     height: 44,
107 |     backgroundColor: colors.white,
108 |     alignItems: 'center',
109 |     justifyContent: 'space-between',
110 |     paddingHorizontal: 10,
111 |     borderRadius: 4,
112 |   },
113 |   modalContainer:{
114 |     backgroundColor: 'rgba(0,0,0, 0.5)',
115 |     flex:1,
116 |     justifyContent: 'center'
117 |   },
118 |   modalContent:{
119 |     backgroundColor: colors.white, 
120 |     marginHorizontal: 10,
121 |     borderRadius: 8,
122 |     padding: 20,
123 |   },
124 |   option:{
125 |     paddingVertical: 14,
126 |     backgroundColor: 'rgba(208, 208, 208, 0.40)',
127 |     borderRadius: 4,
128 |     paddingHorizontal: 8,
129 |   }
130 | })


--------------------------------------------------------------------------------
/app/create/index.tsx:
--------------------------------------------------------------------------------
  1 | import { 
  2 |   View, 
  3 |   Text,  
  4 |   StyleSheet, 
  5 |   Pressable, 
  6 |   ScrollView
  7 |  } from 'react-native'
  8 | 
  9 | import { z } from 'zod'
 10 | import { zodResolver } from '@hookform/resolvers/zod'
 11 | import { useForm } from  'react-hook-form'
 12 | import { colors } from '../../constants/colors'
 13 | import { Header } from '@/components/header'
 14 | import { Select } from '../../components/input/select'
 15 | import { useDataStore } from '../../store/data'
 16 | import { router } from 'expo-router'
 17 | 
 18 | const schema = z.object({
 19 |   gender: z.string().min(1, { message: "O sexo é obrigatório"}),
 20 |   objective: z.string().min(1, { message: "O Objetivo é obrigatório"}),
 21 |   level: z.string().min(1, { message: "Selecione seu level"}),
 22 | })
 23 | 
 24 | type FormData = z.infer<typeof schema>
 25 | 
 26 | export default function Create() {
 27 | 
 28 |   const { control, handleSubmit, formState: { errors, isValid } } = useForm<FormData>({
 29 |     resolver: zodResolver(schema)
 30 |   })
 31 | 
 32 |   const setPageTwo = useDataStore(state => state.setPageTwo)
 33 | 
 34 |   const genderOptions = [
 35 |     { label: "Masculino", value: "masculino" },
 36 |     { label: "Feminino", value: "feminino" },
 37 |   ]
 38 | 
 39 |   const levelOptions = [
 40 |     { label: 'Sedentário (pouco ou nenhuma atividade física)', value: 'Sedentário' },
 41 |     { label: 'Levemente ativo (exercícios 1 a 3 vezes na semana)', value: 'Levemente ativo (exercícios 1 a 3 vezes na semana)' },
 42 |     { label: 'Moderadamente ativo (exercícios 3 a 5 vezes na semana)', value: 'Moderadamente ativo (exercícios 3 a 5 vezes na semana)' },
 43 |     { label: 'Altamente ativo (exercícios 5 a 7 dia por semana)', value: 'Altamente ativo (exercícios 5 a 7 dia por semana)' },
 44 |   ]
 45 | 
 46 |   const objectiveOptions = [
 47 |     { label: 'Emagrecer', value: 'emagrecer' },
 48 |     { label: 'Hipertrofia', value: 'Hipertrofia' },
 49 |     { label: 'Hipertrofia + Definição', value: 'Hipertrofia e Definição' },
 50 |     { label: 'Definição', value: 'Definição' },
 51 |   ]
 52 | 
 53 | 
 54 |   function handleCreate(data: FormData){
 55 |     setPageTwo({
 56 |       level: data.level,
 57 |       gender: data.gender,
 58 |       objective: data.objective
 59 |     })
 60 | 
 61 |     router.push("/nutrition")
 62 |   }
 63 | 
 64 |  return (
 65 |    <View style={styles.container}>
 66 |     <Header
 67 |       step='Passo 2'
 68 |       title='Finalizando dieta'
 69 |     />
 70 | 
 71 |     <ScrollView style={styles.content}>
 72 |       <Text style={styles.label}>Sexo:</Text>
 73 |       <Select
 74 |         control={control}
 75 |         name="gender"
 76 |         placeholder="Selecione o seu sexo..."
 77 |         error={errors.gender?.message}
 78 |         options={genderOptions}
 79 |       />
 80 | 
 81 |       <Text style={styles.label}>Selecione nível de atividade física:</Text>
 82 |       <Select
 83 |         control={control}
 84 |         name="level"
 85 |         placeholder="Selecione o nível de atividade física"
 86 |         error={errors.level?.message}
 87 |         options={levelOptions}
 88 |       />      
 89 | 
 90 |       <Text style={styles.label}>Selecione seu objetivo:</Text>
 91 |       <Select
 92 |         control={control}
 93 |         name="objective"
 94 |         placeholder="Selecione o nível de atividade física"
 95 |         error={errors.objective?.message}
 96 |         options={objectiveOptions}
 97 |       />  
 98 | 
 99 |       <Pressable 
100 |         style={styles.button} 
101 |         onPress={handleSubmit(handleCreate)}
102 |       >
103 |         <Text style={styles.buttonText}>Avançar</Text>
104 |       </Pressable>               
105 | 
106 |     </ScrollView>
107 | 
108 |    </View>
109 |   );
110 | }
111 | 
112 | const styles = StyleSheet.create({
113 |   container:{
114 |     flex:1,
115 |     backgroundColor: colors.background
116 |   },
117 |   label:{
118 |     fontSize: 16,
119 |     color: colors.white,
120 |     fontWeight: 'bold',
121 |     marginBottom: 8, 
122 |    },
123 |    content:{
124 |     paddingLeft: 16,
125 |     paddingRight: 16,
126 |    },
127 |    button:{
128 |     backgroundColor: colors.blue,
129 |     height: 44,
130 |     justifyContent: 'center',
131 |     alignItems: 'center',
132 |     borderRadius: 4,
133 |   },
134 |   buttonText:{
135 |     color: colors.white,
136 |     fontSize: 16,
137 |     fontWeight: 'bold'
138 |   }
139 | })


--------------------------------------------------------------------------------
/app-example/(tabs)/explore.tsx:
--------------------------------------------------------------------------------
  1 | import Ionicons from '@expo/vector-icons/Ionicons';
  2 | import { StyleSheet, Image, Platform } from 'react-native';
  3 | 
  4 | import { Collapsible } from '@/components/Collapsible';
  5 | import { ExternalLink } from '@/components/ExternalLink';
  6 | import ParallaxScrollView from '@/components/ParallaxScrollView';
  7 | import { ThemedText } from '@/components/ThemedText';
  8 | import { ThemedView } from '@/components/ThemedView';
  9 | 
 10 | export default function TabTwoScreen() {
 11 |   return (
 12 |     <ParallaxScrollView
 13 |       headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
 14 |       headerImage={<Ionicons size={310} name="code-slash" style={styles.headerImage} />}>
 15 |       <ThemedView style={styles.titleContainer}>
 16 |         <ThemedText type="title">Explore</ThemedText>
 17 |       </ThemedView>
 18 |       <ThemedText>This app includes example code to help you get started.</ThemedText>
 19 |       <Collapsible title="File-based routing">
 20 |         <ThemedText>
 21 |           This app has two screens:{' '}
 22 |           <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> and{' '}
 23 |           <ThemedText type="defaultSemiBold">app/(tabs)/explore.tsx</ThemedText>
 24 |         </ThemedText>
 25 |         <ThemedText>
 26 |           The layout file in <ThemedText type="defaultSemiBold">app/(tabs)/_layout.tsx</ThemedText>{' '}
 27 |           sets up the tab navigator.
 28 |         </ThemedText>
 29 |         <ExternalLink href="https://docs.expo.dev/router/introduction">
 30 |           <ThemedText type="link">Learn more</ThemedText>
 31 |         </ExternalLink>
 32 |       </Collapsible>
 33 |       <Collapsible title="Android, iOS, and web support">
 34 |         <ThemedText>
 35 |           You can open this project on Android, iOS, and the web. To open the web version, press{' '}
 36 |           <ThemedText type="defaultSemiBold">w</ThemedText> in the terminal running this project.
 37 |         </ThemedText>
 38 |       </Collapsible>
 39 |       <Collapsible title="Images">
 40 |         <ThemedText>
 41 |           For static images, you can use the <ThemedText type="defaultSemiBold">@2x</ThemedText> and{' '}
 42 |           <ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes to provide files for
 43 |           different screen densities
 44 |         </ThemedText>
 45 |         <Image source={require('@/assets/images/react-logo.png')} style={{ alignSelf: 'center' }} />
 46 |         <ExternalLink href="https://reactnative.dev/docs/images">
 47 |           <ThemedText type="link">Learn more</ThemedText>
 48 |         </ExternalLink>
 49 |       </Collapsible>
 50 |       <Collapsible title="Custom fonts">
 51 |         <ThemedText>
 52 |           Open <ThemedText type="defaultSemiBold">app/_layout.tsx</ThemedText> to see how to load{' '}
 53 |           <ThemedText style={{ fontFamily: 'SpaceMono' }}>
 54 |             custom fonts such as this one.
 55 |           </ThemedText>
 56 |         </ThemedText>
 57 |         <ExternalLink href="https://docs.expo.dev/versions/latest/sdk/font">
 58 |           <ThemedText type="link">Learn more</ThemedText>
 59 |         </ExternalLink>
 60 |       </Collapsible>
 61 |       <Collapsible title="Light and dark mode components">
 62 |         <ThemedText>
 63 |           This template has light and dark mode support. The{' '}
 64 |           <ThemedText type="defaultSemiBold">useColorScheme()</ThemedText> hook lets you inspect
 65 |           what the user's current color scheme is, and so you can adjust UI colors accordingly.
 66 |         </ThemedText>
 67 |         <ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
 68 |           <ThemedText type="link">Learn more</ThemedText>
 69 |         </ExternalLink>
 70 |       </Collapsible>
 71 |       <Collapsible title="Animations">
 72 |         <ThemedText>
 73 |           This template includes an example of an animated component. The{' '}
 74 |           <ThemedText type="defaultSemiBold">components/HelloWave.tsx</ThemedText> component uses
 75 |           the powerful <ThemedText type="defaultSemiBold">react-native-reanimated</ThemedText> library
 76 |           to create a waving hand animation.
 77 |         </ThemedText>
 78 |         {Platform.select({
 79 |           ios: (
 80 |             <ThemedText>
 81 |               The <ThemedText type="defaultSemiBold">components/ParallaxScrollView.tsx</ThemedText>{' '}
 82 |               component provides a parallax effect for the header image.
 83 |             </ThemedText>
 84 |           ),
 85 |         })}
 86 |       </Collapsible>
 87 |     </ParallaxScrollView>
 88 |   );
 89 | }
 90 | 
 91 | const styles = StyleSheet.create({
 92 |   headerImage: {
 93 |     color: '#808080',
 94 |     bottom: -90,
 95 |     left: -35,
 96 |     position: 'absolute',
 97 |   },
 98 |   titleContainer: {
 99 |     flexDirection: 'row',
100 |     gap: 8,
101 |   },
102 | });
103 | 


--------------------------------------------------------------------------------
/app/nutrition/index.tsx:
--------------------------------------------------------------------------------
  1 | import { View, Text, StyleSheet, Pressable, ScrollView, Share } from 'react-native';
  2 | 
  3 | import { useDataStore } from '../../store/data'
  4 | import { api } from '../../services/api'
  5 | import { useQuery } from '@tanstack/react-query'
  6 | import { colors } from '../../constants/colors'
  7 | import { Data } from '../../types/data'
  8 | import { Link, router } from 'expo-router'
  9 | import { Ionicons, Feather } from '@expo/vector-icons'
 10 | 
 11 | interface ResponseData {
 12 |   data: Data
 13 | }
 14 | 
 15 | export default function Nutrition() {
 16 |   const user = useDataStore(state => state.user)
 17 | 
 18 |   const { data, isFetching, error } = useQuery({
 19 |     queryKey: ["nutrition"],
 20 |     queryFn: async () => {
 21 |       try{
 22 |         if(!user){
 23 |           throw new Error("Filed load nutrition")
 24 |         }
 25 | 
 26 |         
 27 |         const response = await api.post<ResponseData>("/create", {
 28 |           name: user.name,
 29 |           age: user.age,
 30 |           gender: user.gender,
 31 |           height:  user.height,
 32 |           weight: user.weight,
 33 |           objective: user.objective,
 34 |           level: user.level
 35 |         })
 36 | 
 37 |         return response.data.data
 38 | 
 39 | 
 40 |       }catch(err){
 41 |         console.log(err);
 42 |       }
 43 |     }
 44 |   })
 45 | 
 46 | 
 47 |   async function handleShare(){
 48 |     try{
 49 |       if(data && Object.keys(data).length === 0) return;
 50 | 
 51 |       const supplements = `${data?.suplementos.map( item => ` ${item}`)}`
 52 | 
 53 |       const foods = `${data?.refeicoes.map( item => `\n- Nome: ${item.nome}\n- Horário: ${item.horario}\n- Alimentos: ${item.alimentos.map( alimento => ` ${alimento}` )}`)}`
 54 | 
 55 |       const message = `Dieta: ${data?.nome} - Objetivo: ${data?.objetivo}\n\n${foods}\n\n- Dica Suplemento: ${supplements}`
 56 | 
 57 |       await Share.share({
 58 |         message: message
 59 |       })
 60 | 
 61 | 
 62 |     }catch(err){
 63 |       console.log(err);
 64 |     }
 65 |   }
 66 | 
 67 |   if(isFetching){
 68 |     return(
 69 |       <View style={styles.loading}>
 70 |         <Text style={styles.loadingText}>Estamos gerando sua dieta!</Text>
 71 |         <Text style={styles.loadingText}>Consultando IA...</Text>
 72 |       </View>
 73 |     )
 74 |   }
 75 | 
 76 |   if(error){
 77 |     return(
 78 |       <View style={styles.loading}>
 79 |         <Text style={styles.loadingText}>Falha ao gerar dieta!</Text>
 80 |         <Link href="/">
 81 |           <Text style={styles.loadingText}>Tente novamente</Text>
 82 |         </Link>
 83 |       </View>
 84 |     )
 85 |   }  
 86 | 
 87 |  return (
 88 |   <View style={styles.container}>
 89 |     <View style={styles.containerHeader}>
 90 |       <View style={styles.contentHeader}>
 91 |         <Text style={styles.title}>Minha dieta</Text>
 92 | 
 93 |         <Pressable style={styles.buttonShare} onPress={handleShare}>
 94 |           <Text style={styles.buttonShareText}>Compartilhar</Text>
 95 |         </Pressable>
 96 |       </View>
 97 |     </View>
 98 | 
 99 |     <View style={{ paddingLeft: 16, paddingRight: 16, flex:1 }}>
100 |       {data && Object.keys(data).length > 0 && (
101 |         <>
102 |           <Text style={styles.name}>Nome: {data.nome}</Text>
103 |           <Text style={styles.objective}>Foco: {data.objetivo}</Text>
104 | 
105 |           <Text style={styles.label}>Refeições:</Text>
106 |           <ScrollView>
107 |             <View style={styles.foods}>
108 |               {data.refeicoes.map( (refeicao) => (
109 |                 <View key={refeicao.nome} style={styles.food}>
110 |                   <View style={styles.foodHeader}>
111 |                     <Text style={styles.foodName}>{refeicao.nome}</Text>
112 |                     <Ionicons name="restaurant" size={16} color="#000" />
113 |                   </View>
114 | 
115 |                   <View style={styles.foodContent}>
116 |                     <Feather name="clock" size={14} color="#000"/>
117 |                     <Text>Horário: {refeicao.horario}</Text>
118 |                   </View>
119 | 
120 |                   <Text style={styles.foodText}>Alimentos:</Text>
121 |                   {refeicao.alimentos.map(alimento => (
122 |                     <Text key={alimento}>{alimento}</Text>
123 |                   ))}
124 | 
125 |                 </View>
126 |               ))}
127 |             </View>
128 | 
129 |             <View style={styles.supplements}>
130 |               <Text style={styles.foodName}>Dica suplementos:</Text>
131 |               {data.suplementos.map( item => (
132 |                 <Text key={item}>{item}</Text>
133 |               ))}
134 |             </View>
135 | 
136 |             <Pressable style={styles.button} onPress={ () => router.replace("/") }>
137 |               <Text style={styles.buttonText}>
138 |                 Gerar nova dieta
139 |               </Text>
140 |             </Pressable>
141 |           </ScrollView>
142 | 
143 |         </>
144 |       )}
145 |     </View>
146 | 
147 |   </View>
148 |   );
149 | }
150 | 
151 | const styles = StyleSheet.create({
152 |   loading:{
153 |     flex:1,
154 |     backgroundColor: colors.background,
155 |     justifyContent: 'center',
156 |     alignItems: 'center'
157 |   },
158 |   loadingText:{
159 |     fontSize:18,
160 |     color: colors.white,
161 |     marginBottom: 4,
162 |     justifyContent: 'center',
163 |     alignItems: 'center'
164 |   },
165 |   container:{
166 |     backgroundColor: colors.background,
167 |     flex:1,
168 |   },
169 |   containerHeader:{
170 |     backgroundColor: colors.white,
171 |     borderBottomLeftRadius: 14,
172 |     borderBottomRightRadius: 14,
173 |     paddingTop: 60,
174 |     paddingBottom: 20,
175 |     marginBottom: 16,
176 |   },
177 |   contentHeader:{
178 |     flexDirection: 'row',
179 |     alignItems: 'center',
180 |     justifyContent: 'space-between',
181 |     paddingLeft: 16,
182 |     paddingRight: 16
183 |   },
184 |   title:{
185 |     fontSize: 28,
186 |     color: colors.background,
187 |     fontWeight: 'bold'
188 |   },
189 |   buttonShare:{
190 |     backgroundColor: colors.blue,
191 |     alignItems: 'center',
192 |     justifyContent: 'center',
193 |     padding: 8,
194 |     borderRadius: 4
195 |   },
196 |   buttonShareText:{
197 |     color: colors.white,
198 |     fontWeight: '500'
199 |   },
200 |   name:{
201 |     fontSize: 20,
202 |     color: colors.white,
203 |     fontWeight: 'bold'
204 |   },
205 |   objective:{
206 |     color: colors.white,
207 |     fontSize: 16,
208 |     marginBottom: 24
209 |   },
210 |   label:{
211 |     color: colors.white,
212 |     fontSize: 16,
213 |     fontWeight: 'bold'
214 |   },
215 |   foods:{
216 |     backgroundColor: colors.white,
217 |     padding: 14,
218 |     borderRadius: 8,
219 |     marginTop: 8,
220 |     gap: 8,
221 |   },
222 |   food:{
223 |     backgroundColor: 'rgba(208, 208, 208, 0.40)',
224 |     padding: 8,
225 |     borderRadius: 4,
226 |   },
227 |   foodHeader:{
228 |     flexDirection: 'row',
229 |     alignItems: 'center',
230 |     justifyContent: 'space-between',
231 |     marginBottom: 4,
232 |   },
233 |   foodName:{
234 |     fontSize: 16,
235 |     fontWeight: 'bold'
236 |   },
237 |   foodContent:{
238 |     flexDirection: 'row',
239 |     alignItems: 'center',
240 |     gap: 4,
241 |   },
242 |   foodText:{
243 |     fontSize: 16,
244 |     marginBottom: 4,
245 |     marginTop: 14,
246 |   },
247 |   supplements:{
248 |     backgroundColor: colors.white,
249 |     marginTop: 14,
250 |     marginBottom: 14, 
251 |     padding: 14,
252 |     borderRadius: 8
253 |   },
254 |   button:{
255 |     backgroundColor: colors.blue,
256 |     height: 40,
257 |     justifyContent: 'center',
258 |     alignItems: 'center',
259 |     borderRadius: 8,
260 |     marginBottom: 24,
261 |   },
262 |   buttonText:{
263 |     color: colors.white,
264 |     fontSize: 16,
265 |     fontWeight: 'bold'
266 |   }
267 | })


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