import React from "react"; import { StyleSheet, View, Text, Pressable, SafeAreaView, ScrollView, Image } from 'react-native'; import Orientation from 'react-native-orientation-locker'; import ImageButton from "../component/ImageButton"; export default function Home({ navigation }){ const onPressHandler = () => { navigation.navigate('Start'); } React.useEffect(() => { const unsubscribe = navigation.addListener("focus", () => { Orientation.unlockAllOrientations(); Orientation.lockToPortrait(); }); return unsubscribe; }, [navigation]); return ( <SafeAreaView> <ScrollView> <View style={styles.imageContainer}> <View style={styles.imageView}> <Image style={styles.image} source={require('../assets/color/background.png')} resizeMode="contain"></Image> <ImageButton path="Color" title="Color Activity" /> </View> <View style={styles.imageView}> <Image style={styles.image} source={require('../assets/read/image/background4.jpg')} resizeMode="contain"></Image> <ImageButton path="Read" title="Read Activity" /> </View> </View> <View style={styles.imageContainer}> <View style={styles.imageView}> <Image style={styles.image} source={require('../assets/color/background.png')} resizeMode="contain"></Image> <ImageButton path="GameList" title="Memory Activities" /> </View> <View style={styles.imageView}> <Image style={styles.image} source={require('../assets/color/background.png')} resizeMode="contain"></Image> <ImageButton path="Progress" title="Progress Check" /> </View> {/* <View style={styles.imageView}> <Image style={styles.image} source={require('../assets/color/background.png')} resizeMode="contain"></Image> <ImageButton path="Progress" title="Check" /> </View> */} </View> </ScrollView> </SafeAreaView> ); } const styles = StyleSheet.create({ imageContainer:{ flexDirection: "row", marginTop: 70, }, imageView: { width: 180, height: 300, // borderWidth:1, // borderColor: "#000", marginHorizontal: 15, borderRadius: 50 }, image: { width: "100%", height: "100%", borderRadius: 50 }, })