Skip to content

Commit 82a05ae

Browse files
salmatarzisalmatarzi
authored
🤝 Merge pull request Instabug#114 from Instabug/feature/sample_app
Feature/sample app
2 parents cbd3142 + afd5bf6 commit 82a05ae

File tree

23 files changed

+663
-578
lines changed

23 files changed

+663
-578
lines changed

‎InstabugSample/.babelrc

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{
2-
"presets": ["react-native"]
3-
}
2+
"presets": ["react-native"]
3+
}

‎InstabugSample/.flowconfig

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,33 +12,45 @@
1212
; For RN Apps installed via npm, "Libraries" folder is inside
1313
; "node_modules/react-native" but in the source repo it is in the root
1414
.*/Libraries/react-native/React.js
15-
.*/Libraries/react-native/ReactNative.js
15+
16+
; Ignore polyfills
17+
.*/Libraries/polyfills/.*
18+
19+
; Ignore metro
20+
.*/node_modules/metro/.*
1621

1722
[include]
1823

1924
[libs]
2025
node_modules/react-native/Libraries/react-native/react-native-interface.js
21-
node_modules/react-native/flow
22-
flow/
26+
node_modules/react-native/flow/
27+
node_modules/react-native/flow-github/
2328

2429
[options]
25-
module.system=haste
30+
emoji=true
2631

27-
experimental.strict_type_args=true
32+
module.system=haste
2833

2934
munge_underscores=true
3035

3136
module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
3237

38+
module.file_ext=.js
39+
module.file_ext=.jsx
40+
module.file_ext=.json
41+
module.file_ext=.native.js
42+
3343
suppress_type=$FlowIssue
3444
suppress_type=$FlowFixMe
35-
suppress_type=$FixMe
45+
suppress_type=$FlowFixMeProps
46+
suppress_type=$FlowFixMeState
3647

37-
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-7]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
38-
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-7]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
48+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
49+
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
3950
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
51+
suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
4052

4153
unsafe.enable_getters_and_setters=true
4254

4355
[version]
44-
^0.37.0
56+
^0.61.0

‎InstabugSample/.gitignore

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,16 +39,15 @@ yarn-error.log
3939
# BUCK
4040
buck-out/
4141
\.buckd/
42-
android/app/libs
4342
*.keystore
4443

4544
# fastlane
4645
#
4746
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
4847
# screenshots whenever they are needed.
4948
# For more information about the recommended setup visit:
50-
# https://github.com/fastlane/fastlane/blob/master/fastlane/docs/Gitignore.md
49+
# https://docs.fastlane.tools/best-practices/source-control/
5150

52-
fastlane/report.xml
53-
fastlane/Preview.html
54-
fastlane/screenshots
51+
*/fastlane/report.xml
52+
*/fastlane/Preview.html
53+
*/fastlane/screenshots

‎InstabugSample/App.js

Lines changed: 232 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,232 @@
1+
/**
2+
* Sample React Native App
3+
* https://github.com/facebook/react-native
4+
* @flow
5+
*/
6+
7+
import React, { Component } from 'react';
8+
import {
9+
Platform,
10+
StyleSheet,
11+
Text,
12+
View,
13+
TouchableOpacity,
14+
processColor,
15+
Switch,
16+
ScrollView
17+
} from 'react-native';
18+
19+
import Instabug from'instabug-reactnative';
20+
21+
22+
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',
27+
});
28+
29+
export default class App extends Component<{}> {
30+
31+
constructor(props) {
32+
super(props);
33+
this.state = {
34+
switchValue: false,
35+
colorTheme: 'Dark'
36+
};
37+
Instabug.startWithToken("8020a1fab5139a4be54038a9728c4dc8", Instabug.invocationEvent.shake);
38+
Instabug.setReportCategories("Performance","UI","Flow","Other");
39+
Instabug.setPromptOptionsEnabled(true, true, true);
40+
Instabug.setLocale(Instabug.locale.english);
41+
}
42+
43+
render() {
44+
return (
45+
<View style={styles.container}>
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>
92+
</View>
93+
);
94+
}
95+
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+
136+
showIntroMessage() {
137+
Instabug.showIntroMessage();
138+
}
139+
140+
invoke() {
141+
Instabug.invoke();
142+
}
143+
144+
sendBugReport() {
145+
Instabug.invokeWithInvocationMode(Instabug.invocationMode.newBug);
146+
}
147+
148+
sendFeedback() {
149+
Instabug.invokeWithInvocationMode(Instabug.invocationMode.newFeedback);
150+
}
151+
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+
163+
startNewConversation() {
164+
Instabug.invokeWithInvocationMode(Instabug.invocationMode.newChat);
165+
}
166+
167+
showUnreadMessagesCount() {
168+
Instabug.getUnreadMessagesCount((count) => {
169+
alert("Messages: " + count);
170+
});
171+
}
172+
}
173+
174+
const styles = StyleSheet.create({
175+
container: {
176+
flex: 1,
177+
alignItems: 'center',
178+
backgroundColor: '#F5FCFF',
179+
},
180+
details: {
181+
textAlign: 'center',
182+
color: '#333333',
183+
margin: 20,
184+
marginTop: Platform.OS === 'ios' ? 40 : 20
185+
},
186+
text: {
187+
color: '#FFFFFF',
188+
fontSize: 12,
189+
fontWeight: 'bold'
190+
},
191+
button: {
192+
marginTop: 10,
193+
backgroundColor: "#1D82DC",
194+
padding: 10,
195+
alignItems: 'center',
196+
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
231+
}
232+
});

0 commit comments

Comments
 (0)