Skip to content

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

implement home page

parent 34405083
Hide whitespace changes
Inline Side-by-side
Showing with 122 additions and 33 deletions
src/constants/colors.js
View file @ fbd66e44
...@@ -22,4 +22,11 @@ export default { ...@@ -22,4 +22,11 @@ export default {
pink_new: '#FF8080', pink_new: '#FF8080',
pastal_blue: '#7469B6', pastal_blue: '#7469B6',
red: '#DC143C', red: '#DC143C',
cadmium_Green: '#5EAAA8',
main_blue: '#6096B4',
dark_Pink: '#D885A3',
light_yellow: '#FFDBA4',
orange: '#C7B198',
pink_dark: '#FFC4E1',
light_gray: '#D3DEDC',
}; };
src/constants/imgs.js
View file @ fbd66e44
...@@ -71,4 +71,9 @@ export default { ...@@ -71,4 +71,9 @@ export default {
play_pen: require('../assets/games/play_pen.png'), play_pen: require('../assets/games/play_pen.png'),
milk_bottle: require('../assets/games/milk_bottle.png'), milk_bottle: require('../assets/games/milk_bottle.png'),
high_chair: require('../assets/games/high_chair.png'), high_chair: require('../assets/games/high_chair.png'),
home_exercises: require('../assets/running-pregnant-woman.png'),
home_mental_well_being: require('../assets/relaxing-mind.png'),
home_emotional_support: require('../assets/virtual-assistant.png'),
home_skin: require('../assets/home_skin.png'),
logo: require('../assets/foreground.png'),
}; };
src/navigations/GameNavigator.js
View file @ fbd66e44
...@@ -58,7 +58,7 @@ function GameNavigator() { ...@@ -58,7 +58,7 @@ function GameNavigator() {
headerBackTitleVisible: false, headerBackTitleVisible: false,
headerShown: false, headerShown: false,
}} }}
initialRouteName={ROUTES.GAME_HOME}> initialRouteName={ROUTES.GAME_WELCOME}>
<Stack.Screen name={ROUTES.GAME_WELCOME} component={WelcomePageGame} /> <Stack.Screen name={ROUTES.GAME_WELCOME} component={WelcomePageGame} />
<Stack.Screen <Stack.Screen
name={ROUTES.GAME_QUIZ_OPTIONS} name={ROUTES.GAME_QUIZ_OPTIONS}
......
src/screens/home/Home.js
View file @ fbd66e44
/* eslint-disable react-native/no-inline-styles */
import React from 'react'; import React from 'react';
import {Image, TouchableOpacity, Text, View} from 'react-native'; import {Image, TouchableOpacity, Text, View, FlatList} from 'react-native';
import {COLORS, IMGS, ROUTES} from '../../constants'; import {COLORS, IMGS, ROUTES} from '../../constants';
import LinearGradient from 'react-native-linear-gradient'; import LinearGradient from 'react-native-linear-gradient';
import Icon from 'react-native-vector-icons/Ionicons'; import Icon from 'react-native-vector-icons/Ionicons';
const Home = ({navigation}) => { const Home = ({navigation}) => {
const cards = [
{
id: '1',
name: 'Reduce Skin Diseases',
image: IMGS.home_skin,
backgroundColor: COLORS.orange,
navigateTo: ROUTES.SKIN_WELCOME,
},
{
id: '2',
name: 'Improve Mental Well-Being',
image: IMGS.home_mental_well_being,
backgroundColor: COLORS.cadmium_Green,
navigateTo: ROUTES.GAME_WELCOME,
},
{
id: '3',
name: 'Exercises Recommendations',
image: IMGS.home_exercises,
backgroundColor: COLORS.dark_Pink,
navigateTo: ROUTES.EXERCISE_HOME,
},
{
id: '4',
name: 'Get Emotional Support',
image: IMGS.home_emotional_support,
backgroundColor: COLORS.main_blue,
navigateTo: ROUTES.HOME,
},
];
return ( return (
<LinearGradient <LinearGradient
style={{ style={{
flex: 1, flex: 1,
}} }}
colors={[COLORS.dark_purple, COLORS.white, COLORS.dark_purple]}> colors={[COLORS.light_gray, COLORS.white, COLORS.light_gray]}>
<View> <View>
<View>
<Image
source={IMGS.home_page}
style={{
height: 360,
width: '100%',
position: 'absolute',
top: 100,
}}
/>
</View>
<TouchableOpacity <TouchableOpacity
style={{ style={{
position: 'absolute', position: 'absolute',
top: 25, // Adjust top and right values as needed top: 20,
right: 20, right: 20,
zIndex: 5, // Ensure the icon is on top of other elements zIndex: 5,
}} }}
onPress={() => navigation.navigate(ROUTES.PROFILE)}> onPress={() => navigation.navigate(ROUTES.PROFILE)}>
<Icon name="person-circle-sharp" size={35} color={COLORS.black} /> <Icon name="person-circle-sharp" size={35} color={COLORS.black} />
</TouchableOpacity> </TouchableOpacity>
<View <View
style={{ style={{
paddingHorizontal: 67, marginTop: 70,
position: 'absolute', paddingHorizontal: 20,
top: 510, paddingVertical: 10,
width: '100%', backgroundColor: COLORS.white,
borderRadius: 10,
flexDirection: 'row',
alignItems: 'center',
}}> }}>
<Image
source={IMGS.logo}
style={{width: 100, height: 120, marginRight: 50}}
/>
<View>
<Text
style={{
fontSize: 24,
color: COLORS.navyBlue,
fontWeight: 'bold',
textAlign: 'right',
fontFamily: 'monospace',
}}>
Welcome to
</Text>
<Text
style={{
fontSize: 24,
color: COLORS.navyBlue,
fontWeight: 'bold',
textAlign: 'right',
fontFamily: 'monospace',
}}>
e-MidWife
</Text>
</View>
</View>
<View>
<Text <Text
style={{ style={{
fontSize: 45, fontSize: 18,
color: COLORS.black,
fontWeight: 'bold',
textAlign: 'center',
fontFamily: 'monospace',
}}>
Welcome to
</Text>
<Text
style={{
fontSize: 45,
color: COLORS.black, color: COLORS.black,
fontWeight: 'bold', fontWeight: 'bold',
textAlign: 'center', textAlign: 'left',
fontFamily: 'monospace', fontFamily: 'monospace',
marginTop: 60,
marginLeft: 25,
}}> }}>
e-MidWife Features
</Text> </Text>
<FlatList
data={cards}
keyExtractor={item => item.id}
contentContainerStyle={{
paddingHorizontal: 20,
paddingTop: 20,
}}
renderItem={({item}) => (
<TouchableOpacity
style={{
flexDirection: 'row',
backgroundColor: item.backgroundColor,
padding: 10,
marginBottom: 10,
borderRadius: 10,
alignItems: 'center',
height: 90,
}}
onPress={() => navigation.navigate(item.navigateTo)}>
<Image
source={item.image}
style={{width: 50, height: 50, marginRight: 18}}
/>
<Text
style={{
fontSize: 18,
color: COLORS.black,
fontWeight: 'bold',
}}>
{item.name}
</Text>
</TouchableOpacity>
)}
/>
</View> </View>
</View> </View>
</LinearGradient> </LinearGradient>
......
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