feat: add more BG scenarios to sample app

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,
@@ -45,9 +47,11 @@ export const InputField = forwardRef<TextInput, InputFieldProps>(
           placeholder={placeholder}
           style={[styles.textInput, style]}
           maxLength={maxLength}
+          accessible={true}
           accessibilityLabel={accessibilityLabel}
           keyboardType={keyboardType}
           value={value}
+          testID={testID}
           onChangeText={onChangeText}
           {...restProps}
         />

examples/default/src/components/ListTile.tsx

@@ -5,15 +5,18 @@ import { Box, HStack, Pressable, Text } from 'native-base';
 interface ListTileProps extends PropsWithChildren {
   title: string;
   onPress?: () => void;
+  testID?: string;
 }
 
-export const ListTile: React.FC<ListTileProps> = ({ title, onPress, children }) => {
+export const ListTile: React.FC<ListTileProps> = ({ title, onPress, children, testID }) => {
   return (
     <Pressable
       onPress={onPress}
       p="4"
       rounded="2"
+      testID={testID}
       shadow="1"
+      accessible={true}
       borderBottomWidth="1"
       borderColor="coolGray.300"
       bg="coolGray.100"

examples/default/src/screens/BugReportingScreen.tsx

@@ -1,82 +1,284 @@
-import React from 'react';
+import React, { type Dispatch, type SetStateAction, useState } from 'react';
 
 import Instabug, {
   BugReporting,
   InvocationOption,
   ReportType,
   ExtendedBugReportMode,
   WelcomeMessageMode,
+  InvocationEvent,
 } from 'instabug-reactnative';
 
 import { ListTile } from '../components/ListTile';
 import { Screen } from '../components/Screen';
-import { useToast } from 'native-base';
+import { useToast, Checkbox, Box, Text, VStack, Button, ScrollView, HStack } from 'native-base';
 import { Section } from '../components/Section';
+import { InputField } from '../components/InputField';
 
 export const BugReportingScreen: React.FC = () => {
   const toast = useToast();
+  const [reportTypes, setReportTypes] = useState<string[]>([]);
+  const [invocationOptions, setInvocationOptions] = useState<string[]>([]);
+
+  const [disclaimerText, setDisclaimerText] = useState<string>('');
+
+  const toggleCheckbox = (value: string, setData: Dispatch<SetStateAction<string[]>>) => {
+    setData((prev) =>
+      prev.includes(value) ? prev.filter((item) => item !== value) : [...prev, value],
+    );
+  };
+
+  const handleSetReportTypesButtonPress = () => {
+    const selectedEnums: ReportType[] = reportTypes.map((val) => {
+      switch (val) {
+        case 'bug':
+          return ReportType.bug;
+        case 'feedback':
+          return ReportType.feedback;
+        case 'question':
+          return ReportType.question;
+        default:
+          throw new Error('Invalid report type selected');
+      }
+    });
+    BugReporting.setReportTypes(selectedEnums);
+  };
+  const handleSetInvocationOptionsButtonPress = () => {
+    const selectedEnums: InvocationEvent[] = invocationOptions.map((val) => {
+      switch (val) {
+        case 'floatingButton':
+          return InvocationEvent.floatingButton;
+        case 'twoFingersSwipe':
+          return InvocationEvent.twoFingersSwipe;
+        case 'screenshot':
+          return InvocationEvent.screenshot;
+        case 'shake':
+          return InvocationEvent.shake;
+
+        default:
+          throw new Error('Invalid report type selected');
+      }
+    });
+    BugReporting.setInvocationEvents(selectedEnums);
+  };
+
+  const handleSetDisclamirTextPress = () => {
+    BugReporting.setDisclaimerText(disclaimerText);
+    setDisclaimerText('');
+  };
+
   return (
-    <Screen>
-      <ListTile title="Show" onPress={() => Instabug.show()} />
-      <ListTile title="Send Bug Report" onPress={() => BugReporting.show(ReportType.bug, [])} />
-      <ListTile
-        title="Send Feedback"
-        onPress={() => BugReporting.show(ReportType.feedback, [InvocationOption.emailFieldHidden])}
-      />
-      <ListTile title="Ask a Question" onPress={() => BugReporting.show(ReportType.question, [])} />
-      <ListTile
-        title="Enable extended bug report with required fields"
-        onPress={() =>
-          BugReporting.setExtendedBugReportMode(ExtendedBugReportMode.enabledWithRequiredFields)
-        }
-      />
-      <ListTile
-        title="Enable extended bug report with optional fields"
-        onPress={() =>
-          BugReporting.setExtendedBugReportMode(ExtendedBugReportMode.enabledWithOptionalFields)
-        }
-      />
-      <ListTile
-        title="Disable session profiler"
-        onPress={() => Instabug.setSessionProfilerEnabled(true)}
-      />
-      <ListTile
-        title="Welcome message Beta"
-        onPress={() => Instabug.showWelcomeMessage(WelcomeMessageMode.beta)}
-      />
-      <ListTile
-        title="Welcome message Live"
-        onPress={() => Instabug.showWelcomeMessage(WelcomeMessageMode.live)}
-      />
-
-      <Section title="Handlers">
+    <ScrollView flex={1} bg="gray.100">
+      <Screen>
+        <ListTile title="Show" onPress={() => Instabug.show()} />
+
+        <ListTile
+          title="Enable"
+          onPress={() => BugReporting.setEnabled(true)}
+          testID="id_br_enable"
+        />
         <ListTile
-          title="On invocation add tag"
+          title="Disabled"
+          onPress={() => BugReporting.setEnabled(false)}
+          testID="id_br_disable"
+        />
+
+        <ListTile title="Send Bug Report" onPress={() => BugReporting.show(ReportType.bug, [])} />
+        <ListTile
+          title="Send Feedback"
           onPress={() =>
-            BugReporting.onInvokeHandler(function () {
-              Instabug.appendTags(['Invocation Handler tag1']);
-            })
+            BugReporting.show(ReportType.feedback, [InvocationOption.emailFieldHidden])
           }
         />
         <ListTile
-          title="On submission show toast message"
+          title="Ask a Question"
+          onPress={() => BugReporting.show(ReportType.question, [])}
+        />
+        <ListTile
+          title="Enable extended bug report with required fields"
           onPress={() =>
-            Instabug.onReportSubmitHandler(() => {
-              toast.show({
-                description: 'Submission succeeded',
-              });
-            })
+            BugReporting.setExtendedBugReportMode(ExtendedBugReportMode.enabledWithRequiredFields)
           }
         />
         <ListTile
-          title="On dismissing turn floating to red"
+          title="Enable extended bug report with optional fields"
           onPress={() =>
-            BugReporting.onSDKDismissedHandler(function () {
-              Instabug.setPrimaryColor('#FF0000');
-            })
+            BugReporting.setExtendedBugReportMode(ExtendedBugReportMode.enabledWithOptionalFields)
           }
         />
-      </Section>
-    </Screen>
+        <ListTile
+          title="Disable session profiler"
+          onPress={() => Instabug.setSessionProfilerEnabled(true)}
+        />
+        <ListTile
+          title="Welcome message Beta"
+          onPress={() => Instabug.showWelcomeMessage(WelcomeMessageMode.beta)}
+        />
+        <ListTile
+          title="Welcome message Live"
+          onPress={() => Instabug.showWelcomeMessage(WelcomeMessageMode.live)}
+        />
+
+        <Box justifyContent="center" alignItems="center" p={4} bg="coolGray.100" marginY={2}>
+          <Text fontSize="md" mb={4} bold alignSelf="start" textAlign="start">
+            Bug Reporting Types
+          </Text>
+
+          <VStack space={2} w="90%">
+            <HStack space={6} justifyContent="center">
+              <Checkbox
+                isChecked={reportTypes.includes('bug')}
+                onChange={() => toggleCheckbox('bug', setReportTypes)}
+                value="bug"
+                accessible={true}
+                testID="id_br_report_type_bug"
+                size="md">
+                Bug
+              </Checkbox>
+
+              <Checkbox
+                isChecked={reportTypes.includes('feedback')}
+                onChange={() => toggleCheckbox('feedback', setReportTypes)}
+                value="feedback"
+                testID="id_br_report_type_feedback"
+                size="md">
+                Feedback
+              </Checkbox>
+
+              <Checkbox
+                isChecked={reportTypes.includes('question')}
+                onChange={() => toggleCheckbox('question', setReportTypes)}
+                value="question"
+                testID="id_br_report_type_question"
+                size="md">
+                Question
+              </Checkbox>
+            </HStack>
+
+            <Button
+              onPress={handleSetReportTypesButtonPress}
+              mt={4}
+              colorScheme="primary"
+              accessible={true}
+              testID="id_br_report_type_btn">
+              Set Bug Reporting Types
+            </Button>
+          </VStack>
+        </Box>
+
+        <Box justifyContent="center" alignItems="center" p={4} bg="coolGray.100" marginY={2}>
+          <Text fontSize="md" mb={4} bold alignSelf="start" textAlign="start">
+            Set the disclaimer text
+          </Text>
+
+          <VStack space={2} w="90%">
+            <InputField
+              placeholder="disclaimer text"
+              onChangeText={setDisclaimerText}
+              testID="id_br_disclaimer_input"
+              value={disclaimerText}
+            />
+
+            <Button
+              onPress={handleSetDisclamirTextPress}
+              mt={4}
+              colorScheme="primary"
+              testID="id_br_disclaimer_btn"
+              accessible={true}>
+              Set Disclaimer text
+            </Button>
+          </VStack>
+        </Box>
+
+        <Box justifyContent="center" alignItems="center" p={4} bg="coolGray.100" marginY={2}>
+          <Text fontSize="md" mb={4} bold alignSelf="start" textAlign="start">
+            Invocation Events
+          </Text>
+
+          <VStack space={2} w="90%">
+            <HStack space={6} justifyContent="center">
+              <Checkbox
+                isChecked={invocationOptions.includes('floatingButton')}
+                onChange={() => toggleCheckbox('floatingButton', setInvocationOptions)}
+                value="floatingButton"
+                testID="id_br_invoicetion_options_floatingButton"
+                accessible={true}
+                size="md">
+                Floating button
+              </Checkbox>
+
+              <Checkbox
+                isChecked={invocationOptions.includes('twoFingersSwipe')}
+                onChange={() => toggleCheckbox('twoFingersSwipe', setInvocationOptions)}
+                value="twoFingersSwipe"
+                testID="id_br_invoicetion_options_twoFingersSwipe"
+                accessible={true}
+                size="md">
+                Two Fingers Swipe
+              </Checkbox>
+            </HStack>
+            <HStack space={6} justifyContent="center">
+              <Checkbox
+                isChecked={invocationOptions.includes('screenshot')}
+                onChange={() => toggleCheckbox('screenshot', setInvocationOptions)}
+                value="screenshot"
+                testID="id_br_invoicetion_options_screenshot"
+                accessible={true}
+                size="md">
+                Screenshot
+              </Checkbox>
+              <Checkbox
+                isChecked={invocationOptions.includes('shake')}
+                onChange={() => toggleCheckbox('shake', setInvocationOptions)}
+                testID="id_br_invoicetion_options_shake"
+                accessible={true}
+                value="shake"
+                size="md">
+                Shake
+              </Checkbox>
+            </HStack>
+
+            <Button
+              onPress={handleSetInvocationOptionsButtonPress}
+              mt={4}
+              colorScheme="primary"
+              testID="id_br_invoicetion_options_btn"
+              accessible={true}>
+              Set Invocation Events
+            </Button>
+          </VStack>
+        </Box>
+
+        <Section title="Handlers">
+          <ListTile
+            title="On invocation add tag"
+            onPress={() =>
+              BugReporting.onInvokeHandler(function () {
+                Instabug.appendTags(['Invocation Handler tag1']);
+              })
+            }
+          />
+          <ListTile
+            title="On submission show toast message"
+            testID="id_br_submission_show_toast_btn"
+            onPress={() =>
+              Instabug.onReportSubmitHandler(() => {
+                toast.show({
+                  description: 'Submission succeeded',
+                });
+              })
+            }
+          />
+          <ListTile
+            title="On dismissing turn floating to red"
+            onPress={() =>
+              BugReporting.onSDKDismissedHandler(function () {
+                Instabug.setPrimaryColor('#FF0000');
+              })
+            }
+          />
+        </Section>
+      </Screen>
+    </ScrollView>
   );
 };