feat(sample): Add bottom tabs navigation to the RN sample app (#3597)

getsentry · Feb 14, 2024 · deebf78 · deebf78
1 parent 7c5a254
commit deebf78
Show file tree

Hide file tree

Showing 8 changed files with 268 additions and 79 deletions.
diff --git 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
@@ -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
@@ -2,6 +2,10 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
+	<key>UIAppFonts</key>
+	<array>
+		<string>Ionicons.ttf</string>
+	</array>
 	<key>CFBundleDevelopmentRegion</key>
 	<string>en</string>
 	<key>CFBundleDisplayName</key>

diff --git a/samples/react-native/package.json b/samples/react-native/package.json
@@ -17,13 +17,15 @@
     "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",
     "react-native": "0.73.2",
     "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
@@ -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<NavigationContainerRef<{}>>(null);
+const TabOneStack = () => {
+  return (
+    <GestureHandlerRootView style={styles.wrapper}>
+      <Provider store={store}>
+        <Stack.Navigator>
+          <Stack.Screen
+            name="ErrorsScreen"
+            component={ErrorsScreen}
+            options={{ title: 'Errors' }}
+          />
+        </Stack.Navigator>
+      </Provider>
+    </GestureHandlerRootView>
+  );
+};
 
+const TabTwoStack = () => {
   return (
     <GestureHandlerRootView style={styles.wrapper}>
       <Provider store={store}>
-        <NavigationContainer
-          ref={navigation}
-          onReady={() => {
-            reactNavigationInstrumentation.registerNavigationContainer(
-              navigation,
-            );
-          }}>
-          <Stack.Navigator>
-            <Stack.Screen name="Home" component={HomeScreen} />
-            <Stack.Screen name="Tracker" component={TrackerScreen} />
-            <Stack.Screen
-              name="ManualTracker"
-              component={ManualTrackerScreen}
-            />
-            <Stack.Screen
-              name="PerformanceTiming"
-              component={PerformanceTimingScreen}
-            />
-            <Stack.Screen name="Redux" component={ReduxScreen} />
-            <Stack.Screen name="Gestures" component={GesturesTracingScreen} />
-          </Stack.Navigator>
-        </NavigationContainer>
+        <Stack.Navigator>
+          <Stack.Screen
+            name="PerformanceScreen"
+            component={PerformanceScreen}
+            options={{ title: 'Performance' }}
+          />
+          <Stack.Screen name="Tracker" component={TrackerScreen} />
+          <Stack.Screen name="ManualTracker" component={ManualTrackerScreen} />
+          <Stack.Screen
+            name="PerformanceTiming"
+            component={PerformanceTimingScreen}
+          />
+          <Stack.Screen name="Redux" component={ReduxScreen} />
+          <Stack.Screen name="Gestures" component={GesturesTracingScreen} />
+        </Stack.Navigator>
       </Provider>
     </GestureHandlerRootView>
   );
 };
 
+function BottomTabs() {
+  const navigation = React.useRef<NavigationContainerRef<{}>>(null);
+
+  return (
+    <NavigationContainer
+      ref={navigation}
+      onReady={() => {
+        reactNavigationInstrumentation.registerNavigationContainer(navigation);
+      }}>
+      <Tab.Navigator
+        screenOptions={{
+          headerShown: false,
+        }}
+        detachInactiveScreens={false} // workaround for https://github.com/react-navigation/react-navigation/issues/11384
+      >
+        <Tab.Screen
+          name="ErrorsTab"
+          component={TabOneStack}
+          options={{
+            tabBarLabel: 'Errors',
+            tabBarIcon: ({ focused, color, size }) => (
+              <Ionicons
+                name={focused ? 'bug' : 'bug-outline'}
+                size={size}
+                color={color}
+              />
+            ),
+          }}
+        />
+        <Tab.Screen
+          name="PerformanceTab"
+          component={TabTwoStack}
+          options={{
+            tabBarLabel: 'Performance',
+            tabBarIcon: ({ focused, color, size }) => (
+              <Ionicons
+                name={focused ? 'speedometer' : 'speedometer-outline'}
+                size={size}
+                color={color}
+              />
+            ),
+          }}
+        />
+      </Tab.Navigator>
+    </NavigationContainer>
+  );
+}
+
 const styles = StyleSheet.create({
   wrapper: {
     flex: 1,
   },
 });
 
-export default Sentry.wrap(App);
+export default Sentry.wrap(BottomTabs);
diff --git a/...s/react-native/src/Screens/HomeScreen.tsx → ...react-native/src/Screens/ErrorsScreen.tsx b/...s/react-native/src/Screens/HomeScreen.tsx → ...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<any, 'HomeScreen'>;
 }
 
-const HomeScreen = (props: Props) => {
+const ErrorsScreen = (_props: Props) => {
   const [componentMountStartTimestamp] = React.useState<number>(() => {
     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 }) => (
     <Text>Error boundary caught with event id: {eventId}</Text>
   );
@@ -82,7 +65,6 @@ const HomeScreen = (props: Props) => {
     <>
       <StatusBar barStyle="dark-content" />
       <ScrollView style={styles.mainView}>
-        <Text style={styles.welcomeTitle}>Hey there!</Text>
         <Button
           title="Capture message"
           onPress={() => {
@@ -218,31 +200,6 @@ const HomeScreen = (props: Props) => {
             }
           }}
         />
-        <Button
-          title="Auto Tracing Example"
-          onPress={() => {
-            props.navigation.navigate('Tracker');
-          }}
-        />
-        <Button
-          title="Manual Tracing Example"
-          onPress={() => {
-            props.navigation.navigate('ManualTracker');
-          }}
-        />
-        <Button
-          title="Gestures Tracing Example"
-          onPress={() => {
-            props.navigation.navigate('Gestures');
-          }}
-        />
-        <Button title="Performance Timing" onPress={onPressPerformanceTiming} />
-        <Button
-          title="Redux Example"
-          onPress={() => {
-            props.navigation.navigate('Redux');
-          }}
-        />
         <Button
           title="Send user feedback"
           onPress={() => {
@@ -296,4 +253,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default HomeScreen;
+export default ErrorsScreen;