Commit fbd66e44 authored by Malsha Jayakody's avatar Malsha Jayakody

implement home page

parent 34405083
......@@ -22,4 +22,11 @@ export default {
pink_new: '#FF8080',
pastal_blue: '#7469B6',
red: '#DC143C',
cadmium_Green: '#5EAAA8',
main_blue: '#6096B4',
dark_Pink: '#D885A3',
light_yellow: '#FFDBA4',
orange: '#C7B198',
pink_dark: '#FFC4E1',
light_gray: '#D3DEDC',
};
......@@ -71,4 +71,9 @@ export default {
play_pen: require('../assets/games/play_pen.png'),
milk_bottle: require('../assets/games/milk_bottle.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'),
};
......@@ -58,7 +58,7 @@ function GameNavigator() {
headerBackTitleVisible: false,
headerShown: false,
}}
initialRouteName={ROUTES.GAME_HOME}>
initialRouteName={ROUTES.GAME_WELCOME}>
<Stack.Screen name={ROUTES.GAME_WELCOME} component={WelcomePageGame} />
<Stack.Screen
name={ROUTES.GAME_QUIZ_OPTIONS}
......
/* eslint-disable react-native/no-inline-styles */
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 LinearGradient from 'react-native-linear-gradient';
import Icon from 'react-native-vector-icons/Ionicons';
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 (
<LinearGradient
style={{
flex: 1,
}}
colors={[COLORS.dark_purple, COLORS.white, COLORS.dark_purple]}>
colors={[COLORS.light_gray, COLORS.white, COLORS.light_gray]}>
<View>
<View>
<Image
source={IMGS.home_page}
style={{
height: 360,
width: '100%',
position: 'absolute',
top: 100,
}}
/>
</View>
<TouchableOpacity
style={{
position: 'absolute',
top: 25, // Adjust top and right values as needed
top: 20,
right: 20,
zIndex: 5, // Ensure the icon is on top of other elements
zIndex: 5,
}}
onPress={() => navigation.navigate(ROUTES.PROFILE)}>
<Icon name="person-circle-sharp" size={35} color={COLORS.black} />
</TouchableOpacity>
<View
style={{
paddingHorizontal: 67,
position: 'absolute',
top: 510,
width: '100%',
marginTop: 70,
paddingHorizontal: 20,
paddingVertical: 10,
backgroundColor: COLORS.white,
borderRadius: 10,
flexDirection: 'row',
alignItems: 'center',
}}>
<Image
source={IMGS.logo}
style={{width: 100, height: 120, marginRight: 50}}
/>
<View>
<Text
style={{
fontSize: 45,
color: COLORS.black,
fontSize: 24,
color: COLORS.navyBlue,
fontWeight: 'bold',
textAlign: 'center',
textAlign: 'right',
fontFamily: 'monospace',
}}>
Welcome to
</Text>
<Text
style={{
fontSize: 45,
color: COLORS.black,
fontSize: 24,
color: COLORS.navyBlue,
fontWeight: 'bold',
textAlign: 'center',
textAlign: 'right',
fontFamily: 'monospace',
}}>
e-MidWife
</Text>
</View>
</View>
<View>
<Text
style={{
fontSize: 18,
color: COLORS.black,
fontWeight: 'bold',
textAlign: 'left',
fontFamily: 'monospace',
marginTop: 60,
marginLeft: 25,
}}>
Features
</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>
</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