Skip to content

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

add_info

parent f7fabe12
Show whitespace changes
Inline Side-by-side
Showing with 2157 additions and 40 deletions
src/constants/routes.js
View file @ c53b5595
......@@ -35,5 +35,10 @@ export default {
SKIN_VIDEO3: 'Skin_Video3',
SKIN_VIDEO4: 'Skin_Video4',
SKIN_VIDEO5: 'Skin_Video5',
SKIN_INFO:'skin_info'
SKIN_INFO:'skin_info',
SKIN_INFO2:'skin_info2',
SKIN_INFO3:'skin_info3',
SKIN_INFO4:'skin_info4',
SKIN_INFO5:'skin_info5',
SKIN_INFO6:'skin_info6'
};
src/navigations/SkinNavigator.js
View file @ c53b5595
......@@ -10,6 +10,11 @@ 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 Additionalinformation2 from '../screens/home/skin/skininformation2';
import Additionalinformation3 from '../screens/home/skin/skininfromation3';
import Additionalinformation4 from '../screens/home/skin/skininfromation4';
import Additionalinformation5 from '../screens/home/skin/skininformation5';
import Additionalinformation6 from '../screens/home/skin/skininformation6';
import {COLORS, ROUTES} from "../constants"
const Stack = createStackNavigator();
......@@ -30,6 +35,11 @@ function SkinNavigator() {
<Stack.Screen name={ROUTES.SKIN_VIDEO4} component={AdditionalSymptoms4} />
<Stack.Screen name={ROUTES.SKIN_VIDEO5} component={AdditionalSymptoms5} />
<Stack.Screen name={ROUTES.SKIN_INFO} component={Additionalinformation} />
<Stack.Screen name={ROUTES.SKIN_INFO2} component={Additionalinformation2} />
<Stack.Screen name={ROUTES.SKIN_INFO3} component={Additionalinformation3} />
<Stack.Screen name={ROUTES.SKIN_INFO4} component={Additionalinformation4} />
<Stack.Screen name={ROUTES.SKIN_INFO5} component={Additionalinformation5} />
<Stack.Screen name={ROUTES.SKIN_INFO6} component={Additionalinformation6} />
......
src/screens/home/skin/AdditionalSymptoms.js
View file @ c53b5595
......@@ -9,7 +9,7 @@ import { Dimensions } from 'react-native';
import { Linking } from 'react-native';
const AdditionalSymptomsScreen = ({ navigation }) => {
const AdditionalSymptomsScreen2 = ({ navigation }) => {
const [selectedSymptoms, setSelectedSymptoms] = useState({
symptom1: false, symptom2: false, symptom3: false, symptom4: false,
symptom5: false, symptom6: false, symptom7: false, symptom8: false,
......@@ -77,7 +77,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
// Navigate based on condition
if (toSkinRisk) {
navigation.navigate(ROUTES.SKIN_RISK);
navigation.navigate(ROUTES.SKIN_RISK, {origin: 'AdditionalSymptomsScreen2' });
} else {
navigation.navigate(ROUTES.SKIN_INFO);
}
......@@ -460,4 +460,4 @@ const styles = StyleSheet.create({
// ... possibly other styles
});
export default AdditionalSymptomsScreen;
export default AdditionalSymptomsScreen2;
src/screens/home/skin/AdditionalSymptoms1.js
View file @ c53b5595
......@@ -9,7 +9,7 @@ import { Dimensions } from 'react-native';
import { Linking } from 'react-native';
const AdditionalSymptomsScreen = ({ navigation }) => {
const AdditionalSymptomsScreen1 = ({ navigation }) => {
const [selectedSymptoms, setSelectedSymptoms] = useState({
symptom1: false, symptom2: false, symptom3: false, symptom4: false,
symptom5: false, symptom6: false, symptom7: false, symptom8: false,
......@@ -71,9 +71,9 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
// Navigate based on condition
if (toSkinRisk) {
navigation.navigate(ROUTES.SKIN_RISK);
navigation.navigate(ROUTES.SKIN_RISK, {origin: 'AdditionalSymptomsScreen1' });
} else {
navigation.navigate(ROUTES.SKIN_INFO);
navigation.navigate(ROUTES.SKIN_INFO2);
}
};
......@@ -455,4 +455,4 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
});
export default AdditionalSymptomsScreen;
export default AdditionalSymptomsScreen1;
src/screens/home/skin/AdditionalSymptoms2.js
View file @ c53b5595
......@@ -9,7 +9,7 @@ import { Dimensions } from 'react-native';
import { Linking } from 'react-native';
const AdditionalSymptomsScreen = ({ navigation }) => {
const AdditionalSymptomsScreen3 = ({ navigation }) => {
const [selectedSymptoms, setSelectedSymptoms] = useState({
symptom1: false, symptom2: false, symptom3: false, symptom4: false,
symptom5: false, symptom6: false, symptom7: false, symptom8: false,
......@@ -67,7 +67,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
// Navigate based on condition
if (toSkinRisk) {
navigation.navigate(ROUTES.SKIN_RISK);
navigation.navigate(ROUTES.SKIN_RISK, {origin: 'AdditionalSymptomsScreen3' });
} else {
navigation.navigate(ROUTES.SKIN_INFO);
}
......@@ -451,4 +451,4 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
});
export default AdditionalSymptomsScreen;
export default AdditionalSymptomsScreen3;
src/screens/home/skin/AdditionalSymptoms3.js
View file @ c53b5595
......@@ -9,7 +9,7 @@ import { Dimensions } from 'react-native';
import { Linking } from 'react-native';
const AdditionalSymptomsScreen = ({ navigation }) => {
const AdditionalSymptomsScreen4 = ({ navigation }) => {
const [selectedSymptoms, setSelectedSymptoms] = useState({
symptom1: false, symptom2: false, symptom3: false, symptom4: false,
symptom5: false, symptom6: false, symptom7: false, symptom8: false,
......@@ -62,7 +62,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
// Navigate based on condition
if (toSkinRisk) {
navigation.navigate(ROUTES.SKIN_RISK);
navigation.navigate(ROUTES.SKIN_RISK, {origin: 'AdditionalSymptomsScreen4' });
} else {
navigation.navigate(ROUTES.SKIN_INFO);
}
......@@ -445,4 +445,4 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
// ... possibly other styles
});
export default AdditionalSymptomsScreen;
export default AdditionalSymptomsScreen4;
src/screens/home/skin/AdditionalSymptoms4.js
View file @ c53b5595
......@@ -9,7 +9,7 @@ import { Dimensions } from 'react-native';
import { Linking } from 'react-native';
const AdditionalSymptomsScreen = ({ navigation }) => {
const AdditionalSymptomsScreen5 = ({ navigation }) => {
const [selectedSymptoms, setSelectedSymptoms] = useState({
symptom1: false, symptom2: false, symptom3: false, symptom4: false,
symptom5: false, symptom6: false, symptom7: false, symptom8: false,
......@@ -155,7 +155,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
<Button
title="Continue for more information"
style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_INFO)}
onPress={() => navigation.navigate(ROUTES.SKIN_INFO6)}
/>
</ScrollView>
</SafeAreaView>
......@@ -381,4 +381,4 @@ const styles = StyleSheet.create({
// ... possibly other styles
});
export default AdditionalSymptomsScreen;
export default AdditionalSymptomsScreen5;
src/screens/home/skin/AdditionalSymptoms5.js
View file @ c53b5595
......@@ -9,7 +9,7 @@ import { Dimensions } from 'react-native';
import { Linking } from 'react-native';
const AdditionalSymptomsScreen = ({ navigation }) => {
const AdditionalSymptomsScreen6 = ({ navigation }) => {
const [selectedSymptoms, setSelectedSymptoms] = useState({
symptom1: false, symptom2: false, symptom3: false, symptom4: false,
symptom5: false, symptom6: false, symptom7: false, symptom8: false,
......@@ -60,7 +60,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
// Navigate based on condition
if (toSkinRisk) {
navigation.navigate(ROUTES.SKIN_RISK);
navigation.navigate(ROUTES.SKIN_RISK, {origin: 'AdditionalSymptomsScreen6' });
} else {
navigation.navigate(ROUTES.SKIN_INFO);
}
......@@ -443,4 +443,4 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
// ... possibly other styles
});
export default AdditionalSymptomsScreen;
export default AdditionalSymptomsScreen6;
src/screens/home/skin/SkinRisk.js
View file @ c53b5595
......@@ -7,18 +7,14 @@ import Button from '../../../components/Button';
import Video from 'react-native-video';
import { SafeAreaView } from 'react-native-safe-area-context';
const RiskEvaluationScreen = ({ navigation }) => {
const RiskEvaluationScreen = ({ navigation,route }) => {
const { origin } = route.params || {};
const [audioPaused, setAudioPaused] = useState(true);
const [progress, setProgress] = useState(0);
const audioRef = useRef(null);
const progressAnim = useRef(new Animated.Value(0)).current;
// Function to handle the continuation to the next screen
const handleContinue = () => {
// navigation.navigate('NextScreenRoute');
};
useEffect(() => {
if (audioPaused) {
progressAnim.stopAnimation();
......@@ -40,13 +36,33 @@ const RiskEvaluationScreen = ({ navigation }) => {
}
};
const handleContinue = () => {
if (origin === 'AdditionalSymptomsScreen2') {
navigation.navigate(ROUTES.SKIN_INFO);
} else if (origin === 'AdditionalSymptomsScreen1') {
navigation.navigate(ROUTES.SKIN_INFO2);
}
else if (origin === 'AdditionalSymptomsScreen3') {
navigation.navigate(ROUTES.SKIN_INFO3);
}
else if (origin === 'AdditionalSymptomsScreen4') {
navigation.navigate(ROUTES.SKIN_INFO4);
}
else if (origin === 'AdditionalSymptomsScreen6') {
navigation.navigate(ROUTES.SKIN_INFO5);
}
// else {
// navigation.navigate(ROUTES.SKIN_INFO); // Default or fallback screen
// }
};
const URL_link = "https://res.cloudinary.com/dl207ux6g/video/upload/v1716112518/audio/fzkd6v8lnmnsa4onm8sx.mp3";
return (
<SafeAreaView style={styles.container}>
<View style={styles.topContainer}>
<Text style={styles.topicText}>Risk evaluation</Text>
<Text style={styles.topicText}> Evaluated risk</Text>
<Text style={styles.descriptionText}>
Your Condition Risk Level: High,Low will be displayed below
</Text>
......@@ -90,7 +106,7 @@ const RiskEvaluationScreen = ({ navigation }) => {
<Button
title="What should I do next"
style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_INFO)}
onPress={handleContinue}
/>
</View>
</SafeAreaView>
......
src/screens/home/skin/SkinUploader.js
View file @ c53b5595
......@@ -145,16 +145,7 @@ const Camera = ({ navigation }) => {
style={styles.nextButton}
onPress={handleContinue}
/>
{/* <Button
title="Take your next step"
style={{
marginTop: 12,
width: "90%",
marginTop:43,
marginBottom:83
}}
onPress={() => navigation.navigate(ROUTES.SKIN_RISK)}
/> */}
</View>
</View>
);
......
src/screens/home/skin/information1.js
View file @ c53b5595
......@@ -183,7 +183,7 @@ const Additionalinformation = ({ navigation }) => {
</View>
<Button
title="Continue for more information"
title="Not sure ? Diagnose again"
style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_WELCOME)}
/>
......
src/screens/home/skin/skininformation2.js 0 → 100644
View file @ c53b5595
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 Additionalinformation2 = ({ 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/v1716106373/AI/ybh7aunwasx1aogw0v2h.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={IMGS.sk_17} style={styles.contactIcon} />
<Text style={styles.contactInfo}>Phone: {phone}</Text>
</TouchableOpacity>
<Image source={IMGS.sk_18} 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}>Peteachie Additional Symptoms</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 ? IMGS.sk_20 : IMGS.sk_19}
/>
</TouchableOpacity>
)}
</TouchableOpacity>
</View>
<View style={styles.qrCodeBox}>
<Image
source={IMGS.sk_21} // 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/YvUbylNcouA?si=Z_WCARLlZd37Xll1')}>
<Image
source={IMGS.sk_22}
style={styles.buttonIcon}
/>
<Text style={styles.orButtonText}>Click here to view video</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.orButton}
onPress={() => Linking.openURL('https://www.tiktok.com/@aribrownmd/video/7195031819681598763')}>
<Image
source={IMGS.sk_22}
style={styles.buttonIcon}
/>
<Text style={styles.orButtonText}>Click here to view video</Text>
</TouchableOpacity>
</View>
<View style={styles.qrCodeBox}>
<Image
source={IMGS.sk_23} // 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="Not sure ? Diagnose again"
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 Additionalinformation2;
\ No newline at end of file
src/screens/home/skin/skininformation5.js 0 → 100644
View file @ c53b5595
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 Additionalinformation3 = ({ 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/v1716106405/AI/kigbpys5roel90rymer4.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={IMGS.sk_17} style={styles.contactIcon} />
<Text style={styles.contactInfo}>Phone: {phone}</Text>
</TouchableOpacity>
<Image source={IMGS.sk_18} 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}>Melanoma 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 ? IMGS.sk_20 : IMGS.sk_19}
/>
</TouchableOpacity>
)}
</TouchableOpacity>
</View>
<View style={styles.qrCodeBox}>
<Image
source={IMGS.sk_21} // 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/njOyPv5o1sU?si=n8noO97Qw4Oi7tX9')}>
<Image
source={IMGS.sk_22}
style={styles.buttonIcon}
/>
<Text style={styles.orButtonText}>Click here to view video</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.orButton}
onPress={() => Linking.openURL('https://youtu.be/VKccqnKRDUI?si=dqgrE3D8VwY-pvLZ')}>
<Image
source={IMGS.sk_22}
style={styles.buttonIcon}
/>
<Text style={styles.orButtonText}>Click here to view video</Text>
</TouchableOpacity>
</View>
<View style={styles.qrCodeBox}>
<Image
source={IMGS.sk_23} // 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="Not sure ? Diagnose again"
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 Additionalinformation3;
\ No newline at end of file
src/screens/home/skin/skininformation6.js 0 → 100644
View file @ c53b5595
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 Additionalinformation6 = ({ 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/v1716106375/AI/yfek3kaihgrplcrq3fcp.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={IMGS.sk_17} style={styles.contactIcon} />
<Text style={styles.contactInfo}>Phone: {phone}</Text>
</TouchableOpacity>
<Image source={IMGS.sk_18} 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}>PUPP 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 ? IMGS.sk_20 : IMGS.sk_19}
/>
</TouchableOpacity>
)}
</TouchableOpacity>
</View>
<View style={styles.qrCodeBox}>
<Image
source={IMGS.sk_21} // 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/fglGCbIFb-Y?si=JdirOFhCzhfKAYY6')}>
<Image
source={IMGS.sk_22}
style={styles.buttonIcon}
/>
<Text style={styles.orButtonText}>Click here to view video</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.orButton}
onPress={() => Linking.openURL('https://youtu.be/qT4YLpO2ykc?si=iuM4FHPav4lmvEhc')}>
<Image
source={IMGS.sk_22}
style={styles.buttonIcon}
/>
<Text style={styles.orButtonText}>Click here to view video</Text>
</TouchableOpacity>
</View>
<View style={styles.qrCodeBox}>
<Image
source={IMGS.sk_23} // 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="Not sure ? Diagnose again"
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 Additionalinformation6;
\ No newline at end of file
src/screens/home/skin/skininfromation3.js 0 → 100644
View file @ c53b5595
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 Additionalinformation4 = ({ 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/v1716106409/AI/aclrqfoy8i9jz2g6hxr9.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={IMGS.sk_17} style={styles.contactIcon} />
<Text style={styles.contactInfo}>Phone: {phone}</Text>
</TouchableOpacity>
<Image source={IMGS.sk_18} 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}>Cytomegalovirus Additional Symptoms</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 ? IMGS.sk_20 : IMGS.sk_19}
/>
</TouchableOpacity>
)}
</TouchableOpacity>
</View>
<View style={styles.qrCodeBox}>
<Image
source={IMGS.sk_21} // 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/AX6SKcxAfDM?si=-zSxxB9xjcR0kppY')}>
<Image
source={IMGS.sk_22}
style={styles.buttonIcon}
/>
<Text style={styles.orButtonText}>Click here to view video</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.orButton}
onPress={() => Linking.openURL('https://youtu.be/9H1z6j20x2M?si=z4Nza02ANNNAIOCa')}>
<Image
source={IMGS.sk_22}
style={styles.buttonIcon}
/>
<Text style={styles.orButtonText}>Click here to view video</Text>
</TouchableOpacity>
</View>
<View style={styles.qrCodeBox}>
<Image
source={IMGS.sk_23} // 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="Not sure ? Diagnose again"
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 Additionalinformation4;
\ No newline at end of file
src/screens/home/skin/skininfromation4.js 0 → 100644
View file @ c53b5595
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 Additionalinformation5 = ({ 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/v1716106396/AI/spmoo9gqur4uaieu8yvl.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={IMGS.sk_17} style={styles.contactIcon} />
<Text style={styles.contactInfo}>Phone: {phone}</Text>
</TouchableOpacity>
<Image source={IMGS.sk_18} 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}>Herpes 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 ? IMGS.sk_20 : IMGS.sk_19}
/>
</TouchableOpacity>
)}
</TouchableOpacity>
</View>
<View style={styles.qrCodeBox}>
<Image
source={IMGS.sk_21} // 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/xmSHS3Dt09g?si=9vkNkGyQea-B8oUZ')}>
<Image
source={IMGS.sk_22}
style={styles.buttonIcon}
/>
<Text style={styles.orButtonText}>Click here to view video</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.orButton}
onPress={() => Linking.openURL('https://youtu.be/TrIAIutjUKY?si=fHgt48PfNcBEQvuH')}>
<Image
source={IMGS.sk_22}
style={styles.buttonIcon}
/>
<Text style={styles.orButtonText}>Click here to view video</Text>
</TouchableOpacity>
</View>
<View style={styles.qrCodeBox}>
<Image
source={IMGS.sk_23} // 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="Not sure ? Diagnose again"
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 Additionalinformation5;
\ No newline at end of file
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