CODEWITHSUNDEEP
reactjsreact-nativenavigationreact-navigation
EmilM
EmilM

Reputation: 137

A blank white screen in the React Navigation. React Native

I have a project on React Native and sometimes when errors occur, the application gets on the wrong route in the React Navigation. Therefore, I get a blank white screen as in the picture.

I would like to make the default page something like 404 pages like on the web. Is it possible?

Can I change this default white screen, write something there and indicate the link?

Thanks in advance!

enter image description here

Upvotes: 1

Views: 40885

Answers (3)

EchoGlobal.tech
EchoGlobal.tech

Reputation: 704

Yes, you can create a "404-like" page in React Native and handle these scenarios when your application gets on the wrong route. To do this, you can use a combination of a catch-all route and a custom error screen in your navigation configuration. Here's how you can achieve that using React Navigation:

First, create a custom error screen component that you'd like to display when the app navigates to an unexpected route:

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

const ErrorScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 20, fontWeight: 'bold' }}>404 - Page Not Found</Text>
      <TouchableOpacity onPress={() => navigation.navigate('Home')}>
        <Text style={{ color: 'blue', marginTop: 10 }}>Go to Home</Text>
      </TouchableOpacity>
    </View>
  );
};

export default ErrorScreen;

In your navigation configuration, add a catch-all route using a wildcard (*) pattern that will match any unhandled route and redirect to the ErrorScreen component:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import OtherScreen from './screens/OtherScreen';
import ErrorScreen from './screens/ErrorScreen';

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Other" component={OtherScreen} />
        {/* Catch-all route */}
        <Stack.Screen name="*" component={ErrorScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

With this setup, if your application navigates to an unexpected route, the ErrorScreen component will be displayed, providing a "404-like" page experience similar to the web.

Upvotes: 0

Kirill Novikov
Kirill Novikov

Reputation: 3067

Because Rect Native can cause JS side and native modules errors you can use a special package https://github.com/a7ul/react-native-exception-handler which allows you to catch both types of errors and show the user some useful information.

import {setJSExceptionHandler, getJSExceptionHandler} from 'react-native-exception-handler';

// For most use cases:
// registering the error handler (maybe u can do this in the index.android.js or index.ios.js)
setJSExceptionHandler((error, isFatal) => {
  // This is your custom global error handler
  // You do stuff like show an error dialog
  // or hit google analytics to track crashes
  // or hit a custom api to inform the dev team.
});
//=================================================
// ADVANCED use case:
const exceptionhandler = (error, isFatal) => {
  // your error handler function
};
setJSExceptionHandler(exceptionhandler, allowInDevMode);
// - exceptionhandler is the exception handler function
// - allowInDevMode is an optional parameter is a boolean.
//   If set to true the handler to be called in place of RED screen
//   in development mode also.

// getJSExceptionHandler gives the currently set JS exception handler
const currentHandler = getJSExceptionHandler();

Upvotes: 1

harold__hadrada
harold__hadrada

Reputation: 127

You could wrap whatever might cause an error in a try {} catch {} and then inside the catch, navigate to an error screen.

Upvotes: 1

Related Questions