Skip to content

Commit ed929e3

Browse files
MoKamallMoKamall
committed
feat: add bug reporting state management screen
- Added `BugReportingStateScreen` to toggle between enabled and disabled states for bug reporting. - Updated `ListTile` component to support subtitles for better UI clarity. - Adjusted navigation to include new bug reporting screens.
1 parent 35f9e6f commit ed929e3

File tree

5 files changed

+132
-45
lines changed

5 files changed

+132
-45
lines changed

‎examples/default/ios/Podfile.lock‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2027,21 +2027,21 @@ SPEC CHECKSUMS:
20272027
Instabug: 9e81b71be68626dafc74759f3458f7c5894dd2e1
20282028
instabug-reactnative-ndk: d765ac289d56e8896398d02760d9abf2562fc641
20292029
OCMock: 589f2c84dacb1f5aaf6e4cec1f292551fe748e74
2030-
RCT-Folly: 4464f4d875961fce86008d45f4ecf6cef6de0740
2030+
RCT-Folly: 34124ae2e667a0e5f0ea378db071d27548124321
20312031
RCTDeprecation: 726d24248aeab6d7180dac71a936bbca6a994ed1
20322032
RCTRequired: a94e7febda6db0345d207e854323c37e3a31d93b
20332033
RCTTypeSafety: 28e24a6e44f5cbf912c66dde6ab7e07d1059a205
20342034
React: c2830fa483b0334bda284e46a8579ebbe0c5447e
20352035
React-callinvoker: 4aecde929540c26b841a4493f70ebf6016691eb8
2036-
React-Core: 9c059899f00d46b5cec3ed79251f77d9c469553d
2037-
React-CoreModules: 9fac2d31803c0ed03e4ddaa17f1481714f8633a5
2038-
React-cxxreact: a979810a3ca4045ceb09407a17563046a7f71494
2036+
React-Core: 32a581847d74ce9b5f51d9d11a4e4d132ad61553
2037+
React-CoreModules: f53e0674e1747fa41c83bc970e82add97b14ad87
2038+
React-cxxreact: 86f3b1692081fd954a0cb27cc90d14674645b64b
20392039
React-debug: 3d21f69d8def0656f8b8ec25c0f05954f4d862c5
2040-
React-defaultsnativemodule: 2fa2bdb7bd03ff9764facc04aa8520ebf14febae
2041-
React-domnativemodule: 986e6fe7569e1383dce452a7b013b6c843a752df
2042-
React-Fabric: 3bc7be9e3a6b7581fc828dc2aa041e107fc8ffb8
2043-
React-FabricComponents: 668e0cb02344c2942e4c8921a643648faa6dc364
2044-
React-FabricImage: 3f44dd25a2b020ed5215d4438a1bb1f3461cd4f1
2040+
React-defaultsnativemodule: 2ed121c5a1edeab09cff382b8d9b538260f07848
2041+
React-domnativemodule: 4393dd5dd7e13dbe42e69ebc791064a616990f91
2042+
React-Fabric: cbf38ceefb1ac6236897abdb538130228e126695
2043+
React-FabricComponents: dd4b01c4a60920d8dc15f3b5594c6fe9e7648a38
2044+
React-FabricImage: 8b13aedfbd20f349b9b3314baf993c71c02995d9
20452045
React-featureflags: ee1abd6f71555604a36cda6476e3c502ca9a48e5
20462046
React-featureflagsnativemodule: 7ccc0cd666c2a6257401dceb7920818ac2b42803
20472047
React-graphics: d7dd9c8d75cad5af19e19911fa370f78f2febd96
@@ -2065,25 +2065,25 @@ SPEC CHECKSUMS:
20652065
react-native-slider: 4a0f3386a38fc3d2d955efc515aef7096f7d1ee4
20662066
react-native-webview: c0b91a4598bd54e9fbc70353aebf1e9bab2e5bb9
20672067
React-nativeconfig: 8c83d992b9cc7d75b5abe262069eaeea4349f794
2068-
React-NativeModulesApple: 9f7920224a3b0c7d04d77990067ded14cee3c614
2068+
React-NativeModulesApple: 97f606f09fd9840b3868333984d6a0e7bcc425b5
20692069
React-perflogger: 59e1a3182dca2cee7b9f1f7aab204018d46d1914
2070-
React-performancetimeline: a9d05533ff834c6aa1f532e05e571f3fd2e3c1ed
2070+
React-performancetimeline: 3e3f5c5576fe1cc2dd5fcfb1ae2046d5dceda3d7
20712071
React-RCTActionSheet: d80e68d3baa163e4012a47c1f42ddd8bcd9672cc
2072-
React-RCTAnimation: bde981f6bd7f8493696564da9b3bd05721d3b3cc
2073-
React-RCTAppDelegate: 0176615c51476c88212bf3edbafb840d39ea7631
2074-
React-RCTBlob: 520a0382bf8e89b9153d60e3c6293e51615834e9
2075-
React-RCTFabric: c9da097b19b30017a99498b8c66a69c72f3ce689
2076-
React-RCTImage: 90448d2882464af6015ed57c98f463f8748be465
2077-
React-RCTLinking: 1bd95d0a704c271d21d758e0f0388cced768d77d
2078-
React-RCTNetwork: 218af6e63eb9b47935cc5a775b7a1396cf10ff91
2079-
React-RCTSettings: e10b8e42b0fce8a70fbf169de32a2ae03243ef6b
2080-
React-RCTText: e7bf9f4997a1a0b45c052d4ad9a0fe653061cf29
2081-
React-RCTVibration: 5b70b7f11e48d1c57e0d4832c2097478adbabe93
2072+
React-RCTAnimation: 051f0781709c5ed80ba8aa2b421dfb1d72a03162
2073+
React-RCTAppDelegate: 106d225d076988b06aa4834e68d1ab754f40cacf
2074+
React-RCTBlob: 895eaf8bca2e76ee1c95b479235c6ccebe586fc6
2075+
React-RCTFabric: 8d01df202ee9e933f9b5dd44b72ec89a7ac6ee01
2076+
React-RCTImage: b73149c0cd54b641dba2d6250aaf168fee784d9f
2077+
React-RCTLinking: 23e519712285427e50372fbc6e0265d422abf462
2078+
React-RCTNetwork: a5d06d122588031989115f293654b13353753630
2079+
React-RCTSettings: 87d03b5d94e6eadd1e8c1d16a62f790751aafb55
2080+
React-RCTText: 75e9dd39684f4bcd1836134ac2348efaca7437b3
2081+
React-RCTVibration: 033c161fe875e6fa096d0d9733c2e2501682e3d4
20822082
React-rendererconsistency: f620c6e003e3c4593e6349d8242b8aeb3d4633f0
2083-
React-rendererdebug: e697680f4dd117becc5daf9ea9800067abcee91c
2083+
React-rendererdebug: 5be7b834677b2a7a263f4d2545f0d4966cafad82
20842084
React-rncore: c22bd84cc2f38947f0414fab6646db22ff4f80cd
2085-
React-RuntimeApple: de0976836b90b484305638616898cbc665c67c13
2086-
React-RuntimeCore: 3c4a5aa63d9e7a3c17b7fb23f32a72a8bcfccf57
2085+
React-RuntimeApple: 71160e6c02efa07d198b84ef5c3a52a7d9d0399d
2086+
React-RuntimeCore: f88f79ec995c12af56a265d7505c7630733d9d82
20872087
React-runtimeexecutor: ea90d8e3a9e0f4326939858dafc6ab17c031a5d3
20882088
React-RuntimeHermes: c6b0afdf1f493621214eeb6517fb859ce7b21b81
20892089
React-runtimescheduler: 84f0d876d254bce6917a277b3930eb9bc29df6c7
@@ -2102,4 +2102,4 @@ SPEC CHECKSUMS:
21022102

21032103
PODFILE CHECKSUM: a1b532d67a1a86843e1f086101751ad55afa52da
21042104

2105-
COCOAPODS: 1.14.0
2105+
COCOAPODS: 1.16.2

‎examples/default/src/components/ListTile.tsx‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,21 @@
11
import React, { PropsWithChildren } from 'react';
22

3-
import { Box, HStack, Pressable, Text } from 'native-base';
3+
import { Box, HStack, Pressable, Text, VStack } from 'native-base';
44

55
interface ListTileProps extends PropsWithChildren {
66
title: string;
7+
subtitle?: string;
78
onPress?: () => void;
89
testID?: string;
910
}
1011

11-
export const ListTile: React.FC<ListTileProps> = ({ title, onPress, children, testID }) => {
12+
export const ListTile: React.FC<ListTileProps> = ({
13+
title,
14+
subtitle,
15+
onPress,
16+
children,
17+
testID,
18+
}) => {
1219
return (
1320
<Pressable
1421
onPress={onPress}
@@ -22,7 +29,14 @@ export const ListTile: React.FC<ListTileProps> = ({ title, onPress, children, te
2229
bg="coolGray.100"
2330
_pressed={{ bg: 'coolGray.200' }}>
2431
<HStack justifyContent="space-between" alignItems="center">
25-
<Text>{title}</Text>
32+
<VStack space={2}>
33+
<Text>{title}</Text>
34+
{subtitle && (
35+
<Text fontSize="xs" color="coolGray.500">
36+
{subtitle}
37+
</Text>
38+
)}
39+
</VStack>
2640
<Box width={160}>{children}</Box>
2741
</HStack>
2842
</Pressable>

‎examples/default/src/navigation/HomeStack.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@ import React from 'react';
22

33
import { createNativeStackNavigator } from '@react-navigation/native-stack';
44

5-
import { BugReportingScreen } from '../screens/BugReportingScreen';
5+
import { BugReportingScreen } from '../screens/bug-reporting/BugReportingScreen';
6+
import {
7+
BugReportingStateScreen,
8+
type BugReportingStateScreenProp,
9+
} from '../screens/bug-reporting/BugReportingStateScreen';
610
import { CrashReportingScreen } from '../screens/CrashReportingScreen';
711
import { FeatureRequestsScreen } from '../screens/FeatureRequestsScreen';
812
import { HomeScreen } from '../screens/HomeScreen';
@@ -35,6 +39,7 @@ import { PartialWebViewsScreen } from '../screens/apm/webViews/PartialWebViewsSc
3539
export type HomeStackParamList = {
3640
Home: undefined;
3741
BugReporting: undefined;
42+
BugReportingState: BugReportingStateScreenProp;
3843
CrashReporting: undefined;
3944
FeatureRequests: undefined;
4045
Replies: undefined;
@@ -74,6 +79,11 @@ export const HomeStackNavigator: React.FC = () => {
7479
component={BugReportingScreen}
7580
options={{ title: 'Bug Reporting' }}
7681
/>
82+
<HomeStack.Screen
83+
name="BugReportingState"
84+
component={BugReportingStateScreen}
85+
options={{ title: 'Bug Reporting State' }}
86+
/>
7787
<HomeStack.Screen
7888
name="CrashReporting"
7989
component={CrashReportingScreen}

examples/default/src/screens/BugReportingScreen.tsx renamed to examples/default/src/screens/bug-reporting/BugReportingScreen.tsx

Lines changed: 43 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,33 @@ import Instabug, {
99
InvocationEvent,
1010
} from 'instabug-reactnative';
1111

12-
import { ListTile } from '../components/ListTile';
13-
import { Screen } from '../components/Screen';
14-
import { useToast, Checkbox, Box, Text, VStack, Button, ScrollView, HStack } from 'native-base';
15-
import { Section } from '../components/Section';
16-
import { InputField } from '../components/InputField';
12+
import { ListTile } from '../../components/ListTile';
13+
import { Screen } from '../../components/Screen';
14+
import {
15+
useToast,
16+
Checkbox,
17+
Box,
18+
Text,
19+
VStack,
20+
Button,
21+
ScrollView,
22+
HStack,
23+
Divider,
24+
Spacer,
25+
} from 'native-base';
26+
import { Section } from '../../components/Section';
27+
import { InputField } from '../../components/InputField';
28+
import type { NativeStackScreenProps } from '@react-navigation/native-stack';
29+
import type { HomeStackParamList } from '../../navigation/HomeStack';
30+
import { BugReportingState } from './BugReportingStateScreen';
1731

18-
export const BugReportingScreen: React.FC = () => {
32+
export const BugReportingScreen: React.FC<
33+
NativeStackScreenProps<HomeStackParamList, 'BugReporting'>
34+
> = ({ navigation }) => {
1935
const toast = useToast();
2036
const [reportTypes, setReportTypes] = useState<string[]>([]);
2137
const [invocationOptions, setInvocationOptions] = useState<string[]>([]);
38+
const [isBugReportingEnabled, setIsBugReportingEnabled] = useState<boolean>(true);
2239

2340
const [disclaimerText, setDisclaimerText] = useState<string>('');
2441

@@ -70,19 +87,26 @@ export const BugReportingScreen: React.FC = () => {
7087
return (
7188
<ScrollView flex={1} bg="gray.100">
7289
<Screen>
73-
<ListTile title="Show" onPress={() => Instabug.show()} />
74-
75-
<ListTile
76-
title="Enable"
77-
onPress={() => BugReporting.setEnabled(true)}
78-
testID="id_br_enable"
79-
/>
8090
<ListTile
81-
title="Disabled"
82-
onPress={() => BugReporting.setEnabled(false)}
83-
testID="id_br_disable"
91+
title="Bug Reporting State"
92+
subtitle={isBugReportingEnabled ? 'Enabled' : 'Disabled'}
93+
onPress={() => {
94+
navigation.navigate('BugReportingState', {
95+
state: isBugReportingEnabled ? BugReportingState.Enabled : BugReportingState.Disabled,
96+
setState: (newState: BugReportingState) => {
97+
const isEnabled = newState === BugReportingState.Enabled;
98+
setIsBugReportingEnabled(isEnabled);
99+
BugReporting.setEnabled(isEnabled);
100+
navigation.goBack();
101+
},
102+
});
103+
}}
104+
testID="id_br_state"
84105
/>
85106

107+
<Divider my={5} />
108+
109+
<ListTile title="Show" onPress={() => Instabug.show()} testID="id_br_show_button" />
86110
<ListTile title="Send Bug Report" onPress={() => BugReporting.show(ReportType.bug, [])} />
87111
<ListTile
88112
title="Send Feedback"
@@ -94,6 +118,9 @@ export const BugReportingScreen: React.FC = () => {
94118
title="Ask a Question"
95119
onPress={() => BugReporting.show(ReportType.question, [])}
96120
/>
121+
122+
<Divider my={5} />
123+
97124
<ListTile
98125
title="Enable extended bug report with required fields"
99126
onPress={() =>

‎examples/default/src/screens/bug-reporting/BugReportingStateScreen.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from 'react';
2+
3+
import { ListTile } from '../../components/ListTile';
4+
import { Screen } from '../../components/Screen';
5+
import type { NativeStackScreenProps } from '@react-navigation/native-stack';
6+
import type { HomeStackParamList } from '../../navigation/HomeStack';
7+
8+
export enum BugReportingState {
9+
Enabled = 'Enabled',
10+
Disabled = 'Disabled',
11+
}
12+
13+
export interface BugReportingStateScreenProp {
14+
state: BugReportingState;
15+
setState: (state: BugReportingState) => void;
16+
}
17+
18+
export const BugReportingStateScreen: React.FC<
19+
NativeStackScreenProps<HomeStackParamList, 'BugReportingState'>
20+
> = ({ navigation, route }) => {
21+
const { state, setState } = route.params;
22+
return (
23+
<Screen>
24+
<ListTile
25+
title="Enabled"
26+
testID="id_br_enabled"
27+
onPress={() => setState(BugReportingState.Enabled)}
28+
/>
29+
<ListTile
30+
title="Disabled"
31+
testID="id_br_disabled"
32+
onPress={() => setState(BugReportingState.Disabled)}
33+
/>
34+
</Screen>
35+
);
36+
};

0 commit comments

Comments
 (0)