Skip to content

E
EmidWife-New
Commit 95f3c966 authored by Malsha Jayakody's avatar Malsha Jayakody
Browse files
Options

Merge remote-tracking branch 'origin/feature/skin-manage' into final-app

parents cc8603af 1cc146cc
Hide whitespace changes
Inline Side-by-side
Showing with 685 additions and 109 deletions
src/constants/imgs.js
View file @ 95f3c966
......@@ -12,7 +12,7 @@ export default {
sk_5: require('../assets/sk_5.png'),
sk_8: require('../assets/sk_8.png'),
sk_9: require('../assets/sk_9.png'),
sk_14: require('../assets/sk_14.png'),
sk_14: require('../assets/sk_14.jpg'),
sk_15: require('../assets/sk_15.png'),
sk_16: require('../assets/sk_16.png'),
......
src/constants/routes.js
View file @ 95f3c966
......@@ -36,8 +36,8 @@ export default {
SKIN_VIDEO3: 'Skin_Video3',
SKIN_VIDEO4: 'Skin_Video4',
SKIN_VIDEO5: 'Skin_Video5',
EXERCISE_PROGRESS: 'Exercise_PROGRESS',
SKIN_INFO:'skin_info',
//GAMES
GAME_HOME: 'Game_Home',
......
src/navigations/SkinNavigator.js
View file @ 95f3c966
......@@ -9,6 +9,7 @@ import AdditionalSymptoms2 from '../screens/home/skin/AdditionalSymptoms2';
import AdditionalSymptoms3 from '../screens/home/skin/AdditionalSymptoms3';
import AdditionalSymptoms4 from '../screens/home/skin/AdditionalSymptoms4';
import AdditionalSymptoms5 from '../screens/home/skin/AdditionalSymptoms5';
import Additionalinformation from '../screens/home/skin/information1';
import {COLORS, ROUTES} from "../constants"
const Stack = createStackNavigator();
......@@ -28,6 +29,7 @@ function SkinNavigator() {
<Stack.Screen name={ROUTES.SKIN_VIDEO3} component={AdditionalSymptoms3} />
<Stack.Screen name={ROUTES.SKIN_VIDEO4} component={AdditionalSymptoms4} />
<Stack.Screen name={ROUTES.SKIN_VIDEO5} component={AdditionalSymptoms5} />
<Stack.Screen name={ROUTES.SKIN_INFO} component={Additionalinformation} />
......
src/screens/home/skin/AdditionalSymptoms.js
View file @ 95f3c966
......@@ -79,7 +79,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
if (toSkinRisk) {
navigation.navigate(ROUTES.SKIN_RISK);
} else {
navigation.navigate(ROUTES.SKIN_UPLOAD);
navigation.navigate(ROUTES.SKIN_INFO);
}
};
......
src/screens/home/skin/AdditionalSymptoms1.js
View file @ 95f3c966
......@@ -73,7 +73,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
if (toSkinRisk) {
navigation.navigate(ROUTES.SKIN_RISK);
} else {
navigation.navigate(ROUTES.SKIN_UPLOAD);
navigation.navigate(ROUTES.SKIN_INFO);
}
};
......
src/screens/home/skin/AdditionalSymptoms2.js
View file @ 95f3c966
......@@ -62,14 +62,14 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
const handleSubmit = () => {
// 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]);
// Navigate based on condition
if (toSkinRisk) {
navigation.navigate(ROUTES.SKIN_RISK);
} else {
navigation.navigate(ROUTES.SKIN_UPLOAD);
navigation.navigate(ROUTES.SKIN_INFO);
}
};
......
src/screens/home/skin/AdditionalSymptoms3.js
View file @ 95f3c966
......@@ -57,14 +57,14 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
const handleSubmit = () => {
// 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]);
// Navigate based on condition
if (toSkinRisk) {
navigation.navigate(ROUTES.SKIN_RISK);
} else {
navigation.navigate(ROUTES.SKIN_UPLOAD);
navigation.navigate(ROUTES.SKIN_INFO);
}
};
......@@ -106,7 +106,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
<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.videoDescriptionBox}>
<Text style={styles.descriptionText}>
......
src/screens/home/skin/AdditionalSymptoms4.js
View file @ 95f3c966
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 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 AdditionalSymptomsScreen = ({ navigation }) => {
const [selectedSymptoms, setSelectedSymptoms] = useState({ symptom1: false,
symptom2: false,
symptom3: false,});
const [selectedSymptoms, setSelectedSymptoms] = useState({
symptom1: false, symptom2: false, symptom3: false, symptom4: 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 [videoPaused, setVideoPaused] = useState(true);
const [fullscreen, setFullscreen] = useState(false);
......@@ -20,6 +25,16 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
const URL_link = "https://res.cloudinary.com/dl207ux6g/video/upload/v1715374529/3D/ri0w5kgmpchajypa7xfb.mp4";
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 = () => {
......@@ -37,11 +52,6 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
}));
};
const handleSubmit = () => {
// Handle the submission of symptoms
console.log(selectedSymptoms);
// Navigate or perform next steps
};
const toggleFullscreen = () => {
if (videoRef.current) {
......@@ -79,13 +89,15 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
return (
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollContainer}>
<ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
<View style={styles.topContainer}>
<Text style={styles.topicText}>Pupp Hives Additional Symptoms </Text>
<View style={styles.videoBox}>
<Text style={styles.topicText}>Pupp Hives Additional Symptoms</Text>
<View style={styles.videoBox}>
<View style={styles.videoDescriptionBox}>
<Text style={styles.descriptionText}>
Self diagnose with the 3D Model
</Text>
</View>
<TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}>
<Video
// ref={videoRef}
......@@ -106,44 +118,51 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
)}
</TouchableOpacity>
</View>
<Text style={styles.checkboxLabel}>Check the related box</Text>
<View style={styles.checkboxContainer}>
{/* Repeat this CheckBox component for each symptom */}
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom1']}
onValueChange={() => toggleCheckbox('symptom1')}
<Image source={require('./skinassets/scanme.png')}
style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -29 }} />
<View style={styles.qrCodeBox}>
<Image
source={require('./skinassets/QR1.png')} // Make sure the path is correct
style={styles.qrCodeImage}
/>
<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>
</View>
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom3']}
onValueChange={() => toggleCheckbox('symptom3')}
/>
<Text style={styles.checkboxText}>Yellow discharges</Text>
<TouchableOpacity
style={styles.orButton}
onPress={() => Linking.openURL('https://mywebar.com/p/Project_0_ysb0ffrwxn')}>
<Text style={styles.orButtonText}>OR Click This</Text>
</TouchableOpacity>
</View>
<Text style={styles.checkboxLabel}>Check the related box</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>
<Button
title="Continue for more information"
style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_RISK)}
onPress={() => navigation.navigate(ROUTES.SKIN_INFO)}
/>
</ScrollView>
</SafeAreaView>
</ScrollView>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
scrollContainer: {
flexGrow: 1,
......@@ -170,20 +189,30 @@ const styles = StyleSheet.create({
marginVertical: 20,
},
descriptionText: {
fontSize: 16,
fontSize: 18,
textAlign: 'center',
marginHorizontal: 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: {
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
backgroundColor: COLORS.lightBlue,
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,
paddingTop:10
......@@ -193,6 +222,7 @@ const styles = StyleSheet.create({
fontWeight: 'bold',
marginBottom: 10,
alignSelf: 'center',
color:COLORS.black,
},
checkboxRow: {
flexDirection: 'row',
......@@ -202,6 +232,7 @@ const styles = StyleSheet.create({
checkboxText: {
fontSize: 16,
marginLeft: 8,
flexShrink: 1, // Allows the text to shrink and wrap onto the next line
},
submitButton: {
backgroundColor: COLORS.primary,
......@@ -251,9 +282,10 @@ const styles = StyleSheet.create({
flexDirection: 'row', // Align checkbox and label in a row
alignItems: 'center', // Center align items vertically
borderWidth: 0.6, // Optional border width
width: '100%', // Width 100% to fill container width
marginLeft:-100,
width: '98%', // Width 100% to fill container width
marginLeft:-95,
elevation: 6,
minHeight: 50,
},
......@@ -273,7 +305,7 @@ const styles = StyleSheet.create({
borderColor: '#80BCBD', // 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
marginBottom: -20, // Add bottom margin for spacing
width: '100%', // Adjust the width as necessary
alignSelf: 'center', // Center the box within its container
// Add shadows for elevation effect (optional)
......@@ -286,6 +318,7 @@ const styles = StyleSheet.create({
shadowRadius: 3.84,
elevation: 5,
},
playPauseButton: {
position: 'absolute',
......@@ -306,6 +339,44 @@ const styles = StyleSheet.create({
contentContainer: {
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
});
......
src/screens/home/skin/AdditionalSymptoms5.js
View file @ 95f3c966
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 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 AdditionalSymptomsScreen = ({ navigation }) => {
const [selectedSymptoms, setSelectedSymptoms] = useState({ symptom1: false,
symptom2: false,
symptom3: false,});
const [selectedSymptoms, setSelectedSymptoms] = useState({
symptom1: false, symptom2: false, symptom3: false, symptom4: 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 [videoPaused, setVideoPaused] = useState(true);
const [fullscreen, setFullscreen] = useState(false);
......@@ -20,6 +25,17 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
const URL_link = "https://res.cloudinary.com/dl207ux6g/video/upload/v1715374540/3D/biile6hyrj1aiqvyvedi.mp4";
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 = () => {
......@@ -38,9 +54,16 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
};
const handleSubmit = () => {
// Handle the submission of symptoms
console.log(selectedSymptoms);
// Navigate or perform next steps
// Checking for specific symptoms that lead to SKIN_RISK
const skinRiskSymptoms = ['symptom1', 'symptom2'];
const toSkinRisk = skinRiskSymptoms.some(symptom => selectedSymptoms[symptom]);
// Navigate based on condition
if (toSkinRisk) {
navigation.navigate(ROUTES.SKIN_RISK);
} else {
navigation.navigate(ROUTES.SKIN_INFO);
}
};
const toggleFullscreen = () => {
......@@ -79,13 +102,15 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
return (
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollContainer}>
<ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
<View style={styles.topContainer}>
<Text style={styles.topicText}>Melanoma Additional Symptoms </Text>
<View style={styles.videoBox}>
<Text style={styles.topicText}>Melanoma Additional Symptoms</Text>
<View style={styles.videoBox}>
<View style={styles.videoDescriptionBox}>
<Text style={styles.descriptionText}>
Self diagnose with the 3D Model
</Text>
</View>
<TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}>
<Video
// ref={videoRef}
......@@ -106,44 +131,51 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
)}
</TouchableOpacity>
</View>
<Text style={styles.checkboxLabel}>Check the related box</Text>
<View style={styles.checkboxContainer}>
{/* Repeat this CheckBox component for each symptom */}
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom1']}
onValueChange={() => toggleCheckbox('symptom1')}
/>
<Text style={styles.checkboxText}>Scattered itchy bumps</Text>
</View>
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom2']}
onValueChange={() => toggleCheckbox('symptom2')}
<Image source={require('./skinassets/scanme.png')}
style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -29 }} />
<View style={styles.qrCodeBox}>
<Image
source={require('./skinassets/QR1.png')} // Make sure the path is correct
style={styles.qrCodeImage}
/>
<Text style={styles.checkboxText}>Large red inflamed area across belly</Text>
</View>
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom3']}
onValueChange={() => toggleCheckbox('symptom3')}
/>
<Text style={styles.checkboxText}>Yellow discharges</Text>
<TouchableOpacity
style={styles.orButton}
onPress={() => Linking.openURL('https://mywebar.com/p/Project_0_ysb0ffrwxn')}>
<Text style={styles.orButtonText}>OR Click This</Text>
</TouchableOpacity>
</View>
<Text style={styles.checkboxLabel}>Check the related box</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>
<Button
title="Continue for more information"
style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_RISK)}
onPress={handleSubmit}
/>
</ScrollView>
</SafeAreaView>
</ScrollView>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
scrollContainer: {
flexGrow: 1,
......@@ -170,20 +202,30 @@ const styles = StyleSheet.create({
marginVertical: 20,
},
descriptionText: {
fontSize: 16,
fontSize: 18,
textAlign: 'center',
marginHorizontal: 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: {
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
backgroundColor: COLORS.lightBlue,
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,
paddingTop:10
......@@ -193,6 +235,7 @@ const styles = StyleSheet.create({
fontWeight: 'bold',
marginBottom: 10,
alignSelf: 'center',
color:COLORS.black,
},
checkboxRow: {
flexDirection: 'row',
......@@ -202,6 +245,7 @@ const styles = StyleSheet.create({
checkboxText: {
fontSize: 16,
marginLeft: 8,
flexShrink: 1, // Allows the text to shrink and wrap onto the next line
},
submitButton: {
backgroundColor: COLORS.primary,
......@@ -251,9 +295,10 @@ const styles = StyleSheet.create({
flexDirection: 'row', // Align checkbox and label in a row
alignItems: 'center', // Center align items vertically
borderWidth: 0.6, // Optional border width
width: '100%', // Width 100% to fill container width
marginLeft:-100,
width: '98%', // Width 100% to fill container width
marginLeft:-95,
elevation: 6,
minHeight: 50,
},
......@@ -273,7 +318,7 @@ const styles = StyleSheet.create({
borderColor: '#80BCBD', // 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
marginBottom: -20, // Add bottom margin for spacing
width: '100%', // Adjust the width as necessary
alignSelf: 'center', // Center the box within its container
// Add shadows for elevation effect (optional)
......@@ -286,6 +331,7 @@ const styles = StyleSheet.create({
shadowRadius: 3.84,
elevation: 5,
},
playPauseButton: {
position: 'absolute',
......@@ -306,6 +352,44 @@ const styles = StyleSheet.create({
contentContainer: {
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
});
......
src/screens/home/skin/SkinRisk.js
View file @ 95f3c966
......@@ -25,7 +25,7 @@ const RiskEvaluationScreen = ({ navigation }) => {
</Text>
<Text style={styles.subTopicText}>Why High Risk ?</Text>
<View style={styles.audioPlayerContainer}>
<Video
{/* <Video
source={require("./skinassets/pause.png")}
style={styles.audioPlayer}
controls={true}
......@@ -35,7 +35,7 @@ const RiskEvaluationScreen = ({ navigation }) => {
repeat={true}
onLoad={() => setAudioPaused(false)}
/>
/> */}
</View>
<Image style={styles.babyImage} source={IMGS.sk_14} />
......@@ -45,10 +45,10 @@ const RiskEvaluationScreen = ({ navigation }) => {
</View>
</View>
<View style={styles.bottomContainer}>
<Button
<Button
title="Continue for more information"
style={styles.nextButton}
onPress={handleContinue}
onPress={() => navigation.navigate(ROUTES.SKIN_INFO)}
/>
</View>
</View>
......
src/screens/home/skin/SkinUploader.js
View file @ 95f3c966
......@@ -143,7 +143,7 @@ const Camera = ({ navigation }) => {
<Button
title="Continue for more information"
style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_VIDEO2)}
onPress={handleContinue}
/>
</View>
</View>
......
src/screens/home/skin/information1.js 0 → 100644
View file @ 95f3c966
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 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 ContactCard = ({ name, title, phone, email }) => (
<View style={styles.contactCard}>
<Text style={styles.contactName}>{name}</Text>
<Text style={styles.contactTitle}>{title}</Text>
<View style={styles.contactSpace} />
<TouchableOpacity onPress={() => Linking.openURL(`tel:${phone}`)}>
<Image source={require('./skinassets/calling.png')} style={styles.contactIcon} />
<Text style={styles.contactInfo}>Phone: {phone}</Text>
</TouchableOpacity>
<Image source={require('./skinassets/email.png')} style={styles.contactIcon} />
<TouchableOpacity onPress={() => Linking.openURL(`mailto:${email}`)}>
<Text style={styles.contactInfo}>Email: {email}</Text>
</TouchableOpacity>
</View>
);
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/vector2.png')} // 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 need 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 style={styles.qrCodeBox}>
<Image
source={require('./skinassets/Vectorw.png')} // Make sure the path is correct
style={styles.qrCodeImage1}
/>
<Text style={styles.dscriptionText}>
වැඩිදුර මග පෙන්වීම සහ සහාය සඳහා කරුණාකර යෙදුමේ ලැයිස්තුගත කර ඇති චර්ම රෝග විශේෂඥයින් වෙත සම්බන්ධ වන්න.
</Text>
<Text style={styles.dscriptionText}>
Please reach out to the dermatologists listed in the app for further guidance and assistance.
</Text>
<ContactCard
name="Neville Bassnayake"
title="Dermatologist"
phone="+94 759509725"
email="Nevillebassn@gmail.com"
/>
<ContactCard
name="Sandhya Hemamali"
title="Dermatologist"
phone="+94 773910789"
email="Sandhyahe@gmail.com"
/>
</View>
</View>
<Button
title="Continue for more information"
style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_WELCOME)}
/>
</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: 250, // Adjust size as needed
height: 200, // Adjust size as needed
},
qrCodeImage1:{
width: 200, // Adjust size as needed
height: 200,
},
orButton: {
marginTop: 30,
backgroundColor:'#5F939A',
padding: 10,
borderRadius: 10,
alignItems: 'center',
justifyContent: 'left',
flexDirection: 'row', // Align icon and text in a row
width: '100%', // Make the button wider
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 6,
},
shadowOpacity: 0.20,
shadowRadius: 4.65,
elevation: 12,
},
orButtonText: {
color: COLORS.white,
fontSize: 16,
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,
},
contactCard: {
backgroundColor: '#5F939A',
padding: 15,
borderRadius:20,
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 4,
},
shadowOpacity: 0.30,
shadowRadius: 4.65,
elevation: 8,
width: '110%',
marginVertical: 10,
alignItems: 'left',
},
contactName: {
fontSize: 18,
fontWeight: 'bold',
color: COLORS.white,
},
contactTitle: {
fontSize: 16,
color: COLORS.white,
},
contactInfo: {
fontSize: 14,
color: COLORS.white,
},
contactSpace: {
height: 10, // Space between title and contact info
},
contactIcon: {
width: 16,
height: 16,
marginRight: 8,
},
// ... possibly other styles
});
export default Additionalinformation;
\ No newline at end of file
src/services/auth/index.js
View file @ 95f3c966
import axios from 'axios';
const BASE_PATH = 'http://16.16.97.48/api/mother';
const BASE_PATH = 'http://10.0.2.2:8070/api/mother';
import AsyncStorage from '@react-native-async-storage/async-storage';
//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