[V0_FILE]typescriptreact:file="App.tsx" import type React from "react" import { SafeAreaView, StatusBar, StyleSheet } from "react-native" import { NavigationContainer } from "@react-navigation/native" import { createNativeStackNavigator } from "@react-navigation/native-stack" import HomeScreen from "./screens/HomeScreen" import SettingsScreen from "./screens/SettingsScreen" import { SupabaseProvider } from "./context/SupabaseContext" const Stack = createNativeStackNavigator() function App(): React.JSX.Element { return ( ) } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#f5f5f5", }, }) export default App [V0_FILE]typescriptreact:file="context/SupabaseContext.tsx" "use client" import { createContext, useContext, useEffect, useState } from "react" import AsyncStorage from "@react-native-async-storage/async-storage" import "react-native-url-polyfill/auto" import { createClient } from "@supabase/supabase-js" // Create a context for Supabase const SupabaseContext = createContext(null) // Custom hook to use the Supabase context export const useSupabase = () => { const context = useContext(SupabaseContext) if (context === null) { throw new Error("useSupabase must be used within a SupabaseProvider") } return context } // Provider component that wraps your app and provides the Supabase client export const SupabaseProvider = ({ children }) => { const [supabase, setSupabase] = useState(null) const [loading, setLoading] = useState(true) useEffect(() => { const initializeSupabase = async () => { try { // Get Supabase URL and key from AsyncStorage or use defaults const supabaseUrl = (await AsyncStorage.getItem("SUPABASE_URL")) || "YOUR_SUPABASE_URL" const supabaseKey = (await AsyncStorage.getItem("SUPABASE_KEY")) || "YOUR_SUPABASE_ANON_KEY" // Initialize Supabase client const supabaseClient = createClient(supabaseUrl, supabaseKey, { auth: { storage: AsyncStorage, autoRefreshToken: true, persistSession: true, detectSessionInUrl: false, }, }) setSupabase(supabaseClient) } catch (error) { console.error("Error initializing Supabase:", error) } finally { setLoading(false) } } initializeSupabase() }, []) // Save Supabase credentials const saveSupabaseCredentials = async (url, key) => { try { await AsyncStorage.setItem("SUPABASE_URL", url) await AsyncStorage.setItem("SUPABASE_KEY", key) // Reinitialize the client with new credentials const supabaseClient = createClient(url, key, { auth: { storage: AsyncStorage, autoRefreshToken: true, persistSession: true, detectSessionInUrl: false, }, }) setSupabase(supabaseClient) return true } catch (error) { console.error("Error saving Supabase credentials:", error) return false } } return ( {children} ) } [V0_FILE]typescriptreact:file="screens/HomeScreen.tsx" isFixed="true" isQuickEdit="true" "use client" import { useEffect, useState } from "react" import { View, Text, StyleSheet, Switch, FlatList, TouchableOpacity, Alert, RefreshControl } from "react-native" import { useNavigation } from "@react-navigation/native" import { Settings, RefreshCw } from "lucide-react-native" import NotificationService from "../services/NotificationService" import { useSupabase } from "../context/SupabaseContext" import NotificationItem from "../components/NotificationItem" import { checkNotificationPermission, requestNotificationPermission } from "../utils/permissions" const HomeScreen = () => { const [isEnabled, setIsEnabled] = useState(false) const [notifications, setNotifications] = useState([]) const [refreshing, setRefreshing] = useState(false) const navigation = useNavigation() const { supabase, loading } = useSupabase() const notificationService = new NotificationService(supabase) useEffect(() => { // Check if notification service is running const checkServiceStatus = async () => { const status = await notificationService.getServiceStatus() setIsEnabled(status) } // Load recent notifications const loadNotifications = async () => { if (supabase) { const recentNotifications = await notificationService.getRecentNotifications() setNotifications(recentNotifications) } } checkServiceStatus() loadNotifications() // Set up listener for new notifications const subscription = notificationService.subscribeToNotifications((newNotification) => { setNotifications((prevNotifications) => [newNotification, ...prevNotifications]) }) return () => { // Clean up subscription if (subscription) { subscription.unsubscribe() } } }, [ supabase, notificationService.getServiceStatus, notificationService.getRecentNotifications, notificationService.subscribeToNotifications, ]) const toggleSwitch = async () => { try { if (!isEnabled) { // Check and request permission if not enabled const hasPermission = await checkNotificationPermission() if (!hasPermission) { const granted = await requestNotificationPermission() if (!granted) { Alert.alert("Permission Required", "Notification access permission is required to log notifications.", [ { text: "OK" }, ]) return } } // Start the notification service await notificationService.startService() } else { // Stop the notification service await notificationService.stopService() } // Update the state setIsEnabled(!isEnabled) } catch (error) { console.error("Error toggling notification service:", error) Alert.alert("Error", "Failed to toggle notification service.") } } const onRefresh = async () => { setRefreshing(true) try { if (supabase) { const recentNotifications = await notificationService.getRecentNotifications() setNotifications(recentNotifications) } } catch (error) { console.error("Error refreshing notifications:", error) } finally { setRefreshing(false) } } if (loading) { return ( Loading... ) } return ( {isEnabled ? "Notification Logging Enabled" : "Notification Logging Disabled"} navigation.navigate("Settings")}> Recent Notifications } keyExtractor={(item) => item.id.toString()} style={styles.list} refreshControl={} ListEmptyComponent={ No notifications logged yet } /> ) } const styles = StyleSheet.create({ container: { flex: 1, padding: 16, backgroundColor: "#f5f5f5", }, loadingContainer: { flex: 1, justifyContent: "center", alignItems: "center", }, header: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginBottom: 16, padding: 16, backgroundColor: "white", borderRadius: 8, elevation: 2, }, toggleContainer: { flex: 1, flexDirection: "row", alignItems: "center", justifyContent: "space-between", marginRight: 16, }, toggleText: { fontSize: 16, fontWeight: "500", }, settingsButton: { padding: 8, }, listHeader: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginBottom: 8, paddingHorizontal: 8, }, listTitle: { fontSize: 18, fontWeight: "bold", }, list: { flex: 1, }, emptyContainer: { flex: 1, justifyContent: "center", alignItems: "center", padding: 32, }, emptyText: { fontSize: 16, color: "#888", textAlign: "center", }, }) export default HomeScreen [V0_FILE]typescriptreact:file="screens/SettingsScreen.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { View, Text, StyleSheet, TextInput, TouchableOpacity, Alert, ScrollView, Switch } from "react-native" import AsyncStorage from "@react-native-async-storage/async-storage" import { useSupabase } from "../context/SupabaseContext" import NotificationService from "../services/NotificationService" import { createClient } from "@supabase/supabase-js" const SettingsScreen = () => { const [supabaseUrl, setSupabaseUrl] = useState("") const [supabaseKey, setSupabaseKey] = useState("") const [syncFrequency, setSyncFrequency] = useState("5") const [maxLocalStorage, setMaxLocalStorage] = useState("100") const [batteryOptimization, setBatteryOptimization] = useState(true) const { supabase, saveSupabaseCredentials } = useSupabase() const notificationService = new NotificationService(supabase) useEffect(() => { // Load settings const loadSettings = async () => { try { const url = (await AsyncStorage.getItem("SUPABASE_URL")) || "" const key = (await AsyncStorage.getItem("SUPABASE_KEY")) || "" const frequency = (await AsyncStorage.getItem("SYNC_FREQUENCY")) || "5" const maxStorage = (await AsyncStorage.getItem("MAX_LOCAL_STORAGE")) || "100" const batteryOpt = await AsyncStorage.getItem("BATTERY_OPTIMIZATION") setSupabaseUrl(url) setSupabaseKey(key) setSyncFrequency(frequency) setMaxLocalStorage(maxStorage) setBatteryOptimization(batteryOpt !== "false") } catch (error) { console.error("Error loading settings:", error) } } loadSettings() }, []) const saveSettings = async () => { try { // Validate inputs if (!supabaseUrl || !supabaseKey) { Alert.alert("Error", "Supabase URL and Key are required") return } // Save Supabase credentials const success = await saveSupabaseCredentials(supabaseUrl, supabaseKey) if (!success) { Alert.alert("Error", "Failed to save Supabase credentials") return } // Save other settings await AsyncStorage.setItem("SYNC_FREQUENCY", syncFrequency) await AsyncStorage.setItem("MAX_LOCAL_STORAGE", maxLocalStorage) await AsyncStorage.setItem("BATTERY_OPTIMIZATION", batteryOptimization ? "true" : "false") // Update notification service settings await notificationService.updateSettings({ syncFrequency: Number.parseInt(syncFrequency, 10), maxLocalStorage: Number.parseInt(maxLocalStorage, 10), batteryOptimization, }) Alert.alert("Success", "Settings saved successfully") } catch (error) { console.error("Error saving settings:", error) Alert.alert("Error", "Failed to save settings") } } const testConnection = async () => { try { if (!supabaseUrl || !supabaseKey) { Alert.alert("Error", "Supabase URL and Key are required") return } // Create a temporary client to test the connection const tempClient = createClient(supabaseUrl, supabaseKey, { auth: { storage: AsyncStorage, autoRefreshToken: true, persistSession: true, detectSessionInUrl: false, }, }) // Try to fetch a single row to test the connection const { data, error } = await tempClient.from("notifications").select("id").limit(1) if (error) { throw error } Alert.alert("Success", "Connection to Supabase successful!") } catch (error) { console.error("Error testing connection:", error) Alert.alert("Error", `Failed to connect to Supabase: ${error.message}`) } } const clearLocalData = async () => { Alert.alert("Confirm", "Are you sure you want to clear all local notification data?", [ { text: "Cancel", style: "cancel" }, { text: "Clear", style: "destructive", onPress: async () => { try { await notificationService.clearLocalNotifications() Alert.alert("Success", "Local notification data cleared") } catch (error) { console.error("Error clearing local data:", error) Alert.alert("Error", "Failed to clear local data") } }, }, ]) } return ( Supabase Configuration Supabase URL Supabase Anon Key Test Connection Sync Settings Sync Frequency (minutes) Max Local Storage (notifications) Performance Battery Optimization When enabled, the app will reduce background activity when battery is low. Data Management Clear Local Data Save Settings ) } const styles = StyleSheet.create({ container: { flex: 1, padding: 16, backgroundColor: "#f5f5f5", }, section: { marginBottom: 24, padding: 16, backgroundColor: "white", borderRadius: 8, elevation: 2, }, sectionTitle: { fontSize: 18, fontWeight: "bold", marginBottom: 16, }, label: { fontSize: 16, marginBottom: 8, }, input: { height: 48, borderWidth: 1, borderColor: "#ddd", borderRadius: 8, paddingHorizontal: 12, marginBottom: 16, backgroundColor: "#fafafa", }, button: { backgroundColor: "#2196F3", padding: 12, borderRadius: 8, alignItems: "center", }, buttonText: { color: "white", fontWeight: "bold", }, dangerButton: { backgroundColor: "#ff6b6b", }, switchContainer: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginBottom: 8, }, switchLabel: { fontSize: 16, }, description: { fontSize: 14, color: "#666", marginBottom: 16, }, saveButton: { backgroundColor: "#4CAF50", padding: 16, borderRadius: 8, alignItems: "center", marginBottom: 32, }, saveButtonText: { color: "white", fontWeight: "bold", fontSize: 16, }, }) export default SettingsScreen [V0_FILE]typescriptreact:file="components/NotificationItem.tsx" import { View, Text, StyleSheet } from "react-native" import { formatDistanceToNow } from "date-fns" const NotificationItem = ({ notification }) => { const formattedTime = formatDistanceToNow(new Date(notification.timestamp), { addSuffix: true }) return ( {notification.appName} {formattedTime} {notification.title} {notification.message && ( {notification.message} )} ) } const styles = StyleSheet.create({ container: { backgroundColor: "white", borderRadius: 8, padding: 16, marginBottom: 8, elevation: 1, }, header: { flexDirection: "row", justifyContent: "space-between", marginBottom: 8, }, appName: { fontSize: 14, fontWeight: "bold", color: "#2196F3", }, timestamp: { fontSize: 12, color: "#888", }, title: { fontSize: 16, fontWeight: "500", marginBottom: 4, }, message: { fontSize: 14, color: "#444", }, }) export default NotificationItem [V0_FILE]typescriptreact:file="services/NotificationService.js" import { Platform } from "react-native" import AsyncStorage from "@react-native-async-storage/async-storage" import NotificationListener from "react-native-notification-listener" import BackgroundService from "react-native-background-actions" import DeviceInfo from "react-native-device-info" class NotificationService { constructor(supabaseClient) { this.supabase = supabaseClient this.deviceId = null this.settings = { syncFrequency: 5, // minutes maxLocalStorage: 100, // notifications batteryOptimization: true, } this.localNotifications = [] this.isInitialized = false this.listeners = [] } async initialize() { if (this.isInitialized) return try { // Get device ID this.deviceId = await DeviceInfo.getUniqueId() // Load settings await this.loadSettings() // Load cached notifications await this.loadLocalNotifications() this.isInitialized = true } catch (error) { console.error("Error initializing NotificationService:", error) throw error } } async loadSettings() { try { const syncFrequency = await AsyncStorage.getItem("SYNC_FREQUENCY") const maxLocalStorage = await AsyncStorage.getItem("MAX_LOCAL_STORAGE") const batteryOptimization = await AsyncStorage.getItem("BATTERY_OPTIMIZATION") if (syncFrequency) this.settings.syncFrequency = Number.parseInt(syncFrequency, 10) if (maxLocalStorage) this.settings.maxLocalStorage = Number.parseInt(maxLocalStorage, 10) if (batteryOptimization !== null) this.settings.batteryOptimization = batteryOptimization === "true" } catch (error) { console.error("Error loading settings:", error) } } async updateSettings(newSettings) { this.settings = { ...this.settings, ...newSettings } // If the background service is running, restart it with new settings if (await this.getServiceStatus()) { await this.stopService() await this.startService() } } async loadLocalNotifications() { try { const storedNotifications = await AsyncStorage.getItem("local_notifications") if (storedNotifications) { this.localNotifications = JSON.parse(storedNotifications) } } catch (error) { console.error("Error loading local notifications:", error) } } async saveLocalNotifications() { try { // Trim the array to the maximum size if (this.localNotifications.length > this.settings.maxLocalStorage) { this.localNotifications = this.localNotifications.slice(0, this.settings.maxLocalStorage) } await AsyncStorage.setItem("local_notifications", JSON.stringify(this.localNotifications)) } catch (error) { console.error("Error saving local notifications:", error) } } async clearLocalNotifications() { try { this.localNotifications = [] await AsyncStorage.removeItem("local_notifications") } catch (error) { console.error("Error clearing local notifications:", error) throw error } } async getServiceStatus() { return BackgroundService.isRunning() } async startService() { if (!this.isInitialized) { await this.initialize() } if (await this.getServiceStatus()) { return // Service is already running } const backgroundTask = async (taskData) => { // Set up notification listener const unsubscribe = NotificationListener.onNotificationReceived(async (notification) => { if (Platform.OS === "android") { await this.processAndroidNotification(notification) } else if (Platform.OS === "ios") { await this.processIosNotification(notification) } }) // Keep the service alive await new Promise(async (resolve) => { // This loop keeps the task alive while (BackgroundService.isRunning()) { await this.syncNotificationsToSupabase() await new Promise((r) => setTimeout(r, this.settings.syncFrequency * 60 * 1000)) } // Clean up when the service is stopped unsubscribe() resolve() }) } const options = { taskName: "NotificationLogger", taskTitle: "Notification Logger", taskDesc: "Logging notifications in background", taskIcon: { name: "ic_launcher", type: "mipmap", }, color: "#2196F3", parameters: { delay: 1000, }, linkingURI: "notificationlogger://settings", } await BackgroundService.start(backgroundTask, options) } async stopService() { if (await this.getServiceStatus()) { await BackgroundService.stop() } } async processAndroidNotification(notification) { try { // Extract notification data const { app, title, text, timestamp } = notification // Create notification object const notificationData = { appName: app || "Unknown", title: title || "", message: text || "", timestamp: timestamp || new Date().toISOString(), deviceId: this.deviceId, platform: "android", } // Add to local cache this.localNotifications.unshift(notificationData) await this.saveLocalNotifications() // Notify listeners this.notifyListeners(notificationData) // Try to sync immediately if possible this.syncNotificationsToSupabase().catch((err) => { console.error("Error syncing notification:", err) }) } catch (error) { console.error("Error processing Android notification:", error) } } async processIosNotification(notification) { try { // Extract notification data from iOS notification format const { aps, bundleId } = notification const title = aps?.alert?.title || "" const message = aps?.alert?.body || "" // Create notification object const notificationData = { appName: bundleId || "Unknown", title: title, message: message, timestamp: new Date().toISOString(), deviceId: this.deviceId, platform: "ios", } // Add to local cache this.localNotifications.unshift(notificationData) await this.saveLocalNotifications() // Notify listeners this.notifyListeners(notificationData) // Try to sync immediately if possible this.syncNotificationsToSupabase().catch((err) => { console.error("Error syncing notification:", err) }) } catch (error) { console.error("Error processing iOS notification:", error) } } async syncNotificationsToSupabase() { if (!this.supabase || this.localNotifications.length === 0) { return } try { // Find notifications that haven't been synced yet const unsynced = this.localNotifications.filter((n) => !n.synced) if (unsynced.length === 0) { return } // Prepare notifications for upload const notificationsToUpload = unsynced.map(({ synced, ...notification }) => notification) // Upload to Supabase const { data, error } = await this.supabase.from("notifications").insert(notificationsToUpload) if (error) { throw error } // Mark as synced this.localNotifications = this.localNotifications.map((n) => { if (!n.synced) { return { ...n, synced: true } } return n }) // Save updated local notifications await this.saveLocalNotifications() } catch (error) { console.error("Error syncing notifications to Supabase:", error) } } async getRecentNotifications(limit = 20) { if (!this.isInitialized) { await this.initialize() } return this.localNotifications.slice(0, limit) } subscribeToNotifications(callback) { this.listeners.push(callback) return { unsubscribe: () => { this.listeners = this.listeners.filter((listener) => listener !== callback) }, } } notifyListeners(notification) { this.listeners.forEach((listener) => { try { listener(notification) } catch (error) { console.error("Error in notification listener:", error) } }) } } export default NotificationService [V0_FILE]typescriptreact:file="utils/permissions.js" import { Platform, PermissionsAndroid } from "react-native" import NotificationListener from "react-native-notification-listener" export const checkNotificationPermission = async () => { try { if (Platform.OS === "android") { // For Android, we need to check if we have notification listener permission const status = await NotificationListener.isPermissionGranted() return status } else if (Platform.OS === "ios") { // For iOS, we need to request notification permission // This is typically handled by the app's Info.plist return true } return false } catch (error) { console.error("Error checking notification permission:", error) return false } } export const requestNotificationPermission = async () => { try { if (Platform.OS === "android") { // For Android, we need to open the notification listener settings await NotificationListener.requestPermission() // After requesting, check if permission was granted return await NotificationListener.isPermissionGranted() } else if (Platform.OS === "ios") { // For iOS, permission request is handled by the system return true } return false } catch (error) { console.error("Error requesting notification permission:", error) return false } } export const checkInternetPermission = async () => { try { if (Platform.OS === "android") { const result = await PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.INTERNET) return result } else { // iOS doesn't require explicit internet permission return true } } catch (error) { console.error("Error checking internet permission:", error) return false } } export const requestInternetPermission = async () => { try { if (Platform.OS === "android") { const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.INTERNET, { title: "Internet Permission", message: "This app needs access to the internet to sync notifications.", buttonNeutral: "Ask Me Later", buttonNegative: "Cancel", buttonPositive: "OK", }) return granted === PermissionsAndroid.RESULTS.GRANTED } else { // iOS doesn't require explicit internet permission return true } } catch (error) { console.error("Error requesting internet permission:", error) return false } }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This