React-Native Navigation and Promise Rejection-CodePudding

I have broken down into a simple example something I cannot solve. The code below appears to work fine to the point where I add navigation into the check function, as indicated below.

It then fails with "Possible Unhandled Promise Rejection (id: 0)"

App.js

import React from 'react';
import { Text, View, Button, } from 'react-native';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import { HomeScreen, NewScreen } from './ui/screens.js';

import { apiCall } from './api/server.js';

const Stack = createStackNavigator();

const App = () => {
    const check = async () => {
        const navigation = useNavigation(); <--------- Added, then failure

        try {
            const response = await apiCall();
            console.log(response);
            navigation.navigate("NewScreen"); <------- Added, then failure
        }
        catch(err) {
            console.log("Caught: "   err);
        }
    };

    return (
        <NavigationContainer>{
            <Stack.Navigator>
                <Stack.Screen name="Home">
                    {(props) => (
                        <HomeScreen {...props} check={check} />
                    )}
                </Stack.Screen>
                <Stack.Screen name="New"
                    component={NewScreen}
                />
            </Stack.Navigator>
        }</NavigationContainer>
    );
}

export default App;

server.js

import base64 from 'react-native-base64';
import * as global from './defs.js';

export const apiCall = async () => {

    try {
        const response = await fetch(global.SITE   "/ttt.php", {
            method: 'POST',
            headers: {
                'Content-type': 'application/x-www-form-urlencoded; charset=UTF-8',
                'Authorization': 'Basic '   base64.encode(global.BASICAUTHUSER   ':'   global.BASICAUTHPWD)
            }
        });

        console.log(response);

        if (!response.ok) {
            return new Promise((resolve, reject) => {
                reject(new Error(httpError(response.status)));
            });
        }

        return response.json();
    }

    catch(err) {
        return err;
    };
};

screens.js

import React from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';

export function HomeScreen({ check, navigation }) {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Button title="Next" onPress={check} />
        </View>
    );
}

export function NewScreen() {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Activation Screen.</Text>
        </View>
    );
}

Any help gratefully received.

CodePudding user response：

you are trying to use useNavigation() hook but your component is not inside <NavigationContainer>.
i'll suggest you use your navigation/apiCall function inside HomeScreen and from there you can navigate easily.

more ref useNavigation Hook