Can't read params from navigation.navigate

Question

I'm building an app that detects sensors and shows the user information about the sensors automatically.

So I created a main page with a single tab to show a label saying "detecting", and when the system detects a sensor, a new page is opened with three tabs containing information about the sensor.

But I'm having some difficulties because I can't pass the sensor ID to the second page. I would like to know what am I doing wrong, and why the Props.params is undefined.

I'm trying to do something like that:

Main page tab navigator:

  render() {
    return (
      <NavigationContainer independent={true} >
        <Tab.Navigator>
          <Tab.Screen
            name="Detection"
            component={DetectScreen}
            options={{
              tabBarLabel: 'Detect',
              tabBarIcon: ({ color, size }) => (
                <MaterialCommunityIcons name="motion-sensor" color={color} size={size} />
              ),
            }}
          />
        </Tab.Navigator>
      </NavigationContainer>
    );
  }

function DetectScreen() {
  const Stack = createStackNavigator();
  return (
    <Stack.Navigator initialRouteName='Detect' screenOptions={{ headerShown: false }}>
      <Stack.Screen name='Detect' component={DetectionScreen} />
      <Stack.Screen name='Sensor' component={SensorScreen} />
    </Stack.Navigator>
  );
}

function DetectionScreen({ navigation }) {
  return (
    <SafeAreaView>
      <LinearGradient
        colors={['#000000', '#FFFFFF']}
        style={styles.main_container}>
        <SafeAreaView>
          <Detect navigation={navigation} />
        </SafeAreaView>
      </LinearGradient>
    </SafeAreaView>)
}

function SensorScreen({ navigation }) {
  return (
    <SafeAreaView>
      <LinearGradient
        colors={['#000000', '#FFFFFF']}
        style={styles.main_container}>
        <SafeAreaView style={styles.main_subcontainer}>
          <Sensor navigation={navigation}/>
        </SafeAreaView>
      </LinearGradient>
    </SafeAreaView>)
}

Detect class

export class Detect extends Component {
    constructor(props) {
        super(props);
        startDetecting()
    }
    
    startDetecting(){
        this.props.navigation.navigate("Sensor", {
            params:{
              sensorId: 123
           }
        })
    }
}

Opening screen when the sensor is detected

const Stack = createStackNavigator();
const Tab = createMaterialTopTabNavigator();

function TabStack() {
  return (
    <Tab.Navigator
      initialRouteName="Configurations"
      >
      <Tab.Screen
        name="FirstScreen"
        component={FirstScreen}
        options={{
          tabBarLabel: 'First'
        }} />
      <Tab.Screen
        name="SecondScreen"
        component={SecondScreen}
        options={{
          tabBarLabel: 'Second'
        }} />
      <Tab.Screen
        name="ThirdScreen"
        component={ThirdScreen}
        options={{
          tabBarLabel: 'Third'
        }} />
    </Tab.Navigator>
  );
}

export class Sensor extends Component {
  constructor(props) {
    super(props);
    console.log(props.params) //props.params is Undefined
  }
  render() {
    return (
      <NavigationContainer
        independent={true}
      >
        <Stack.Navigator
          initialRouteName="Sensor"
          screenOptions={{
            headerShown: false
          }}>
          <Stack.Screen
            name="TabStack"
            component={TabStack}
            options={{ title: 'Tab Stack' }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

Answer 1

1. Add route parameter to DetectionScreen function
2. Access sensorId in DetectionScreen by route.params.sensorId
3. You can then pass this value to the Detect component
4. Access this value in Detect component using this.props.sensordId

code below

function DetectionScreen({ navigation,route }) {
return (
<SafeAreaView>
  <LinearGradient
    colors={['#000000', '#FFFFFF']}
    style={styles.main_container}>
    <SafeAreaView>
      <Detect sensorId={route.params.sensorId} />
    </SafeAreaView>
  </LinearGradient>
</SafeAreaView>)
}

as explained here https://reactnavigation.org/docs/params/