@@ -13,120 +13,151 @@ import {
13
13
TouchableOpacity ,
14
14
processColor ,
15
15
Switch ,
16
- ScrollView
16
+ ScrollView ,
17
17
} from 'react-native' ;
18
18
19
- import Instabug , { BugReporting , FeatureRequests , Surveys , Chats , CrashReporting , Replies } from 'instabug-reactnative' ;
20
-
19
+ import Instabug , {
20
+ BugReporting ,
21
+ FeatureRequests ,
22
+ Surveys ,
23
+ Chats ,
24
+ CrashReporting ,
25
+ Replies ,
26
+ } from 'instabug-reactnative' ;
21
27
22
28
const instructions = Platform . select ( {
23
- ios : 'Press Cmd+R to reload,\n' +
24
- 'Cmd+D or shake for dev menu' ,
25
- android : 'Double tap R on your keyboard to reload,\n' +
26
- 'Shake or press menu button for dev menu' ,
29
+ ios : 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu' ,
30
+ android : 'Double tap R on your keyboard to reload,\n' + 'Shake or press menu button for dev menu' ,
27
31
} ) ;
28
32
29
33
export default class App extends Component < { } > {
30
-
31
34
constructor ( props ) {
32
35
super ( props ) ;
33
36
this . state = {
34
37
switchValue : true ,
35
- colorTheme : 'Light'
38
+ colorTheme : 'Light' ,
36
39
} ;
37
40
38
- Instabug . startWithToken ( "YOUR_TOKEN" , [ Instabug . invocationEvent . floatingButton ] ) ;
41
+ Instabug . startWithToken ( '068ba9a8c3615035e163dc5f829c73be' , [
42
+ Instabug . invocationEvent . floatingButton ,
43
+ ] ) ;
39
44
}
40
45
41
46
render ( ) {
42
47
return (
43
- < View testID = ' welcome' style = { styles . container } >
44
- < ScrollView contentContainerStyle = { styles . contentContainer } >
48
+ < View testID = " welcome" style = { styles . container } >
49
+ < ScrollView contentContainerStyle = { styles . contentContainer } >
45
50
< Text style = { styles . details } >
46
- Hello { "Instabug's" } awesome user! The purpose of this application is to show you the different
47
- options for customizing the SDK and how easy it is to integrate it to your existing app
51
+ Hello { "Instabug's" } awesome user! The purpose of this application is to show you the
52
+ different options for customizing the SDK and how easy it is to integrate it to your
53
+ existing app
48
54
</ Text >
49
- < TouchableOpacity style = { styles . button } onPress = { ( ) => this . invoke ( ) } >
55
+ < TouchableOpacity style = { styles . button } onPress = { ( ) => this . invoke ( ) } >
50
56
< Text style = { styles . text } > INVOKE </ Text >
51
57
</ TouchableOpacity >
52
- < TouchableOpacity style = { styles . button } onPress = { ( ) => this . sendBugReport ( ) } >
58
+ < TouchableOpacity style = { styles . button } onPress = { ( ) => this . sendBugReport ( ) } >
53
59
< Text style = { styles . text } > SEND BUG REPORT </ Text >
54
60
</ TouchableOpacity >
55
- < TouchableOpacity style = { styles . button } onPress = { ( ) => this . sendFeedback ( ) } >
61
+ < TouchableOpacity style = { styles . button } onPress = { ( ) => this . sendFeedback ( ) } >
56
62
< Text style = { styles . text } > SEND FEEDBACK </ Text >
57
63
</ TouchableOpacity >
58
- < TouchableOpacity style = { styles . button } onPress = { ( ) => this . startNewConversation ( ) } >
64
+ < TouchableOpacity style = { styles . button } onPress = { ( ) => this . startNewConversation ( ) } >
59
65
< Text style = { styles . text } > ASK A QUESTION </ Text >
60
66
</ TouchableOpacity >
61
- < TouchableOpacity style = { styles . button } onPress = { ( ) => this . sendCrashReport ( ) } >
67
+ < TouchableOpacity style = { styles . button } onPress = { ( ) => this . sendCrashReport ( ) } >
62
68
< Text style = { styles . text } > THROW HANDLED EXCEPTION </ Text >
63
69
</ TouchableOpacity >
64
- < TouchableOpacity style = { styles . button } onPress = { ( ) => this . showNpsSurvey ( ) } >
70
+ < TouchableOpacity style = { styles . button } onPress = { ( ) => this . showNpsSurvey ( ) } >
65
71
< Text style = { styles . text } > SHOW NPS SURVEY </ Text >
66
72
</ TouchableOpacity >
67
- < TouchableOpacity style = { styles . button } onPress = { ( ) => this . showMultipleQuestionSurvey ( ) } >
73
+ < TouchableOpacity style = { styles . button } onPress = { ( ) => this . showMultipleQuestionSurvey ( ) } >
68
74
< Text style = { styles . text } > SHOW MULTIPLE QUESTION SURVEY </ Text >
69
75
</ TouchableOpacity >
70
- < TouchableOpacity style = { styles . button } onPress = { ( ) => this . showFeatureRequests ( ) } >
76
+ < TouchableOpacity style = { styles . button } onPress = { ( ) => this . showFeatureRequests ( ) } >
71
77
< Text style = { styles . text } > SHOW FEATURE REQUESTS </ Text >
72
78
</ TouchableOpacity >
73
- < TouchableOpacity style = { styles . button } onPress = { ( ) => this . showUnreadMessagesCount ( ) } >
79
+ < TouchableOpacity style = { styles . button } onPress = { ( ) => this . showUnreadMessagesCount ( ) } >
74
80
< Text style = { styles . text } > GET UNREAD MESSAGES COUNT </ Text >
75
81
</ TouchableOpacity >
76
82
{ this . invocationEvent ( ) }
77
83
< Text style = { styles . textColor } > Set primary color </ Text >
78
84
< View style = { styles . rowView } >
79
- < TouchableOpacity style = { buttonColor ( '#FF0000' ) } onPress = { ( ) => this . setPrimaryColor ( '#FF0000' ) } />
80
- < TouchableOpacity style = { buttonColor ( '#00FF00' ) } onPress = { ( ) => this . setPrimaryColor ( '#00FF00' ) } />
81
- < TouchableOpacity style = { buttonColor ( '#0000FF' ) } onPress = { ( ) => this . setPrimaryColor ( '#0000FF' ) } />
82
- < TouchableOpacity style = { buttonColor ( '#FFFF00' ) } onPress = { ( ) => this . setPrimaryColor ( '#FFFF00' ) } />
85
+ < TouchableOpacity
86
+ style = { buttonColor ( '#FF0000' ) }
87
+ onPress = { ( ) => this . setPrimaryColor ( '#FF0000' ) }
88
+ />
89
+ < TouchableOpacity
90
+ style = { buttonColor ( '#00FF00' ) }
91
+ onPress = { ( ) => this . setPrimaryColor ( '#00FF00' ) }
92
+ />
93
+ < TouchableOpacity
94
+ style = { buttonColor ( '#0000FF' ) }
95
+ onPress = { ( ) => this . setPrimaryColor ( '#0000FF' ) }
96
+ />
97
+ < TouchableOpacity
98
+ style = { buttonColor ( '#FFFF00' ) }
99
+ onPress = { ( ) => this . setPrimaryColor ( '#FFFF00' ) }
100
+ />
83
101
</ View >
84
102
< View style = { styles . switchView } >
85
103
< Text style = { styles . textSwitchStyle } > Color Theme: { this . state . colorTheme } </ Text >
86
- < Switch
87
- onValueChange = { this . toggleSwitch }
88
- value = { this . state . switchValue } />
104
+ < Switch onValueChange = { this . toggleSwitch } value = { this . state . switchValue } />
89
105
</ View >
90
106
</ ScrollView >
91
107
</ View >
92
108
) ;
93
109
}
94
110
95
111
invocationEvent ( ) {
96
- return (
97
- < View >
98
- < Text style = { styles . textColor } > Change Invocation Event < / T e x t >
99
- < View style = { styles . rowView } >
100
- < TouchableOpacity style = { styles . buttonColor } onPress = { ( ) => this . changeInvocationEvent ( 'Shake' ) } >
101
- < Text style = { styles . textInvoke } > SHAKE </ Text >
102
- </ TouchableOpacity >
103
- < TouchableOpacity style = { styles . buttonColor } onPress = { ( ) => this . changeInvocationEvent ( 'Screenshot' ) } >
104
- < Text style = { styles . textInvoke } > SCREENSHOT </ Text >
105
- </ TouchableOpacity >
106
- < TouchableOpacity style = { styles . buttonColor } onPress = { ( ) => this . changeInvocationEvent ( 'twoFingersSwipe' ) } >
107
- < Text style = { styles . textInvoke } > TWO FINGERS SWIPE LEFT</ Text >
108
- </ TouchableOpacity >
109
- < TouchableOpacity style = { styles . buttonColor } onPress = { ( ) => this . changeInvocationEvent ( 'Button' ) } >
110
- < Text style = { styles . textInvoke } > FLOATING BUTTON </ Text >
111
- </ TouchableOpacity >
112
- < TouchableOpacity style = { styles . buttonColor } onPress = { ( ) => this . changeInvocationEvent ( 'None' ) } >
113
- < Text style = { styles . textInvoke } > NONE </ Text >
114
- </ TouchableOpacity >
115
- </ View >
112
+ return (
113
+ < View >
114
+ < Text style = { styles . textColor } > Change Invocation Event < / T e x t >
115
+ < View style = { styles . rowView } >
116
+ < TouchableOpacity
117
+ style = { styles . buttonColor }
118
+ onPress = { ( ) => this . changeInvocationEvent ( 'Shake' ) }
119
+ >
120
+ < Text style = { styles . textInvoke } > SHAKE </ Text >
121
+ </ TouchableOpacity >
122
+ < TouchableOpacity
123
+ style = { styles . buttonColor }
124
+ onPress = { ( ) => this . changeInvocationEvent ( 'Screenshot' ) }
125
+ >
126
+ < Text style = { styles . textInvoke } > SCREENSHOT </ Text >
127
+ </ TouchableOpacity >
128
+ < TouchableOpacity
129
+ style = { styles . buttonColor }
130
+ onPress = { ( ) => this . changeInvocationEvent ( 'twoFingersSwipe' ) }
131
+ >
132
+ < Text style = { styles . textInvoke } > TWO FINGERS SWIPE LEFT</ Text >
133
+ </ TouchableOpacity >
134
+ < TouchableOpacity
135
+ style = { styles . buttonColor }
136
+ onPress = { ( ) => this . changeInvocationEvent ( 'Button' ) }
137
+ >
138
+ < Text style = { styles . textInvoke } > FLOATING BUTTON </ Text >
139
+ </ TouchableOpacity >
140
+ < TouchableOpacity
141
+ style = { styles . buttonColor }
142
+ onPress = { ( ) => this . changeInvocationEvent ( 'None' ) }
143
+ >
144
+ < Text style = { styles . textInvoke } > NONE </ Text >
145
+ </ TouchableOpacity >
116
146
</ View >
117
- ) ;
147
+ < / V i e w >
148
+ ) ;
118
149
}
119
150
120
- toggleSwitch = ( value ) => {
121
- this . setState ( { switchValue : value } )
122
- if ( value ) {
123
- this . setState ( { colorTheme : 'Light' } ) ;
124
- Instabug . setColorTheme ( Instabug . colorTheme . light ) ;
125
- } else {
126
- this . setState ( { colorTheme : 'Dark' } ) ;
127
- Instabug . setColorTheme ( Instabug . colorTheme . dark ) ;
128
- }
129
- }
151
+ toggleSwitch = value => {
152
+ this . setState ( { switchValue : value } ) ;
153
+ if ( value ) {
154
+ this . setState ( { colorTheme : 'Light' } ) ;
155
+ Instabug . setColorTheme ( Instabug . colorTheme . light ) ;
156
+ } else {
157
+ this . setState ( { colorTheme : 'Dark' } ) ;
158
+ Instabug . setColorTheme ( Instabug . colorTheme . dark ) ;
159
+ }
160
+ } ;
130
161
131
162
setPrimaryColor ( color ) {
132
163
Instabug . setPrimaryColor ( color ) ;
@@ -141,11 +172,11 @@ export default class App extends Component<{}> {
141
172
}
142
173
143
174
showMultipleQuestionSurvey ( ) {
144
- Surveys . showSurvey ( " ZAKSlVz98QdPyOx1wIt8BA" ) ;
175
+ Surveys . showSurvey ( ' ZAKSlVz98QdPyOx1wIt8BA' ) ;
145
176
}
146
177
147
178
showNpsSurvey ( ) {
148
- Surveys . showSurvey ( " pcV_mE2ttqHxT1iqvBxL0w" ) ;
179
+ Surveys . showSurvey ( ' pcV_mE2ttqHxT1iqvBxL0w' ) ;
149
180
}
150
181
151
182
showFeatureRequests ( ) {
@@ -158,28 +189,29 @@ export default class App extends Component<{}> {
158
189
159
190
sendCrashReport ( ) {
160
191
try {
161
- throw new Error ( 'Text Handled Exception From Instabug Test App' ) ;
192
+ throw new Error ( 'Text Handled Exception From Instabug Test App' ) ;
162
193
} catch ( Exception ) {
163
194
CrashReporting . reportJSException ( Exception ) ;
164
195
alert ( 'Crash report Sent!' ) ;
165
196
}
166
197
}
167
198
168
199
sendFeedback ( ) {
169
- BugReporting . showWithOptions ( BugReporting . reportType . feedback , [ BugReporting . option . emailFieldHidden ] ) ;
170
-
200
+ BugReporting . showWithOptions ( BugReporting . reportType . feedback , [
201
+ BugReporting . option . emailFieldHidden ,
202
+ ] ) ;
171
203
}
172
204
173
205
changeInvocationEvent ( invocationEvent ) {
174
- if ( invocationEvent === 'Shake' )
206
+ if ( invocationEvent === 'Shake' )
175
207
BugReporting . setInvocationEvents ( [ BugReporting . invocationEvent . shake ] ) ;
176
- if ( invocationEvent === 'Button' )
208
+ if ( invocationEvent === 'Button' )
177
209
BugReporting . setInvocationEvents ( [ BugReporting . invocationEvent . floatingButton ] ) ;
178
- if ( invocationEvent === 'Screenshot' )
210
+ if ( invocationEvent === 'Screenshot' )
179
211
BugReporting . setInvocationEvents ( [ BugReporting . invocationEvent . screenshot ] ) ;
180
- if ( invocationEvent === 'twoFingersSwipe' )
212
+ if ( invocationEvent === 'twoFingersSwipe' )
181
213
BugReporting . setInvocationEvents ( [ BugReporting . invocationEvent . twoFingersSwipe ] ) ;
182
- if ( invocationEvent === 'None' )
214
+ if ( invocationEvent === 'None' )
183
215
BugReporting . setInvocationEvents ( [ BugReporting . invocationEvent . none ] ) ;
184
216
}
185
217
@@ -188,52 +220,52 @@ export default class App extends Component<{}> {
188
220
}
189
221
190
222
showUnreadMessagesCount ( ) {
191
- Replies . getUnreadRepliesCount ( ( count ) => {
192
- alert ( " Messages: " + count ) ;
223
+ Replies . getUnreadRepliesCount ( count => {
224
+ alert ( ' Messages: ' + count ) ;
193
225
} ) ;
194
226
}
195
227
}
196
228
buttonColor = function ( myColor ) {
197
229
return {
198
230
marginTop : 10 ,
199
231
padding : 20 ,
200
- paddingRight : 40 ,
232
+ paddingRight : 40 ,
201
233
alignItems : 'center' ,
202
234
borderRadius : 5 ,
203
235
marginRight : 5 ,
204
236
backgroundColor : myColor ,
205
- }
206
- }
237
+ } ;
238
+ } ;
207
239
const styles = StyleSheet . create ( {
208
240
container : {
209
241
flex : 1 ,
210
242
alignItems : 'center' ,
211
- backgroundColor : '#F5FCFF'
243
+ backgroundColor : '#F5FCFF' ,
212
244
} ,
213
245
details : {
214
246
textAlign : 'center' ,
215
247
color : '#333333' ,
216
248
margin : 20 ,
217
- marginTop : Platform . OS === 'ios' ? 40 : 20
249
+ marginTop : Platform . OS === 'ios' ? 40 : 20 ,
218
250
} ,
219
251
text : {
220
252
color : '#FFFFFF' ,
221
253
fontSize : 12 ,
222
- fontWeight : 'bold'
254
+ fontWeight : 'bold' ,
223
255
} ,
224
256
button : {
225
257
marginTop : 10 ,
226
- backgroundColor : " #1D82DC" ,
258
+ backgroundColor : ' #1D82DC' ,
227
259
padding : 10 ,
228
260
alignItems : 'center' ,
229
- borderRadius : 5
261
+ borderRadius : 5 ,
230
262
} ,
231
263
rowView : {
232
264
flexDirection : 'row' ,
233
265
marginTop : 10 ,
234
- maxWidth : '100%' ,
266
+ maxWidth : '100%' ,
235
267
flexGrow : 1 ,
236
- flexWrap : 'wrap'
268
+ flexWrap : 'wrap' ,
237
269
} ,
238
270
textColor : {
239
271
fontSize : 14 ,
@@ -242,16 +274,16 @@ const styles = StyleSheet.create({
242
274
} ,
243
275
buttonColor : {
244
276
marginTop : 10 ,
245
- backgroundColor : " #1D82DC" ,
277
+ backgroundColor : ' #1D82DC' ,
246
278
padding : 10 ,
247
279
alignItems : 'center' ,
248
280
borderRadius : 5 ,
249
- marginRight : 5
281
+ marginRight : 5 ,
250
282
} ,
251
283
textSwitchStyle : {
252
284
marginTop : 10 ,
253
285
marginRight : 5 ,
254
- fontWeight : 'bold'
286
+ fontWeight : 'bold' ,
255
287
} ,
256
288
switchView : {
257
289
flexDirection : 'row' ,
@@ -260,9 +292,9 @@ const styles = StyleSheet.create({
260
292
textInvoke : {
261
293
color : '#FFFFFF' ,
262
294
fontSize : 10 ,
263
- fontWeight : 'bold'
295
+ fontWeight : 'bold' ,
264
296
} ,
265
297
contentContainer : {
266
- padding : 10
267
- }
298
+ padding : 10 ,
299
+ } ,
268
300
} ) ;
0 commit comments