Files
uni/year4/semester1/fyp/iompar/app/(tabs)/index.tsx
2024-11-04 19:53:55 +00:00

104 lines
3.1 KiB
TypeScript

import { Image, StyleSheet, Platform } from 'react-native';
import { HelloWave } from '@/components/HelloWave';
import ParallaxScrollView from '@/components/ParallaxScrollView';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import MapView, { Marker } from 'react-native-maps';
// export default function HomeScreen() {
// return (
// <ParallaxScrollView
// headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
// headerImage={
// <Image
// source={require('@/assets/images/partial-react-logo.png')}
// style={styles.reactLogo}
// />
// }>
// <ThemedView style={styles.titleContainer}>
// <ThemedText type="title">Welcome!</ThemedText>
// <HelloWave />
// </ThemedView>
// <ThemedView style={styles.stepContainer}>
// <ThemedText type="subtitle">Step 1: Try it</ThemedText>
// <ThemedText>
// Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.
// Press{' '}
// <ThemedText type="defaultSemiBold">
// {Platform.select({ ios: 'cmd + d', android: 'cmd + m' })}
// </ThemedText>{' '}
// to open developer tools.
// </ThemedText>
// </ThemedView>
// <ThemedView style={styles.stepContainer}>
// <ThemedText type="subtitle">Step 2: Explore</ThemedText>
// <ThemedText>
// Tap the Explore tab to learn more about what's included in this starter app.
// </ThemedText>
// </ThemedView>
// <ThemedView style={styles.stepContainer}>
// <ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
// <ThemedText>
// When you're ready, run{' '}
// <ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '}
// <ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '}
// <ThemedText type="defaultSemiBold">app</ThemedText> to{' '}
// <ThemedText type="defaultSemiBold">app-example</ThemedText>.
// </ThemedText>
// </ThemedView>
// </ParallaxScrollView>
// );
// }
//
// const styles = StyleSheet.create({
// titleContainer: {
// flexDirection: 'row',
// alignItems: 'center',
// gap: 8,
// },
// stepContainer: {
// gap: 8,
// marginBottom: 8,
// },
// reactLogo: {
// height: 178,
// width: 290,
// bottom: 0,
// left: 0,
// position: 'absolute',
// },
// });
export default function HomeScreen() {
const coordinates = {
latitude: 37.78825,
longitude: -122.4324,
};
return (
<ThemedView style={styles.container}>
<MapView
style={styles.map}
initialRegion={{
...coordinates,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
>
<Marker coordinate={coordinates} />
</MapView>
</ThemedView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
map: {
width: '100%',
height: '100%',
},
});