-
-
Notifications
You must be signed in to change notification settings - Fork 354
Format Expo UI #4973
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Format Expo UI #4973
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
iOS (legacy) Performance metrics 🚀
|
| Revision | Plain | With Sentry | Diff |
|---|---|---|---|
| f870f2d+dirty | 1227.18 ms | 1232.30 ms | 5.12 ms |
| 472960b+dirty | 1213.96 ms | 1222.58 ms | 8.62 ms |
| fb47c4a+dirty | 1231.00 ms | 1231.33 ms | 0.33 ms |
| 7eff2d7+dirty | 1225.34 ms | 1234.53 ms | 9.19 ms |
| 3c99746+dirty | 1215.12 ms | 1222.31 ms | 7.18 ms |
App size
| Revision | Plain | With Sentry | Diff |
|---|---|---|---|
| f870f2d+dirty | 2.63 MiB | 3.79 MiB | 1.15 MiB |
| 472960b+dirty | 2.63 MiB | 3.79 MiB | 1.15 MiB |
| fb47c4a+dirty | 2.63 MiB | 3.80 MiB | 1.17 MiB |
| 7eff2d7+dirty | 2.63 MiB | 3.79 MiB | 1.16 MiB |
| 3c99746+dirty | 2.63 MiB | 3.78 MiB | 1.15 MiB |
Android (new) Performance metrics 🚀
|
| Revision | Plain | With Sentry | Diff |
|---|---|---|---|
| f870f2d+dirty | 398.49 ms | 434.24 ms | 35.75 ms |
| fb47c4a+dirty | 408.58 ms | 407.17 ms | -1.41 ms |
| 472960b+dirty | 394.39 ms | 376.18 ms | -18.20 ms |
| 7eff2d7+dirty | 393.13 ms | 426.77 ms | 33.65 ms |
| 3c99746+dirty | 400.65 ms | 399.59 ms | -1.06 ms |
App size
| Revision | Plain | With Sentry | Diff |
|---|---|---|---|
| f870f2d+dirty | 7.15 MiB | 8.34 MiB | 1.18 MiB |
| fb47c4a+dirty | 7.15 MiB | 8.35 MiB | 1.20 MiB |
| 472960b+dirty | 7.15 MiB | 8.34 MiB | 1.18 MiB |
| 7eff2d7+dirty | 7.15 MiB | 8.35 MiB | 1.20 MiB |
| 3c99746+dirty | 7.15 MiB | 8.34 MiB | 1.18 MiB |
iOS (new) Performance metrics 🚀
|
| Revision | Plain | With Sentry | Diff |
|---|---|---|---|
| f870f2d+dirty | 1230.08 ms | 1238.88 ms | 8.80 ms |
| 472960b+dirty | 1243.67 ms | 1233.57 ms | -10.11 ms |
| fb47c4a+dirty | 1243.40 ms | 1245.86 ms | 2.46 ms |
| 7eff2d7+dirty | 1224.84 ms | 1227.94 ms | 3.10 ms |
| 3c99746+dirty | 1227.65 ms | 1228.81 ms | 1.16 ms |
App size
| Revision | Plain | With Sentry | Diff |
|---|---|---|---|
| f870f2d+dirty | 3.19 MiB | 4.36 MiB | 1.17 MiB |
| 472960b+dirty | 3.19 MiB | 4.36 MiB | 1.17 MiB |
| fb47c4a+dirty | 3.19 MiB | 4.37 MiB | 1.18 MiB |
| 7eff2d7+dirty | 3.19 MiB | 4.36 MiB | 1.17 MiB |
| 3c99746+dirty | 3.19 MiB | 4.35 MiB | 1.16 MiB |
Android (legacy) Performance metrics 🚀
|
| Revision | Plain | With Sentry | Diff |
|---|---|---|---|
| fb47c4a | 435.33 ms | 434.94 ms | -0.40 ms |
| 472960b | 418.84 ms | 405.38 ms | -13.46 ms |
| 7eff2d7 | 420.64 ms | 401.86 ms | -18.78 ms |
| 3c99746 | 399.51 ms | 429.09 ms | 29.58 ms |
| f870f2d | 444.67 ms | 449.62 ms | 4.95 ms |
App size
| Revision | Plain | With Sentry | Diff |
|---|---|---|---|
| fb47c4a | 17.75 MiB | 19.60 MiB | 1.85 MiB |
| 472960b | 17.75 MiB | 19.58 MiB | 1.83 MiB |
| 7eff2d7 | 17.75 MiB | 19.60 MiB | 1.85 MiB |
| 3c99746 | 17.75 MiB | 19.58 MiB | 1.83 MiB |
| f870f2d | 17.75 MiB | 19.58 MiB | 1.83 MiB |
antonis
approved these changes
Jul 7, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for improving the sample app @lucas-zimerman 🙇
The changes LGTM 🎸
NIT Suggestion: I was thinking that we could wrap everything in a scrollview so that the scroll indicator moves at the edge. Wdyt?
| Current | Full scrollview |
|---|---|
![]() |
![]() |
suggested index.tsx
import { Button, ScrollView, StyleSheet } from 'react-native';
import * as Sentry from '@sentry/react-native';
import { reloadAppAsync, isRunningInExpoGo } from 'expo';
import * as DevClient from 'expo-dev-client';
import { Text, View } from '@/components/Themed';
import { setScopeProperties } from '@/utils/setScopeProperties';
import React from 'react';
import * as WebBrowser from 'expo-web-browser';
import { useUpdates } from 'expo-updates';
import { isWeb } from '../../utils/isWeb';
export default function TabOneScreen() {
const { currentlyRunning } = useUpdates();
return (
<ScrollView>
<View style={styles.container}>
<Sentry.TimeToInitialDisplay record />
<Text>Welcome to Sentry Expo Sample App!</Text>
<Text>Update ID: {currentlyRunning.updateId}</Text>
<Text>Channel: {currentlyRunning.channel}</Text>
<Text>Runtime Version: {currentlyRunning.runtimeVersion}</Text>
<View style={styles.buttonWrapper}>
<Button
title="Open DevMenu"
onPress={() => {
DevClient.openMenu();
}}
disabled={isWeb()}
/>
</View>
<View style={styles.buttonWrapper}>
<Button
title="Capture message"
onPress={() => {
Sentry.captureMessage('Captured message');
}}
/>
</View>
<View style={styles.buttonWrapper}>
<Button
title="Capture exception"
onPress={() => {
Sentry.captureException(new Error('Captured exception'));
}}
/>
</View>
<View style={styles.buttonWrapper}>
<Button
title="Capture exception with cause"
onPress={() => {
const error = new Error('Captured exception');
error.cause = new Error('Cause of captured exception');
Sentry.captureException(error);
}}
/>
</View>
<View style={styles.buttonWrapper}>
<Button
title="Uncaught Thrown Error"
onPress={() => {
throw new Error('Uncaught Thrown Error');
}}
/>
</View>
<View style={styles.buttonWrapper}>
<Button
title="Unhandled Promise Rejection"
onPress={() => {
// TODO: No working in Expo Go App
Promise.reject(new Error('Unhandled Promise Rejection'));
}}
/>
</View>
<View style={styles.buttonWrapper}>
<Button
title="Native Crash"
onPress={() => {
if (isRunningInExpoGo()) {
console.warn('Not supported in Expo Go. Build the application to test this feature.');
return;
}
Sentry.nativeCrash();
}}
/>
</View>
<View style={styles.buttonWrapper}>
<Button
title="Show feedback form"
onPress={() => {
Sentry.showFeedbackWidget();
}}
/>
</View>
<View style={styles.buttonWrapper}>
<Button
title="Show feedback button"
onPress={() => {
Sentry.showFeedbackButton();
}}
/>
</View>
<View style={styles.buttonWrapper}>
<Button
title="Set Scope Properties"
onPress={() => {
setScopeProperties();
}}
/>
</View>
<View style={styles.buttonWrapper}>
<Button
title="console.warn()"
onPress={() => {
console.warn('This is a warning.');
}}
/>
</View>
<View style={styles.buttonWrapper}>
<Button
title="Flush"
onPress={async () => {
await Sentry.flush();
console.log('Sentry.flush() completed.');
}}
/>
</View>
<View style={styles.buttonWrapper}>
<Button
title="Close"
onPress={async () => {
await Sentry.close();
console.log('Sentry.close() completed.');
}}
/>
</View>
<View style={styles.buttonWrapper}>
<Button title="Reload" onPress={() => reloadAppAsync()} />
</View>
<View style={styles.buttonWrapper}>
<Button
title="Open WebBrowser"
onPress={() => {
WebBrowser.openBrowserAsync('https://sentry.io');
}}
/>
</View>
<View style={styles.buttonWrapper}>
<Button
title="Set different types of tags globally"
onPress={async () => {
Sentry.setTags({
number: 123,
boolean: true,
null: null,
undefined: undefined,
symbol: Symbol('symbol'),
string: 'string',
bigint: BigInt(123),
});
Sentry.captureMessage('Message with different types of tags globally');
Sentry.setTags({
number: undefined,
boolean: undefined,
null: undefined,
symbol: undefined,
string: undefined,
bigint: undefined,
});
}}
/>
</View>
<View style={styles.buttonWrapper}>
<Button
title="Set different types of tags in scope"
onPress={async () => {
const evt = {
message: 'Message with different types of tags isolated',
tags: {
number: 123,
boolean: true,
null: null,
undefined: undefined,
symbol: Symbol('symbol'),
string: 'abc',
bigint: BigInt(123),
},
};
Sentry.captureEvent(evt);
}}
/>
</View>
</View>
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontSize: 20,
fontWeight: 'bold',
},
separator: {
marginVertical: 30,
height: 1,
width: '80%',
},
buttonWrapper: {
marginVertical: 6,
marginHorizontal: 12,
width: '80%',
},
});
|
Thank you for the suggestions @antonis ! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.


📢 Type of change
📜 Description
Previous app had buttons with different sizes and also no scroll, making it hard to select items on the bottom.
This pr adds a scrollview and also makes all buttons the same size
💡 Motivation and Context
💚 How did you test it?
📝 Checklist
sendDefaultPIIis enabled🔮 Next steps
#skip-changelog.