Moving to another screen after loading screen finishes

Question

In my react native application, in home screen there is a button to open a compass that shows the direction of a specific location. For that I need the coordinates of the user to be passed to the compass screen to make the calculations, m passing the values in the navigator.

Iam loading the coordinates on componentDidMount() method of home screen, my problem is that getting the coordinates of the user sometimes takes a bit of time (depending on the user's gps signal strength and his/her device), so I used conditional render to show a "loading" component if the user presses on compass button before coordinates are loaded. But the problem is that m not knowing how to send him/her to compass screen after the loader, because right now after the loader he/she stays in home screen, and has to press the button again to go to the compass.

  state = {
    currentLongitude: "unknown",
    currentLatitude: "unknown",
    locationLoading: false,
  };

getCards = () => [...
{id: "3",
      card: this.languageCard("Compass"),
      onPress: () => {
        this.state.currentLatitude != "unknown"
          ? this.props.navigation.navigate("Compass", {
              latitude: this.state.currentLatitude,
              longitude: this.state.currentLongitude,
            })
          : this.setState({ locationLoading: true });
                      },
  }...]

  componentDidMount() {
        this.requestLocation();
  }

requestLocation() {
    var that = this;
    if (Platform.OS === "ios") {
      this.callLocation(that);
    } else {
      async function requestLocationPermission() {
        try {
          const granted = await PermissionsAndroid.request(
            PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
            {
              title: "Location Access Required",
              message: "This App needs to Access your location",
            }
          );
          if (granted === PermissionsAndroid.RESULTS.GRANTED) {
            that.callLocation(that);
          } else {
            alert("Permission Denied");
          }
        } catch (err) {
          alert("err", err);
          console.warn(err);
        }
      }
      requestLocationPermission();
    }
  }

  callLocation(that) {
    Geolocation.getCurrentPosition(
      (position) => {
        const currentLongitude = JSON.stringify(position.coords.longitude);
        const currentLatitude = JSON.stringify(position.coords.latitude);
        that.setState({ currentLongitude: currentLongitude });
        that.setState({ currentLatitude: currentLatitude });
        this.setState({ locationLoading: false });
      },
      (error) => alert(error.message),
      { enableHighAccuracy: false, timeout: 20000, maximumAge: 1000 }
    );
  }

render() {
    return this.state.locationLoading ? (
      <Loader />
    ) : (
      <SafeAreaView>
....
</SafeAreaView>