DEV Community: Pierre

How to setup React Native / expo push notification according to different types of notification

Pierre — Thu, 05 Mar 2026 21:28:23 +0000

Hi, I am actually desperate.
I need to setup push notification on my IOS/Android app, I buold with React Native / Expo.

I could setup a simple push notification follwing this and this but my big problem is the following:

I have several sensors into several field. A fermer have installed the App on his/her smartphone and they can monitor the fields.

The farmers need to be alarmed with a push notification, when a sensor measures a measure under a threshold value. A farmer can own several fields (let's say 6 fields)

I want that farmer can active or not a field to be monitor and to be alarmed for the active fields.

For example,

if he do not active a field, he should never receive a push notification, excepted for the general notification (let's say the type "general"
if he active the field 2 and 4 and 5, he should reveive only push notification matching to the sensors on field 2,4 and 5.

On my PHP scrypt (on my remote server) I can send push notification, but the script should send a push notification to the IOS/Addroid which are registered for the active field. (2,4 and 5 according to my above example)

I spent days and weeks to search how I could registered the App of a smartphone according to my needs.

Step 1: the farmer open the App. The app is registred for push notification
Step 2: The farmer go the the setting view
Step 3: The farmer chose and select the fields he want to monitor

How Expo notification can save the selected field as channel or categories?
And how can my php script know on which devise it has to send the push notification

Other scenarios:
Smartphone 1 saved the fields 1, 2 ,3
Samrtphone 2 saved the field 2,4,6
Smartphone 3 saved the field 3
Smartphone 4 saved the field 4,5
Smartphone 5 saved the field 6

On the morning, a station on field 6 run into alarm. How can I setup Expo to send a push notification to the Samrtphone 2 and 5 only

On the after noon, the stations on fields 2 and 4 run into alarm. How can I setup Expo to send a notification to the Smartphone 1,2 and 4 only?

I want to inform an update, how can I send a push notification to all Samrtphone

I kindly thank for your help, because I am lost :)

Cheers

is there to use types in different screens

Pierre — Wed, 31 Dec 2025 22:47:58 +0000

Hi,
I declare the following type in my screen toto.tsx

type STA = { response: number, id: number, method: string, next: string | null, fields: { id_field: number, field_name: string, field_longname: string, field_city: string, field_lat: number, field_lng: number }[], stations: { id_field: number, field_name: string, id_station: number, station_longname: string, station_type_awe: string, id_station_type: number, station_type_name: string, station_archive: number, lat: number, lng: number, alt: number, measures: { datasets: { data:{ value: number, label: string, date: string, dataPointText: number }[], label: string, showLine:boolean, borderColor:string, backgroundColor:string, pointStyle:string, fill:boolean, borderWidth:number, pointRadius:number, type:string, }, labels: {}[], unit: string, chartContainer: string, id_sensor_type: number, id_sensor:number, sensor_type: string, sensor_type_longname: string, sensor_type_awe: string, }[], measures_found: number, station_found: number, latest_measure: string, }[], map_center:{ lat: number, lng: number, }, }

but I need it for the Screen titi.tsx, as well. I can copy/past it but if I need in a third Screen, it will be not easy to manage it if a change happen.

How can I create a file for that prupose, that I could import into the needed Screens?

Should I simply create a file in /constants/? But it be a .ts, a .tsx, a js?

That would ne great

Thanks

useContext does not update or show the value

Pierre — Sat, 31 May 2025 11:43:34 +0000

I need to save the ID of a field from the settings.tsx view. That value need to be used with other view, like stations.tsx, alarms.tsx, map.tsx.

If later, I need to watch another field, I can change the field from a drop menu and the new value must be used from the other field. It meens, I should be able to print the select ID filed from the other View, but it does not!

First I renamed /hook/fieldContext.ts to /hook/filedProvider.tsx. I needed to add ts*x* to avoid error message at FieldContext.Provider.

I copied a suggestion as the following

import React, { createContext, useState, ReactNode } from 'react';

type FieldContextType = {
  field: string;
  setField: (value: string) => void;
};

export const FieldContext = createContext<FieldContextType | undefined>(undefined);

export const FieldProvider = ({ children }: { children: ReactNode }) => {
  const [field, setField] = useState("-1");

  return (<FieldContext.Provider value={{ field, setField }}>
    {children}
  </FieldContext.Provider>);

};

Q1: I suppose, the above code is not a hook any more because of tsx. Should I move it to constants or components ?

Secondly: It has been asked to add <FieldProvider></FieldProvider> at the root of my application, where is the navigation. I am confuse.

Let me first introduce to my structure to better understand my problem

app
- (tab)
-- map
--- layout.tsx
--- [id].tsx
-- settings
--- layout.tsx
--- setting.tsx
--- info.tsx
-- stations.tsx
-- index.tsx
-- alarms.tsx
-- layout.tsx (add here)
- layout.tsx (or add here?)

My navigation look like

app/layout.tsx

import { Stack } from "expo-router";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient

export default function Layout() {      
  return (
    <QueryClientProvider client={queryClient}>
      <Stack>
        <Stack.Screen 
          name="(tabs)" 
          options={{ 
            headerShown: false
          }} 
        />
        <Stack.Screen 
          name="+not-found"
          /*
          options={{
            headerShown: false,
          }} 
          */
        />
      </Stack>
    </QueryClientProvider>
  );
}

and app/(tab)/layout.tsx

import FontAwesome from '@expo/vector-icons/FontAwesome6';
import { Tabs} from 'expo-router';
import { StyleSheet } from "react-native";
import { useThemeColors } from '@/hooks/useThemeColors';
import { useNavigation } from '@react-navigation/native';
import { useState } from "react";
import { FieldProvider } from '@/hooks/fieldProvider';


export default function TabLayout() {
  const colors= useThemeColors()
  const navigation = useNavigation();

  const [sortKey, setSortKey] = useState<"id_station" | "station_name">("id_station")

  return (
    <Tabs screenOptions={{ tabBarActiveTintColor: 'green'}}>
      <Tabs.Screen
        name="index"
        options={{
          headerShown: false,
          title: 'Home',
          headerStyle: {backgroundColor: colors.appHeadBackgroundColor, borderColor:'red'},
          headerTintColor: '#000',
          headerTitleStyle: {
            fontWeight: 'normal',
          },
          tabBarIcon: ({ color }) => <FontAwesome size={28} name="arrows-to-circle" color={color} />,  
          tabBarStyle: {
            display:'none',
            backgroundColor: colors.appTabBarBackgroundColor,
            paddingTop:8,
            height:70,
          }
        }}
      />
      <Tabs.Screen
        name="map"
        options={{
          title: 'Map',
          headerShown: false,
          headerStyle: { backgroundColor: colors.appHeadBackgroundColor},
          headerTintColor: '#000',
          headerTitleStyle: {
            fontWeight: 'normal',
          },
          tabBarIcon: ({ color }) => <FontAwesome size={28} name="map-location-dot" color={color} />,
          //headerTitle: props => <LogoTitle />,
          tabBarStyle: {
            backgroundColor: colors.appTabBarBackgroundColor,
            //paddingTop:8,
            height:70,
          }
        }}
      />
      <Tabs.Screen
        name="station"
        options={{
          headerStyle: { 
            backgroundColor: colors.appHeadBackgroundColor
          },
          headerTintColor: '#000',
          headerTitleStyle: {
            fontWeight: 'normal',
          },
          headerShown: false,
          href: null,
          tabBarIcon: ({ color }) => <FontAwesome size={28} name="chart-line" color={color} />,
          tabBarStyle: {
            //backgroundColor: colors.appTabBarBackgroundColor,
            //paddingTop:8,
            height:70,
          }
        }}
      />  
      <Tabs.Screen
        name="alarms"
        options={{
          title: 'Alarmes',
          headerShown: false,
          headerStyle: { backgroundColor: colors.appHeadBackgroundColor},
          headerTintColor: '#000',
          headerTitleStyle: {
            fontWeight: 'normal',
          },
          /*
          headerRight: () => (
            <Button onPress={() => router.back()}>Back</Button>
          ),
          */
          tabBarIcon: ({ color }) => <FontAwesome size={28} name="bell" color={color} />,
          //headerTitle: props => <LogoTitle />,
          tabBarStyle: {
            //backgroundColor: colors.appTabBarBackgroundColor,
            //paddingTop:8,
            height:70,
            //borderWidth:30,
          }
        }}
      />
      <Tabs.Screen
        name="stations"
        options={{
          title: 'Stations',
          headerShown: false,
          headerStyle: { backgroundColor: colors.appHeadBackgroundColor},
          headerTintColor: '#000',
          headerTitleStyle: {
            fontWeight: 'normal',
          },
          tabBarIcon: ({ color }) => <FontAwesome size={28} name="map-pin" color={color} />,
          tabBarStyle: {
            //backgroundColor: colors.appTabBarBackgroundColor,
            height:70,
          }
        }}
      />
      <Tabs.Screen
        name="settings"
        options={{
          title: 'Paramètres',
          headerShown: false,
          headerStyle: { backgroundColor: colors.appHeadBackgroundColor },
          headerTintColor: '#000',
          headerTitleStyle: {
            fontWeight: 'normal',
          },
          /*
          headerRight: () => (
            <Button onPress={() => router.back()}>Back</Button>
          ),
          */
          tabBarIcon: ({ color }) => <FontAwesome size={28} name="gear" color={color} />,
          //headerTitle: props => <LogoTitle />,
          tabBarStyle: {
              backgroundColor: colors.appTabBarBackgroundColor,
              //paddingTop:8,
              height:70,
            }
          }}
        />
    </Tabs>
  );
}

I was not really sure if <FieldProvider> should go to at app/layout.tsx or at app/(tab)/layout.tsx (I tried both)

Problem: How can I get the value in my view settings.tsx and map.tsx. I tried the following in my view alarms.tsx (it need it as well) as that view is very simple at the moment.

As <FieldProvider> is in app/layout.tsx, I tried the following, but the selected field is not printed, {filed} shows an error

import { Image, View } from "react-native";
import { useContext, useEffect, useState } from "react";
import { RootView } from "@/components/RootView";
import { ThemedText } from "@/components/ThemedText";
import { Row } from "@/components/Row";
import css from "@/hooks/styles";
import { useThemeColors } from "@/hooks/useThemeColors";
import AsyncStorage from '@react-native-async-storage/async-storage';
import { imagesHeader } from "@/components/imagesHeader";
import { FieldContext, FieldProvider } from "@/hooks/fieldProvider";

export default function Alarms() {

    const colors = useThemeColors()

    const field = useContext(FieldContext)

    return(
    <RootView>
      <View style={[{backgroundColor: colors.appHeadBackgroundColor }]}>
        <View style={css.jumbotronContainer}>
          <Image
            style={css.jumbotronImage}
            source={imagesHeader.alarms.uri}
          />       
        </View>
      </View>

      <View style={css.container}>
        <Row>
          <ThemedText>Terrain sélectionner: </ThemedText> 
          <ThemedText>{field}</ThemedText>
        </Row>
        <ThemedText style={[css.text,css.paragraphe]}>Aucune station en alarme</ThemedText>
      </View>
    </RootView>
    )
}

As I am a novice, I sure I missed some steps, but which one? :)

Thanks for your help!

How can I integrate Leaflet to React Native

Pierre — Tue, 03 Dec 2024 11:06:05 +0000

Hi,
I am very new with React Native. I built a smartphone app with Cordova but I want to migrate to Reat Native. My App use and need Leaftlet and Chartjs and I need to find a way to use those feature with my new Reat Native 7.6 and Expo App.

I investigated one full days trying different npm with React Native Leaflet but it looks like have been done for the 7.3 version or older, or I simply could not implement it due to my lake of practice with React Native.

I will appreciate if you could share your expertise with Leaftlet for React Native 7.6.

I found the React-leaflet npm. Is it compatible with React Native? or it's only built for React?
Would it possible to "inject" my javascript script, I developed for my web app. My Idea is to use my Javascript script I developped for my Cordova App (instead of the web app, even if it's very similar) and import is to React Native with some adaptaption. In that case, I would not need a npm.

My I create a map.js and include the leaflet js library and "duplicate" my cordova javascript script?

Do you have any experience with leaftlet and React Native 7.6?

Note: I would like to use OpenStreetMap instead of Google and Apple Map.

Many thanks for any help and I wish you a nice day
Cheers