docs: 📝 update example app to expo 52

examples/expo-52/.gitignore

@@ -0,0 +1,38 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+app-example

examples/expo-52/App.tsx

@@ -0,0 +1,33 @@
+import Bugsnag from "@bugsnag/expo";
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+import Controls from "./components/Controls";
+import ErrorView from "./components/ErrorView";
+
+Bugsnag.start();
+
+// Create the error boundary...
+const ErrorBoundary = Bugsnag.getPlugin('react').createErrorBoundary(React);
+
+const onError = (event: any) => {
+  // callback will only run for errors caught by boundary
+}
+
+export default function Index() {
+  return (
+    <ErrorBoundary FallbackComponent={ErrorView} onError={onError}>
+      <View style={styles.screenContainer}>
+        <Text>Expo example app</Text>
+        <Controls />
+      </View>
+    </ErrorBoundary>
+  )
+}
+
+const styles = StyleSheet.create({
+  screenContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center"
+  }
+});

examples/expo-52/app.json

@@ -0,0 +1,17 @@
+{
+  "expo": {
+    "name": "expo-example-52",
+    "slug": "expo-example-52",
+    "version": "1.0.0",
+    "newArchEnabled": true,
+    "platforms": [
+      "ios",
+      "android"
+    ],
+    "extra": {
+      "bugsnag": {
+        "apiKey": "API_KEY"
+      }
+    }
+  }
+}

examples/expo-52/components/Button.tsx

@@ -0,0 +1,34 @@
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+interface Props {
+    onPress: () => void
+    title: string
+}
+
+const Button: React.FunctionComponent<Props> = ({ onPress, title }) => (
+    <View style={styles.buttonContainer}>
+        <TouchableOpacity style={styles.button} onPress={onPress} >
+            <Text style={styles.text}>{title}</Text>
+        </TouchableOpacity>
+    </View>
+);
+
+export default Button
+
+const styles = StyleSheet.create({
+    button: {
+        backgroundColor: '#003366',
+        borderRadius: 4,
+        paddingVertical: 10,
+        paddingHorizontal: 25,
+    },
+    text: {
+        fontSize: 16,
+        lineHeight: 21,
+        letterSpacing: 0.25,
+        color: 'white',
+    },
+    buttonContainer: {
+        paddingVertical: 10,
+    }
+});

examples/expo-52/components/Controls.tsx

@@ -0,0 +1,32 @@
+import Bugsnag from '@bugsnag/expo';
+import React from 'react';
+import { View } from 'react-native';
+import Button from './Button';
+
+function unhandledError() {
+    throw new Error('Unhandled error!');
+}
+
+function handledError() {
+    Bugsnag.notify(new Error('Handled error!'));
+}
+
+const Controls = () => {
+    const [yeah, setYeah] = React.useState(false);
+
+    const triggerRenderError = () => {
+        setYeah(true)
+    }
+
+    return (
+        <View>
+            <Button onPress={handledError} title='Handled error' />
+            <Button onPress={unhandledError} title='Unhandled error' />
+            <Button onPress={triggerRenderError} title='Render error' />
+            {/* @ts-expect-error This will throw an error because the property doesn't exist */}
+            {yeah ? <span>{yeah.non.existent.property}</span> : null}
+        </View>
+    )
+}
+
+export default Controls

examples/expo-52/components/ErrorView.tsx

@@ -0,0 +1,23 @@
+import { Button, StyleSheet, Text, View } from 'react-native';
+
+interface Props {
+    clearError: () => void
+}
+
+const ErrorView: React.FunctionComponent<Props> = ({ clearError }) => (
+    <View style={styles.screenContainer}>
+        <Text>Inform users of an error in the component tree.
+            Use clearError to reset ErrorBoundary state and re-render child tree.</Text>
+        <Button onPress={clearError} title='Reset' />
+    </View>
+);
+
+export default ErrorView
+
+const styles = StyleSheet.create({
+    screenContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center'
+    }
+});

examples/expo-52/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "expo-52",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios"
+  },
+  "dependencies": {
+    "@bugsnag/expo": "^52.0.0",
+    "expo": "~52.0.11",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.19.3"
+  }
+}

examples/expo-52/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx"
+  ]
+}