feat: update sample app

examples/default/android/app/src/main/AndroidManifest.xml

@@ -1,6 +1,7 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
 
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION"/>
 
     <application
       android:name=".MainApplication"

examples/default/android/app/src/main/java/com/instabug/react/example/RNInstabugExampleCrashReportingModule.java

@@ -28,11 +28,10 @@ public String getName() {
     }
 
     @ReactMethod
-    public void sendNativeNonFatal(final String exceptionObject) {
+    public void sendNativeNonFatal() {
         final IBGNonFatalException exception = new IBGNonFatalException.Builder(new IllegalStateException("Test exception"))
                 .build();
         CrashReporting.report(exception);
-
     }
 
     @ReactMethod

examples/default/package.json

@@ -14,6 +14,7 @@
     "@react-native-community/netinfo": "^11.4.1",
     "@react-native-community/slider": "^4.5.5",
     "@react-navigation/bottom-tabs": "^6.5.7",
+    "@react-navigation/material-top-tabs": "6.5.3",
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/native-stack": "^6.9.12",
     "axios": "^1.7.4",
@@ -28,10 +29,12 @@
     "react-native-config": "^1.5.3",
     "react-native-gesture-handler": "^2.13.4",
     "react-native-maps": "1.10.3",
+    "react-native-pager-view": "^6.9.1",
     "react-native-reanimated": "^3.16.1",
     "react-native-safe-area-context": "^4.12.0",
     "react-native-screens": "^3.35.0",
     "react-native-svg": "^15.8.0",
+    "react-native-tab-view": "^3.5.2",
     "react-native-vector-icons": "^10.2.0",
     "react-native-webview": "^13.13.2",
     "react-query": "^3.39.3"

examples/default/src/App.tsx

@@ -21,6 +21,7 @@ import { nativeBaseTheme } from './theme/nativeBaseTheme';
 import { navigationTheme } from './theme/navigationTheme';
 
 import { QueryClient, QueryClientProvider } from 'react-query';
+import { CallbackHandlersProvider } from './contexts/callbackContext';
 
 const queryClient = new QueryClient();
 
@@ -89,7 +90,9 @@ export const App: React.FC = () => {
       <NativeBaseProvider theme={nativeBaseTheme}>
         <QueryClientProvider client={queryClient}>
           <NavigationContainer onStateChange={Instabug.onStateChange} theme={navigationTheme}>
-            <RootTabNavigator />
+            <CallbackHandlersProvider>
+              <RootTabNavigator />
+            </CallbackHandlersProvider>
           </NavigationContainer>
         </QueryClientProvider>
       </NativeBaseProvider>

examples/default/src/components/InputField.tsx

@@ -21,6 +21,7 @@ interface InputFieldProps {
   maxLength?: number;
   accessibilityLabel?: string;
   flex?: number;
+  testID?: string;
 }
 
 export const InputField = forwardRef<TextInput, InputFieldProps>(
@@ -34,6 +35,7 @@ export const InputField = forwardRef<TextInput, InputFieldProps>(
       maxLength,
       keyboardType,
       errorText,
+      testID,
       ...restProps
     },
     ref,
@@ -43,11 +45,14 @@ export const InputField = forwardRef<TextInput, InputFieldProps>(
         <TextInput
           ref={ref}
           placeholder={placeholder}
+          placeholderTextColor={'gray'}
           style={[styles.textInput, style]}
           maxLength={maxLength}
-          accessibilityLabel={accessibilityLabel}
+          accessible={true}
+          accessibilityLabel={accessibilityLabel ?? testID}
           keyboardType={keyboardType}
           value={value}
+          testID={testID}
           onChangeText={onChangeText}
           {...restProps}
         />
@@ -63,9 +68,10 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: '#ccc',
     paddingVertical: 10,
-    paddingHorizontal: 24,
-    fontSize: 16,
+    paddingHorizontal: 16,
+    fontSize: 12,
     borderRadius: 5,
+    color: 'black',
   },
   errorText: {
     color: '#ff0000',

examples/default/src/components/ListTile.tsx

@@ -1,25 +1,51 @@
 import React, { PropsWithChildren } from 'react';
 
-import { Box, HStack, Pressable, Text } from 'native-base';
+import { Box, HStack, Pressable, Text, VStack } from 'native-base';
 
 interface ListTileProps extends PropsWithChildren {
   title: string;
+  subtitle?: string;
   onPress?: () => void;
+  testID?: string;
+  truncateSubtitle?: boolean;
+  accessibilityLabel?: string;
 }
 
-export const ListTile: React.FC<ListTileProps> = ({ title, onPress, children }) => {
+export const ListTile: React.FC<ListTileProps> = ({
+  title,
+  subtitle,
+  onPress,
+  children,
+  testID,
+  truncateSubtitle = false,
+  accessibilityLabel,
+}) => {
   return (
     <Pressable
       onPress={onPress}
       p="4"
       rounded="2"
+      testID={testID}
+      accessibilityLabel={accessibilityLabel ?? testID}
       shadow="1"
+      accessible={true}
       borderBottomWidth="1"
       borderColor="coolGray.300"
       bg="coolGray.100"
       _pressed={{ bg: 'coolGray.200' }}>
       <HStack justifyContent="space-between" alignItems="center">
-        <Text>{title}</Text>
+        <VStack space={2}>
+          <Text>{title}</Text>
+          {subtitle && (
+            <Text
+              fontSize="xs"
+              color="coolGray.500"
+              numberOfLines={truncateSubtitle ? 1 : undefined}
+              ellipsizeMode={truncateSubtitle ? 'tail' : undefined}>
+              {subtitle}
+            </Text>
+          )}
+        </VStack>
         <Box width={160}>{children}</Box>
       </HStack>
     </Pressable>

examples/default/src/components/PlatformListTile.tsx

@@ -7,13 +7,17 @@ interface PlatformListTileProps extends PropsWithChildren {
   title: string;
   onPress?: () => void;
   platform?: 'ios' | 'android';
+  testID?: string;
+  accessibilityLabel?: string;
 }
 
 export const PlatformListTile: React.FC<PlatformListTileProps> = ({
   title,
   onPress,
   platform,
   children,
+  testID,
+  accessibilityLabel,
 }) => {
   if (Platform.OS === platform || !platform) {
     return (
@@ -25,7 +29,9 @@ export const PlatformListTile: React.FC<PlatformListTileProps> = ({
         borderBottomWidth="1"
         borderColor="coolGray.300"
         bg="coolGray.100"
-        _pressed={{ bg: 'coolGray.200' }}>
+        _pressed={{ bg: 'coolGray.200' }}
+        testID={testID}
+        accessibilityLabel={accessibilityLabel ?? testID}>
         <HStack justifyContent="space-between" alignItems="center">
           <Text>{title}</Text>
           <Box width={160}>{children}</Box>

examples/default/src/components/Select.tsx

@@ -6,23 +6,33 @@ interface SelectItem<T> {
   label: string;
   value: T;
   isInitial?: boolean;
+  testID?: string;
+  accessibilityLabel?: string;
 }
 
 interface SelectProps<T> {
   label: string;
   items: SelectItem<T>[];
   onValueChange: (value: T) => void;
+  testID?: string;
+  accessibilityLabel?: string;
 }
 
-export function Select<T>({ label, items, onValueChange }: SelectProps<T>) {
+export function Select<T>({
+  label,
+  items,
+  onValueChange,
+  testID,
+  accessibilityLabel,
+}: SelectProps<T>) {
   const initialItem = items.find((i) => i.isInitial) ?? items[0];
   const [selectedItem, setSelectedItem] = useState(initialItem);
 
   return (
     <NativeBaseSelect
       height="10"
       placeholder={label}
-      accessibilityLabel={label}
+      accessibilityLabel={accessibilityLabel ?? testID}
       selectedValue={selectedItem.label}
       onValueChange={(value) => {
         const item = items.find((i) => i.label === value)!;
@@ -35,7 +45,12 @@ export function Select<T>({ label, items, onValueChange }: SelectProps<T>) {
         endIcon: <CheckIcon size="4" />,
       }}>
       {items.map((item) => (
-        <NativeBaseSelect.Item key={item.label} label={item.label} value={item.label} />
+        <NativeBaseSelect.Item
+          key={item.label}
+          label={item.label}
+          value={item.label}
+          testID={testID}
+        />
       ))}
     </NativeBaseSelect>
   );

examples/default/src/contexts/callbackContext.tsx

@@ -0,0 +1,56 @@
+import React, { createContext, useContext, useState } from 'react';
+
+// A single key/value pair
+export type KeyValuePair = { key: string; value: string };
+
+// An item that contains multiple key/value pairs
+export type Item = {
+  id: string;
+  fields: KeyValuePair[]; // list of key/value pairs
+};
+
+// CallbackHandlersType = { [title: string]: Item[] }
+export type CallbackHandlersType = Record<string, Item[]>;
+
+type CallbackHandlersContextType = {
+  callbackHandlers: CallbackHandlersType;
+  clearList: (title: string) => void;
+  addItem: (title: string, item: Item) => void;
+};
+
+const CallbackHandlersContext = createContext<CallbackHandlersContextType | undefined>(undefined);
+
+export const CallbackHandlersProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [callbackHandlers, setCallbackHandlers] = useState<CallbackHandlersType>({});
+
+  // Clears all items under a specific title
+  const clearList = (title: string) => {
+    setCallbackHandlers((prev) => ({ ...prev, [title]: [] }));
+  };
+
+  // Adds an item (with multiple key/value pairs) to a specific title list
+  const addItem = (title: string, item: Item) => {
+    setCallbackHandlers((prev) => {
+      const existingList = prev[title] || [];
+      return {
+        ...prev,
+        [title]: [...existingList, item],
+      };
+    });
+  };
+
+  return (
+    <CallbackHandlersContext.Provider value={{ callbackHandlers, clearList, addItem }}>
+      {children}
+    </CallbackHandlersContext.Provider>
+  );
+};
+
+// Hook to use the context
+export const useCallbackHandlers = () => {
+  const ctx = useContext(CallbackHandlersContext);
+  if (!ctx) {
+    throw new Error('useCallbackHandlers must be used within CallbackHandlersProvider');
+  }
+  return ctx;
+};