react-native-in-app-debugger 1.0.9 → 1.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +66 -3
- package/index.jsx +12 -2
- package/package.json +1 -2
package/README.md
CHANGED
|
@@ -1,21 +1,84 @@
|
|
|
1
1
|
# react-native-in-app-debugger
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
This library's main usage is be used by Non-Technical tester during UAT or SIT or any testing phase.
|
|
4
|
+
|
|
5
|
+
|
|
4
6
|
|
|
5
7
|
|
|
6
8
|
Usage :
|
|
7
9
|
|
|
8
10
|
```
|
|
9
11
|
import React from 'react';
|
|
12
|
+
import {Text, TouchableOpacity, View} from 'react-native';
|
|
13
|
+
import {version} from './package.json';
|
|
14
|
+
import InAppDebugger from 'react-native-in-app-debugger';
|
|
15
|
+
|
|
16
|
+
const variables = {
|
|
17
|
+
url: 'https://staging.sample.com',
|
|
18
|
+
};
|
|
19
|
+
export default () => (
|
|
20
|
+
<>
|
|
21
|
+
<View
|
|
22
|
+
style={{
|
|
23
|
+
alignItems: 'center',
|
|
24
|
+
justifyContent: 'center',
|
|
25
|
+
flex: 1,
|
|
26
|
+
gap: 10,
|
|
27
|
+
}}>
|
|
28
|
+
<TouchableOpacity
|
|
29
|
+
onPress={() => {
|
|
30
|
+
fetch('https://reactnative.dev/movies.json');
|
|
31
|
+
}}>
|
|
32
|
+
<Text>Success</Text>
|
|
33
|
+
</TouchableOpacity>
|
|
34
|
+
<TouchableOpacity
|
|
35
|
+
onPress={() => {
|
|
36
|
+
fetch('https://reactnative.dev/wrong-url', {
|
|
37
|
+
headers: {key: 'value'},
|
|
38
|
+
});
|
|
39
|
+
}}>
|
|
40
|
+
<Text>Error</Text>
|
|
41
|
+
</TouchableOpacity>
|
|
42
|
+
<TouchableOpacity
|
|
43
|
+
onPress={() => {
|
|
44
|
+
fetch('https://swapi.dev/api/planets/?format=wookiee');
|
|
45
|
+
}}>
|
|
46
|
+
<Text>Heavy</Text>
|
|
47
|
+
</TouchableOpacity>
|
|
48
|
+
</View>
|
|
49
|
+
<InAppDebugger version={version} env="staging" variables={variables} />
|
|
50
|
+
</>
|
|
51
|
+
);
|
|
10
52
|
|
|
11
53
|
```
|
|
12
54
|
|
|
55
|
+
Call `InAppDebugger` component on top most component, then a floating debugger will appear.
|
|
56
|
+
|
|
13
57
|
|
|
14
58
|
### Properties
|
|
15
59
|
|
|
16
60
|
All FlatList props should work plus props mentioned below
|
|
17
61
|
|
|
18
|
-
| Prop
|
|
62
|
+
| Prop | Type | Description | Default | Required |
|
|
19
63
|
| ----------------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | ----------------------------------------------------------------------- |
|
|
20
|
-
| `env`
|
|
64
|
+
| `env` | string | any value set here will be shown in the floating debugger panel | | Optional |
|
|
65
|
+
| `variables` | Plain Old JavaScript Object object {} | Key-Value Plain Old JavaScript Object. Normal use case is to show API URL endpoints, environment variable values or any variables you want to debug on run time | | Optional. If set, the debugger will show a dedicated tab for variables when open in full screen mode |
|
|
66
|
+
| `maxNumOfApiToStore` | integer | Number of APIs to be kept. Too much API might make the whole app lag, therefore need to trade off. Suggested value is 50 | | Optional. If not set, all APIs will be kept forever |
|
|
67
|
+
`version` | string | Any string passed here will be shown in debugger's floating panel. | | Optional. If not supplied, version number will taken automatically using React Native Device Info library. But if Device Info library is not installed, then no version will be shown if this prop is not passed.
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
### Integration with Third Party Library
|
|
71
|
+
|
|
72
|
+
#### React Native Device Info (https://www.npmjs.com/package/react-native-device-info)
|
|
73
|
+
|
|
74
|
+
If this library is installed, the floating debugger can automatically show version number, device model, OS version
|
|
75
|
+
|
|
76
|
+
<img width="129" alt="image" src="https://github.com/fattahmuhyiddeen/react-native-in-app-debugger/assets/24792201/e5c31d91-4915-4270-a968-f3156d5e5a96">
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
#### React Native Clipboard (https://www.npmjs.com/package/@react-native-clipboard/clipboard)
|
|
80
|
+
|
|
81
|
+
If this library is installed, when user expand any selected API, there will be a `Copy` button available. Make it very easy for non-techincal tester or user want to copy and paste the API request and response details.
|
|
82
|
+
|
|
83
|
+
<img width="535" alt="image" src="https://github.com/fattahmuhyiddeen/react-native-in-app-debugger/assets/24792201/d4f58ee3-e553-4cae-91df-ba7e26d8cd70">
|
|
21
84
|
|
package/index.jsx
CHANGED
|
@@ -47,7 +47,13 @@ const Label = (props) => (
|
|
|
47
47
|
/>
|
|
48
48
|
);
|
|
49
49
|
|
|
50
|
-
export default ({
|
|
50
|
+
export default ({
|
|
51
|
+
variables,
|
|
52
|
+
env,
|
|
53
|
+
version = v,
|
|
54
|
+
maxNumOfApiToStore = 0,
|
|
55
|
+
labels = [],
|
|
56
|
+
}) => {
|
|
51
57
|
const { apis, clear } = useApiInterceptor(maxNumOfApiToStore);
|
|
52
58
|
|
|
53
59
|
const [tab, setTab] = useState("api");
|
|
@@ -61,6 +67,7 @@ export default ({ variables, env, version = v, maxNumOfApiToStore = 0 }) => {
|
|
|
61
67
|
if (hasEnvOrVersion) badgeHeight += 10;
|
|
62
68
|
if (DeviceInfo) badgeHeight += 10;
|
|
63
69
|
if (badgeHeight === 10) badgeHeight += 10;
|
|
70
|
+
labels.forEach(() => (badgeHeight += 10));
|
|
64
71
|
|
|
65
72
|
const {
|
|
66
73
|
translateX,
|
|
@@ -110,6 +117,9 @@ export default ({ variables, env, version = v, maxNumOfApiToStore = 0 }) => {
|
|
|
110
117
|
{variables?.BUILD_DATE_TIME && (
|
|
111
118
|
<Label>{variables.BUILD_DATE_TIME}</Label>
|
|
112
119
|
)}
|
|
120
|
+
{labels.map((l) => (
|
|
121
|
+
<Label key={l}>{l}</Label>
|
|
122
|
+
))}
|
|
113
123
|
</TouchableOpacity>
|
|
114
124
|
) : (
|
|
115
125
|
<SafeAreaView style={{ flex: 1 }}>
|
|
@@ -173,7 +183,7 @@ const styles = StyleSheet.create({
|
|
|
173
183
|
gap: 3,
|
|
174
184
|
flexDirection: "row",
|
|
175
185
|
top: -12,
|
|
176
|
-
right: -
|
|
186
|
+
right: -3,
|
|
177
187
|
position: "absolute",
|
|
178
188
|
zIndex: 999,
|
|
179
189
|
},
|
package/package.json
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-in-app-debugger",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.10",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "index.jsx",
|
|
6
6
|
"scripts": {
|
|
7
7
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
8
8
|
"deploy": "npm publish --access=public"
|
|
9
9
|
},
|
|
10
|
-
"devDependencies": {},
|
|
11
10
|
"keywords": [
|
|
12
11
|
"debugger"
|
|
13
12
|
],
|