Skip to content

Instantly share code, notes, and snippets.


wodCZ/App.tsx Secret

Created December 2, 2021 12:12
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Crash handling for react native
import {ApolloProvider} from '@apollo/client';
import React from 'react';
import 'react-native-gesture-handler';
import {Provider as PaperProvider} from 'react-native-paper';
import {enableFreeze} from 'react-native-screens';
import {RootComponent} from './src';
import {client} from './src/api';
import {theme} from './src/theme/theme';
import * as Sentry from '@sentry/react-native';
import {ErrorBoundary} from '@sentry/react-native';
import {AppCrash} from './src/screens/errors/AppCrash';
const App = () => {
return (
fallback={({error, componentStack, resetError}) => (
<AppCrash reloadApp={resetError} error={error.message} stack={componentStack} />
<ApolloProvider client={client}>
<PaperProvider theme={theme}>
<RootComponent />
export default Sentry.wrap(App);
import * as React from 'react';
import {Button, SafeAreaView, StyleSheet, Text, View} from 'react-native';
import RNBootSplash from 'react-native-bootsplash';
import {themeColors} from '../../theme/constants';
type Props = {reloadApp: () => void; error: string; stack: string | null};
export const AppCrash = ({reloadApp, error, stack}: Props) => {
React.useEffect(() => {
// Hide splashscreen in case the error happened before it was hidden by the app.
RNBootSplash.hide({fade: true});
}, []);
return (
<SafeAreaView style={styles.safeArea}>
<View style={styles.container}>
<Text style={styles.title}>Něco se nepovedlo</Text>
<Text style={styles.text}>O chybě jsme informovali naše techniky a pracujeme na její opravě.</Text>
<Button color={themeColors.primary} title={'Zkusit znovu'} onPress={reloadApp} />
<View style={styles.detailsContainer}>
<Text style={styles.details}>
Detail chyby: {error}
const styles = StyleSheet.create({
safeArea: {
flex: 1,
container: {
padding: 40,
backgroundColor: themeColors.background,
flexGrow: 1,
justifyContent: 'center',
title: {
color: themeColors.notification,
fontSize: 20,
textAlign: 'center',
paddingBottom: 20,
text: {
color: themeColors.notification,
textAlign: 'center',
paddingBottom: 20,
detailsContainer: {
padding: 20,
details: {
color: themeColors.disabled,
paddingTop: 20,
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment