Skip to content

T
TMP-23-068
Commit cc39a6f5 authored by Balasooriya B.M.D.D's avatar Balasooriya B.M.D.D
Browse files
Options

Merge branch 'ALL_UI_1' into 'master' 

All ui 1

See merge request !19
parents b2d70950 10eefb54
Hide whitespace changes
Inline Side-by-side
Showing with 842 additions and 34 deletions
App.js
View file @ cc39a6f5
......@@ -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/BmiCalculator.js
View file @ cc39a6f5
......@@ -45,7 +45,7 @@ export default BmiCalculator;
import React, { useState, useEffect } from "react";
import { View, Text, StyleSheet, Button ,TouchableOpacity} from "react-native";
import { View, Text, StyleSheet, Button ,TouchableOpacity,ImageBackground} from "react-native";
import { firebase } from "../config";
import { useNavigation } from "@react-navigation/native";
......@@ -126,7 +126,8 @@ const BmiCalculator = ({ route }) => {
return (
<View style={styles.container}>
<ImageBackground source={require("../assets/backnew.png")} resizeMode="cover" style={styles.image}>
<View style={styles.overlay}>
<Text style={styles.label}>BMI Value:</Text>
<Text style={styles.result}>{bmi}</Text>
......@@ -139,6 +140,8 @@ const BmiCalculator = ({ route }) => {
<TouchableOpacity style={styles.navibutton} onPress={NavigateToNutrition}>
<Text style={styles.buttonText}>Get Nutrition Plan</Text>
</TouchableOpacity>
</View>
</ImageBackground>
</View>
);
};
......@@ -146,15 +149,26 @@ const BmiCalculator = ({ route }) => {
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
image: {
flex: 1,
justifyContent: 'center',
},
overlay: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.3)',
padding: 20,
justifyContent: 'center',
alignItems: "center",
},
button: {
backgroundColor: "pink",
borderRadius: 5,
padding: 10,
marginTop: 20,
marginTop: 60,
width: 200,
},
......
screens/BmiRecords.js
View file @ cc39a6f5
......@@ -63,14 +63,14 @@ export default BmiRecords;
import React, { useState, useEffect } from "react";
import { View, Text, FlatList, StyleSheet, ScrollView } from "react-native";
import React, { useState, useEffect } from "react";
import { View, Text, FlatList, StyleSheet,ImageBackground } from "react-native";
import { firebase } from "../config";
const BmiRecords = () => {
const [bmiRecords, setBmiRecords] = useState([]);
useEffect(() => {
/*useEffect(() => {
// Fetch BMI records from the database
firebase
.firestore()
......@@ -89,9 +89,39 @@ const BmiRecords = () => {
setBmiRecords(records);
});
}, []);
*/
useEffect(() => {
// Fetch BMI records from the database
const unsubscribe = firebase
.firestore()
.collection("bmiRecords")
.orderBy("date", "desc")
.onSnapshot((querySnapshot) => {
const records = [];
querySnapshot.forEach((doc) => {
const { bmi, date } = doc.data();
// Check if date is not null or undefined before converting to Date object
if (date) {
records.push({
id: doc.id,
bmi,
date: date.toDate(),
});
} else {
console.warn("Skipping a record with null date:", doc.id);
}
});
setBmiRecords(records);
});
// Unsubscribe from the snapshot listener when the component unmounts
return () => unsubscribe();
}, []);
return (
<ScrollView style={styles.container}>
<View style={styles.container}>
<ImageBackground source={require("../assets/backnew.png")} resizeMode="cover" style={styles.image}>
<Text style={styles.label}>BMI Records:</Text>
<FlatList
data={bmiRecords}
......@@ -103,24 +133,26 @@ const BmiRecords = () => {
</View>
)}
/>
</ScrollView>
</ImageBackground>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
paddingHorizontal: 16, // Add some horizontal padding
paddingHorizontal: 10, // Add some horizontal padding
paddingTop: 10, // Add some top padding
},
label: {
fontSize: 24,
fontWeight: "bold",
paddingTop: 60,
marginBottom: 10,
},
recordItem: {
marginVertical: 10,
backgroundColor: "#FFFFFF", // Add a background color
backgroundColor: "transparent", // Add a background color
padding: 10, // Add some padding to each record
borderRadius: 8, // Add border radius for rounded corners
shadowColor: "#000000", // Add shadow (if desired)
......
screens/MedicineWelcome.js 0 → 100644
View file @ cc39a6f5
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/MoodDetection.js 0 → 100644
View file @ cc39a6f5
/*
import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity, Image, TextInput, Alert, StyleSheet ,ImageBackground,ScrollView} from 'react-native';
import { Camera } from 'expo-camera';
export default function MoodDetection() {
const [capturedImage, setCapturedImage] = useState(null);
const [userAnswer, setUserAnswer] = useState('');
const [cameraPermission, setCameraPermission] = useState(null);
const [camera, setCamera] = useState(null);
const questionBank = [
'How would you rate your overall mood today? (1-10)',
'On a scale of 1 to 10, how well are you managing stress during your pregnancy?',
'How would you rate your happiness level at this moment? (1-10)',
'On a scale of 1 to 10, how confident do you feel about your pregnancy?',
'On a scale of 1 to 10, how well are you sleeping during your pregnancy?',
'How would you rate your excitement about becoming a mother? (1-10)',
'How would you rate your energy level at this moment? (1-10)',
'How excited are you about the upcoming addition to your family? (Rate 1-10)',
'How are you feeling today?',
'What is your mood like right now?',
'Tell me about your emotions at this moment.',
// Add more questions as needed
];
const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
useEffect(() => {
(async () => {
const { status } = await Camera.requestPermissionsAsync();
setCameraPermission(status === 'granted');
})();
}, []);
// Automatically change the question when the component is rendered
useEffect(() => {
// Generate a random question index
const randomIndex = Math.floor(Math.random() * questionBank.length);
setCurrentQuestionIndex(randomIndex);
}, []);
const captureImage = async () => {
if (!cameraPermission) {
Alert.alert('Permission Required', 'Please grant camera permission to capture an image.');
return;
}
try {
if (camera) {
const photo = await camera.takePictureAsync();
setCapturedImage(photo.uri);
} else {
Alert.alert('Error', 'Camera not available.');
}
} catch (error) {
Alert.alert('Error', 'Failed to capture an image. Please try again.');
}
};
return (
<ScrollView contentContainerStyle={styles.scrollViewContent}>
<View style={styles.container}>
<ImageBackground source={require("../assets/Nutritionbackground.png")} resizeMode="cover" style={styles.image}>
<View style={styles.overlay}>
<Text style={styles.title}>Mood Detection</Text>
<Text style={styles.questionText}>{questionBank[currentQuestionIndex]}</Text>
<TextInput
style={styles.answerInput}
placeholder="Type your answer here"
value={userAnswer}
onChangeText={(text) => setUserAnswer(text)}
/>
<Camera
style={styles.camera}
type={Camera.Constants.Type.front}
ref={(ref) => setCamera(ref)}
/>
{capturedImage && (
<Image source={{ uri: capturedImage }} style={styles.resultImage} />
)}
<TouchableOpacity style={styles.button} onPress={captureImage}>
<Text style={styles.buttonText} >Analyze Mood</Text>
</TouchableOpacity>
</View>
</ImageBackground>
</View>
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
scrollViewContent: {
minHeight: '100%', // Set a minimum height to enable scrolling
},
overlay: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.3)',
alignItems: "center",
},
image: {
flex: 1,
justifyContent: 'center',
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginTop: 95, // Adjusted margin to move the title to the top
},
questionText: {
fontSize: 18,
marginBottom: 20,
paddingRight:10,
paddingLeft:10,
marginTop: 10,
},
camera: {
flex: 1,
marginTop: 150,
width: '80%',
},
answerInput: {
width: '80%',
borderWidth: 1,
borderColor: 'gray',
padding: 10,
},
resultImage: {
width: 200,
height: 200,
marginTop: 170,
},
button: {
borderRadius: 5,
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',
marginTop: 40,
width: '70%',
},
buttonText: {
color: 'black',
fontWeight: 'bold',
},
});
*/
import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity, Image, TextInput, Alert, StyleSheet,ImageBackground } from 'react-native';
import { Camera } from 'expo-camera';
export default function MoodDetection() {
const [capturedImage, setCapturedImage] = useState(null);
const [userAnswer, setUserAnswer] = useState('');
const [cameraPermission, setCameraPermission] = useState(null);
const [camera, setCamera] = useState(null);
const questionBank = [
'How would you rate your overall mood today? (1-10)',
'On a scale of 1 to 10, how well are you managing stress during your pregnancy?',
'How would you rate your happiness level at this moment? (1-10)',
'On a scale of 1 to 10, how confident do you feel about your pregnancy?',
'On a scale of 1 to 10, how well are you sleeping during your pregnancy?',
'How would you rate your excitement about becoming a mother? (1-10)',
'How would you rate your energy level at this moment? (1-10)',
'How excited are you about the upcoming addition to your family? (Rate 1-10)',
'How are you feeling today?',
'What is your mood like right now?',
'Tell me about your emotions at this moment.',
];
const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
useEffect(() => {
(async () => {
const { status } = await Camera.requestPermissionsAsync();
setCameraPermission(status === 'granted');
})();
}, []);
useEffect(() => {
// Generate a random question index
const randomIndex = Math.floor(Math.random() * questionBank.length);
setCurrentQuestionIndex(randomIndex);
}, []);
const captureImage = async () => {
if (!cameraPermission) {
Alert.alert('Permission Required', 'Please grant camera permission to capture an image.');
return;
}
try {
if (camera) {
const photo = await camera.takePictureAsync();
setCapturedImage(photo.uri);
} else {
Alert.alert('Error', 'Camera not available.');
}
} catch (error) {
Alert.alert('Error', 'Failed to capture an image. Please try again.');
}
};
return (
<View style={styles.container}>
<ImageBackground source={require("../assets/Nutritionbackground.png")} resizeMode="cover" style={styles.image}>
<View style={styles.overlay}>
<Text style={styles.title}>Mood Detection</Text>
<Text style={styles.questionText}>{questionBank[currentQuestionIndex]}</Text>
<TextInput
style={styles.answerInput}
placeholder="Type your answer here"
value={userAnswer}
onChangeText={(text) => setUserAnswer(text)}
/>
<Camera
style={{ width: 1, height: 1, position: 'absolute' }}
type={Camera.Constants.Type.front}
ref={(ref) => setCamera(ref)}
/>
{capturedImage && (
<Image source={{ uri: capturedImage }} style={styles.resultImage} />
)}
<TouchableOpacity style={styles.button} onPress={captureImage}>
<Text style={styles.buttonText} >Analyze Mood</Text>
</TouchableOpacity>
</View>
</ImageBackground>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
overlay: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.3)',
alignItems: "center",
},
image: {
flex: 1,
justifyContent: 'center',
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginTop: 95, // Adjusted margin to move the title to the top
},
questionText: {
fontSize: 18,
marginBottom: 20,
paddingRight:10,
paddingLeft:10,
marginTop: 10,
},
camera: {
flex: 1,
width: '100%',
},
answerInput: {
width: '80%',
borderWidth: 1,
borderColor: 'gray',
padding: 10,
},
resultImage: {
width: 200,
height: 200,
marginTop: 170,
},
button: {
borderRadius: 5,
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',
marginBottom: 150,
marginTop: 90,
width: '70%',
},
buttonText: {
color: 'black',
fontWeight: 'bold',
},
});
screens/MoodWelcome.js 0 → 100644
View file @ cc39a6f5
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/Nutrition.js
View file @ cc39a6f5
import React, { useState } from 'react';
import { Button, Image, Text, View, TextInput, ScrollView,StyleSheet,TouchableOpacity } from 'react-native';
import { Button, Image, Text, View, TextInput, ScrollView,StyleSheet,TouchableOpacity,ImageBackground } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import axios from 'axios';
import { useNavigation } from "@react-navigation/native";
......@@ -15,6 +13,9 @@ export default function Nutrition({ route }) {
const [otherModelResult, setOtherModelResult] = useState('');
const navigation = useNavigation();
const { bmi } = route.params;
const [isPlanButtonVisible, setIsPlanButtonVisible] = useState(false);
const [isDataReady, setIsDataReady] = useState(false);
const pickImage = async (reportType) => {
const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
......@@ -68,11 +69,22 @@ export default function Nutrition({ route }) {
}
};
const sendToOtherModel = () => {
/* const sendToOtherModel = () => {
if (!resultCBC || !resultOGTT || !bmi) {
alert('Please provide Hemoglobin, Glucose, and BMI values.');
return;
}
*/
const sendToOtherModel = () => {
// Check if at least one of the required data is available
if (resultCBC || resultOGTT || bmi) {
setIsDataReady(true);
} else {
alert('Please provide Hemoglobin, Glucose, or BMI values.');
}
console.log(parseFloat(resultCBC));
console.log(parseFloat(resultOGTT));
......@@ -109,10 +121,13 @@ export default function Nutrition({ route }) {
const formattedMealPlan = customText.replace(/;/g, '\n');
setOtherModelResult(formattedMealPlan);
// setOtherModelResult(customText);
console.log(response.data.prediction);
// Set the state variable to make the "Get Nutrition Plan" button visible
setIsPlanButtonVisible(true);
})
.catch(error => {
console.error('Error sending data to other model:', error);
alert('Error occurred while sending data to other model.');
});
};
......@@ -125,6 +140,7 @@ export default function Nutrition({ route }) {
return (
<ScrollView contentContainerStyle={styles.scrollViewContent}>
<ImageBackground source={require("../assets/nutrition.png")} resizeMode="cover" style={styles.image}>
<View style={{ flex: 1 }}>
<View style={styles.container}>
<View style={styles.subContainer}>
......@@ -160,13 +176,18 @@ export default function Nutrition({ route }) {
<Text style={styles.buttonText}>Save</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.navibutton} onPress={navigateToPlan}>
<Text style={styles.buttonText}>Get Nutrition Plan</Text>
</TouchableOpacity>
{/* Conditionally render the "Get Nutrition Plan" button */}
{isPlanButtonVisible && (
<TouchableOpacity style={styles.navibutton} onPress={navigateToPlan}>
<Text style={styles.buttonText}>Get Nutrition Plan</Text>
</TouchableOpacity>
)}
</View>
</View>
</View>
</ImageBackground>
</ScrollView>
);
}
......@@ -208,12 +229,13 @@ const styles = StyleSheet.create({
},
labelText:{
fontWeight: "bold",
fontSize: 12,
color: "black",
fontSize: 15,
},
bmiText:{
fontWeight: "bold",
fontSize: 15,
fontSize: 20,
},
navibutton:{
......
screens/NutritionWelcome.js 0 → 100644
View file @ cc39a6f5
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/Plan.js
View file @ cc39a6f5
import React, { useEffect } from 'react';
import { View, Text, Image, ScrollView, TouchableOpacity, StyleSheet } from 'react-native';
import { View, Text, Image, ScrollView, TouchableOpacity, StyleSheet, ImageBackground} from 'react-native';
import { firebase } from '../config'; // Make sure to import 'firestore' and 'firebase' correctly.
export default function Plan({ route }) {
// Extract nutritionPlan from route.params
const { nutritionPlan } = route.params;
// Function to save the nutritionPlan to Firestore
// Function to save the nutritionPlan to Firestor
const savePlanToDatabase = async (nutritionPlan) => {
try {
const timestamp = firebase.firestore.FieldValue.serverTimestamp();
......@@ -25,11 +26,11 @@ export default function Plan({ route }) {
return (
<ScrollView contentContainerStyle={styles.container}>
{/* Image at the top */}
<Image
source={require('../assets/bmi.jpg')}
style={styles.image}
/>
<ImageBackground source={require("../assets/plan1.png")} resizeMode="cover" style={styles.image}>
<View style={styles.overlay}>
{/* Nutrition Plan */}
<Text style={styles.title}>Nutrition Plan:</Text>
......@@ -39,6 +40,8 @@ export default function Plan({ route }) {
<TouchableOpacity style={styles.button} onPress={savePlanToDatabase}>
<Text>Save Plan</Text>
</TouchableOpacity>
</View>
</ImageBackground>
</ScrollView>
);
}
......@@ -47,9 +50,17 @@ const styles = StyleSheet.create({
container: {
padding: 16,
},
image: {
width: '100%',
height: 200, // Adjust the height as needed
flex: 1,
justifyContent: 'center',
},
overlay: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.3)',
padding: 20,
justifyContent: 'center',
},
title: {
fontSize: 20,
......
screens/PreviousPlan.js 0 → 100644
View file @ cc39a6f5
import { ImageBackground, StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import React, { Component } from 'react'
export default function PreviousPlan () {
return (
<View style={styles.container}>
<ImageBackground source={require("../assets/plan2.png")} resizeMode="cover" style={styles.image}>
<View style={styles.overlay}>
</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 0 → 100644
View file @ cc39a6f5
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',
},
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment