Skip to content

Commit f84ec58

Browse files
Set bug report types
Set extended bug reporting options Disable/Enable bug reporting Set the disclaimer text Set the post sending dialog Set InvocationOption API
1 parent 196b481 commit f84ec58

File tree

3 files changed

+262
-53
lines changed

3 files changed

+262
-53
lines changed

examples/default/src/components/InputField.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ interface InputFieldProps {
2121
maxLength?: number;
2222
accessibilityLabel?: string;
2323
flex?: number;
24+
testID?: string;
2425
}
2526

2627
export const InputField = forwardRef<TextInput, InputFieldProps>(
@@ -34,6 +35,7 @@ export const InputField = forwardRef<TextInput, InputFieldProps>(
3435
maxLength,
3536
keyboardType,
3637
errorText,
38+
testID,
3739
...restProps
3840
},
3941
ref,
@@ -45,9 +47,11 @@ export const InputField = forwardRef<TextInput, InputFieldProps>(
4547
placeholder={placeholder}
4648
style={[styles.textInput, style]}
4749
maxLength={maxLength}
50+
accessible={true}
4851
accessibilityLabel={accessibilityLabel}
4952
keyboardType={keyboardType}
5053
value={value}
54+
testID={testID}
5155
onChangeText={onChangeText}
5256
{...restProps}
5357
/>

examples/default/src/components/ListTile.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,18 @@ import { Box, HStack, Pressable, Text } from 'native-base';
55
interface ListTileProps extends PropsWithChildren {
66
title: string;
77
onPress?: () => void;
8+
testID?: string;
89
}
910

10-
export const ListTile: React.FC<ListTileProps> = ({ title, onPress, children }) => {
11+
export const ListTile: React.FC<ListTileProps> = ({ title, onPress, children, testID }) => {
1112
return (
1213
<Pressable
1314
onPress={onPress}
1415
p="4"
1516
rounded="2"
17+
testID={testID}
1618
shadow="1"
19+
accessible={true}
1720
borderBottomWidth="1"
1821
borderColor="coolGray.300"
1922
bg="coolGray.100"
Lines changed: 254 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,284 @@
1-
import React from 'react';
1+
import React, { type Dispatch, type SetStateAction, useState } from 'react';
22

33
import Instabug, {
44
BugReporting,
55
InvocationOption,
66
ReportType,
77
ExtendedBugReportMode,
88
WelcomeMessageMode,
9+
InvocationEvent,
910
} from 'instabug-reactnative';
1011

1112
import { ListTile } from '../components/ListTile';
1213
import { Screen } from '../components/Screen';
13-
import { useToast } from 'native-base';
14+
import { useToast, Checkbox, Box, Text, VStack, Button, ScrollView, HStack } from 'native-base';
1415
import { Section } from '../components/Section';
16+
import { InputField } from '../components/InputField';
1517

1618
export const BugReportingScreen: React.FC = () => {
1719
const toast = useToast();
20+
const [reportTypes, setReportTypes] = useState<string[]>([]);
21+
const [invocationOptions, setInvocationOptions] = useState<string[]>([]);
22+
23+
const [disclaimerText, setDisclaimerText] = useState<string>('');
24+
25+
const toggleCheckbox = (value: string, setData: Dispatch<SetStateAction<string[]>>) => {
26+
setData((prev) =>
27+
prev.includes(value) ? prev.filter((item) => item !== value) : [...prev, value],
28+
);
29+
};
30+
31+
const handleSetReportTypesButtonPress = () => {
32+
const selectedEnums: ReportType[] = reportTypes.map((val) => {
33+
switch (val) {
34+
case 'bug':
35+
return ReportType.bug;
36+
case 'feedback':
37+
return ReportType.feedback;
38+
case 'question':
39+
return ReportType.question;
40+
default:
41+
throw new Error('Invalid report type selected');
42+
}
43+
});
44+
BugReporting.setReportTypes(selectedEnums);
45+
};
46+
const handleSetInvocationOptionsButtonPress = () => {
47+
const selectedEnums: InvocationEvent[] = invocationOptions.map((val) => {
48+
switch (val) {
49+
case 'floatingButton':
50+
return InvocationEvent.floatingButton;
51+
case 'twoFingersSwipe':
52+
return InvocationEvent.twoFingersSwipe;
53+
case 'screenshot':
54+
return InvocationEvent.screenshot;
55+
case 'shake':
56+
return InvocationEvent.shake;
57+
58+
default:
59+
throw new Error('Invalid report type selected');
60+
}
61+
});
62+
BugReporting.setInvocationEvents(selectedEnums);
63+
};
64+
65+
const handleSetDisclamirTextPress = () => {
66+
BugReporting.setDisclaimerText(disclaimerText);
67+
setDisclaimerText('');
68+
};
69+
1870
return (
19-
<Screen>
20-
<ListTile title="Show" onPress={() => Instabug.show()} />
21-
<ListTile title="Send Bug Report" onPress={() => BugReporting.show(ReportType.bug, [])} />
22-
<ListTile
23-
title="Send Feedback"
24-
onPress={() => BugReporting.show(ReportType.feedback, [InvocationOption.emailFieldHidden])}
25-
/>
26-
<ListTile title="Ask a Question" onPress={() => BugReporting.show(ReportType.question, [])} />
27-
<ListTile
28-
title="Enable extended bug report with required fields"
29-
onPress={() =>
30-
BugReporting.setExtendedBugReportMode(ExtendedBugReportMode.enabledWithRequiredFields)
31-
}
32-
/>
33-
<ListTile
34-
title="Enable extended bug report with optional fields"
35-
onPress={() =>
36-
BugReporting.setExtendedBugReportMode(ExtendedBugReportMode.enabledWithOptionalFields)
37-
}
38-
/>
39-
<ListTile
40-
title="Disable session profiler"
41-
onPress={() => Instabug.setSessionProfilerEnabled(true)}
42-
/>
43-
<ListTile
44-
title="Welcome message Beta"
45-
onPress={() => Instabug.showWelcomeMessage(WelcomeMessageMode.beta)}
46-
/>
47-
<ListTile
48-
title="Welcome message Live"
49-
onPress={() => Instabug.showWelcomeMessage(WelcomeMessageMode.live)}
50-
/>
51-
52-
<Section title="Handlers">
71+
<ScrollView flex={1} bg="gray.100">
72+
<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+
/>
5380
<ListTile
54-
title="On invocation add tag"
81+
title="Disabled"
82+
onPress={() => BugReporting.setEnabled(false)}
83+
testID="id_br_disable"
84+
/>
85+
86+
<ListTile title="Send Bug Report" onPress={() => BugReporting.show(ReportType.bug, [])} />
87+
<ListTile
88+
title="Send Feedback"
5589
onPress={() =>
56-
BugReporting.onInvokeHandler(function () {
57-
Instabug.appendTags(['Invocation Handler tag1']);
58-
})
90+
BugReporting.show(ReportType.feedback, [InvocationOption.emailFieldHidden])
5991
}
6092
/>
6193
<ListTile
62-
title="On submission show toast message"
94+
title="Ask a Question"
95+
onPress={() => BugReporting.show(ReportType.question, [])}
96+
/>
97+
<ListTile
98+
title="Enable extended bug report with required fields"
6399
onPress={() =>
64-
Instabug.onReportSubmitHandler(() => {
65-
toast.show({
66-
description: 'Submission succeeded',
67-
});
68-
})
100+
BugReporting.setExtendedBugReportMode(ExtendedBugReportMode.enabledWithRequiredFields)
69101
}
70102
/>
71103
<ListTile
72-
title="On dismissing turn floating to red"
104+
title="Enable extended bug report with optional fields"
73105
onPress={() =>
74-
BugReporting.onSDKDismissedHandler(function () {
75-
Instabug.setPrimaryColor('#FF0000');
76-
})
106+
BugReporting.setExtendedBugReportMode(ExtendedBugReportMode.enabledWithOptionalFields)
77107
}
78108
/>
79-
</Section>
80-
</Screen>
109+
<ListTile
110+
title="Disable session profiler"
111+
onPress={() => Instabug.setSessionProfilerEnabled(true)}
112+
/>
113+
<ListTile
114+
title="Welcome message Beta"
115+
onPress={() => Instabug.showWelcomeMessage(WelcomeMessageMode.beta)}
116+
/>
117+
<ListTile
118+
title="Welcome message Live"
119+
onPress={() => Instabug.showWelcomeMessage(WelcomeMessageMode.live)}
120+
/>
121+
122+
<Box justifyContent="center" alignItems="center" p={4} bg="coolGray.100" marginY={2}>
123+
<Text fontSize="md" mb={4} bold alignSelf="start" textAlign="start">
124+
Bug Reporting Types
125+
</Text>
126+
127+
<VStack space={2} w="90%">
128+
<HStack space={6} justifyContent="center">
129+
<Checkbox
130+
isChecked={reportTypes.includes('bug')}
131+
onChange={() => toggleCheckbox('bug', setReportTypes)}
132+
value="bug"
133+
accessible={true}
134+
testID="id_br_report_type_bug"
135+
size="md">
136+
Bug
137+
</Checkbox>
138+
139+
<Checkbox
140+
isChecked={reportTypes.includes('feedback')}
141+
onChange={() => toggleCheckbox('feedback', setReportTypes)}
142+
value="feedback"
143+
testID="id_br_report_type_feedback"
144+
size="md">
145+
Feedback
146+
</Checkbox>
147+
148+
<Checkbox
149+
isChecked={reportTypes.includes('question')}
150+
onChange={() => toggleCheckbox('question', setReportTypes)}
151+
value="question"
152+
testID="id_br_report_type_question"
153+
size="md">
154+
Question
155+
</Checkbox>
156+
</HStack>
157+
158+
<Button
159+
onPress={handleSetReportTypesButtonPress}
160+
mt={4}
161+
colorScheme="primary"
162+
accessible={true}
163+
testID="id_br_report_type_btn">
164+
Set Bug Reporting Types
165+
</Button>
166+
</VStack>
167+
</Box>
168+
169+
<Box justifyContent="center" alignItems="center" p={4} bg="coolGray.100" marginY={2}>
170+
<Text fontSize="md" mb={4} bold alignSelf="start" textAlign="start">
171+
Set the disclaimer text
172+
</Text>
173+
174+
<VStack space={2} w="90%">
175+
<InputField
176+
placeholder="disclaimer text"
177+
onChangeText={setDisclaimerText}
178+
testID="id_br_disclaimer_input"
179+
value={disclaimerText}
180+
/>
181+
182+
<Button
183+
onPress={handleSetDisclamirTextPress}
184+
mt={4}
185+
colorScheme="primary"
186+
testID="id_br_disclaimer_btn"
187+
accessible={true}>
188+
Set Disclaimer text
189+
</Button>
190+
</VStack>
191+
</Box>
192+
193+
<Box justifyContent="center" alignItems="center" p={4} bg="coolGray.100" marginY={2}>
194+
<Text fontSize="md" mb={4} bold alignSelf="start" textAlign="start">
195+
Invocation Events
196+
</Text>
197+
198+
<VStack space={2} w="90%">
199+
<HStack space={6} justifyContent="center">
200+
<Checkbox
201+
isChecked={invocationOptions.includes('floatingButton')}
202+
onChange={() => toggleCheckbox('floatingButton', setInvocationOptions)}
203+
value="floatingButton"
204+
testID="id_br_invoicetion_options_floatingButton"
205+
accessible={true}
206+
size="md">
207+
Floating button
208+
</Checkbox>
209+
210+
<Checkbox
211+
isChecked={invocationOptions.includes('twoFingersSwipe')}
212+
onChange={() => toggleCheckbox('twoFingersSwipe', setInvocationOptions)}
213+
value="twoFingersSwipe"
214+
testID="id_br_invoicetion_options_twoFingersSwipe"
215+
accessible={true}
216+
size="md">
217+
Two Fingers Swipe
218+
</Checkbox>
219+
</HStack>
220+
<HStack space={6} justifyContent="center">
221+
<Checkbox
222+
isChecked={invocationOptions.includes('screenshot')}
223+
onChange={() => toggleCheckbox('screenshot', setInvocationOptions)}
224+
value="screenshot"
225+
testID="id_br_invoicetion_options_screenshot"
226+
accessible={true}
227+
size="md">
228+
Screenshot
229+
</Checkbox>
230+
<Checkbox
231+
isChecked={invocationOptions.includes('shake')}
232+
onChange={() => toggleCheckbox('shake', setInvocationOptions)}
233+
testID="id_br_invoicetion_options_shake"
234+
accessible={true}
235+
value="shake"
236+
size="md">
237+
Shake
238+
</Checkbox>
239+
</HStack>
240+
241+
<Button
242+
onPress={handleSetInvocationOptionsButtonPress}
243+
mt={4}
244+
colorScheme="primary"
245+
testID="id_br_invoicetion_options_btn"
246+
accessible={true}>
247+
Set Invocation Events
248+
</Button>
249+
</VStack>
250+
</Box>
251+
252+
<Section title="Handlers">
253+
<ListTile
254+
title="On invocation add tag"
255+
onPress={() =>
256+
BugReporting.onInvokeHandler(function () {
257+
Instabug.appendTags(['Invocation Handler tag1']);
258+
})
259+
}
260+
/>
261+
<ListTile
262+
title="On submission show toast message"
263+
testID="id_br_submission_show_toast_btn"
264+
onPress={() =>
265+
Instabug.onReportSubmitHandler(() => {
266+
toast.show({
267+
description: 'Submission succeeded',
268+
});
269+
})
270+
}
271+
/>
272+
<ListTile
273+
title="On dismissing turn floating to red"
274+
onPress={() =>
275+
BugReporting.onSDKDismissedHandler(function () {
276+
Instabug.setPrimaryColor('#FF0000');
277+
})
278+
}
279+
/>
280+
</Section>
281+
</Screen>
282+
</ScrollView>
81283
);
82284
};

0 commit comments

Comments
 (0)