Skip to content

E
EmidWife-New
Commit 3a00ea97 authored by Isura Eranda's avatar Isura Eranda
Browse files
Options

Merge branch 'final-app' of http://gitlab.sliit.lk/2023-24-005/emidwife-new into final-app

parents de015c32 fff5249d
Expand all Show whitespace changes
Inline Side-by-side
Showing with 10576 additions and 12390 deletions
package-lock.json
View file @ 3a00ea97
......@@ -28,6 +28,7 @@
"react-native-circular-progress": "^1.4.0",
"react-native-circular-progress-indicator": "^4.4.2",
"react-native-gesture-handler": "^2.16.2",
"react-native-gifted-chat": "^2.4.0",
"react-native-linear-gradient": "^2.8.3",
"react-native-progress-circle-gradient": "^1.2.1",
"react-native-safe-area-context": "^4.10.1",
......@@ -4330,6 +4331,18 @@
"graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
}
},
"node_modules/@expo/react-native-action-sheet": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/@expo/react-native-action-sheet/-/react-native-action-sheet-4.0.1.tgz",
"integrity": "sha512-FwCFpjpB6yzrK8CIWssLlh/i6zQFytFBiJfNdz0mJ2ckU4hWk8SrjB37P0Q4kF7w0bnIdYzPgRbdPR9hnfFqPw==",
"dependencies": {
"@types/hoist-non-react-statics": "^3.3.1",
"hoist-non-react-statics": "^3.3.0"
},
"peerDependencies": {
"react": ">=16.3.0"
}
},
"node_modules/@hapi/hoek": {
"version": "9.3.0",
"resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
......@@ -21167,6 +21180,11 @@
"react-native-svg": ">=12.1.1"
}
},
"node_modules/react-native-communications": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/react-native-communications/-/react-native-communications-2.2.1.tgz",
"integrity": "sha512-5+C0X9mopI0+qxyQHzOPEi5v5rxNBQjxydPPiKMQSlX1RBIcJ8uTcqUPssQ9Mo8p6c1IKIWJUSqCj4jAmD0qVQ=="
},
"node_modules/react-native-gesture-handler": {
"version": "2.16.2",
"resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.16.2.tgz",
......@@ -21183,6 +21201,42 @@
"react-native": "*"
}
},
"node_modules/react-native-gifted-chat": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/react-native-gifted-chat/-/react-native-gifted-chat-2.4.0.tgz",
"integrity": "sha512-dTpSMH8T4s16dM75oLXiDawpXoVSnApJZY9TWf0jYSRShw++0knnp38hO857zOrt6XhqJKm0JntT0pywYI3rYg==",
"dependencies": {
"@expo/react-native-action-sheet": "4.0.1",
"dayjs": "1.8.26",
"prop-types": "15.7.2",
"react-native-communications": "2.2.1",
"react-native-iphone-x-helper": "1.3.1",
"react-native-lightbox-v2": "0.9.0",
"react-native-parsed-text": "0.0.22",
"react-native-typing-animation": "0.1.7",
"use-memo-one": "1.1.3",
"uuid": "3.4.0"
},
"peerDependencies": {
"react": "*",
"react-native": "*"
}
},
"node_modules/react-native-gifted-chat/node_modules/dayjs": {
"version": "1.8.26",
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.8.26.tgz",
"integrity": "sha512-KqtAuIfdNfZR5sJY1Dixr2Is4ZvcCqhb0dZpCOt5dGEFiMzoIbjkTSzUb4QKTCsP+WNpGwUjAFIZrnZvUxxkhw=="
},
"node_modules/react-native-gifted-chat/node_modules/prop-types": {
"version": "15.7.2",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
"integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
"dependencies": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
"react-is": "^16.8.1"
}
},
"node_modules/react-native-image-picker": {
"version": "7.1.2",
"resolved": "https://registry.npmjs.org/react-native-image-picker/-/react-native-image-picker-7.1.2.tgz",
......@@ -21205,6 +21259,23 @@
"asyncstorage-down": ">=3.0.0 <5.0.0"
}
},
"node_modules/react-native-iphone-x-helper": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz",
"integrity": "sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==",
"peerDependencies": {
"react-native": ">=0.42.0"
}
},
"node_modules/react-native-lightbox-v2": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/react-native-lightbox-v2/-/react-native-lightbox-v2-0.9.0.tgz",
"integrity": "sha512-Fc5VFHFj2vokS+OegyTsANKb1CYoUlOtAv+EBH5wtpJn1b5cey6jVXH7136G5+8OC9JmKWSgKHc5thFwOoZTUg==",
"peerDependencies": {
"react": ">=16.8.0",
"react-native": ">=0.61.0"
}
},
"node_modules/react-native-linear-gradient": {
"version": "2.8.3",
"resolved": "https://registry.npmjs.org/react-native-linear-gradient/-/react-native-linear-gradient-2.8.3.tgz",
......@@ -21219,6 +21290,18 @@
"resolved": "https://registry.npmjs.org/react-native-os/-/react-native-os-1.2.6.tgz",
"integrity": "sha512-OlT+xQAcvkcnf7imgXiu+myMkqDt4xw2bP5SlVo19hEn5XHBkPMLX7dk3sSGxxncH/ToMDsf1KLyrPabNVtadA=="
},
"node_modules/react-native-parsed-text": {
"version": "0.0.22",
"resolved": "https://registry.npmjs.org/react-native-parsed-text/-/react-native-parsed-text-0.0.22.tgz",
"integrity": "sha512-hfD83RDXZf9Fvth3DowR7j65fMnlqM9PpxZBGWkzVcUTFtqe6/yPcIoIAgrJbKn6YmtzkivmhWE2MCE4JKBXrQ==",
"dependencies": {
"prop-types": "^15.7.x"
},
"peerDependencies": {
"react": "*",
"react-native": "*"
}
},
"node_modules/react-native-progress-circle-gradient": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/react-native-progress-circle-gradient/-/react-native-progress-circle-gradient-1.2.1.tgz",
......@@ -21256,6 +21339,27 @@
"react-native": "*"
}
},
"node_modules/react-native-reanimated": {
"version": "3.11.0",
"resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.11.0.tgz",
"integrity": "sha512-BNw/XDgUfs8UhfY1X6IniU8kWpnotWGyt8qmQviaHisTi5lvwnaOdXQKfN1KGONx6ekdFRHRP5EFwLi0UajwKA==",
"peer": true,
"dependencies": {
"@babel/plugin-transform-arrow-functions": "^7.0.0-0",
"@babel/plugin-transform-nullish-coalescing-operator": "^7.0.0-0",
"@babel/plugin-transform-optional-chaining": "^7.0.0-0",
"@babel/plugin-transform-shorthand-properties": "^7.0.0-0",
"@babel/plugin-transform-template-literals": "^7.0.0-0",
"@babel/preset-typescript": "^7.16.7",
"convert-source-map": "^2.0.0",
"invariant": "^2.2.4"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0",
"react": "*",
"react-native": "*"
}
},
"node_modules/react-native-redash": {
"version": "18.1.3",
"resolved": "https://registry.npmjs.org/react-native-redash/-/react-native-redash-18.1.3.tgz",
......@@ -21414,6 +21518,16 @@
"react-native": "*"
}
},
"node_modules/react-native-typing-animation": {
"version": "0.1.7",
"resolved": "https://registry.npmjs.org/react-native-typing-animation/-/react-native-typing-animation-0.1.7.tgz",
"integrity": "sha512-4H3rF9M+I2yAZpYJcY0Mb29TXkn98QK12rrKSY6LZj1BQD9NNmRZuNXzwX4XHapsIz+N/J8M3p27FOQPbfzqeg==",
"peerDependencies": {
"prop-types": "*",
"react": "*",
"react-native": "*"
}
},
"node_modules/react-native-vector-icons": {
"version": "10.1.0",
"resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-10.1.0.tgz",
......@@ -24189,6 +24303,14 @@
"inherits": "2.0.3"
}
},
"node_modules/use-memo-one": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.3.tgz",
"integrity": "sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==",
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
......@@ -24221,6 +24343,15 @@
"uuid": "bin/uuid"
}
},
"node_modules/uuid": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
"deprecated": "Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.",
"bin": {
"uuid": "bin/uuid"
}
},
"node_modules/v8-to-istanbul": {
"version": "9.2.0",
"resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.2.0.tgz",
......
src/assets/sk_2.png
View replaced file @ de015c32 View file @ 3a00ea97
src/assets/sk_2.png

41.6 KB | W: | H:

src/assets/sk_2.png

1.25 KB | W: | H:

src/assets/sk_2.png
src/assets/sk_2.png
src/assets/sk_2.png
src/assets/sk_2.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/sk_3.png
View replaced file @ de015c32 View file @ 3a00ea97
src/assets/sk_3.png

58.9 KB | W: | H:

src/assets/sk_3.png

1.13 KB | W: | H:

src/assets/sk_3.png
src/assets/sk_3.png
src/assets/sk_3.png
src/assets/sk_3.png
  • 2-up
  • Swipe
  • Onion skin
src/components/HeaderWithBackNav.js 0 → 100644
View file @ 3a00ea97
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import React from 'react';
import Icon from 'react-native-vector-icons/Ionicons';
import { useNavigation, NavigationProp } from '@react-navigation/native';
const HeaderWithBackArrow = ({ title, screenName }) => {
const navigation = useNavigation();
return (
<View style={styles.header}>
<TouchableOpacity onPress={() => navigation.navigate(screenName)} style={styles.closeButton}>
<Icon name="pulse-sharp" size={22} color={black} />
</TouchableOpacity>
<Text style={styles.headerTitle}>{title}</Text>
</View>
);
};
const styles = StyleSheet.create({
header: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center', // Keeps the title centered
padding: 16,
borderBottomWidth: 1,
borderBottomColor: '#c4c4c4',
position: 'relative', // Allows absolute positioning for children
},
headerTitle: {
fontSize: 16,
color: 'black',
},
closeButton: {
position: 'absolute', // Positions the arrow independently of the flex layout
left: 0, // Aligns the arrow to the left
padding: 16, // Optional: increases the touchable area
},
});
export default HeaderWithBackArrow;
\ No newline at end of file
src/constants/imgs.js
View file @ 3a00ea97
......@@ -76,4 +76,20 @@ export default {
home_emotional_support: require('../assets/virtual-assistant.png'),
home_skin: require('../assets/home_skin.png'),
logo: require('../assets/foreground.png'),
sk_17: require('../assets/sk_17.png'),
sk_18: require('../assets/sk_18.png'),
sk_19: require('../assets/sk_19.png'),
sk_20: require('../assets/sk_20.png'),
sk_21: require('../assets/sk_21.png'),
sk_22: require('../assets/sk_22.png'),
sk_23: require('../assets/sk_23.jpg'),
sk_24: require('../assets/sk_24.jpg'),
sk_25: require('../assets/sk_25.png'),
sk_26: require('../assets/sk_26.png'),
sk_27: require('../assets/sk_27.png'),
sk_28: require('../assets/sk_28.png'),
sk_29: require('../assets/sk_29.png'),
sk_30: require('../assets/sk_30.png'),
sk_31: require('../assets/sk_31.png'),
sk_32: require('../assets/sk_32.png'),
};
src/constants/routes.js
View file @ 3a00ea97
......@@ -34,7 +34,7 @@ export default {
SKIN_VIDEO3: 'Skin_Video3',
SKIN_VIDEO4: 'Skin_Video4',
SKIN_VIDEO5: 'Skin_Video5',
SKIN_INFO: 'skin_info',
//GAMES
GAME_WELCOME: 'Game_Welcome',
......@@ -80,8 +80,18 @@ export default {
Game02ProgressLevel05: 'Game02ProgressLevel05',
Game02ProgressLevel06: 'Game02ProgressLevel06',
MentalWellBeingTypes: 'MentalWellBeingTypes',
CHAT_HOME: 'chat_home',
CHAT_SCREEN: 'chat_screen',
Game02ProgressLevel10: 'Game02ProgressLevel10',
Game02ProgressLevel09: 'Game02ProgressLevel09',
Game02ProgressLevel08: 'Game02ProgressLevel08',
Game02ProgressLevel07: 'Game02ProgressLevel07',
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/BottomTabNavigator.js
View file @ 3a00ea97
import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from '../screens/home/Home';
import Settings from '../screens/home/Settings';
import WelcomeExercise from '../screens/home/exercise/WelcomeExercise';
// import { Home, Wallet, Settings, WelcomeExercise} from '../screens';
import ExerciseNavigator from './ExerciseNavigator'
import SkinNavigator from './SkinNavigator';
import {COLORS, ROUTES} from '../constants';
import { COLORS, ROUTES } from '../constants';
import Icon from 'react-native-vector-icons/Ionicons';
import {StyleSheet} from 'react-native';
import { StyleSheet } from 'react-native';
import CustomTabBarButton from '../components/CustomTabBarButton';
import CustomTabBar from '../components/CustomTabBar';
import Logo from '../assets/icons/fitness1.svg';
import Logo1 from '../assets/icons/fitness2.svg';
import GameNavigator from './GameNavigator';
import AuthNavigator from './AuthNavigator';
import ChatBotNavigation from './ChatBotNavigator';
const Tab = createBottomTabNavigator();
function BottomTabNavigator() {
......@@ -22,14 +24,14 @@ function BottomTabNavigator() {
// <KeyboardAvoidingView>
<Tab.Navigator
tabBar={props => <CustomTabBar {...props} />}
screenOptions={({route}) => ({
screenOptions={({ route }) => ({
tabBarHideOnKeyboard: true,
headerShown: false,
tabBarStyle: styles.tabBarStyle,
tabBarInactiveTintColor: COLORS.dark,
tabBarActiveTintColor: COLORS.primary,
tabBarShowLabel: false,
tabBarIcon: ({color, size, focused}) => {
tabBarIcon: ({ color, size, focused }) => {
if (route.name === ROUTES.HOME_TAB) {
return focused ? (
<Icon name="home-sharp" size={22} color={color} />
......@@ -50,15 +52,15 @@ function BottomTabNavigator() {
);
} else if (route.name === ROUTES.GAME_WELCOME) {
return focused ? (
<Icon name="game-controller-sharp" size={22} color={color}/>
<Icon name="game-controller-sharp" size={22} color={color} />
) : (
<Icon name="game-controller-outline" size={22} color={color}/>
<Icon name="game-controller-outline" size={22} color={color} />
);
} else if (route.name === ROUTES.LOGIN) {
} else if (route.name === ROUTES.CHAT_HOME) {
return focused ? (
<Icon name="person-circle-sharp" size={22} color={color} />
<Icon name="chatbubble-ellipses-sharp" size={22} color={color} />
) : (
<Icon name="person-circle-outline" size={22} color={color} />
<Icon name="chatbubble-ellipses-outline" size={22} color={color} />
);
}
},
......@@ -99,8 +101,8 @@ function BottomTabNavigator() {
headerBackTitleVisible: false,
tabBarButton: props => <CustomTabBarButton {...props} />,
}}
name={ROUTES.LOGIN}
component={AuthNavigator}
name={ROUTES.CHAT_HOME}
component={ChatBotNavigation}
/>
</Tab.Navigator>
// </KeyboardAvoidingView>
......
src/navigations/ChatBotNavigator.js 0 → 100644
View file @ 3a00ea97
import { View, Text } from 'react-native'
import React from 'react'
import HomeScreen from '../screens/home/chat/ChatbotHome';
import { createStackNavigator } from '@react-navigation/stack';
import ChatScreen from '../screens/home/chat/ChatScreen';
import { COLORS, ROUTES } from "../constants";
const Stack = createStackNavigator();
export default function ChatBotNavigation() {
return (
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name={ROUTES.CHAT_HOME} component={HomeScreen} />
<Stack.Screen name={ROUTES.CHAT_SCREEN} component={ChatScreen} />
</Stack.Navigator>
)
}
\ No newline at end of file
src/navigations/SkinNavigator.js
View file @ 3a00ea97
......@@ -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/Home.js
View file @ 3a00ea97
......@@ -32,7 +32,7 @@ const Home = ({navigation}) => {
name: 'Get Emotional Support',
image: IMGS.home_emotional_support,
backgroundColor: COLORS.main_blue,
navigateTo: ROUTES.HOME,
navigateTo: ROUTES.CHAT_HOME,
},
];
return (
......
src/screens/home/chat/ChatScreen.js 0 → 100644
View file @ 3a00ea97
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
import React, { useState, useEffect, useCallback } from 'react';
import { GiftedChat, Bubble } from 'react-native-gifted-chat';
import { useRoute, useNavigation } from '@react-navigation/native';
import { ChatbotService } from '../../../services/chat/bardaiapi';
import HeaderWithBackArrow from '../../../components/HeaderWithBackNav';
import Icon from 'react-native-vector-icons/Ionicons';
export default function ChatScreen() {
const param = useRoute().params;
const navigation = useNavigation(); // Added this to use navigation
const [messages, setMessages] = useState([]);
const [selectedChatFace, setSelectedChatFace] = useState([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
setSelectedChatFace(param.selectedChatFaceData);
setMessages([
{
_id: 1,
text: 'Hello I am ' + param.selectedChatFaceData?.name + ', how can I help you?',
createdAt: new Date(),
user: {
_id: 2,
name: 'React Native',
avatar: param.selectedChatFaceData?.image,
},
},
]);
}, []);
const onSend = useCallback((messages = []) => {
setMessages(previousMessages => GiftedChat.append(previousMessages, messages));
setLoading(true);
if (messages[0].text) {
chatResponseapi(messages[0].text);
}
}, []);
const chatResponseapi = async (msg) => {
const data = {
userId: 1223,
message: msg
};
let response = await ChatbotService(data);
if (response.reply.success) {
const ChatApiResponse = {
_id: Math.random() * (9999999 - 1),
text: response.reply.message,
createdAt: new Date(),
user: {
_id: 2,
name: 'React Native',
avatar: param.selectedChatFaceData?.image,
},
};
setMessages(previousMessages => GiftedChat.append(previousMessages, ChatApiResponse));
setLoading(false);
} else {
setLoading(false);
const ChatApiResponse = {
_id: Math.random() * (9999999 - 1),
text: 'Sorry! Something went wrong. Try again.',
createdAt: new Date(),
system: true,
user: {
_id: 2,
name: 'React Native',
avatar: param.selectedChatFaceData?.image,
},
};
setMessages(previousMessages => GiftedChat.append(previousMessages, ChatApiResponse));
}
};
const renderBubble = (props) => {
return (
<Bubble
{...props}
wrapperStyle={{
right: {
backgroundColor: 'red',
},
left: {
backgroundColor: 'green',
},
}}
/>
);
};
return (
<View style={styles.container}>
<View style={styles.header}>
<TouchableOpacity onPress={() => navigation.goBack()} style={styles.closeButton}>
<Icon name="arrow-back" size={22} color="black" />
</TouchableOpacity>
<Image source={{ uri: selectedChatFace.image }} style={styles.avatar} />
<Text style={styles.headerTitle}>{selectedChatFace.name}</Text>
</View>
<GiftedChat
messages={messages}
onSend={messages => onSend(messages)}
isTyping={loading}
user={{
_id: 1,
}}
minInputToolbarHeight={60} // Adjust if needed
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginBottom: 60, // Ensure this matches the height of your bottom navigation bar
},
header: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
padding: 16,
borderBottomWidth: 1,
borderBottomColor: '#000',
position: 'relative',
},
headerTitle: {
fontSize: 16,
color: 'black',
marginLeft: 16,
fontWeight: '500'
},
closeButton: {
position: 'absolute',
left: 16,
padding: 16,
},
avatar: {
width: 30,
height: 30,
borderRadius: 15,
},
});
\ No newline at end of file
src/screens/home/chat/ChatbotHome.js 0 → 100644
View file @ 3a00ea97
import { View, Text, SafeAreaView, Image, FlatList, TouchableOpacity, Dimensions } from 'react-native'
import React, { useEffect, useState } from 'react'
import ChatFaceData from '../../../services/chat/ChatFaceData'
import { ROUTES } from '../../../constants'
const ChatFaceDataArray = [
{
id: 1,
name: 'Noyi',
image: 'https://res.cloudinary.com/dknvsbuyy/image/upload/v1685678135/chat_1_c7eda483e3.png',
primary: '#FFC107',
secondary: ''
},
{
id: 2,
name: 'Pogu',
image: 'https://res.cloudinary.com/dknvsbuyy/image/upload/v1685709886/image_21_2e18bb4a61.png',
primary: '#E53057',
secondary: ''
},
{
id: 3,
name: 'Nista',
image: 'https://res.cloudinary.com/dknvsbuyy/image/upload/v1685709886/image_22_409561b953.png',
primary: '#3B96D2',
secondary: ''
},
{
id: 4,
name: 'Estor',
image: 'https://res.cloudinary.com/dknvsbuyy/image/upload/v1685709886/image_18_893d24cebc.png',
primary: '#37474F',
secondary: ''
},
{
id: 5,
name: 'Pega',
image: 'https://res.cloudinary.com/dknvsbuyy/image/upload/v1685709886/image_23_211d7370cb.png',
primary: '#2473FE',
secondary: ''
},
]
export default function HomeScreen(props) {
const { navigation } = props;
const [chatFaceData, setChatFaceData] = useState(ChatFaceDataArray)
const [selectedChatFaceData, setSelecetedChatFaceData] = useState({
id: 1,
name: 'Noyi',
image: 'https://res.cloudinary.com/dknvsbuyy/image/upload/v1685678135/chat_1_c7eda483e3.png',
primary: '#FFC107',
secondary: ''
})
useEffect(() => {
console.log(">>>", ChatFaceData[0])
if (ChatFaceData) {
// setChatFaceData(ChatFaceData)
// setSelecetedChatFaceData(ChatFaceData[0])
}
}, [ChatFaceData[0]])
const onChatFacePress = (id) => {
setSelecetedChatFaceData(ChatFaceData[id - 1])
}
return (
<View style={{ alignItems: 'center', paddingTop: 90 }}>
{/* <Text style={{ color: selectedChatFaceData?.primary, fontSize: 30 }}>Hello</Text> */}
{/* <Text style={{ color: selectedChatFaceData?.primary, fontSize: 30, fontWeight: 'bold', textAlign: 'center' }} >Welcome to e-midwife Chatbot</Text> */}
<Text style={{ marginTop: 30, fontSize: 25 }} >Hi I am </Text>
<Text style={{ color: selectedChatFaceData?.primary, fontSize: 30, fontWeight: 'bold' }} >{selectedChatFaceData ? selectedChatFaceData?.name : 'nu'}</Text>
<Image source={{ uri: selectedChatFaceData ? selectedChatFaceData.image : 'https://i.ibb.co/CV9bpCQ/chatbot-3d-render-icon-illustration-png.png' }} style={{ width: 150, height: 150, marginTop: 10 }} />
<Text style={{ marginTop: 30, fontSize: 25 }} >How can i help you ?</Text>
<View style={{ marginTop: 20, backgroundColor: '#F5F5F5', alignItems: 'center', height: 110, padding: 10, borderRadius: 10 }}>
<FlatList
data={chatFaceData}
horizontal={true}
renderItem={({ item }) => selectedChatFaceData.id != item.id && (
<TouchableOpacity style={{ margin: 15 }} onPress={() => onChatFacePress(item.id)}>
<Image source={{ uri: item.image }} style={{ width: 40, height: 40 }} />
</TouchableOpacity>
)}
/>
<Text style={{ marginTop: 5, fontSize: 17, color: '#B0B0B0' }}>Choose Your Fav ChatBuddy</Text>
</View>
{console.log(ROUTES.CHAT_SCREEN)}
<TouchableOpacity style={[{ backgroundColor: selectedChatFaceData.primary }
, {
marginTop: 40, padding: 17, width: Dimensions.get('screen').width * 0.6,
borderRadius: 100, alignItems: 'center'
}]}
onPress={() => navigation.navigate(ROUTES.CHAT_SCREEN, { selectedChatFaceData: selectedChatFaceData })}
>
<Text style={{ fontSize: 16, color: '#fff' }}>Let's Chat</Text>
</TouchableOpacity>
</View>
)
}
\ No newline at end of file
src/screens/home/skin/AdditionalSymptoms.js
View file @ 3a00ea97
......@@ -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);
}
......@@ -122,6 +122,35 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
<ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
<View style={styles.topContainer}>
<Text style={styles.topicText}>Discoid Additional Symptoms </Text>
<View style={styles.qrCodeBox1}>
<Image
source={IMGS.sk_24} // Make sure the path is correct
style={styles.qrCodeImage1}
/>
<Text style={styles.dscriptionText1}>
මෙම පිටුවේ පහළ දක්වා ඇති රෝග ලක්ෂණ ඔබට තිබේදැයි පරික්ෂා කරන්න. ඒ සඳහා වීඩියෝවක් ලබා දී ඇත.
වීඩියෝව පැහැදිලි නොවේ නම්, පහත QR කේතය ස්කෑන් කර හෝ බොත්තම ක්ලික් කිරීමෙන් මෙම රෝග ලක්ෂණ සහිත 3D කාන්තාව නිරීක්ෂණය කරන්න.
</Text>
<Text style={styles.dscriptionText1}>
Check if you have the symptoms listed below. Watch the video for guidance.
If the video is unclear, scan the QR code or click the button to view a 3D model of a woman displaying these symptoms.
</Text>
</View>
<Image source={IMGS.sk_25}
style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -45 ,marginTop:-24}} />
<View style={styles.qrCodeBox}>
<Image
source={IMGS.sk_26} // Make sure the path is correct
style={styles.qrCodeImage1}
/>
<TouchableOpacity
style={styles.orButton}
onPress={() => Linking.openURL('https://mywebar.com/p/Project_0_ysb0ffrwxn')}>
<Text style={styles.orButtonText}>OR Click This</Text>
</TouchableOpacity>
</View>
<View style={styles.videoBox}>
<View style={styles.videoDescriptionBox}>
<Text style={styles.descriptionText}>
......@@ -142,26 +171,14 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
<TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
<Image
style={styles.playPauseIcon}
source={videoPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')}
source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
/>
</TouchableOpacity>
)}
</TouchableOpacity>
</View>
<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}
/>
<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>
<Text style={styles.checkboxLabel}>Check the symptom that you have </Text>
<Text style={styles.checkboxLabel}>ඔබට ඇති රෝග ලක්ෂණය ඇතුල් කරන්න </Text>
<View style={styles.checkboxContainer}>
{symptomsGroups.map((group, index) => (
<View key={index}>
......@@ -183,7 +200,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
</View>
<Button
title="Continue for more information"
title="Evaluate the risk level"
style={styles.nextButton}
onPress={handleSubmit}
/>
......@@ -210,7 +227,6 @@ const styles = StyleSheet.create({
backgroundColor: COLORS.white,
// This creates the curve effect for the background
},
topicText: {
fontSize: 24,
fontWeight: 'bold',
......@@ -248,8 +264,8 @@ const styles = StyleSheet.create({
},
checkboxLabel: {
fontSize: 18,
fontWeight: 'bold',
fontSize: 16,
marginBottom: 10,
alignSelf: 'center',
color:COLORS.black,
......@@ -335,7 +351,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: 40, // 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)
......@@ -375,7 +391,7 @@ const styles = StyleSheet.create({
alignItems: 'center',
padding: 20,
backgroundColor: COLORS.white,
marginBottom: 20,
marginBottom: 40,
shadowColor: "#000",
borderColor: '#80BCBD',
borderWidth: 2,
......@@ -387,6 +403,7 @@ const styles = StyleSheet.create({
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
marginTop:16
},
qrCodeImage: {
width: 200, // Adjust size as needed
......@@ -404,6 +421,38 @@ const styles = StyleSheet.create({
color: COLORS.white,
fontSize: 14,
fontWeight: 'bold',
},
qrCodeBox1: {
width: '95%',
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:10
},
qrCodeImage1:{
width: 210, // Adjust size as needed
height: 170,
},
dscriptionText1: {
fontSize: 14,
textAlign: 'center',
color: COLORS.darkGray,
marginTop: 20,
marginBottom: 20,
}
......@@ -411,4 +460,4 @@ const styles = StyleSheet.create({
// ... possibly other styles
});
export default AdditionalSymptomsScreen;
export default AdditionalSymptomsScreen2;
src/screens/home/skin/AdditionalSymptoms1.js
View file @ 3a00ea97
......@@ -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);
}
};
......@@ -115,7 +115,36 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
<View style={styles.topContainer}>
<Text style={styles.topicText}>Patechiae Additional Symptoms</Text>
<Text style={styles.topicText}>Peteachie Additional Symptoms </Text>
<View style={styles.qrCodeBox1}>
<Image
source={IMGS.sk_24} // Make sure the path is correct
style={styles.qrCodeImage1}
/>
<Text style={styles.dscriptionText1}>
මෙම පිටුවේ පහළ දක්වා ඇති රෝග ලක්ෂණ ඔබට තිබේදැයි පරික්ෂා කරන්න. ඒ සඳහා වීඩියෝවක් ලබා දී ඇත.
වීඩියෝව පැහැදිලි නොවේ නම්, පහත QR කේතය ස්කෑන් කර හෝ බොත්තම ක්ලික් කිරීමෙන් මෙම රෝග ලක්ෂණ සහිත 3D කාන්තාව නිරීක්ෂණය කරන්න.
</Text>
<Text style={styles.dscriptionText1}>
Check if you have the symptoms listed below. Watch the video for guidance.
If the video is unclear, scan the QR code or click the button to view a 3D model of a woman displaying these symptoms.
</Text>
</View>
<Image source={IMGS.sk_25}
style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -45 ,marginTop:-24}} />
<View style={styles.qrCodeBox}>
<Image
source={IMGS.sk_27} // Make sure the path is correct
style={styles.qrCodeImage1}
/>
<TouchableOpacity
style={styles.orButton}
onPress={() => Linking.openURL('https://mywebar.com/p/Project_1_kashsimytd')}>
<Text style={styles.orButtonText}>OR Click This</Text>
</TouchableOpacity>
</View>
<View style={styles.videoBox}>
<View style={styles.videoDescriptionBox}>
<Text style={styles.descriptionText}>
......@@ -136,26 +165,14 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
<TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
<Image
style={styles.playPauseIcon}
source={videoPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')}
source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
/>
</TouchableOpacity>
)}
</TouchableOpacity>
</View>
<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}
/>
<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>
<Text style={styles.checkboxLabel}>Check the symptom that you have </Text>
<Text style={styles.checkboxLabel}>ඔබට ඇති රෝග ලක්ෂණය ඇතුල් කරන්න </Text>
<View style={styles.checkboxContainer}>
{symptomsGroups.map((group, index) => (
<View key={index}>
......@@ -177,17 +194,17 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
</View>
<Button
title="Continue for more information"
title="Evaluate the risk level"
style={styles.nextButton}
onPress={handleSubmit}
/>
</ScrollView>
</SafeAreaView>
);
};
};
const styles = StyleSheet.create({
const styles = StyleSheet.create({
scrollContainer: {
flexGrow: 1,
},
......@@ -204,7 +221,6 @@ const styles = StyleSheet.create({
backgroundColor: COLORS.white,
// This creates the curve effect for the background
},
topicText: {
fontSize: 24,
fontWeight: 'bold',
......@@ -217,7 +233,7 @@ const styles = StyleSheet.create({
textAlign: 'center',
marginHorizontal: 20,
marginBottom: 20,
color:COLORS.black,
color:COLORS.white,
fontWeight: 'bold',
},
separator: {
......@@ -242,8 +258,8 @@ const styles = StyleSheet.create({
},
checkboxLabel: {
fontSize: 18,
fontWeight: 'bold',
fontSize: 16,
marginBottom: 10,
alignSelf: 'center',
color:COLORS.black,
......@@ -324,12 +340,12 @@ const styles = StyleSheet.create({
},
videoBox: {
backgroundColor: COLORS.white, // Set background color to white
backgroundColor: '#11324D', // Set background color to white
borderWidth: 2, // Set the border width
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: 40, // 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)
......@@ -369,7 +385,7 @@ const styles = StyleSheet.create({
alignItems: 'center',
padding: 20,
backgroundColor: COLORS.white,
marginBottom: 20,
marginBottom: 40,
shadowColor: "#000",
borderColor: '#80BCBD',
borderWidth: 2,
......@@ -381,6 +397,7 @@ const styles = StyleSheet.create({
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
marginTop:16
},
qrCodeImage: {
width: 200, // Adjust size as needed
......@@ -398,11 +415,44 @@ const styles = StyleSheet.create({
color: COLORS.white,
fontSize: 14,
fontWeight: 'bold',
},
qrCodeBox1: {
width: '95%',
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:10
},
qrCodeImage1:{
width: 210, // Adjust size as needed
height: 170,
},
dscriptionText1: {
fontSize: 14,
textAlign: 'center',
color: COLORS.darkGray,
marginTop: 20,
marginBottom: 20,
}
// ... possibly other styles
});
});
export default AdditionalSymptomsScreen;
export default AdditionalSymptomsScreen1;
src/screens/home/skin/AdditionalSymptoms2.js
View file @ 3a00ea97
......@@ -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);
}
......@@ -111,7 +111,36 @@ 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}>Cytomegalovirus Additional Symptoms </Text>
<View style={styles.qrCodeBox1}>
<Image
source={IMGS.sk_24} // Make sure the path is correct
style={styles.qrCodeImage1}
/>
<Text style={styles.dscriptionText1}>
මෙම පිටුවේ පහළ දක්වා ඇති රෝග ලක්ෂණ ඔබට තිබේදැයි පරික්ෂා කරන්න. ඒ සඳහා වීඩියෝවක් ලබා දී ඇත.
වීඩියෝව පැහැදිලි නොවේ නම්, පහත QR කේතය ස්කෑන් කර හෝ බොත්තම ක්ලික් කිරීමෙන් මෙම රෝග ලක්ෂණ සහිත 3D කාන්තාව නිරීක්ෂණය කරන්න.
</Text>
<Text style={styles.dscriptionText1}>
Check if you have the symptoms listed below. Watch the video for guidance.
If the video is unclear, scan the QR code or click the button to view a 3D model of a woman displaying these symptoms.
</Text>
</View>
<Image source={IMGS.sk_25}
style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -45 ,marginTop:-24}} />
<View style={styles.qrCodeBox}>
<Image
source={IMGS.sk_29} // Make sure the path is correct
style={styles.qrCodeImage1}
/>
<TouchableOpacity
style={styles.orButton}
onPress={() => Linking.openURL('https://mywebar.com/p/Project_3_oq5mkmz3uu')}>
<Text style={styles.orButtonText}>OR Click This</Text>
</TouchableOpacity>
</View>
<View style={styles.videoBox}>
<View style={styles.videoDescriptionBox}>
<Text style={styles.descriptionText}>
......@@ -132,26 +161,14 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
<TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
<Image
style={styles.playPauseIcon}
source={videoPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')}
source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
/>
</TouchableOpacity>
)}
</TouchableOpacity>
</View>
<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}
/>
<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>
<Text style={styles.checkboxLabel}>Check the symptom that you have </Text>
<Text style={styles.checkboxLabel}>ඔබට ඇති රෝග ලක්ෂණය ඇතුල් කරන්න </Text>
<View style={styles.checkboxContainer}>
{symptomsGroups.map((group, index) => (
<View key={index}>
......@@ -173,17 +190,17 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
</View>
<Button
title="Continue for more information"
title="Evaluate the risk level"
style={styles.nextButton}
onPress={handleSubmit}
/>
</ScrollView>
</SafeAreaView>
);
};
};
const styles = StyleSheet.create({
const styles = StyleSheet.create({
scrollContainer: {
flexGrow: 1,
},
......@@ -200,7 +217,6 @@ const styles = StyleSheet.create({
backgroundColor: COLORS.white,
// This creates the curve effect for the background
},
topicText: {
fontSize: 24,
fontWeight: 'bold',
......@@ -213,7 +229,7 @@ const styles = StyleSheet.create({
textAlign: 'center',
marginHorizontal: 20,
marginBottom: 20,
color:COLORS.black,
color:COLORS.white,
fontWeight: 'bold',
},
separator: {
......@@ -238,8 +254,8 @@ const styles = StyleSheet.create({
},
checkboxLabel: {
fontSize: 18,
fontWeight: 'bold',
fontSize: 16,
marginBottom: 10,
alignSelf: 'center',
color:COLORS.black,
......@@ -320,12 +336,12 @@ const styles = StyleSheet.create({
},
videoBox: {
backgroundColor: COLORS.white, // Set background color to white
backgroundColor: '#11324D', // Set background color to white
borderWidth: 2, // Set the border width
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: 40, // 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)
......@@ -365,7 +381,7 @@ const styles = StyleSheet.create({
alignItems: 'center',
padding: 20,
backgroundColor: COLORS.white,
marginBottom: 20,
marginBottom: 40,
shadowColor: "#000",
borderColor: '#80BCBD',
borderWidth: 2,
......@@ -377,6 +393,7 @@ const styles = StyleSheet.create({
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
marginTop:16
},
qrCodeImage: {
width: 200, // Adjust size as needed
......@@ -394,11 +411,44 @@ const styles = StyleSheet.create({
color: COLORS.white,
fontSize: 14,
fontWeight: 'bold',
},
qrCodeBox1: {
width: '95%',
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:10
},
qrCodeImage1:{
width: 210, // Adjust size as needed
height: 170,
},
dscriptionText1: {
fontSize: 14,
textAlign: 'center',
color: COLORS.darkGray,
marginTop: 20,
marginBottom: 20,
}
// ... possibly other styles
});
});
export default AdditionalSymptomsScreen;
export default AdditionalSymptomsScreen3;
src/screens/home/skin/AdditionalSymptoms3.js
View file @ 3a00ea97
......@@ -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);
}
......@@ -106,7 +106,36 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
<View style={styles.topContainer}>
<Text style={styles.topicText}>Herpes Additional Symptoms</Text>
<Text style={styles.topicText}>Herpes Additional Symptoms </Text>
<View style={styles.qrCodeBox1}>
<Image
source={IMGS.sk_24} // Make sure the path is correct
style={styles.qrCodeImage1}
/>
<Text style={styles.dscriptionText1}>
මෙම පිටුවේ පහළ දක්වා ඇති රෝග ලක්ෂණ ඔබට තිබේදැයි පරික්ෂා කරන්න. ඒ සඳහා වීඩියෝවක් ලබා දී ඇත.
වීඩියෝව පැහැදිලි නොවේ නම්, පහත QR කේතය ස්කෑන් කර හෝ බොත්තම ක්ලික් කිරීමෙන් මෙම රෝග ලක්ෂණ සහිත 3D කාන්තාව නිරීක්ෂණය කරන්න.
</Text>
<Text style={styles.dscriptionText1}>
Check if you have the symptoms listed below. Watch the video for guidance.
If the video is unclear, scan the QR code or click the button to view a 3D model of a woman displaying these symptoms.
</Text>
</View>
<Image source={IMGS.sk_25}
style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -45 ,marginTop:-24}} />
<View style={styles.qrCodeBox}>
<Image
source={IMGS.sk_28} // Make sure the path is correct
style={styles.qrCodeImage1}
/>
<TouchableOpacity
style={styles.orButton}
onPress={() => Linking.openURL('https://mywebar.com/p/Project_2_qbealmm517')}>
<Text style={styles.orButtonText}>OR Click This</Text>
</TouchableOpacity>
</View>
<View style={styles.videoBox}>
<View style={styles.videoDescriptionBox}>
<Text style={styles.descriptionText}>
......@@ -127,26 +156,14 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
<TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
<Image
style={styles.playPauseIcon}
source={videoPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')}
source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
/>
</TouchableOpacity>
)}
</TouchableOpacity>
</View>
<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}
/>
<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>
<Text style={styles.checkboxLabel}>Check the symptom that you have </Text>
<Text style={styles.checkboxLabel}>ඔබට ඇති රෝග ලක්ෂණය ඇතුල් කරන්න </Text>
<View style={styles.checkboxContainer}>
{symptomsGroups.map((group, index) => (
<View key={index}>
......@@ -168,17 +185,17 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
</View>
<Button
title="Continue for more information"
title="Evaluate the risk level"
style={styles.nextButton}
onPress={handleSubmit}
/>
</ScrollView>
</SafeAreaView>
);
};
};
const styles = StyleSheet.create({
const styles = StyleSheet.create({
scrollContainer: {
flexGrow: 1,
},
......@@ -195,7 +212,6 @@ const styles = StyleSheet.create({
backgroundColor: COLORS.white,
// This creates the curve effect for the background
},
topicText: {
fontSize: 24,
fontWeight: 'bold',
......@@ -208,7 +224,7 @@ const styles = StyleSheet.create({
textAlign: 'center',
marginHorizontal: 20,
marginBottom: 20,
color:COLORS.black,
color:COLORS.white,
fontWeight: 'bold',
},
separator: {
......@@ -233,8 +249,8 @@ const styles = StyleSheet.create({
},
checkboxLabel: {
fontSize: 18,
fontWeight: 'bold',
fontSize: 16,
marginBottom: 10,
alignSelf: 'center',
color:COLORS.black,
......@@ -315,12 +331,12 @@ const styles = StyleSheet.create({
},
videoBox: {
backgroundColor: COLORS.white, // Set background color to white
backgroundColor: '#11324D', // Set background color to white
borderWidth: 2, // Set the border width
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: 40, // 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)
......@@ -360,7 +376,7 @@ const styles = StyleSheet.create({
alignItems: 'center',
padding: 20,
backgroundColor: COLORS.white,
marginBottom: 20,
marginBottom: 40,
shadowColor: "#000",
borderColor: '#80BCBD',
borderWidth: 2,
......@@ -372,6 +388,7 @@ const styles = StyleSheet.create({
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
marginTop:16
},
qrCodeImage: {
width: 200, // Adjust size as needed
......@@ -389,11 +406,43 @@ const styles = StyleSheet.create({
color: COLORS.white,
fontSize: 14,
fontWeight: 'bold',
},
qrCodeBox1: {
width: '95%',
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:10
},
qrCodeImage1:{
width: 210, // Adjust size as needed
height: 170,
},
dscriptionText1: {
fontSize: 14,
textAlign: 'center',
color: COLORS.darkGray,
marginTop: 20,
marginBottom: 20,
}
// ... possibly other styles
});
});
export default AdditionalSymptomsScreen;
export default AdditionalSymptomsScreen4;
src/screens/home/skin/AdditionalSymptoms4.js
View file @ 3a00ea97
......@@ -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,
......@@ -112,17 +112,17 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
<TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
<Image
style={styles.playPauseIcon}
source={videoPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')}
source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
/>
</TouchableOpacity>
)}
</TouchableOpacity>
</View>
<Image source={require('./skinassets/scanme.png')}
<Image source={IMGS.sk_25}
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
source={IMGS.sk_26} // Make sure the path is correct
style={styles.qrCodeImage}
/>
<TouchableOpacity
......@@ -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 @ 3a00ea97
......@@ -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);
}
......@@ -104,7 +104,36 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
<View style={styles.topContainer}>
<Text style={styles.topicText}>Melanoma Additional Symptoms</Text>
<Text style={styles.topicText}>Melanoma Additional Symptoms </Text>
<View style={styles.qrCodeBox1}>
<Image
source={IMGS.sk_24} // Make sure the path is correct
style={styles.qrCodeImage1}
/>
<Text style={styles.dscriptionText1}>
මෙම පිටුවේ පහළ දක්වා ඇති රෝග ලක්ෂණ ඔබට තිබේදැයි පරික්ෂා කරන්න. ඒ සඳහා වීඩියෝවක් ලබා දී ඇත.
වීඩියෝව පැහැදිලි නොවේ නම්, පහත QR කේතය ස්කෑන් කර හෝ බොත්තම ක්ලික් කිරීමෙන් මෙම රෝග ලක්ෂණ සහිත 3D කාන්තාව නිරීක්ෂණය කරන්න.
</Text>
<Text style={styles.dscriptionText1}>
Check if you have the symptoms listed below. Watch the video for guidance.
If the video is unclear, scan the QR code or click the button to view a 3D model of a woman displaying these symptoms.
</Text>
</View>
<Image source={IMGS.sk_25}
style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -45 ,marginTop:-24}} />
<View style={styles.qrCodeBox}>
<Image
source={IMGS.sk_30} // Make sure the path is correct
style={styles.qrCodeImage1}
/>
<TouchableOpacity
style={styles.orButton}
onPress={() => Linking.openURL('https://mywebar.com/p/Project_4_wzkzvl12m')}>
<Text style={styles.orButtonText}>OR Click This</Text>
</TouchableOpacity>
</View>
<View style={styles.videoBox}>
<View style={styles.videoDescriptionBox}>
<Text style={styles.descriptionText}>
......@@ -125,26 +154,14 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
<TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
<Image
style={styles.playPauseIcon}
source={videoPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')}
source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
/>
</TouchableOpacity>
)}
</TouchableOpacity>
</View>
<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}
/>
<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>
<Text style={styles.checkboxLabel}>Check the symptom that you have </Text>
<Text style={styles.checkboxLabel}>ඔබට ඇති රෝග ලක්ෂණය ඇතුල් කරන්න </Text>
<View style={styles.checkboxContainer}>
{symptomsGroups.map((group, index) => (
<View key={index}>
......@@ -166,17 +183,17 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
</View>
<Button
title="Continue for more information"
title="Evaluate the risk level"
style={styles.nextButton}
onPress={handleSubmit}
/>
</ScrollView>
</SafeAreaView>
);
};
};
const styles = StyleSheet.create({
const styles = StyleSheet.create({
scrollContainer: {
flexGrow: 1,
},
......@@ -193,7 +210,6 @@ const styles = StyleSheet.create({
backgroundColor: COLORS.white,
// This creates the curve effect for the background
},
topicText: {
fontSize: 24,
fontWeight: 'bold',
......@@ -206,7 +222,7 @@ const styles = StyleSheet.create({
textAlign: 'center',
marginHorizontal: 20,
marginBottom: 20,
color:COLORS.black,
color:COLORS.white,
fontWeight: 'bold',
},
separator: {
......@@ -231,8 +247,8 @@ const styles = StyleSheet.create({
},
checkboxLabel: {
fontSize: 18,
fontWeight: 'bold',
fontSize: 16,
marginBottom: 10,
alignSelf: 'center',
color:COLORS.black,
......@@ -313,12 +329,12 @@ const styles = StyleSheet.create({
},
videoBox: {
backgroundColor: COLORS.white, // Set background color to white
backgroundColor: '#11324D', // Set background color to white
borderWidth: 2, // Set the border width
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: 40, // 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)
......@@ -358,7 +374,7 @@ const styles = StyleSheet.create({
alignItems: 'center',
padding: 20,
backgroundColor: COLORS.white,
marginBottom: 20,
marginBottom: 40,
shadowColor: "#000",
borderColor: '#80BCBD',
borderWidth: 2,
......@@ -370,6 +386,7 @@ const styles = StyleSheet.create({
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
marginTop:16
},
qrCodeImage: {
width: 200, // Adjust size as needed
......@@ -387,11 +404,43 @@ const styles = StyleSheet.create({
color: COLORS.white,
fontSize: 14,
fontWeight: 'bold',
},
qrCodeBox1: {
width: '95%',
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:10
},
qrCodeImage1:{
width: 210, // Adjust size as needed
height: 170,
},
dscriptionText1: {
fontSize: 14,
textAlign: 'center',
color: COLORS.darkGray,
marginTop: 20,
marginBottom: 20,
}
// ... possibly other styles
});
});
export default AdditionalSymptomsScreen;
export default AdditionalSymptomsScreen6;
src/screens/home/skin/SkinRisk.js
View file @ 3a00ea97
import React, { useState } from 'react';
import { View, StyleSheet, Text, TouchableOpacity, ScrollView, Image } from 'react-native';
import React, { useState,useRef, useEffect } from 'react';
import { View, StyleSheet, Text, TouchableOpacity, ScrollView, Image, Animated, Easing } from 'react-native';
// import Video from 'react-native-video'; // or any other audio player you prefer
import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
import { COLORS, IMGS, ROUTES } from '../../../constants';
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;
const [audioPaused, setAudioPaused] = useState(true);
useEffect(() => {
if (audioPaused) {
progressAnim.stopAnimation();
} else {
Animated.timing(progressAnim, {
toValue: 1,
duration: 30000, // Duration of the audio file in milliseconds
easing: Easing.linear,
useNativeDriver: false,
}).start();
}
}, [audioPaused]);
const togglePlayPause = () => {
setAudioPaused(!audioPaused);
if (!audioPaused) {
progressAnim.stopAnimation();
progressAnim.setValue(0);
}
};
// Function to handle the continuation to the next screen
const handleContinue = () => {
// navigation.navigate('NextScreenRoute');
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 (
<View style={styles.container}>
<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>
<Text style={styles.subTopicText}>Why High Risk ?</Text>
<View style={styles.audioPlayerContainer}>
{/* <Video
source={require("./skinassets/pause.png")}
style={styles.audioPlayer}
controls={true}
audioOnly={true}
resizeMode="cover" // Cover the audio's aspect ratio
paused={audioPaused}
repeat={true}
onLoad={() => setAudioPaused(false)}
<Text style={styles.subTopicText}>Please listen to the below audio</Text>
/> */}
<Image source={IMGS.sk_31} style={styles.musicIcon} />
<View style={styles.playerContainer}>
<View style={styles.controlsContainer}>
<TouchableOpacity onPress={togglePlayPause} style={styles.playPauseButton}>
<Image
source={audioPaused ? IMGS.sk_20 : IMGS.sk_19}
style={styles.playPauseIcon}
/>
</TouchableOpacity>
<Video
ref={audioRef}
source={{ uri: URL_link }}
paused={audioPaused}
audioOnly={true}
onEnd={() => setAudioPaused(true)}
/>
<View style={styles.progressContainer}>
<Image source={IMGS.sk_32} style={styles.progressBarBackground} />
<Animated.View style={[styles.progressBar, { width: progressAnim.interpolate({
inputRange: [0, 1],
outputRange: ['0%', '100%']
}) }]} />
</View>
</View>
</View>
</View>
<View style={styles.bottomContainer}>
<Image style={styles.babyImage} source={IMGS.sk_14} />
<View style={styles.resultBox}>
<Text style={styles.resultText}>High Risk</Text>
</View>
<Text style={styles.resultText}>Most likley to be High Risk</Text>
</View>
<View style={styles.bottomContainer}>
<Button
title="Continue for more information"
title="What should I do next"
style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_INFO)}
onPress={handleContinue}
/>
</View>
</View>
</SafeAreaView>
);
};
......@@ -78,6 +136,7 @@ const styles = StyleSheet.create({
color: COLORS.black,
textAlign: 'center',
marginVertical: 20,
marginTop:-60
},
descriptionText: {
fontSize: 16,
......@@ -156,29 +215,72 @@ const styles = StyleSheet.create({
shadowRadius: 3.84, // Shadow radius for iOS
elevation: 5, // Elevation for Android
alignSelf: 'center',
marginTop: 148, // Adjust the margin to fit your layout
marginLeft:20
marginTop: 80, // Adjust the margin to fit your layout
marginLeft:10,
bottom:117
},
audioPlayerContainer: {
width: '90%',
height: 50, // Set a fixed height for the audio player container
alignSelf: 'center',
justifyContent: 'center',
marginTop: 20, // Space between the text and the player
alignItems: 'center',
marginBottom: 20,
},
musicIcon: {
width: 60,
height: 60,
marginBottom: -10,
marginTop:30
},
audioPlayer: {
width: '100%', // Fill the container width
height: '100%', // Fill the container height
// Add more styles as needed
controlsContainer: {
flexDirection: 'row',
alignItems: 'center',
},
playPauseButton: {
marginRight: 20,
},
playPauseIcon: {
width: 30,
height: 30,
marginTop:1,
marginLeft:10
},
progressContainer: {
flex: 1,
height: 30,
justifyContent: 'center',
alignItems: 'center',
marginTop:1,
marginRight:40
},
playerContainer: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: COLORS.white,
borderWidth: 0.5,
borderColor: COLORS.lightGray,
borderRadius: 10,
padding: 10,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
width: '90%',
height:'10%',
justifyContent: 'space-between',
bottom:-20
},
progressBarBackground: {
width: '140%',
height: '70%',
position: 'absolute',
},
babyImage: {
position: 'absolute', // Use absolute positioning
width: 200,
height: 100,
resizeMode: 'contain',
bottom: 70, // Adjust this value based on the height of your result box + desired gap
bottom: 320, // Adjust this value based on the height of your result box + desired gap
alignSelf: 'center', // Center the image horizontally
marginLeft:40,
marginRight:100,
......
src/screens/home/skin/SkinUploader.js
View file @ 3a00ea97
......@@ -136,12 +136,12 @@ const Camera = ({ navigation }) => {
)}
{prediction && (
<View style={styles.predictionContainer}>
<Text style={styles.predictionText}>Predicted Class: {prediction.class}</Text>
<Text style={styles.predictionText}>Confidence: {prediction.confidence}</Text>
<Text style={styles.predictionText}>Diagnosed Condition | හඳුනාගත් සමේ ආසාදනය: {prediction.class}</Text>
<Text style={styles.predictionText}>How sure are we | නිරවද්යතාව: {prediction.confidence}</Text>
</View>
)}
<Button
title="Continue for more information"
title="Take your next step"
style={styles.nextButton}
onPress={handleContinue}
/>
......@@ -239,7 +239,7 @@ const styles = StyleSheet.create({
},
nextButton: {
width: '70%',
width: '90%',
paddingVertical: 10,
marginBottom: 80, // Adjust the margin to move the button up further if necessary
backgroundColor: COLORS.white,
......@@ -279,6 +279,8 @@ const styles = StyleSheet.create({
shadowOffset: { width: 0, height: 2 }, // iOS shadow
shadowOpacity: 0.1, // iOS shadow
shadowRadius: 2, // iOS shadow
bottom:75,
top:-10
},
resultsHeading: {
fontSize: 16,
......@@ -286,7 +288,7 @@ const styles = StyleSheet.create({
fontWeight: 'bold',
padding: 10,
textAlign: 'center',
marginBottom: 100,
marginBottom: 90,
marginLeft:0
},
......
src/screens/home/skin/WelcomeSkin.js
View file @ 3a00ea97
......@@ -18,7 +18,6 @@ import {COLORS, IMGS, ROUTES} from '../../../constants';
import Button from '../../../components/Button';
const WelcomeExercise = ({ navigation }) => {
return (
<LinearGradient
......@@ -44,19 +43,19 @@ const WelcomeExercise = ({ navigation }) => {
fontSize: 50,
// fontWeight: 800,
color: COLORS.white
}}>Let's Get</Text>
}}>Reveal Your</Text>
<Text style={{
fontSize: 46,
// fontWeight: 800,
color: COLORS.white
}}>Started</Text>
}}>Skin's Story</Text>
<View style={{ marginVertical: 22 }}>
<Text style={{
fontSize: 16,
color: COLORS.white,
marginVertical: 4
}}>Reveal Your Skin's Story </Text>
}}></Text>
<Text style={{
fontSize: 16,
color: COLORS.white,
......@@ -64,7 +63,7 @@ const WelcomeExercise = ({ navigation }) => {
</View>
<Button
title="Start Today"
title="Diagnose"
style={{
marginTop: 12,
width: "100%",
......
src/screens/home/skin/information1.js
View file @ 3a00ea97
......@@ -58,10 +58,10 @@ const Additionalinformation = ({ navigation }) => {
<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} />
<Image source={IMGS.sk_17} style={styles.contactIcon} />
<Text style={styles.contactInfo}>Phone: {phone}</Text>
</TouchableOpacity>
<Image source={require('./skinassets/email.png')} style={styles.contactIcon} />
<Image source={IMGS.sk_18} style={styles.contactIcon} />
<TouchableOpacity onPress={() => Linking.openURL(`mailto:${email}`)}>
<Text style={styles.contactInfo}>Email: {email}</Text>
</TouchableOpacity>
......@@ -116,7 +116,7 @@ const Additionalinformation = ({ navigation }) => {
<TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
<Image
style={styles.playPauseIcon}
source={videoPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')}
source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
/>
</TouchableOpacity>
)}
......@@ -125,7 +125,7 @@ const Additionalinformation = ({ navigation }) => {
<View style={styles.qrCodeBox}>
<Image
source={require('./skinassets/vector2.png')} // Make sure the path is correct
source={IMGS.sk_21} // Make sure the path is correct
style={styles.qrCodeImage}
/>
<Text style={styles.dscriptionText}>
......@@ -138,7 +138,7 @@ const Additionalinformation = ({ navigation }) => {
style={styles.orButton}
onPress={() => Linking.openURL('https://youtu.be/sbrNx78JSV0?si=OsHd9sft8jDg1O1j')}>
<Image
source={require('./skinassets/youtube.png')}
source={IMGS.sk_22}
style={styles.buttonIcon}
/>
<Text style={styles.orButtonText}>Click here to view video</Text>
......@@ -147,7 +147,7 @@ const Additionalinformation = ({ navigation }) => {
style={styles.orButton}
onPress={() => Linking.openURL('https://youtu.be/T9WQvX3W92A?si=dw7MhHk7TOpquJx_')}>
<Image
source={require('./skinassets/youtube.png')}
source={IMGS.sk_22}
style={styles.buttonIcon}
/>
<Text style={styles.orButtonText}>Click here to view video</Text>
......@@ -156,7 +156,7 @@ const Additionalinformation = ({ navigation }) => {
</View>
<View style={styles.qrCodeBox}>
<Image
source={require('./skinassets/Vectorw.jpg')} // Make sure the path is correct
source={IMGS.sk_23} // Make sure the path is correct
style={styles.qrCodeImage1}
/>
<Text style={styles.dscriptionText}>
......@@ -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 @ 3a00ea97
This diff is collapsed.
src/screens/home/skin/skininformation5.js 0 → 100644
View file @ 3a00ea97
This diff is collapsed.
src/screens/home/skin/skininformation6.js 0 → 100644
View file @ 3a00ea97
This diff is collapsed.
src/screens/home/skin/skininfromation3.js 0 → 100644
View file @ 3a00ea97
This diff is collapsed.
src/screens/home/skin/skininfromation4.js 0 → 100644
View file @ 3a00ea97
This diff is collapsed.
src/services/chat/ChatFaceData.js 0 → 100644
View file @ 3a00ea97
export default chatFaceData = [
{
id: 1,
name: 'Noyi',
image: 'https://res.cloudinary.com/dknvsbuyy/image/upload/v1685678135/chat_1_c7eda483e3.png',
primary: '#FFC107',
secondary: ''
},
{
id: 2,
name: 'Pogu',
image: 'https://res.cloudinary.com/dknvsbuyy/image/upload/v1685709886/image_21_2e18bb4a61.png',
primary: '#E53057',
secondary: ''
},
{
id: 3,
name: 'Nista',
image: 'https://res.cloudinary.com/dknvsbuyy/image/upload/v1685709886/image_22_409561b953.png',
primary: '#3B96D2',
secondary: ''
},
{
id: 4,
name: 'Estor',
image: 'https://res.cloudinary.com/dknvsbuyy/image/upload/v1685709886/image_18_893d24cebc.png',
primary: '#37474F',
secondary: ''
},
{
id: 5,
name: 'Pega',
image: 'https://res.cloudinary.com/dknvsbuyy/image/upload/v1685709886/image_23_211d7370cb.png',
primary: '#2473FE',
secondary: ''
},
]
\ No newline at end of file
src/services/chat/bardaiapi.js 0 → 100644
View file @ 3a00ea97
import axios from "axios";
const apiURL = 'http://16.171.16.144:8070/api/chat'
export const ChatbotService = async (payload) => {
try {
console.log("playload", payload)
let response = await axios.post(`${apiURL}/send`, payload)
return response.data;
} catch (error) {
throw new Error('Failed to retrive msg');
}
}
\ No newline at end of file
yarn.lock
View file @ 3a00ea97
This diff is collapsed.
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