Welcome UI

App.js

@@ -19,8 +19,16 @@ import Signup from "./screens/Signup";
 import Signin from "./screens/Signin";
 import BmiCalculator from "./screens/BmiCalculator";
 import BmiRecords from "./screens/BmiRecords";
+import BMI from "./screens/BMI";
 import BloodReportCapture from "./screens/BloodReportCapture";
 import Plan from "./screens/Plan";
+import MoodDetection from "./screens/MoodDetection";
+import NutritionWelcome from "./screens/NutritionWelcome";
+import MedicineWelcome from "./screens/MedicineWelcome";
+import USWelcome from "./screens/USWelcome";
+import MoodWelcome from "./screens/MoodWelcome";
+import PreviousPlan from "./screens/PreviousPlan";
+
 import SuggestionComponent from "./screens/SuggestionComponent";
 
 const Stack = createStackNavigator()
@@ -50,6 +58,15 @@ export default function App() {
        <Stack.Screen name="BmiRecords" component={BmiRecords} />
        <Stack.Screen name="BloodReportCapture" component={BloodReportCapture} />
        <Stack.Screen name="Plan" component={Plan} />
+       <Stack.Screen name="bmi" component={BMI} />
+       <Stack.Screen name="mood" component={MoodDetection} />
+       <Stack.Screen name="PreviousPlan" component={PreviousPlan} />
+
+       <Stack.Screen name="NutritionWelcome" component={NutritionWelcome} />
+       <Stack.Screen name="MedicineWelcome" component={MedicineWelcome} />
+       <Stack.Screen name="USWelcome" component={USWelcome} />
+       <Stack.Screen name="MoodWelcome" component={MoodWelcome} />
+       
 
        <Stack.Screen name="Signup" component={Signup} />
        <Stack.Screen name="Signin" component={Signin} />

screens/MedicineWelcome.js

+import { ImageBackground, StyleSheet, Text, View, TouchableOpacity } from 'react-native';
+import React, { Component } from 'react'
+import { useNavigation } from "@react-navigation/native";
+const image = {};
+
+
+export default function MedicineWelcome () {
+
+  const navigation = useNavigation();
+  const navigateToMedicine = () => {
+    navigation.navigate("Prescription");
+  };
+
+  
+ 
+    return (
+      <View style={styles.container}>
+        <ImageBackground source={require("../assets/MedicineScreen.png")} resizeMode="cover" style={styles.image}>
+          <View style={styles.overlay}>
+      
+            <View style={styles.actionButtons}>
+              <TouchableOpacity style={styles.actionButton} onPress={navigateToMedicine}>
+                <Text style={styles.buttonText}>Medicine Tracker</Text>
+              </TouchableOpacity>
+              
+            </View>
+          </View>
+        </ImageBackground>
+      </View>
+    )
+
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  image: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    padding: 20,
+    justifyContent: 'center',
+  },
+
+  
+  actionButtons: {
+    
+    justifyContent: 'space-around',
+    marginTop: 500,
+  },
+  actionButton: {
+    backgroundColor: 'transparent',
+    borderWidth: 2,
+    borderColor: '#FF9DD2', // Pink border color
+    paddingVertical: 20, // Increase button size by adjusting padding
+    paddingHorizontal: 40, // Increase button size by adjusting padding
+    borderRadius: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  buttonText: {
+    color: 'white',
+    fontWeight: 'bold',
+  },
+});
+

screens/MoodWelcome.js

+import { ImageBackground, StyleSheet, Text, View, TouchableOpacity } from 'react-native';
+import React, { Component } from 'react'
+import { useNavigation } from "@react-navigation/native";
+const image = {};
+
+
+export default function MoodWelcome () {
+
+  const navigation = useNavigation();
+  const navigateToMood = () => {
+    navigation.navigate("mood");
+  };
+
+  
+ 
+    return (
+      <View style={styles.container}>
+        <ImageBackground source={require("../assets/MoodScreen.png")} resizeMode="cover" style={styles.image}>
+          <View style={styles.overlay}>
+      
+            <View style={styles.actionButtons}>
+              <TouchableOpacity style={styles.actionButton} onPress={navigateToMood}>
+                <Text style={styles.buttonText}>Let's Start</Text>
+              </TouchableOpacity>
+              
+            </View>
+          </View>
+        </ImageBackground>
+      </View>
+    )
+
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  image: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    padding: 20,
+    justifyContent: 'center',
+  },
+
+  
+  actionButtons: {
+    
+    justifyContent: 'space-around',
+    marginTop: 500,
+  },
+  actionButton: {
+    backgroundColor: 'transparent',
+    borderWidth: 2,
+    borderColor: '#FF9DD2', // Pink border color
+    paddingVertical: 20, // Increase button size by adjusting padding
+    paddingHorizontal: 40, // Increase button size by adjusting padding
+    borderRadius: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  buttonText: {
+    color: 'black',
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+});
+

screens/NutritionWelcome.js

+import { ImageBackground, StyleSheet, Text, View, TouchableOpacity } from 'react-native';
+import React, { Component } from 'react'
+import { useNavigation } from "@react-navigation/native";
+
+
+export default function NutritionWelcome () {
+
+  const navigation = useNavigation();
+  
+  const navigateToNutrition = () => {
+    navigation.navigate("bmi");
+  };
+
+  const navigateToPreviousPlan = () => {
+    navigation.navigate("PreviousPlan");
+  };
+
+
+ 
+    return (
+      <View style={styles.container}>
+        <ImageBackground source={require("../assets/nutrition.png")} resizeMode="cover" style={styles.image}>
+          <View style={styles.overlay}>
+      
+            <View style={styles.actionButtons}>
+              <TouchableOpacity style={styles.actionButton} onPress={navigateToNutrition}>
+                <Text style={styles.buttonText}>Nutrition Tracker</Text>
+              </TouchableOpacity>
+              <TouchableOpacity style={[styles.actionButton,  { marginTop: 20 }]} onPress={navigateToPreviousPlan} >
+                <Text style={styles.buttonText}>Current Plan</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </ImageBackground>
+      </View>
+    )
+
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  image: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    padding: 20,
+    justifyContent: 'center',
+  },
+
+  
+  actionButtons: {
+    
+    justifyContent: 'space-around',
+    marginTop: 500,
+  },
+  actionButton: {
+    backgroundColor: 'transparent',
+    borderWidth: 2,
+    borderColor: '#FF9DD2', // Pink border color
+    paddingVertical: 20, // Increase button size by adjusting padding
+    paddingHorizontal: 40, // Increase button size by adjusting padding
+    borderRadius: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  buttonText: {
+    color: 'white',
+    fontWeight: 'bold',
+  },
+});
+

screens/USWelcome.js

+import { ImageBackground, StyleSheet, Text, View, TouchableOpacity } from 'react-native';
+import React, { Component } from 'react'
+import { useNavigation } from "@react-navigation/native";
+const image = {};
+
+
+export default function USWelcome () {
+
+  const navigation = useNavigation();
+  const navigateToUS = () => {
+    navigation.navigate("UsImage");
+  };
+
+  
+ 
+    return (
+      <View style={styles.container}>
+        <ImageBackground source={require("../assets/us.png")} resizeMode="cover" style={styles.image}>
+          <View style={styles.overlay}>
+      
+            <View style={styles.actionButtons}>
+              <TouchableOpacity style={styles.actionButton} onPress={navigateToUS}>
+                <Text style={styles.buttonText}>Baby Growth Predictor</Text>
+              </TouchableOpacity>
+              
+            </View>
+          </View>
+        </ImageBackground>
+      </View>
+    )
+
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  image: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    padding: 20,
+    justifyContent: 'center',
+  },
+
+  
+  actionButtons: {
+    
+    justifyContent: 'space-around',
+    marginTop: 500,
+  },
+  actionButton: {
+    backgroundColor: 'transparent',
+    borderWidth: 2,
+    borderColor: '#FF9DD2', // Pink border color
+    paddingVertical: 20, // Increase button size by adjusting padding
+    paddingHorizontal: 40, // Increase button size by adjusting padding
+    borderRadius: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  buttonText: {
+    color: 'white',
+    fontWeight: 'bold',
+  },
+});
+