{ "name": "appointment-notification-app", "version": "1.0.0", "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web", "eject": "expo eject" }, "dependencies": { "@react-native-async-storage/async-storage": "~1.17.3", "@react-navigation/native": "^6.1.6", "@react-navigation/native-stack": "^6.9.12", "expo": "~48.0.18", "expo-notifications": "~0.18.1", "expo-splash-screen": "~0.18.1", "expo-status-bar": "~1.4.4", "react": "18.2.0", "react-native": "0.71.8", "react-native-safe-area-context": "4.5.0" }, "devDependencies": { "@babel/core": "^7.20.0" }, "private": true } module.exports = function(api) { api.cache(true); return { presets: ['babel-preset-expo'], }; }; { "expo": { "name": "Appointment Notifications", "slug": "appointment-notifications", "version": "1.0.0", "orientation": "portrait", "icon": "./assets/icon.png", "userInterfaceStyle": "light", "splash": { "image": "./assets/splash.png", "resizeMode": "contain", "backgroundColor": "#ffffff" }, "plugins": [ [ "expo-notifications", { "icon": "./assets/notification-icon.png", "color": "#ffffff", "sounds": ["./assets/notification-sound.wav"] } ] ], "assetBundlePatterns": [ "**/*" ], "ios": { "supportsTablet": true, "bundleIdentifier": "com.yourcompany.appointmentnotifications", "infoPlist": { "UIBackgroundModes": ["remote-notification"] } }, "android": { "adaptiveIcon": { "foregroundImage": "./assets/adaptive-icon.png", "backgroundColor": "#ffffff" }, "package": "com.yourcompany.appointmentnotifications", "useNextNotificationsApi": true }, "web": { "favicon": "./assets/favicon.png" } } } import 'react-native-gesture-handler'; import React, { useEffect, useState } from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { SafeAreaProvider } from 'react-native-safe-area-context'; import * as Notifications from 'expo-notifications'; import AsyncStorage from '@react-native-async-storage/async-storage'; import HomeScreen from './src/screens/HomeScreen'; import AppointmentScreen from './src/screens/AppointmentScreen'; const Stack = createNativeStackNavigator(); Notifications.setNotificationHandler({ handleNotification: async () => ({ shouldShowAlert: true, shouldPlaySound: true, shouldSetBadge: true, }), }); async function registerForPushNotificationsAsync() { const { status: existingStatus } = await Notifications.getPermissionsAsync(); let finalStatus = existingStatus; if (existingStatus !== 'granted') { const { status } = await Notifications.requestPermissionsAsync(); finalStatus = status; } if (finalStatus !== 'granted') { alert('Failed to get push token for push notification!'); return; } const token = (await Notifications.getExpoPushTokenAsync()).data; console.log(token); return token; } const App = () => { const [expoPushToken, setExpoPushToken] = useState(''); useEffect(() => { registerForPushNotificationsAsync().then(token => setExpoPushToken(token)); const subscription = Notifications.addNotificationReceivedListener(notification => { console.log('Notification received:', notification); }); return () => { subscription.remove(); }; }, []); return ( ); }; export default App; import React, { useEffect, useState } from 'react'; import { View, Text, StyleSheet, TouchableOpacity, FlatList } from 'react-native'; import AsyncStorage from '@react-native-async-storage/async-storage'; import * as Notifications from 'expo-notifications'; const HomeScreen = ({ navigation }) => { const [appointments, setAppointments] = useState([]); useEffect(() => { loadAppointments(); }, []); const loadAppointments = async () => { try { const storedAppointments = await AsyncStorage.getItem('appointments'); if (storedAppointments) { setAppointments(JSON.parse(storedAppointments)); } } catch (error) { console.error('Error loading appointments:', error); } }; const scheduleNotification = async (appointment) => { await Notifications.scheduleNotificationAsync({ content: { title: "New Appointment Scheduled", body: `You have an appointment on ${new Date(appointment.date).toLocaleString()}`, data: { appointment }, }, trigger: { seconds: 1, // For testing, you can change this to the actual time before the appointment }, }); }; const addTestAppointment = async () => { const newAppointment = { id: Date.now().toString(), title: 'Doctor Appointment', description: 'Annual checkup with Dr. Smith', date: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(), // Tomorrow }; const updatedAppointments = [...appointments, newAppointment]; setAppointments(updatedAppointments); await AsyncStorage.setItem('appointments', JSON.stringify(updatedAppointments)); await scheduleNotification(newAppointment); }; const renderItem = ({ item }) => ( navigation.navigate('Appointment', { appointment: item })} > {item.title} {new Date(item.date).toLocaleString()} ); return ( item.id} ListEmptyComponent={ No appointments scheduled } /> Add Test Appointment ); }; const styles = StyleSheet.create({ container: { flex: 1, padding: 16, }, appointmentItem: { backgroundColor: '#fff', padding: 16, marginBottom: 8, borderRadius: 8, shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.1, shadowRadius: 2, elevation: 2, }, appointmentTitle: { fontSize: 16, fontWeight: 'bold', marginBottom: 4, }, appointmentDate: { fontSize: 14, color: '#666', }, emptyText: { textAlign: 'center', marginTop: 20, fontSize: 16, color: '#999', }, addButton: { backgroundColor: '#3f51b5', padding: 16, borderRadius: 8, alignItems: 'center', marginTop: 16, }, addButtonText: { color: '#fff', fontWeight: 'bold', fontSize: 16, }, }); export default HomeScreen; import React from 'react'; import { View, Text, StyleSheet, TouchableOpacity, Alert } from 'react-native'; import AsyncStorage from '@react-native-async-storage/async-storage'; const AppointmentScreen = ({ route, navigation }) => { const { appointment } = route.params; const cancelAppointment = async () => { try { const storedAppointments = await AsyncStorage.getItem('appointments'); if (storedAppointments) { const appointments = JSON.parse(storedAppointments); const updatedAppointments = appointments.filter(a => a.id !== appointment.id); await AsyncStorage.setItem('appointments', JSON.stringify(updatedAppointments)); navigation.goBack(); } } catch (error) { console.error('Error canceling appointment:', error); Alert.alert('Error', 'Failed to cancel appointment'); } }; return ( {appointment.title} {appointment.description} {new Date(appointment.date).toLocaleString()} { Alert.alert( 'Cancel Appointment', 'Are you sure you want to cancel this appointment?', [ { text: 'No', style: 'cancel' }, { text: 'Yes', onPress: cancelAppointment }, ] ); }} > Cancel Appointment ); }; const styles = StyleSheet.create({ container: { flex: 1, padding: 16, }, card: { backgroundColor: '#fff', padding: 16, borderRadius: 8, shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 4, elevation: 3, marginBottom: 16, }, title: { fontSize: 20, fontWeight: 'bold', marginBottom: 8, }, description: { fontSize: 16, marginBottom: 12, color: '#555', }, date: { fontSize: 16, color: '#3f51b5', fontWeight: '500', }, cancelButton: { backgroundColor: '#f44336', padding: 16, borderRadius: 8, alignItems: 'center', }, cancelButtonText: { color: '#fff', fontWeight: 'bold', fontSize: 16, }, }); export default AppointmentScreen;