React Native. How can I navigate to the next screen with out onPress()

user_19215872 0
Viewed 75

So im developing a fall detector app, all I want is to when function Notify() activates, it will navigate to next screen where it will start a timer countdown, with out onPress navigation. Anyone knows how to do it ?

The problem is that I only know how to navigate through onPress, but how can you navigate to next screen when function gets executed ?

import React, { Alert, useState, useEffect } from 'react';
import { StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import NotificationPopup from 'react-native-push-notification-popup';
import { Gyroscope } from 'expo-sensors';
import "react-native-gesture-handler";
import { CountdownCircleTimer } from 'react-native-countdown-circle-timer';
import { NavigationContainer } from "@react-navigation/native";
import AlertUser from '../Screens/alert';


 function SensorResult() {
  const [data, setData] = useState({
    x: 0,
    y: 0,
    z: 0,
  });
  const [subscription, setSubscription] = useState(null);

  const _slow = () => {
    Gyroscope.setUpdateInterval(1000);
  };

  const _fast = () => {
    Gyroscope.setUpdateInterval(16);
  };

  const _subscribe = () => {
    setSubscription(
      Gyroscope.addListener(gyroscopeData => {setData(gyroscopeData);})
    );
  };

  const _unsubscribe = () => {
    subscription && subscription.remove();
    setSubscription(null);
  };

  useEffect(() => {
    _subscribe();
    return () => _unsubscribe();
  }, []);

  const { x, y, z } = data;


  const Notify = () => {
    if(x > 1 || y > 1 || z > 1){
      var fall = "You have fallen";
      console.log(fall);
      // navigation.navigate("AlertUser");
      this.popup.show({
        title: 'Alert',
        message: 'You have fallen',
        button: {
          text: 'OK',
          color: '#008000',
          flex: 1,
          textAlign: 'center',
          onPress: () => console.log('OK Pressed'),
        },
        duration: 50000,
        onClose: () => {
          console.log('closed');
        },
      });
    }
  }

  
  console.log(Notify());
  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        x: {Math.round(x)} y: {Math.round(y)} z: {Math.round(z)}
      </Text>
      <View style={styles.buttonContainer}>
        <TouchableOpacity onPress={subscription ? _unsubscribe : _subscribe} style={styles.button}>
          <Text>{subscription ? 'On' : 'Off'}</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={_slow} style={[styles.button, styles.middleButton]}>
          <Text>Slow</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={_fast} style={styles.button}>
          <Text>Fast</Text>
        </TouchableOpacity>
        
        <NotificationPopup ref={ref => this.popup = ref} styles={{
          flex:1, 
           width: 50,
           }}>
        </NotificationPopup>
        
       
        

      </View>
      

      
    </View>
  );
  
}


export default SensorResult;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 10,
  },
  text: {
    textAlign: 'center',
  },
  buttonContainer: {
    flexDirection: 'row',
    alignItems: 'stretch',
    marginTop: 15,
  },
  button: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#eee',
    padding: 10,
  },
  middleButton: {
    borderLeftWidth: 1,
    borderRightWidth: 1,
    borderColor: '#ccc',
  },
  Alert: {
    flex: 1,
  },
  
  


  });
react-native reactjs javascript
1 Answers

Firstly Why didn't you use arrow function for your components?

I mean:

const SensorResult = ( ) => { // your component's code }

answering your question you can achieve it 2 ways, first by using the navigation hook inside your component like this:

const { navigate } = useNavigation();
navigate("your_screen_name", {/*if you want to pass data to the screen */})

The second way to access to navigation properties is by props like this:

const SensorResult = ( props ) => { 
    props.navigation.navigate("your screen name", {/*if you want to pass data to the screen */})
    // your component's code 
}

I saw that you have a popup when notify is called and some criteria are meets, so you have 2 option there, call your navigation property to the next screen when user press ok in the popup onpress function or just navigate to the next page without the popup just by calling your navigation property like this:

const Notify = () => {
    if(x > 1 || y > 1 || z > 1){
      var fall = "You have fallen";
      console.log(fall);
      
      //first approach
      this.popup.show({
        title: 'Alert',
        message: 'You have fallen',
        button: {
          text: 'OK',
          color: '#008000',
          flex: 1,
          textAlign: 'center',
          onPress: () => navigation.navigate("AlertUser"),
        },
        duration: 50000,
        onClose: () => {
            //also navigate when popup is closed
          navigation.navigate("AlertUser")
        },
      });
      
      //or second approach
      navigation.navigate("AlertUser")
    }
  }

or second approach

const Notify = () => {
    if(x > 1 || y > 1 || z > 1){
      var fall = "You have fallen";
      console.log(fall);
      
      //or second approach
      navigation.navigate("AlertUser")
    }
  }
user_88447420
Related