diff --git a/samples/react-native/android/app/build.gradle b/samples/react-native/android/app/build.gradle index 6593b7fd3..a6bca0b1a 100644 --- a/samples/react-native/android/app/build.gradle +++ b/samples/react-native/android/app/build.gradle @@ -3,6 +3,12 @@ apply plugin: "org.jetbrains.kotlin.android" apply plugin: "com.facebook.react" apply plugin: "io.sentry.android.gradle" +project.ext.vectoricons = [ + iconFontNames: [ 'Ionicons.ttf' ] // Specify font files +] + +apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle") + project.ext.sentryCli = [ collectModulesScript: "../../../../dist/js/tools/collectModules.js", modulesPaths: [ diff --git a/samples/react-native/ios/sampleNewArchitecture.xcodeproj/project.pbxproj b/samples/react-native/ios/sampleNewArchitecture.xcodeproj/project.pbxproj index cdcc2d914..a7f87fa71 100644 --- a/samples/react-native/ios/sampleNewArchitecture.xcodeproj/project.pbxproj +++ b/samples/react-native/ios/sampleNewArchitecture.xcodeproj/project.pbxproj @@ -595,10 +595,7 @@ ); MTL_ENABLE_DEBUG_INFO = YES; ONLY_ACTIVE_ARCH = YES; - OTHER_CFLAGS = ( - "$(inherited)", - " ", - ); + OTHER_CFLAGS = "$(inherited) "; OTHER_CPLUSPLUSFLAGS = ( "$(OTHER_CFLAGS)", "-DFOLLY_NO_CONFIG", @@ -670,10 +667,7 @@ "\"$(inherited)\"", ); MTL_ENABLE_DEBUG_INFO = NO; - OTHER_CFLAGS = ( - "$(inherited)", - " ", - ); + OTHER_CFLAGS = "$(inherited) "; OTHER_CPLUSPLUSFLAGS = ( "$(OTHER_CFLAGS)", "-DFOLLY_NO_CONFIG", diff --git a/samples/react-native/ios/sampleNewArchitecture/Info.plist b/samples/react-native/ios/sampleNewArchitecture/Info.plist index 82620b2b2..cf53e2f56 100644 --- a/samples/react-native/ios/sampleNewArchitecture/Info.plist +++ b/samples/react-native/ios/sampleNewArchitecture/Info.plist @@ -2,6 +2,10 @@ + UIAppFonts + + Ionicons.ttf + CFBundleDevelopmentRegion en CFBundleDisplayName diff --git a/samples/react-native/package.json b/samples/react-native/package.json index 126fe39a3..f0f899cce 100644 --- a/samples/react-native/package.json +++ b/samples/react-native/package.json @@ -17,6 +17,7 @@ "clean-watchman": "watchman watch-del-all" }, "dependencies": { + "@react-navigation/bottom-tabs": "^6.5.12", "@react-navigation/native": "^6.1.9", "@react-navigation/stack": "^6.3.20", "react": "18.2.0", @@ -24,6 +25,7 @@ "react-native-gesture-handler": "^2.14.0", "react-native-safe-area-context": "4.8.0", "react-native-screens": "3.29.0", + "react-native-vector-icons": "^10.0.3", "react-redux": "^8.1.3", "redux": "^4.2.1" }, @@ -36,6 +38,7 @@ "@react-native/metro-config": "^0.73.1", "@react-native/typescript-config": "^0.73.1", "@types/react": "^18.2.13", + "@types/react-native-vector-icons": "^6.4.18", "@types/react-test-renderer": "^18.0.0", "@typescript-eslint/eslint-plugin": "^5.37.0", "@typescript-eslint/parser": "^5.37.0", diff --git a/samples/react-native/src/App.tsx b/samples/react-native/src/App.tsx index 04b05555a..d8bc1b080 100644 --- a/samples/react-native/src/App.tsx +++ b/samples/react-native/src/App.tsx @@ -4,12 +4,14 @@ import { NavigationContainerRef, } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; +import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; // Import the Sentry React Native SDK import * as Sentry from '@sentry/react-native'; import { SENTRY_INTERNAL_DSN } from './dsn'; -import HomeScreen from './Screens/HomeScreen'; +import ErrorsScreen from './Screens/ErrorsScreen'; +import PerformanceScreen from './Screens/PerformanceScreen'; import TrackerScreen from './Screens/TrackerScreen'; import ManualTrackerScreen from './Screens/ManualTrackerScreen'; import PerformanceTimingScreen from './Screens/PerformanceTimingScreen'; @@ -20,6 +22,7 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler'; import GesturesTracingScreen from './Screens/GesturesTracingScreen'; import { StyleSheet } from 'react-native'; import { HttpClient } from '@sentry/integrations'; +import Ionicons from 'react-native-vector-icons/Ionicons'; const reactNavigationInstrumentation = new Sentry.ReactNavigationInstrumentation({ @@ -98,44 +101,100 @@ Sentry.init({ }); const Stack = createStackNavigator(); +const Tab = createBottomTabNavigator(); -const App = () => { - const navigation = React.useRef>(null); +const TabOneStack = () => { + return ( + + + + + + + + ); +}; +const TabTwoStack = () => { return ( - { - reactNavigationInstrumentation.registerNavigationContainer( - navigation, - ); - }}> - - - - - - - - - + + + + + + + + ); }; +function BottomTabs() { + const navigation = React.useRef>(null); + + return ( + { + reactNavigationInstrumentation.registerNavigationContainer(navigation); + }}> + + ( + + ), + }} + /> + ( + + ), + }} + /> + + + ); +} + const styles = StyleSheet.create({ wrapper: { flex: 1, }, }); -export default Sentry.wrap(App); +export default Sentry.wrap(BottomTabs); diff --git a/samples/react-native/src/Screens/HomeScreen.tsx b/samples/react-native/src/Screens/ErrorsScreen.tsx similarity index 84% rename from samples/react-native/src/Screens/HomeScreen.tsx rename to samples/react-native/src/Screens/ErrorsScreen.tsx index 570dde503..632c747db 100644 --- a/samples/react-native/src/Screens/HomeScreen.tsx +++ b/samples/react-native/src/Screens/ErrorsScreen.tsx @@ -15,7 +15,6 @@ import * as Sentry from '@sentry/react-native'; import { setScopeProperties } from '../setScopeProperties'; import { StackNavigationProp } from '@react-navigation/stack'; -import { CommonActions } from '@react-navigation/native'; import { UserFeedbackModal } from '../components/UserFeedbackModal'; import { FallbackRender } from '@sentry/react'; import NativeSampleModule from '../../tm/NativeSampleModule'; @@ -27,7 +26,7 @@ interface Props { navigation: StackNavigationProp; } -const HomeScreen = (props: Props) => { +const ErrorsScreen = (_props: Props) => { const [componentMountStartTimestamp] = React.useState(() => { return timestampInSeconds(); }); @@ -51,22 +50,6 @@ const HomeScreen = (props: Props) => { const [showBadCode, setShowBadCode] = React.useState(false); const [isFeedbackVisible, setFeedbackVisible] = React.useState(false); - const onPressPerformanceTiming = () => { - // Navigate with a reset action just to test - props.navigation.dispatch( - CommonActions.reset({ - index: 1, - routes: [ - { name: 'Home' }, - { - name: 'PerformanceTiming', - params: { someParam: 'hello' }, - }, - ], - }), - ); - }; - const errorBoundaryFallback: FallbackRender = ({ eventId }) => ( Error boundary caught with event id: {eventId} ); @@ -82,7 +65,6 @@ const HomeScreen = (props: Props) => { <> - Hey there!