Skip to content

Instantly share code, notes, and snippets.

@jpstrikesback

jpstrikesback/hugeMistake.jsx

Created April 11, 2019 21:33
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jpstrikesback/5c0b9e2dd4f43dc56c2ac0134c0c561a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jpstrikesback/5c0b9e2dd4f43dc56c2ac0134c0c561a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jpstrikesback created this gist Apr 11, 2019.
    94 changes: 94 additions & 0 deletions hugeMistake.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,94 @@
    import React, { Component } from 'react';
    import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native';
    import Error from './win-error.png';

    export class ErrorBoundary extends Component {
    constructor(props) {
    super(props);
    this.state = {
    error: false,
    message: '',
    details: {},
    };
    }
    componentDidCatch(err, errInfo) {
    console.error({ err, errInfo });
    this.setState(() => ({
    error: true,
    message: err.message.split('\n').shift(),
    details: { err, errInfo },
    }));
    }
    render() {
    if (this.state.error) {
    const { message } = this.state;
    return (
    <View style={styles.container}>
    <View style={styles.errorBox}>
    <View style={styles.errorBoxHeader}>
    <Text style={styles.headerText}>{message}</Text>
    </View>
    <View style={styles.body}>
    <Image
    source={Error}
    style={{ resizeMode: 'center', height: 25, width: 25 }}
    />
    <Text style={styles.innerText}>I've made a huge mistake</Text>
    </View>
    <TouchableOpacity>
    <View style={styles.button}>
    <Text style={styles.buttonText}>hide it</Text>
    </View>
    </TouchableOpacity>
    </View>
    </View>
    );
    }
    return this.props.children;
    }
    }

    const styles = StyleSheet.create({
    container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    },
    errorBox: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgb(238, 232, 217)',
    borderTopLeftRadius: 3,
    borderTopRightRadius: 3,
    borderWidth: 2,
    borderColor: 'rgb(14, 90, 227)',
    margin: 10,
    paddingBottom: 20,
    },
    errorBoxHeader: {
    backgroundColor: 'rgb(14, 90, 227)',
    shadowOpacity: 0.75,
    shadowRadius: 5,
    shadowColor: 'white',
    shadowOffset: { height: 0, width: 0 },
    padding: 5,
    },
    headerText: {
    color: 'white',
    },
    innerText: {
    padding: 20,
    },
    body: {
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
    },
    button: {
    backgroundColor: 'rgb(250,252,252)',
    borderWidth: 1,
    borderColor: 'rgb(95, 106, 114)',
    padding: 5,
    borderRadius: 3,
    },
    });