Skip to content

E
EmidWife-New
Commit 65e31de5 authored by Devin B's avatar Devin B
Browse files
Options

feature_additional_infromation

parent 2be5b4f1
Hide whitespace changes
Inline Side-by-side
Showing with 598 additions and 99 deletions
src/constants/routes.js
View file @ 65e31de5
...@@ -35,4 +35,5 @@ export default { ...@@ -35,4 +35,5 @@ export default {
SKIN_VIDEO3: 'Skin_Video3', SKIN_VIDEO3: 'Skin_Video3',
SKIN_VIDEO4: 'Skin_Video4', SKIN_VIDEO4: 'Skin_Video4',
SKIN_VIDEO5: 'Skin_Video5', SKIN_VIDEO5: 'Skin_Video5',
SKIN_INFO:'skin_info'
}; };
src/navigations/SkinNavigator.js
View file @ 65e31de5
...@@ -9,6 +9,7 @@ import AdditionalSymptoms2 from '../screens/home/skin/AdditionalSymptoms2'; ...@@ -9,6 +9,7 @@ import AdditionalSymptoms2 from '../screens/home/skin/AdditionalSymptoms2';
import AdditionalSymptoms3 from '../screens/home/skin/AdditionalSymptoms3'; import AdditionalSymptoms3 from '../screens/home/skin/AdditionalSymptoms3';
import AdditionalSymptoms4 from '../screens/home/skin/AdditionalSymptoms4'; import AdditionalSymptoms4 from '../screens/home/skin/AdditionalSymptoms4';
import AdditionalSymptoms5 from '../screens/home/skin/AdditionalSymptoms5'; import AdditionalSymptoms5 from '../screens/home/skin/AdditionalSymptoms5';
import Additionalinformation from '../screens/home/skin/information1';
import {COLORS, ROUTES} from "../constants" import {COLORS, ROUTES} from "../constants"
const Stack = createStackNavigator(); const Stack = createStackNavigator();
...@@ -28,6 +29,7 @@ function SkinNavigator() { ...@@ -28,6 +29,7 @@ function SkinNavigator() {
<Stack.Screen name={ROUTES.SKIN_VIDEO3} component={AdditionalSymptoms3} /> <Stack.Screen name={ROUTES.SKIN_VIDEO3} component={AdditionalSymptoms3} />
<Stack.Screen name={ROUTES.SKIN_VIDEO4} component={AdditionalSymptoms4} /> <Stack.Screen name={ROUTES.SKIN_VIDEO4} component={AdditionalSymptoms4} />
<Stack.Screen name={ROUTES.SKIN_VIDEO5} component={AdditionalSymptoms5} /> <Stack.Screen name={ROUTES.SKIN_VIDEO5} component={AdditionalSymptoms5} />
<Stack.Screen name={ROUTES.SKIN_INFO} component={Additionalinformation} />
......
src/screens/home/skin/AdditionalSymptoms2.js
View file @ 65e31de5
...@@ -62,7 +62,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -62,7 +62,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
const handleSubmit = () => { const handleSubmit = () => {
// Checking for specific symptoms that lead to SKIN_RISK // Checking for specific symptoms that lead to SKIN_RISK
const skinRiskSymptoms = ['symptom3', 'symptom4', 'symptom4','symptom10', 'symptom8', 'symptom6']; const skinRiskSymptoms = ['symptom3', 'symptom5', 'symptom4'];
const toSkinRisk = skinRiskSymptoms.some(symptom => selectedSymptoms[symptom]); const toSkinRisk = skinRiskSymptoms.some(symptom => selectedSymptoms[symptom]);
// Navigate based on condition // Navigate based on condition
......
src/screens/home/skin/AdditionalSymptoms3.js
View file @ 65e31de5
...@@ -57,7 +57,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -57,7 +57,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
const handleSubmit = () => { const handleSubmit = () => {
// Checking for specific symptoms that lead to SKIN_RISK // Checking for specific symptoms that lead to SKIN_RISK
const skinRiskSymptoms = ['symptom3', 'symptom4', 'symptom4','symptom10', 'symptom8', 'symptom6']; const skinRiskSymptoms = ['symptom3', 'symptom5'];
const toSkinRisk = skinRiskSymptoms.some(symptom => selectedSymptoms[symptom]); const toSkinRisk = skinRiskSymptoms.some(symptom => selectedSymptoms[symptom]);
// Navigate based on condition // Navigate based on condition
...@@ -106,7 +106,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -106,7 +106,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
<SafeAreaView style={styles.container}> <SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}> <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
<View style={styles.topContainer}> <View style={styles.topContainer}>
<Text style={styles.topicText}>Cytomegalovirus Additional Symptoms</Text> <Text style={styles.topicText}>Herpes Additional Symptoms</Text>
<View style={styles.videoBox}> <View style={styles.videoBox}>
<View style={styles.videoDescriptionBox}> <View style={styles.videoDescriptionBox}>
<Text style={styles.descriptionText}> <Text style={styles.descriptionText}>
......
src/screens/home/skin/AdditionalSymptoms4.js
View file @ 65e31de5
import React, { useState, useRef, useEffect } from 'react'; import React, { useState, useRef, useEffect } from 'react';
import { View, StyleSheet, Text, ScrollView, TouchableOpacity, ActivityIndicator, Image } from 'react-native'; import { View, StyleSheet, Text, ScrollView, TouchableOpacity, ActivityIndicator, Image } from 'react-native';
import { COLORS ,IMGS, ROUTES} from '../../../constants'; import { COLORS ,IMGS, ROUTES} from '../../../constants';
import CheckBox from '@react-native-community/checkbox'; // Make sure to install this package import CheckBox from '@react-native-community/checkbox'; // Make sure to install this package
import Video from 'react-native-video'; // Make sure to install this package import Video from 'react-native-video'; // Make sure to install this package
import Button from '../../../components/Button'; import Button from '../../../components/Button';
import { SafeAreaView } from 'react-native-safe-area-context'; import { SafeAreaView } from 'react-native-safe-area-context';
import { Dimensions } from 'react-native';
import { Linking } from 'react-native';
const AdditionalSymptomsScreen = ({ navigation }) => { const AdditionalSymptomsScreen = ({ navigation }) => {
const [selectedSymptoms, setSelectedSymptoms] = useState({ symptom1: false, const [selectedSymptoms, setSelectedSymptoms] = useState({
symptom2: false, symptom1: false, symptom2: false, symptom3: false, symptom4: false,
symptom3: false,}); symptom5: false, symptom6: false, symptom7: false, symptom8: false,
symptom9: false, symptom10: false, symptom11: false, symptom12: false,
symptom13: false, symptom14: false
});
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [videoPaused, setVideoPaused] = useState(true); const [videoPaused, setVideoPaused] = useState(true);
const [fullscreen, setFullscreen] = useState(false); const [fullscreen, setFullscreen] = useState(false);
...@@ -20,6 +25,16 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -20,6 +25,16 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
const URL_link = "https://res.cloudinary.com/dl207ux6g/video/upload/v1715374529/3D/ri0w5kgmpchajypa7xfb.mp4"; const URL_link = "https://res.cloudinary.com/dl207ux6g/video/upload/v1715374529/3D/ri0w5kgmpchajypa7xfb.mp4";
const videoRef = useRef(null); const videoRef = useRef(null);
const screenHeight = Dimensions.get('window').height;
const imageHeight = screenHeight * 0.20;
const symptomsGroups = [
[
{ key: 'symptom1', text: 'Rash is intensely itchy | කුෂ්ඨ කැසීම'},
],
];
const handleLoad = () => { const handleLoad = () => {
...@@ -37,11 +52,6 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -37,11 +52,6 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
})); }));
}; };
const handleSubmit = () => {
// Handle the submission of symptoms
console.log(selectedSymptoms);
// Navigate or perform next steps
};
const toggleFullscreen = () => { const toggleFullscreen = () => {
if (videoRef.current) { if (videoRef.current) {
...@@ -79,13 +89,15 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -79,13 +89,15 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
return ( return (
<SafeAreaView style={styles.container}> <SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollContainer}> <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
<View style={styles.topContainer}> <View style={styles.topContainer}>
<Text style={styles.topicText}>Pupp Hives Additional Symptoms </Text> <Text style={styles.topicText}>Pupp Hives Additional Symptoms</Text>
<View style={styles.videoBox}> <View style={styles.videoBox}>
<View style={styles.videoDescriptionBox}>
<Text style={styles.descriptionText}> <Text style={styles.descriptionText}>
Self diagnose with the 3D Model Self diagnose with the 3D Model
</Text> </Text>
</View>
<TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}> <TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}>
<Video <Video
// ref={videoRef} // ref={videoRef}
...@@ -106,44 +118,51 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -106,44 +118,51 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
)} )}
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<Text style={styles.checkboxLabel}>Check the related box</Text> <Image source={require('./skinassets/scanme.png')}
<View style={styles.checkboxContainer}> style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -29 }} />
{/* Repeat this CheckBox component for each symptom */} <View style={styles.qrCodeBox}>
<View style={styles.individualCheckboxContainer}> <Image
<CheckBox source={require('./skinassets/QR1.png')} // Make sure the path is correct
value={selectedSymptoms['symptom1']} style={styles.qrCodeImage}
onValueChange={() => toggleCheckbox('symptom1')}
/> />
<Text style={styles.checkboxText}>Scattered itchy bumps</Text> <TouchableOpacity
</View> style={styles.orButton}
<View style={styles.individualCheckboxContainer}> onPress={() => Linking.openURL('https://mywebar.com/p/Project_0_ysb0ffrwxn')}>
<CheckBox <Text style={styles.orButtonText}>OR Click This</Text>
value={selectedSymptoms['symptom2']} </TouchableOpacity>
onValueChange={() => toggleCheckbox('symptom2')} </View>
/> <Text style={styles.checkboxLabel}>Check the related box</Text>
<Text style={styles.checkboxText}>Large red inflamed area across belly</Text> <View style={styles.checkboxContainer}>
</View> {symptomsGroups.map((group, index) => (
<View style={styles.individualCheckboxContainer}> <View key={index}>
<CheckBox {group.map(symptom => (
value={selectedSymptoms['symptom3']} <View style={styles.individualCheckboxContainer} key={symptom.key}>
onValueChange={() => toggleCheckbox('symptom3')} <CheckBox
/> value={selectedSymptoms[symptom.key]}
<Text style={styles.checkboxText}>Yellow discharges</Text> onValueChange={() => toggleCheckbox(symptom.key)}
/>
<Text style={styles.checkboxText}>{symptom.text}</Text>
</View>
))}
{index !== symptomsGroups.length - 1 && (
<View style={styles.separator} />
)}
</View>
))}
</View> </View>
</View> </View>
</View>
<Button <Button
title="Continue for more information" title="Continue for more information"
style={styles.nextButton} style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_RISK)} onPress={() => navigation.navigate(ROUTES.SKIN_VIDEO2)}
/> />
</ScrollView> </ScrollView>
</SafeAreaView> </SafeAreaView>
); );
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
scrollContainer: { scrollContainer: {
flexGrow: 1, flexGrow: 1,
...@@ -170,20 +189,30 @@ const styles = StyleSheet.create({ ...@@ -170,20 +189,30 @@ const styles = StyleSheet.create({
marginVertical: 20, marginVertical: 20,
}, },
descriptionText: { descriptionText: {
fontSize: 16, fontSize: 18,
textAlign: 'center', textAlign: 'center',
marginHorizontal: 20, marginHorizontal: 20,
marginBottom: 20, marginBottom: 20,
color:COLORS.black,
fontWeight: 'bold',
},
separator: {
height: 2,
backgroundColor: COLORS.blue,
marginVertical: 10,
width: '90%', // Reduce width to see margins from container edges
alignSelf: 'center',
marginLeft:-197,
}, },
checkboxContainer: { checkboxContainer: {
backgroundColor: COLORS.lightBlue,
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
borderRadius: 25, borderRadius: 25,
width:'100%', width: '100%', // Ensure it's taking the full width of its parent
alignSelf: 'center', // This ensures it's centered relative to the parent
paddingTop: 10,
marginLeft:197, marginLeft:197,
paddingTop:10
...@@ -193,6 +222,7 @@ const styles = StyleSheet.create({ ...@@ -193,6 +222,7 @@ const styles = StyleSheet.create({
fontWeight: 'bold', fontWeight: 'bold',
marginBottom: 10, marginBottom: 10,
alignSelf: 'center', alignSelf: 'center',
color:COLORS.black,
}, },
checkboxRow: { checkboxRow: {
flexDirection: 'row', flexDirection: 'row',
...@@ -202,6 +232,7 @@ const styles = StyleSheet.create({ ...@@ -202,6 +232,7 @@ const styles = StyleSheet.create({
checkboxText: { checkboxText: {
fontSize: 16, fontSize: 16,
marginLeft: 8, marginLeft: 8,
flexShrink: 1, // Allows the text to shrink and wrap onto the next line
}, },
submitButton: { submitButton: {
backgroundColor: COLORS.primary, backgroundColor: COLORS.primary,
...@@ -251,9 +282,10 @@ const styles = StyleSheet.create({ ...@@ -251,9 +282,10 @@ const styles = StyleSheet.create({
flexDirection: 'row', // Align checkbox and label in a row flexDirection: 'row', // Align checkbox and label in a row
alignItems: 'center', // Center align items vertically alignItems: 'center', // Center align items vertically
borderWidth: 0.6, // Optional border width borderWidth: 0.6, // Optional border width
width: '100%', // Width 100% to fill container width width: '98%', // Width 100% to fill container width
marginLeft:-100, marginLeft:-95,
elevation: 6, elevation: 6,
minHeight: 50,
}, },
...@@ -273,7 +305,7 @@ const styles = StyleSheet.create({ ...@@ -273,7 +305,7 @@ const styles = StyleSheet.create({
borderColor: '#80BCBD', // Set the border color borderColor: '#80BCBD', // Set the border color
borderRadius: 10, // Set border radius for rounded corners borderRadius: 10, // Set border radius for rounded corners
padding: 20, // Add padding around the content padding: 20, // Add padding around the content
marginBottom: 20, // Add bottom margin for spacing marginBottom: -20, // Add bottom margin for spacing
width: '100%', // Adjust the width as necessary width: '100%', // Adjust the width as necessary
alignSelf: 'center', // Center the box within its container alignSelf: 'center', // Center the box within its container
// Add shadows for elevation effect (optional) // Add shadows for elevation effect (optional)
...@@ -286,6 +318,7 @@ const styles = StyleSheet.create({ ...@@ -286,6 +318,7 @@ const styles = StyleSheet.create({
shadowRadius: 3.84, shadowRadius: 3.84,
elevation: 5, elevation: 5,
}, },
playPauseButton: { playPauseButton: {
position: 'absolute', position: 'absolute',
...@@ -306,6 +339,44 @@ const styles = StyleSheet.create({ ...@@ -306,6 +339,44 @@ const styles = StyleSheet.create({
contentContainer: { contentContainer: {
paddingBottom: 20, // Adds padding at the bottom paddingBottom: 20, // Adds padding at the bottom
}, },
qrCodeBox: {
width: '90%',
justifyContent: 'center',
alignItems: 'center',
padding: 20,
backgroundColor: COLORS.white,
marginBottom: 20,
shadowColor: "#000",
borderColor: '#80BCBD',
borderWidth: 2,
borderRadius: 10,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
qrCodeImage: {
width: 200, // Adjust size as needed
height: 200, // Adjust size as needed
},
orButton: {
marginTop: 30,
backgroundColor: COLORS.primary,
padding: 10,
borderRadius: 5,
alignItems: 'center',
justifyContent: 'center',
},
orButtonText: {
color: COLORS.white,
fontSize: 14,
fontWeight: 'bold',
}
// ... possibly other styles // ... possibly other styles
}); });
......
src/screens/home/skin/AdditionalSymptoms5.js
View file @ 65e31de5
import React, { useState, useRef, useEffect } from 'react'; import React, { useState, useRef, useEffect } from 'react';
import { View, StyleSheet, Text, ScrollView, TouchableOpacity, ActivityIndicator, Image } from 'react-native'; import { View, StyleSheet, Text, ScrollView, TouchableOpacity, ActivityIndicator, Image } from 'react-native';
import { COLORS ,IMGS, ROUTES} from '../../../constants'; import { COLORS ,IMGS, ROUTES} from '../../../constants';
import CheckBox from '@react-native-community/checkbox'; // Make sure to install this package import CheckBox from '@react-native-community/checkbox'; // Make sure to install this package
import Video from 'react-native-video'; // Make sure to install this package import Video from 'react-native-video'; // Make sure to install this package
import Button from '../../../components/Button'; import Button from '../../../components/Button';
import { SafeAreaView } from 'react-native-safe-area-context'; import { SafeAreaView } from 'react-native-safe-area-context';
import { Dimensions } from 'react-native';
import { Linking } from 'react-native';
const AdditionalSymptomsScreen = ({ navigation }) => { const AdditionalSymptomsScreen = ({ navigation }) => {
const [selectedSymptoms, setSelectedSymptoms] = useState({ symptom1: false, const [selectedSymptoms, setSelectedSymptoms] = useState({
symptom2: false, symptom1: false, symptom2: false, symptom3: false, symptom4: false,
symptom3: false,}); symptom5: false, symptom6: false, symptom7: false, symptom8: false,
symptom9: false, symptom10: false, symptom11: false, symptom12: false,
symptom13: false, symptom14: false
});
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [videoPaused, setVideoPaused] = useState(true); const [videoPaused, setVideoPaused] = useState(true);
const [fullscreen, setFullscreen] = useState(false); const [fullscreen, setFullscreen] = useState(false);
...@@ -20,6 +25,17 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -20,6 +25,17 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
const URL_link = "https://res.cloudinary.com/dl207ux6g/video/upload/v1715374540/3D/biile6hyrj1aiqvyvedi.mp4"; const URL_link = "https://res.cloudinary.com/dl207ux6g/video/upload/v1715374540/3D/biile6hyrj1aiqvyvedi.mp4";
const videoRef = useRef(null); const videoRef = useRef(null);
const screenHeight = Dimensions.get('window').height;
const imageHeight = screenHeight * 0.20;
const symptomsGroups = [
[
{ key: 'symptom1', text: 'Enlarge lymph nodes | විශාල වසා ගැටිති'},
{ key: 'symptom2', text: 'Sharp pain under armpits | කිහිලි යට තියුණු වේදනාව'},
],
];
const handleLoad = () => { const handleLoad = () => {
...@@ -38,9 +54,16 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -38,9 +54,16 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
}; };
const handleSubmit = () => { const handleSubmit = () => {
// Handle the submission of symptoms // Checking for specific symptoms that lead to SKIN_RISK
console.log(selectedSymptoms); const skinRiskSymptoms = ['symptom1', 'symptom2'];
// Navigate or perform next steps const toSkinRisk = skinRiskSymptoms.some(symptom => selectedSymptoms[symptom]);
// Navigate based on condition
if (toSkinRisk) {
navigation.navigate(ROUTES.SKIN_RISK);
} else {
navigation.navigate(ROUTES.SKIN_UPLOAD);
}
}; };
const toggleFullscreen = () => { const toggleFullscreen = () => {
...@@ -79,13 +102,15 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -79,13 +102,15 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
return ( return (
<SafeAreaView style={styles.container}> <SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollContainer}> <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
<View style={styles.topContainer}> <View style={styles.topContainer}>
<Text style={styles.topicText}>Melanoma Additional Symptoms </Text> <Text style={styles.topicText}>Melanoma Additional Symptoms</Text>
<View style={styles.videoBox}> <View style={styles.videoBox}>
<View style={styles.videoDescriptionBox}>
<Text style={styles.descriptionText}> <Text style={styles.descriptionText}>
Self diagnose with the 3D Model Self diagnose with the 3D Model
</Text> </Text>
</View>
<TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}> <TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}>
<Video <Video
// ref={videoRef} // ref={videoRef}
...@@ -106,44 +131,51 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -106,44 +131,51 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
)} )}
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<Text style={styles.checkboxLabel}>Check the related box</Text> <Image source={require('./skinassets/scanme.png')}
<View style={styles.checkboxContainer}> style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -29 }} />
{/* Repeat this CheckBox component for each symptom */} <View style={styles.qrCodeBox}>
<View style={styles.individualCheckboxContainer}> <Image
<CheckBox source={require('./skinassets/QR1.png')} // Make sure the path is correct
value={selectedSymptoms['symptom1']} style={styles.qrCodeImage}
onValueChange={() => toggleCheckbox('symptom1')}
/>
<Text style={styles.checkboxText}>Scattered itchy bumps</Text>
</View>
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom2']}
onValueChange={() => toggleCheckbox('symptom2')}
/> />
<Text style={styles.checkboxText}>Large red inflamed area across belly</Text> <TouchableOpacity
</View> style={styles.orButton}
<View style={styles.individualCheckboxContainer}> onPress={() => Linking.openURL('https://mywebar.com/p/Project_0_ysb0ffrwxn')}>
<CheckBox <Text style={styles.orButtonText}>OR Click This</Text>
value={selectedSymptoms['symptom3']} </TouchableOpacity>
onValueChange={() => toggleCheckbox('symptom3')} </View>
/> <Text style={styles.checkboxLabel}>Check the related box</Text>
<Text style={styles.checkboxText}>Yellow discharges</Text> <View style={styles.checkboxContainer}>
{symptomsGroups.map((group, index) => (
<View key={index}>
{group.map(symptom => (
<View style={styles.individualCheckboxContainer} key={symptom.key}>
<CheckBox
value={selectedSymptoms[symptom.key]}
onValueChange={() => toggleCheckbox(symptom.key)}
/>
<Text style={styles.checkboxText}>{symptom.text}</Text>
</View>
))}
{index !== symptomsGroups.length - 1 && (
<View style={styles.separator} />
)}
</View>
))}
</View> </View>
</View> </View>
</View>
<Button <Button
title="Continue for more information" title="Continue for more information"
style={styles.nextButton} style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_RISK)} onPress={handleSubmit}
/> />
</ScrollView> </ScrollView>
</SafeAreaView> </SafeAreaView>
); );
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
scrollContainer: { scrollContainer: {
flexGrow: 1, flexGrow: 1,
...@@ -170,20 +202,30 @@ const styles = StyleSheet.create({ ...@@ -170,20 +202,30 @@ const styles = StyleSheet.create({
marginVertical: 20, marginVertical: 20,
}, },
descriptionText: { descriptionText: {
fontSize: 16, fontSize: 18,
textAlign: 'center', textAlign: 'center',
marginHorizontal: 20, marginHorizontal: 20,
marginBottom: 20, marginBottom: 20,
color:COLORS.black,
fontWeight: 'bold',
},
separator: {
height: 2,
backgroundColor: COLORS.blue,
marginVertical: 10,
width: '90%', // Reduce width to see margins from container edges
alignSelf: 'center',
marginLeft:-197,
}, },
checkboxContainer: { checkboxContainer: {
backgroundColor: COLORS.lightBlue,
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
borderRadius: 25, borderRadius: 25,
width:'100%', width: '100%', // Ensure it's taking the full width of its parent
alignSelf: 'center', // This ensures it's centered relative to the parent
paddingTop: 10,
marginLeft:197, marginLeft:197,
paddingTop:10
...@@ -193,6 +235,7 @@ const styles = StyleSheet.create({ ...@@ -193,6 +235,7 @@ const styles = StyleSheet.create({
fontWeight: 'bold', fontWeight: 'bold',
marginBottom: 10, marginBottom: 10,
alignSelf: 'center', alignSelf: 'center',
color:COLORS.black,
}, },
checkboxRow: { checkboxRow: {
flexDirection: 'row', flexDirection: 'row',
...@@ -202,6 +245,7 @@ const styles = StyleSheet.create({ ...@@ -202,6 +245,7 @@ const styles = StyleSheet.create({
checkboxText: { checkboxText: {
fontSize: 16, fontSize: 16,
marginLeft: 8, marginLeft: 8,
flexShrink: 1, // Allows the text to shrink and wrap onto the next line
}, },
submitButton: { submitButton: {
backgroundColor: COLORS.primary, backgroundColor: COLORS.primary,
...@@ -251,9 +295,10 @@ const styles = StyleSheet.create({ ...@@ -251,9 +295,10 @@ const styles = StyleSheet.create({
flexDirection: 'row', // Align checkbox and label in a row flexDirection: 'row', // Align checkbox and label in a row
alignItems: 'center', // Center align items vertically alignItems: 'center', // Center align items vertically
borderWidth: 0.6, // Optional border width borderWidth: 0.6, // Optional border width
width: '100%', // Width 100% to fill container width width: '98%', // Width 100% to fill container width
marginLeft:-100, marginLeft:-95,
elevation: 6, elevation: 6,
minHeight: 50,
}, },
...@@ -273,7 +318,7 @@ const styles = StyleSheet.create({ ...@@ -273,7 +318,7 @@ const styles = StyleSheet.create({
borderColor: '#80BCBD', // Set the border color borderColor: '#80BCBD', // Set the border color
borderRadius: 10, // Set border radius for rounded corners borderRadius: 10, // Set border radius for rounded corners
padding: 20, // Add padding around the content padding: 20, // Add padding around the content
marginBottom: 20, // Add bottom margin for spacing marginBottom: -20, // Add bottom margin for spacing
width: '100%', // Adjust the width as necessary width: '100%', // Adjust the width as necessary
alignSelf: 'center', // Center the box within its container alignSelf: 'center', // Center the box within its container
// Add shadows for elevation effect (optional) // Add shadows for elevation effect (optional)
...@@ -286,6 +331,7 @@ const styles = StyleSheet.create({ ...@@ -286,6 +331,7 @@ const styles = StyleSheet.create({
shadowRadius: 3.84, shadowRadius: 3.84,
elevation: 5, elevation: 5,
}, },
playPauseButton: { playPauseButton: {
position: 'absolute', position: 'absolute',
...@@ -306,6 +352,44 @@ const styles = StyleSheet.create({ ...@@ -306,6 +352,44 @@ const styles = StyleSheet.create({
contentContainer: { contentContainer: {
paddingBottom: 20, // Adds padding at the bottom paddingBottom: 20, // Adds padding at the bottom
}, },
qrCodeBox: {
width: '90%',
justifyContent: 'center',
alignItems: 'center',
padding: 20,
backgroundColor: COLORS.white,
marginBottom: 20,
shadowColor: "#000",
borderColor: '#80BCBD',
borderWidth: 2,
borderRadius: 10,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
qrCodeImage: {
width: 200, // Adjust size as needed
height: 200, // Adjust size as needed
},
orButton: {
marginTop: 30,
backgroundColor: COLORS.primary,
padding: 10,
borderRadius: 5,
alignItems: 'center',
justifyContent: 'center',
},
orButtonText: {
color: COLORS.white,
fontSize: 14,
fontWeight: 'bold',
}
// ... possibly other styles // ... possibly other styles
}); });
......
src/screens/home/skin/SkinUploader.js
View file @ 65e31de5
...@@ -143,7 +143,7 @@ const Camera = ({ navigation }) => { ...@@ -143,7 +143,7 @@ const Camera = ({ navigation }) => {
<Button <Button
title="Continue for more information" title="Continue for more information"
style={styles.nextButton} style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_VIDEO2)} onPress={() => navigation.navigate(ROUTES.SKIN_INFO)}
/> />
</View> </View>
</View> </View>
......
src/screens/home/skin/information1.js 0 → 100644
View file @ 65e31de5
import React, { useState, useRef, useEffect } from 'react';
import { View, StyleSheet, Text, ScrollView, TouchableOpacity, ActivityIndicator, Image } from 'react-native';
import { COLORS ,IMGS, ROUTES} from '../../../constants';
import CheckBox from '@react-native-community/checkbox'; // Make sure to install this package
import Video from 'react-native-video'; // Make sure to install this package
import Button from '../../../components/Button';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Dimensions } from 'react-native';
import { Linking } from 'react-native';
const Additionalinformation = ({ navigation }) => {
const [loading, setLoading] = useState(true);
const [videoPaused, setVideoPaused] = useState(true);
const [fullscreen, setFullscreen] = useState(false);
const [controlsVisible, setControlsVisible] = useState(false);
const hideTimer = useRef(null);
const URL_link = "https://res.cloudinary.com/dl207ux6g/video/upload/v1715862352/AI/f0hccwonitbowttquawo.mp4";
const videoRef = useRef(null);
const handleLoad = () => {
setLoading(false);
};
const handleBuffer = () => {
setLoading(true);
};
const toggleCheckbox = (symptom) => {
setSelectedSymptoms(prevState => ({
...prevState,
[symptom]: !prevState[symptom],
}));
};
const handleSubmit = () => {
// Checking for specific symptoms that lead to SKIN_RISK
const skinRiskSymptoms = ['symptom3', 'symptom5', 'symptom4'];
const toSkinRisk = skinRiskSymptoms.some(symptom => selectedSymptoms[symptom]);
// Navigate based on condition
if (toSkinRisk) {
navigation.navigate(ROUTES.SKIN_RISK);
} else {
navigation.navigate(ROUTES.SKIN_UPLOAD);
}
};
const toggleFullscreen = () => {
if (videoRef.current) {
if (!fullscreen) {
videoRef.current.presentFullscreenPlayer(); // This will open the video in fullscreen
} else {
videoRef.current.dismissFullscreenPlayer(); // This will exit the fullscreen mode
}
setFullscreen(!fullscreen); // Toggle the fullscreen state
}
};
const togglePlayPause = () => {
setVideoPaused(!videoPaused);
showControlsTemporarily(); // Toggle the pause state of the video
};
const showControlsTemporarily = () => {
setControlsVisible(true);
if (hideTimer.current) {
clearTimeout(hideTimer.current);
}
hideTimer.current = setTimeout(() => {
setControlsVisible(false);
}, 3000); // Hide controls after 3 seconds of inactivity
};
useEffect(() => {
return () => {
if (hideTimer.current) {
clearTimeout(hideTimer.current);
}
};
}, []);
return (
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
<View style={styles.topContainer}>
<Text style={styles.topicText}>Discoid Additional Information</Text>
<View style={styles.videoBox}>
<View style={styles.videoDescriptionBox}>
<Text style={styles.descriptionText}>
Please play the video
</Text>
</View>
<TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}>
<Video
// ref={videoRef}
source={{ uri: URL_link }} // Replace with the path to your video file
style={[styles.video, { height: fullscreen ? '100%' : 300 }]}
paused={videoPaused}
resizeMode="contain" // This ensures the video fits within its container
onLoad={() => setVideoPaused(false)}
onError={(error) => console.error('Video playback error:', error)}
/>
{controlsVisible && (
<TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
<Image
style={styles.playPauseIcon}
source={videoPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')}
/>
</TouchableOpacity>
)}
</TouchableOpacity>
</View>
<View style={styles.qrCodeBox}>
<Image
source={require('./skinassets/Vectorw.jpg')} // Make sure the path is correct
style={styles.qrCodeImage}
/>
<Text style={styles.dscriptionText}>
Click below to explore informative videos on this condition from trusted YouTube sources.
Remember, these videos are for educational purposes only. If you came this far,
you medical advice immediately consult a professional. Thank you for prioritizing your health.
</Text>
<TouchableOpacity
style={styles.orButton}
onPress={() => Linking.openURL('https://youtu.be/sbrNx78JSV0?si=OsHd9sft8jDg1O1j')}>
<Image
source={require('./skinassets/youtube.png')}
style={styles.buttonIcon}
/>
<Text style={styles.orButtonText}>Click here to view video</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.orButton}
onPress={() => Linking.openURL('https://youtu.be/T9WQvX3W92A?si=dw7MhHk7TOpquJx_')}>
<Image
source={require('./skinassets/youtube.png')}
style={styles.buttonIcon}
/>
<Text style={styles.orButtonText}>Click here to view video</Text>
</TouchableOpacity>
</View>
</View>
<Button
title="Continue for more information"
style={styles.nextButton}
onPress={handleSubmit}
/>
</ScrollView>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
scrollContainer: {
flexGrow: 1,
},
container: {
flexGrow: 1,
backgroundColor: COLORS.white,
},
topContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: COLORS.white,
// This creates the curve effect for the background
},
topicText: {
fontSize: 24,
fontWeight: 'bold',
color: COLORS.black,
textAlign: 'center',
marginVertical: 20,
},
descriptionText: {
fontSize: 18,
textAlign: 'center',
marginHorizontal: 20,
marginBottom: 20,
color:COLORS.white,
fontWeight: 'bold',
},
submitButton: {
backgroundColor: COLORS.primary,
borderRadius: 20,
padding: 15,
marginVertical: 20,
width: '90%',
alignSelf: 'center',
},
nextButton: {
width: '70%',
paddingVertical: 10,
marginBottom: 80, // Adjust the margin to move the button up further if necessary
backgroundColor: COLORS.white,
borderRadius: 20,
alignSelf: 'center',
},
videoContainer: {
width: '100%',
aspectRatio: 16 / 9, // You can adjust this aspect ratio as needed
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black'
},
video: {
width: '110%',
height: '100%',
},
fullscreenButton: {
marginTop: 10,
backgroundColor: 'rgba(0, 0, 0, 0.8)',
padding: 10,
borderRadius: 5,
},
fullscreenButtonText: {
color: '#fff',
},
videoBox: {
backgroundColor: '#11324D', // Set background color to white
borderWidth: 2, // Set the border width
borderColor: '#316B83', // Set the border color
borderRadius: 10, // Set border radius for rounded corners
padding: 20, // Add padding around the content
marginBottom: -20, // Add bottom margin for spacing
width: '98%', // Adjust the width as necessary
alignSelf: 'center', // Center the box within its container
// Add shadows for elevation effect (optional)
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.45,
shadowRadius: 8.84,
elevation: 5,
},
playPauseButton: {
position: 'absolute',
top: '50%',
left: '50%',
bottom:'30%',
transform: [{ translateX: -25 }, { translateY: -25 }],
width: 50,
height: 50,
justifyContent: 'center',
alignItems: 'center',
},
playPauseIcon: {
width: 50,
height: 50,
},
contentContainer: {
paddingBottom: 20, // Adds padding at the bottom
},
qrCodeBox: {
width: '90%',
justifyContent: 'center',
alignItems: 'center',
padding: 30,
backgroundColor: COLORS.white,
marginBottom: 40,
shadowColor: "#000",
borderColor: '#80BCBD',
borderWidth: 2,
borderRadius: 10,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 10,
marginTop:50
},
qrCodeImage: {
width: 200, // Adjust size as needed
height: 200, // Adjust size as needed
},
orButton: {
marginTop: 30,
backgroundColor:'#5F939A',
padding: 10,
borderRadius: 5,
alignItems: 'center',
justifyContent: 'left',
flexDirection: 'row', // Align icon and text in a row
width: '100%', // Make the button wider
},
orButtonText: {
color: COLORS.white,
fontSize: 16,
fontWeight: 'bold',
marginLeft: 10, // Give some space after the icon
},
buttonIcon: {
width: 30,
height: 30,
marginLeft:10
},
dscriptionText: {
fontSize: 14,
textAlign: 'center',
color: COLORS.darkGray,
marginTop: 20,
marginBottom: 20,
},
// ... possibly other styles
});
export default Additionalinformation;
src/services/auth/index.js
View file @ 65e31de5
import axios from "axios"; import axios from "axios";
const BASE_PATH = 'http://10.0.2.2:8070/api/mother'; const BASE_PATH = 'http://16.16.97.48/api/mother';
import AsyncStorage from '@react-native-async-storage/async-storage'; import AsyncStorage from '@react-native-async-storage/async-storage';
//signIn API Call //signIn API Call
......
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