many thank for your great reply. That help a lot. I could reproduce withoout error, but it does not as expected, may be because my lake of knowledge.

Here my steps. First I renamed /hook/fieldContext.ts to /hook/filedProvider.tsx. I needed to add tsx to avoid error message at FieldContext.Provider.

I copied your 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 U move it to constants or components ?

Secondely: you asked to add <FieldProvider></FieldProvider> at the root of my application, where is the navigation. I am confuse.

My app structure is as the following

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

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

I added <FieldProvider>

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 (
 <FieldProvider>
  <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="alarmes"
      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>
  </FieldProvider>


  );
}

I was not really sure if it 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 alert.tsx (it need it as well) as that viw is very simple at the moment.

Here is what I tried

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>
    )
    
}

but {field} does not print anything. It show an error. and how my drop menu can update the value when the function

function onFieldChange(value:string) {    
  
  }

Many thanks for your help!!