Skip to content

Commit afd5bf6

Browse files
salmatarzisalmatarzi
committed
✨ Add more features for the Sample App
1 parent a49ebe9 commit afd5bf6

File tree

4 files changed

+312
-41
lines changed

4 files changed

+312
-41
lines changed

‎InstabugSample/App.js

Lines changed: 146 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,10 @@ import {
1010
StyleSheet,
1111
Text,
1212
View,
13-
TouchableOpacity
13+
TouchableOpacity,
14+
processColor,
15+
Switch,
16+
ScrollView
1417
} from 'react-native';
1518

1619
import Instabug from'instabug-reactnative';
@@ -27,39 +30,109 @@ export default class App extends Component<{}> {
2730

2831
constructor(props) {
2932
super(props);
33+
this.state = {
34+
switchValue: false,
35+
colorTheme: 'Dark'
36+
};
37+
Instabug.startWithToken("8020a1fab5139a4be54038a9728c4dc8", Instabug.invocationEvent.shake);
3038
Instabug.setReportCategories("Performance","UI","Flow","Other");
3139
Instabug.setPromptOptionsEnabled(true, true, true);
40+
Instabug.setLocale(Instabug.locale.english);
3241
}
3342

3443
render() {
3544
return (
3645
<View style={styles.container}>
37-
<Text style={styles.details}>
38-
Hello Instabug awesome user! The purpose of this application is to show you the different
39-
options for customizing the SDK and how easy it is to integrate it to your existing app
40-
</Text>
41-
<TouchableOpacity style={styles.button} onPress={()=>this.showIntroMessage()}>
42-
<Text style={styles.text}> SHOW INTRO MESSAGE </Text>
43-
</TouchableOpacity>
44-
<TouchableOpacity style={styles.button} onPress={()=>this.invoke()}>
45-
<Text style={styles.text}> INVOKE </Text>
46-
</TouchableOpacity>
47-
<TouchableOpacity style={styles.button} onPress={()=>this.sendBugReport()}>
48-
<Text style={styles.text}> SEND BUG REPORT </Text>
49-
</TouchableOpacity>
50-
<TouchableOpacity style={styles.button} onPress={()=>this.sendFeedback()}>
51-
<Text style={styles.text}> SEND FEEDBACK </Text>
52-
</TouchableOpacity>
53-
<TouchableOpacity style={styles.button} onPress={()=>this.startNewConversation()}>
54-
<Text style={styles.text}> START A NEW CONVERSATION </Text>
55-
</TouchableOpacity>
56-
<TouchableOpacity style={styles.button} onPress={()=>this.showUnreadMessagesCount()}>
57-
<Text style={styles.text}> GET UNREAD MESSAGES COUNT </Text>
58-
</TouchableOpacity>
46+
<ScrollView contentContainerStyle={styles.contentContainer} >
47+
<Text style={styles.details}>
48+
Hello {"Instabug's"} awesome user! The purpose of this application is to show you the different
49+
options for customizing the SDK and how easy it is to integrate it to your existing app
50+
</Text>
51+
<TouchableOpacity style={styles.button} onPress={()=>this.showIntroMessage()}>
52+
<Text style={styles.text}> SHOW INTRO MESSAGE </Text>
53+
</TouchableOpacity>
54+
<TouchableOpacity style={styles.button} onPress={()=>this.invoke()}>
55+
<Text style={styles.text}> INVOKE </Text>
56+
</TouchableOpacity>
57+
<TouchableOpacity style={styles.button} onPress={()=>this.sendBugReport()}>
58+
<Text style={styles.text}> SEND BUG REPORT </Text>
59+
</TouchableOpacity>
60+
<TouchableOpacity style={styles.button} onPress={()=>this.sendFeedback()}>
61+
<Text style={styles.text}> SEND FEEDBACK </Text>
62+
</TouchableOpacity>
63+
<TouchableOpacity style={styles.button} onPress={()=>this.startNewConversation()}>
64+
<Text style={styles.text}> START A NEW CONVERSATION </Text>
65+
</TouchableOpacity>
66+
<TouchableOpacity style={styles.button} onPress={()=>this.showUnreadMessagesCount()}>
67+
<Text style={styles.text}> GET UNREAD MESSAGES COUNT </Text>
68+
</TouchableOpacity>
69+
{this.invocationEvent()}
70+
<Text style={styles.textColor}> Set primary color </Text>
71+
<View style={styles.rowView}>
72+
<TouchableOpacity style={styles.buttonColor} onPress={()=>this.setPrimaryColor('#FF0000')}>
73+
<Text style={styles.text}> RED </Text>
74+
</TouchableOpacity>
75+
<TouchableOpacity style={styles.buttonColor} onPress={()=>this.setPrimaryColor('#00FF00')}>
76+
<Text style={styles.text}> GREEN </Text>
77+
</TouchableOpacity>
78+
<TouchableOpacity style={styles.buttonColor} onPress={()=>this.setPrimaryColor('#0000FF')}>
79+
<Text style={styles.text}> BLUE </Text>
80+
</TouchableOpacity>
81+
<TouchableOpacity style={styles.buttonColor} onPress={()=>this.setPrimaryColor('#FFFF00')}>
82+
<Text style={styles.text}> YELLOW </Text>
83+
</TouchableOpacity>
84+
</View>
85+
<View style={styles.switchView}>
86+
<Text style={styles.textSwitchStyle}>Color Theme: {this.state.colorTheme}</Text>
87+
<Switch
88+
onValueChange = {this.toggleSwitch}
89+
value = {this.state.switchValue}/>
90+
</View>
91+
</ScrollView>
5992
</View>
6093
);
6194
}
6295

96+
invocationEvent() {
97+
if(Platform.OS === 'ios') {
98+
return(
99+
<View>
100+
<Text style={styles.textColor}> Change Invocation Event </Text>
101+
<View style={styles.rowView}>
102+
<TouchableOpacity style={styles.buttonColor} onPress={()=>this.changeInvocationEvent('Shake')}>
103+
<Text style={styles.textInvoke}> SHAKE </Text>
104+
</TouchableOpacity>
105+
<TouchableOpacity style={styles.buttonColor} onPress={()=>this.changeInvocationEvent('Button')}>
106+
<Text style={styles.textInvoke}> FLOATING BUTTON </Text>
107+
</TouchableOpacity>
108+
<TouchableOpacity style={styles.buttonColor} onPress={()=>this.changeInvocationEvent('Screenshot')}>
109+
<Text style={styles.textInvoke}> SCREENSHOT </Text>
110+
</TouchableOpacity>
111+
<TouchableOpacity style={styles.buttonColor} onPress={()=>this.changeInvocationEvent('None')}>
112+
<Text style={styles.textInvoke}> NONE </Text>
113+
</TouchableOpacity>
114+
</View>
115+
</View>
116+
);
117+
}
118+
return;
119+
}
120+
121+
toggleSwitch = (value) => {
122+
this.setState({switchValue: value})
123+
if(value) {
124+
this.setState({colorTheme: 'Light'});
125+
Instabug.setColorTheme(Instabug.colorTheme.light);
126+
} else {
127+
this.setState({colorTheme: 'Dark'});
128+
Instabug.setColorTheme(Instabug.colorTheme.dark);
129+
}
130+
}
131+
132+
setPrimaryColor(color) {
133+
Instabug.setPrimaryColor(processColor(color));
134+
}
135+
63136
showIntroMessage() {
64137
Instabug.showIntroMessage();
65138
}
@@ -76,6 +149,17 @@ export default class App extends Component<{}> {
76149
Instabug.invokeWithInvocationMode(Instabug.invocationMode.newFeedback);
77150
}
78151

152+
changeInvocationEvent(invocationEvent) {
153+
if(invocationEvent === 'Shake')
154+
Instabug.setInvocationEvent(Instabug.invocationEvent.shake);
155+
if(invocationEvent === 'Button')
156+
Instabug.setInvocationEvent(Instabug.invocationEvent.floatingButton);
157+
if(invocationEvent === 'Screenshot')
158+
Instabug.setInvocationEvent(Instabug.invocationEvent.screenshot);
159+
if(invocationEvent === 'None')
160+
Instabug.setInvocationEvent(Instabug.invocationEvent.none);
161+
}
162+
79163
startNewConversation() {
80164
Instabug.invokeWithInvocationMode(Instabug.invocationMode.newChat);
81165
}
@@ -96,16 +180,53 @@ const styles = StyleSheet.create({
96180
details: {
97181
textAlign: 'center',
98182
color: '#333333',
99-
margin: 20
183+
margin: 20,
184+
marginTop: Platform.OS === 'ios' ? 40 : 20
100185
},
101186
text: {
102-
color: '#FFFFFF'
187+
color: '#FFFFFF',
188+
fontSize: 12,
189+
fontWeight: 'bold'
103190
},
104191
button: {
105192
marginTop: 10,
106193
backgroundColor: "#1D82DC",
107194
padding: 10,
108195
alignItems: 'center',
109196
borderRadius: 5
197+
},
198+
rowView: {
199+
flexDirection: 'row',
200+
marginTop: 10
201+
},
202+
textColor: {
203+
fontSize: 14,
204+
fontWeight: 'bold',
205+
marginTop: 10,
206+
},
207+
buttonColor: {
208+
marginTop: 10,
209+
backgroundColor: "#1D82DC",
210+
padding: 10,
211+
alignItems: 'center',
212+
borderRadius: 5,
213+
marginRight: 5
214+
},
215+
textSwitchStyle: {
216+
marginTop: 10,
217+
marginRight: 5,
218+
fontWeight: 'bold'
219+
},
220+
switchView: {
221+
flexDirection: 'row',
222+
marginTop: 20,
223+
},
224+
textInvoke: {
225+
color: '#FFFFFF',
226+
fontSize: 10,
227+
fontWeight: 'bold'
228+
},
229+
contentContainer: {
230+
padding: 10
110231
}
111232
});

0 commit comments

Comments
 (0)