react-native-in-app-debugger 1.0.8 → 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 +21 -8
- 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
|
@@ -31,6 +31,13 @@ const dimension = Dimensions.get("window");
|
|
|
31
31
|
|
|
32
32
|
const v = DeviceInfo?.getReadableVersion() || "";
|
|
33
33
|
|
|
34
|
+
let modelOs;
|
|
35
|
+
if (DeviceInfo) {
|
|
36
|
+
let model = DeviceInfo.getDeviceId();
|
|
37
|
+
if (model === "unknown") model = DeviceInfo.getModel();
|
|
38
|
+
modelOs = model + " - " + DeviceInfo.getSystemVersion();
|
|
39
|
+
}
|
|
40
|
+
|
|
34
41
|
const Label = (props) => (
|
|
35
42
|
<Text
|
|
36
43
|
{...props}
|
|
@@ -40,7 +47,13 @@ const Label = (props) => (
|
|
|
40
47
|
/>
|
|
41
48
|
);
|
|
42
49
|
|
|
43
|
-
export default ({
|
|
50
|
+
export default ({
|
|
51
|
+
variables,
|
|
52
|
+
env,
|
|
53
|
+
version = v,
|
|
54
|
+
maxNumOfApiToStore = 0,
|
|
55
|
+
labels = [],
|
|
56
|
+
}) => {
|
|
44
57
|
const { apis, clear } = useApiInterceptor(maxNumOfApiToStore);
|
|
45
58
|
|
|
46
59
|
const [tab, setTab] = useState("api");
|
|
@@ -54,6 +67,7 @@ export default ({ variables, env, version = v, maxNumOfApiToStore = 0 }) => {
|
|
|
54
67
|
if (hasEnvOrVersion) badgeHeight += 10;
|
|
55
68
|
if (DeviceInfo) badgeHeight += 10;
|
|
56
69
|
if (badgeHeight === 10) badgeHeight += 10;
|
|
70
|
+
labels.forEach(() => (badgeHeight += 10));
|
|
57
71
|
|
|
58
72
|
const {
|
|
59
73
|
translateX,
|
|
@@ -97,16 +111,15 @@ export default ({ variables, env, version = v, maxNumOfApiToStore = 0 }) => {
|
|
|
97
111
|
{(!!env || !!version) && (
|
|
98
112
|
<Label>{(env || "") + (env ? " " : "") + version}</Label>
|
|
99
113
|
)}
|
|
100
|
-
{!!
|
|
101
|
-
|
|
102
|
-
{DeviceInfo.getDeviceId() + " " + DeviceInfo.getSystemVersion()}
|
|
103
|
-
</Label>
|
|
104
|
-
)}
|
|
105
|
-
<Label>{dimension.width + "x" + dimension.height}</Label>
|
|
114
|
+
{!!modelOs && <Label>{modelOs}</Label>}
|
|
115
|
+
<Label>{dimension.width + " x " + dimension.height}</Label>
|
|
106
116
|
{variables?.GIT_BRANCH && <Label>{variables.GIT_BRANCH}</Label>}
|
|
107
117
|
{variables?.BUILD_DATE_TIME && (
|
|
108
118
|
<Label>{variables.BUILD_DATE_TIME}</Label>
|
|
109
119
|
)}
|
|
120
|
+
{labels.map((l) => (
|
|
121
|
+
<Label key={l}>{l}</Label>
|
|
122
|
+
))}
|
|
110
123
|
</TouchableOpacity>
|
|
111
124
|
) : (
|
|
112
125
|
<SafeAreaView style={{ flex: 1 }}>
|
|
@@ -170,7 +183,7 @@ const styles = StyleSheet.create({
|
|
|
170
183
|
gap: 3,
|
|
171
184
|
flexDirection: "row",
|
|
172
185
|
top: -12,
|
|
173
|
-
right: -
|
|
186
|
+
right: -3,
|
|
174
187
|
position: "absolute",
|
|
175
188
|
zIndex: 999,
|
|
176
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
|
],
|