ارسال إشعار عند اختيار Picker

نقوم بتثبيت المكتبات اللازمة:

expo install expo-notifications expo-permissions

بعد ذلك عليك إنشاء ملف لإدارة الإشعارات (مثلاً: NotificationManager.js) وضعي به الكود التالي:

import * as Notifications from 'expo-notifications';
import * as Permissions from 'expo-permissions';

export async function registerForPushNotificationsAsync() {
  const { status: existingStatus } = await Permissions.getAsync(Permissions.NOTIFICATIONS);
  let finalStatus = existingStatus;

  if (existingStatus !== 'granted') {
    const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS);
    finalStatus = status;
  }

  if (finalStatus !== 'granted') {
    console.log('Permission to receive push notifications denied');
    return;
  }

  const tokenData = await Notifications.getExpoPushTokenAsync();
  const token = tokenData.data;

  return token;
}

export async function sendNotification(title, body) {
  const token = await registerForPushNotificationsAsync();

  await Notifications.scheduleNotificationAsync({
    content: {
      title: title,
      body: body,
      data: { data: 'goes here' },
    },
    trigger: null,
    to: token,
  });
}

الآن تستطيعي استخدام ذلك الملف في مكان آخر في تطبيقك لإرسال الإشعارات، وتحديث مكون Picker ليستدعي وظيفة sendNotification عندما يتم اختيار قيمة جديدة، كالتالي:

import React, { useState } from 'react';
import { Picker, View } from 'react-native';
import { sendNotification } from './NotificationManager';

export default function MyComponent() {
  const [selectedValue, setSelectedValue] = useState("option1");

  const handlePickerChange = (itemValue, itemIndex) => {
    setSelectedValue(itemValue);
    sendNotification('Picker Selected', `You selected: ${itemValue}`);
  };

  return (
    <View>
      <Picker
        selectedValue={selectedValue}
        onValueChange={handlePickerChange}
      >
        <Picker.Item label="Option 1" value="option1" />
        <Picker.Item label="Option 2" value="option2" />
        <Picker.Item label="Option 3" value="option3" />
      </Picker>
    </View>
  );
}