Skip to content

Commit e4c8a60

Browse files
YoussefFouaddYoussefFouadd
authored
feat(example): add features and buttons implementation (#1280)
Jira ID: RL-224
1 parent 4752078 commit e4c8a60

File tree

10 files changed

+351
-6
lines changed

10 files changed

+351
-6
lines changed

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ import { TracesScreen } from '../screens/apm/TracesScreen';
2626
import { NetworkScreen } from '../screens/apm/NetworkScreen';
2727
import { FlowsScreen } from '../screens/apm/FlowsScreen';
2828
import { SessionReplayScreen } from '../screens/SessionReplayScreen';
29+
import { LegacyModeScreen } from '../screens/LegacyModeScreen';
30+
import { HttpScreen } from '../screens/apm/HttpScreen';
2931

3032
export type HomeStackParamList = {
3133
Home: undefined;
@@ -45,6 +47,8 @@ export type HomeStackParamList = {
4547
LargeImageList: undefined;
4648
SessionReplay: undefined;
4749
BackAndForthScreen: BackAndForthScreenProp;
50+
LegacyMode: undefined;
51+
HttpScreen: undefined;
4852

4953
// APM //
5054
APM: undefined;
@@ -132,6 +136,12 @@ export const HomeStackNavigator: React.FC = () => {
132136
<HomeStack.Screen name="NetworkTraces" component={NetworkScreen} />
133137
<HomeStack.Screen name="ExecutionTraces" component={TracesScreen} />
134138
<HomeStack.Screen name="AppFlows" component={FlowsScreen} />
139+
<HomeStack.Screen
140+
name="LegacyMode"
141+
component={LegacyModeScreen}
142+
options={{ title: 'LegacyMode' }}
143+
/>
144+
<HomeStack.Screen name="HttpScreen" component={HttpScreen} options={{ title: 'HTTP' }} />
135145
</HomeStack.Navigator>
136146
);
137147
};

‎examples/default/src/screens/CrashReportingScreen.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState } from 'react';
2-
import { Alert, Platform, ScrollView, StyleSheet, Text, View } from 'react-native';
2+
import { Alert, Platform, ScrollView, StyleSheet, Text, View, Switch } from 'react-native';
33

44
import { CrashReporting, NonFatalErrorLevel } from 'instabug-reactnative';
55

@@ -12,6 +12,7 @@ import { VerticalListTile } from '../components/VerticalListTile';
1212
import { Button, VStack } from 'native-base';
1313
import { InputField } from '../components/InputField';
1414
import { Select } from '../components/Select';
15+
import { showNotification } from '../utils/showNotification';
1516

1617
const styles = StyleSheet.create({
1718
inputWrapper: {
@@ -61,6 +62,7 @@ export const CrashReportingScreen: React.FC = () => {
6162
throw error;
6263
}
6364
}
65+
const [isEnabled, setIsEnabled] = useState(false);
6466

6567
const [userAttributeKey, setUserAttributeKey] = useState('');
6668
const [userAttributeValue, setUserAttributeValue] = useState('');
@@ -70,6 +72,12 @@ export const CrashReportingScreen: React.FC = () => {
7072
NonFatalErrorLevel.error,
7173
);
7274

75+
const toggleSwitch = (value: boolean) => {
76+
setIsEnabled(value);
77+
CrashReporting.setEnabled(value);
78+
showNotification('Crash Reporting status', 'Crash Reporting enabled set to ' + value);
79+
};
80+
7381
function sendCrash() {
7482
try {
7583
const error = new Error(crashNameValue);
@@ -99,6 +107,8 @@ export const CrashReportingScreen: React.FC = () => {
99107

100108
return (
101109
<Screen>
110+
<Text>Crash Reporting Enabled:</Text>
111+
<Switch onValueChange={toggleSwitch} value={isEnabled} />
102112
<ScrollView>
103113
<Section title="Non-Fatals">
104114
<ListTile

‎examples/default/src/screens/FeatureRequestsScreen.tsx‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,26 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22

3-
import { FeatureRequests } from 'instabug-reactnative';
3+
import { FeatureRequests, ActionType } from 'instabug-reactnative';
44

55
import { ListTile } from '../components/ListTile';
6+
import { Text, Switch } from 'react-native';
7+
68
import { Screen } from '../components/Screen';
9+
import { showNotification } from '../utils/showNotification';
710

811
export const FeatureRequestsScreen: React.FC = () => {
12+
const [isEnabled, setIsEnabled] = useState(false);
13+
14+
const toggleSwitch = (value: boolean) => {
15+
setIsEnabled(value);
16+
17+
FeatureRequests.setEmailFieldRequired(value, ActionType.requestNewFeature);
18+
showNotification('Email status', 'Email field required set to ' + value);
19+
};
920
return (
1021
<Screen>
22+
<Text>Email field Required:</Text>
23+
<Switch onValueChange={toggleSwitch} value={isEnabled} />
1124
<ListTile title="Show" onPress={() => FeatureRequests.show()} />
1225
</Screen>
1326
);

‎examples/default/src/screens/HomeScreen.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export const HomeScreen: React.FC<NativeStackScreenProps<HomeStackParamList, 'Ho
1919
<ListTile title="User Steps" onPress={() => navigation.navigate('UserSteps')} />
2020
<ListTile title="APM" onPress={() => navigation.navigate('APM')} />
2121
<ListTile title="Session Replay" onPress={() => navigation.navigate('SessionReplay')} />
22+
<ListTile title="Legacy Mode" onPress={() => navigation.navigate('LegacyMode')} />
2223
</Screen>
2324
);
2425
};

‎examples/default/src/screens/LegacyModeScreen.tsx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import React, { useState } from 'react';
2+
import { ActivityIndicator } from 'react-native';
3+
import Instabug from 'instabug-reactnative';
4+
import { ListTile } from '../components/ListTile';
5+
import { Screen } from '../components/Screen';
6+
import { showNotification } from '../utils/showNotification';
7+
8+
export const LegacyModeScreen: React.FC = () => {
9+
const [loading, setLoading] = useState(false);
10+
11+
const addMultipleInstabugLogs = async (numberOfLogs: number) => {
12+
setLoading(true);
13+
try {
14+
for (let i = 0; i < numberOfLogs; i++) {
15+
Instabug.logDebug(`log ${i}`);
16+
}
17+
showNotification('Success', 'Succeeded');
18+
} catch (error) {
19+
showNotification('Error', 'Failed');
20+
} finally {
21+
setLoading(false);
22+
}
23+
};
24+
25+
const addMultipleUserEvents = async (numberOfLogs: number) => {
26+
setLoading(true);
27+
try {
28+
for (let i = 0; i < numberOfLogs; i++) {
29+
Instabug.logUserEvent(`test user event ${i}`);
30+
}
31+
showNotification('Success', 'Succeeded');
32+
} catch (error) {
33+
showNotification('Error', 'Failed');
34+
} finally {
35+
setLoading(false);
36+
}
37+
};
38+
39+
const addMultipleTags = async (numberOfLogs: number) => {
40+
setLoading(true);
41+
try {
42+
for (let i = 0; i < numberOfLogs; i++) {
43+
Instabug.appendTags([`test tag ${i}`]);
44+
}
45+
showNotification('Success', 'Succeeded');
46+
} catch (error) {
47+
showNotification('Error', 'Failed');
48+
} finally {
49+
setLoading(false);
50+
}
51+
};
52+
53+
const addMultipleUserAttributes = async (numberOfLogs: number) => {
54+
setLoading(true);
55+
try {
56+
for (let i = 0; i < numberOfLogs; i++) {
57+
Instabug.setUserAttribute(`user${i}`, `user${i} value`);
58+
}
59+
showNotification('Success', 'Succeeded');
60+
} catch (error) {
61+
showNotification('Error', 'Failed');
62+
} finally {
63+
setLoading(false);
64+
}
65+
};
66+
67+
return (
68+
<Screen>
69+
{loading && <ActivityIndicator size="large" color="#0000ff" />}
70+
71+
<ListTile
72+
title="Attach 10 InstabugLogs at a time"
73+
onPress={() => addMultipleInstabugLogs(10)}
74+
/>
75+
<ListTile title="Attach 10 events at a time" onPress={() => addMultipleUserEvents(10)} />
76+
<ListTile title="Attach 10 tags at a time" onPress={() => addMultipleTags(10)} />
77+
<ListTile
78+
title="Attach 10 user attributes at a time"
79+
onPress={() => addMultipleUserAttributes(10)}
80+
/>
81+
</Screen>
82+
);
83+
};

‎examples/default/src/screens/SettingsScreen.tsx‎

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
import React, { useState } from 'react';
22

3-
import Instabug, { BugReporting, ColorTheme, InvocationEvent } from 'instabug-reactnative';
3+
import Instabug, {
4+
BugReporting,
5+
ColorTheme,
6+
InvocationEvent,
7+
Locale,
8+
ReproStepsMode,
9+
} from 'instabug-reactnative';
410
import { InputGroup, InputLeftAddon, useToast, VStack, Button } from 'native-base';
511

612
import { ListTile } from '../components/ListTile';
@@ -193,6 +199,32 @@ export const SettingsScreen: React.FC = () => {
193199
onValueChange={Instabug.setColorTheme}
194200
/>
195201
</ListTile>
202+
<ListTile
203+
title="Change Locale to Arabic"
204+
onPress={() => {
205+
Instabug.setLocale(Locale.arabic);
206+
}}
207+
/>
208+
<ListTile
209+
title="Disable Repro Steps"
210+
onPress={() => {
211+
Instabug.setReproStepsConfig({
212+
all: ReproStepsMode.disabled,
213+
});
214+
}}
215+
/>
216+
<ListTile
217+
title="Add Experiments"
218+
onPress={() => {
219+
Instabug.addExperiments(['exp1', 'exp2']);
220+
}}
221+
/>
222+
<ListTile
223+
title="Remove Experiments"
224+
onPress={() => {
225+
Instabug.removeExperiments(['exp1', 'exp2']);
226+
}}
227+
/>
196228

197229
<VerticalListTile title="User Identification">
198230
<VStack>

‎examples/default/src/screens/apm/APMScreen.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,28 @@
11
import type { NativeStackScreenProps } from '@react-navigation/native-stack';
22
import type { HomeStackParamList } from '../../navigation/HomeStack';
3-
import React from 'react';
3+
import React, { useState } from 'react';
44
import { ListTile } from '../../components/ListTile';
55
import { Screen } from '../../components/Screen';
6+
import { Text, Switch } from 'react-native';
7+
import { APM } from 'instabug-reactnative';
8+
import { showNotification } from '../../utils/showNotification';
69

710
export const APMScreen: React.FC<NativeStackScreenProps<HomeStackParamList, 'APM'>> = ({
811
navigation,
912
}) => {
13+
const [isEnabled, setIsEnabled] = useState(false);
14+
15+
const toggleSwitch = (value: boolean) => {
16+
setIsEnabled(value);
17+
APM.setEnabled(value);
18+
showNotification('APM status', 'APM enabled set to ' + value);
19+
};
20+
1021
return (
1122
<Screen>
23+
<Text>Enable APM:</Text>
24+
<Switch onValueChange={toggleSwitch} value={isEnabled} />
25+
<ListTile title="End App launch" onPress={() => APM.endAppLaunch()} />
1226
<ListTile title="Network Screen" onPress={() => navigation.navigate('NetworkTraces')} />
1327
<ListTile title="Traces" onPress={() => navigation.navigate('ExecutionTraces')} />
1428
<ListTile title="Flows" onPress={() => navigation.navigate('AppFlows')} />

0 commit comments

Comments
 (0)