{"id":26708192,"url":"https://github.com/odemolliens/react-native-netwatch","last_synced_at":"2025-04-13T16:22:30.732Z","repository":{"id":38243181,"uuid":"330620960","full_name":"odemolliens/react-native-netwatch","owner":"odemolliens","description":"Network traffic logger for React Native.","archived":false,"fork":false,"pushed_at":"2024-10-27T06:13:53.000Z","size":47893,"stargazers_count":19,"open_issues_count":29,"forks_count":6,"subscribers_count":7,"default_branch":"develop","last_synced_at":"2024-11-07T23:12:26.245Z","etag":null,"topics":["android","charles-proxy","debug","debugger","ios","network","network-debugger","network-monitoring","react-native","redux","redux-action","tracking"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/odemolliens.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-01-18T09:48:23.000Z","updated_at":"2024-10-14T22:42:56.000Z","dependencies_parsed_at":"2025-03-13T09:33:06.631Z","dependency_job_id":null,"html_url":"https://github.com/odemolliens/react-native-netwatch","commit_stats":{"total_commits":223,"total_committers":11,"mean_commits":"20.272727272727273","dds":0.7399103139013453,"last_synced_commit":"43cbf3554308baf12fe9d5c301b6f27fea031997"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/odemolliens%2Freact-native-netwatch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/odemolliens%2Freact-native-netwatch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/odemolliens%2Freact-native-netwatch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/odemolliens%2Freact-native-netwatch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/odemolliens","download_url":"https://codeload.github.com/odemolliens/react-native-netwatch/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248741851,"owners_count":21154389,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","charles-proxy","debug","debugger","ios","network","network-debugger","network-monitoring","react-native","redux","redux-action","tracking"],"created_at":"2025-03-27T07:17:06.047Z","updated_at":"2025-04-13T16:22:30.705Z","avatar_url":"https://github.com/odemolliens.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/lib_asset.png\" width=\"60%\"\u003e\n\u003c/p\u003e\n\n[![Build Status](https://travis-ci.org/odemolliens/react-native-netwatch.svg?branch=develop)](https://travis-ci.org/odemolliens/react-native-netwatch)\n![npm](https://img.shields.io/npm/v/react-native-netwatch.svg)\n![GitHub](https://img.shields.io/github/license/odemolliens/react-native-netwatch.svg)\n\n# React Native Netwatch\n\nNetwork traffic logger for React Native. \u003cbr/\u003e\nIncludes an interface to see http traffic from RN and native side\n\n## Features\n\n- Log network requests coming from React Native side\n- Log network requests coming from the native side (iOS and Android) (optional)\n- Log Redux actions (optional)\n- Shake the device to display the tool\n- View details of each request/action\n- Generate and share the list of requests/actions in Excel (XLSX) file\n- Log connectivity change\n- Show stats between success/warning/failure requests\n\n## Example app\n\n\u003cp float=\"left\" align=\"center\"\u003e\n  \u003cimg src=\"assets/ios_netwatch.gif\" width=\"300\" /\u003e\n\u003c/p\u003e\n\n---\n\n## Getting started\n\n### Dependencies\n\nTo avoid to have too much dependencies and conflict versions, before install, you must have these dependancies in your react-native project.\n\n- react-native-paper\n- react-native-fs\n- react-native-share\n- @react-native-community/netinfo\n- react-native-launch-arguments\n\n#### Fonts\n\nNetwatch has react-native-vector-icons as dependency. Be sure that you have these fonts installed in your project:\n\n- Fontisto\n- Feather\n- MaterialCommunityIcons\n\nPlease refer to this page for more details: \u003ca href='https://github.com/oblador/react-native-vector-icons#ios'\u003eInstall fonts react-native-vector-icons\u003c/a\u003e\n\n### Installation\n\n```bash\nyarn add react-native-netwatch\n```\n\nor\n\n```bash\nnpm install react-native-netwatch\n```\n\n### iOS\n\nInside your project, go to ios directory and execute pod install\n\n```bash\ncd ios \u0026\u0026 pod install \u0026\u0026 ..\n```\n\nOR simply\n\n```bash\nnpx pod-install\n```\n\n---\n\n## Usage\n\n### Using Netwatch component\n\nIf you want add Network traffic in your project, just import 'react-native-netwatch'\u003c/br\u003e\nand add the Netwatch component in the most higher position in the tree of components.\u003c/br\u003e\nFor example, just after your store provider or your root component\n\nNow, when you will launch your application and shake the device, it will display automatically Netwatch.\n\n### How to activate Netwatch\n\nYou have two possibilities to activate Netwatch in your project. With a button from you app or by shaking your phone. If you want activate\nNetwatch with a button from your app, you **must** disable shake and instead pass the props onPressClose and visible.\n\n#### Active Netwatch by shaking your phone\n\n```javascript\n\nimport { Netwatch } from 'react-native-netwatch';\n\nconst App = () =\u003e {\n  const [netwatchVisible, setNetwatchVisible] = useState(false);\n\n  return (\n    \u003cProvider store={store}\u003e\n      \u003cNetwatch\n        enabled={true}\n        interceptIOS={true}\n      /\u003e\n      \u003cAppNavigator /\u003e\n    \u003c/Provider\u003e\n  );\n};\n\nexport default App;\n```\n\n#### Active Netwatch with a button\n\n```javascript\n\nimport { Netwatch } from 'react-native-netwatch';\n\nconst App = () =\u003e {\n  const [netwatchVisible, setNetwatchVisible] = useState(false);\n\n  return (\n    \u003cProvider store={store}\u003e\n      \u003cNetwatch\n        enabled={true}\n        interceptIOS={true}\n        visible={netwatchVisible}\n        onPressClose={() =\u003e setNetwatchVisible(false)}\n        disableShake\n      /\u003e\n        \u003cTouchableHighlight\n          style={styles.openButton}\n          onPress={() =\u003e setNetwatchVisible(true)}\n          testID=\"buttonDisplayNetwatch\"\n        \u003e\n          \u003cText style={styles.textStyle}\u003eDisplay Netwatch\u003c/Text\u003e\n        \u003c/TouchableHighlight\u003e\n      \u003cAppNavigator /\u003e\n    \u003c/Provider\u003e\n  );\n};\n\nexport default App;\n```\n\n### Using Netwatch as Redux middleware (optional)\n\nYou can add 'react-native-netwatch' as a middleware to catch Redux actions\u003c/br\u003e\nTo do that, just import reduxLogger from 'react-native-netwatch'\u003c/br\u003e\n\n```javascript\nimport { applyMiddleware, combineReducers, compose, createStore } from 'redux';\nimport appActionsReducer from './reducers/appActionsReducer';\nimport { reduxLogger } from 'react-native-netwatch';\n\nconst createReducer = () =\u003e (state, action) =\u003e\n  combineReducers({\n    app: appActionsReducer,\n  })(state, action);\n\nconst store = createStore(\n  createReducer(),\n  compose(applyMiddleware(reduxLogger)),\n);\n\nexport default store;\n\n```\n\nExample in our demo application [here](https://github.com/odemolliens/react-native-netwatch/blob/5b6d19f40d7dc98cedb665172503fed93a8b0ae8/example/src/redux/store.ts#L23)\n\n### Using Netwatch to intercept and display native requests\n\n#### Android (optional)\n\nTo be able to intercept requests from Android side and display them into Netwatch\u003c/br\u003e\nYou have to add to your OkHttp client Netwatch interceptor\n\n```java\nokHttpClient.addInterceptor(new NetwatchInterceptor(context));\n```\n\nExample in our demo application [here](https://github.com/odemolliens/react-native-netwatch/blob/5b6d19f40d7dc98cedb665172503fed93a8b0ae8/example/android/app/src/main/java/com/example/ExampleModule.java#L24)\n\n#### iOS (optional)\n\nNothing to do on native side for the iOS.\u003c/br\u003e\nYou have just to set `interceptIOS` to true and it will intercept requests which use `URLProtocol` on native side and display them into Netwatch\u003c/br\u003e\n\n- To intercept request sent with Alamofire\n\n```objective-c\n'Bridging-Header.h'\n\n#import \u003cNetwatchInterceptor.h\u003e\n```\n\n```swift\nlet configuration = URLSessionConfiguration.default\nconfiguration.protocolClasses?.insert(NetwatchInterceptor.self, at: 0)\nlet sessionManager = Alamofire.SessionManager(configuration: configuration)\nsessionManager.request(...)\n```\n\n### Show stats\n\nYou can have statistics and see how many requests are succeeded or failed. By default, the indicator is closed. If you want the percentage, just press the indactor to opened it. Press again to close.\n\n\u003cp float=\"left\" align=\"center\"\u003e\n  \u003cimg src=\"assets/stats.png\" width=\"300\" /\u003e\n  \u003cimg src=\"assets/stats_opened.png\" width=\"300\" /\u003e\n\u003c/p\u003e\n\nIf you have applied a filter, stats are updated for current filtered view. If you have filtered to see Redux Action, the indicator is not interactive and just show a purple indicator.\n\n\u003cp float=\"left\" align=\"center\"\u003e\n  \u003cimg src=\"assets/stats_redux.png\" width=\"300\" /\u003e\n\n### Add extra informations into Redux Action items (optional)\n\nIf you want, you can add extra datas in the redux items to have more visual information. Instead of just see 'redux action' as label, your own text will be displayed.\nTo do that, you must passed to Netwatch a props called reduxConfig. This is an object where each key correspond to a redux action in your project.\nAll values **must** be string.\n\n```javascript\n\nimport { Netwatch } from 'react-native-netwatch';\n\nconst reduxConfigExample = {\n  DOWNLOAD_APP_TRANSLATIONS_SUCCESS: \"👨 - Extra info\",\n}\n\nconst App = () =\u003e {\n  const [netwatchVisible, setNetwatchVisible] = useState(false);\n\n  return (\n    \u003cProvider store={store}\u003e\n      \u003cNetwatch\n        enabled={true}\n        interceptIOS={true}\n        reduxConfig={reduxConfigExample}\n      /\u003e\n      \u003cAppNavigator /\u003e\n    \u003c/Provider\u003e\n  );\n};\n\nexport default App;\n```\n\nYou will see something like that:\n\n\u003cp float=\"left\" align=\"center\"\u003e\n  \u003cimg src=\"assets/redux_extras_netwatch.png\" width=\"300\" /\u003e\n\u003c/p\u003e\n\n### ⚠️ Using Netwatch with Reactotron\n\nThere is a known incompatibility between Netwatch and Reactotron. If you want to redirect the requests into Reactotron, you should set the props `useReactotron` to **true** (have to reload the app if you edit its value). To go back to netwatch revert the props to false and reload again.\n\nAt this moment, it is not possible to display requests into Netwatch and Reactotron at the same time. You **must** choose between these tools.\n\n## Props\n\n|    Params     |   Type   |  Default  | Mandatory ? | Description                                                  |\n| :-----------: | :------: | :-------: | :---------: | :----------------------------------------------------------- |\n|    enabled    | Boolean  |   true    |   **yes**   | Enabled/Disabled logger to intercept request and actions     |\n|    visible    | Boolean  |   false   |     no      | Show the main screen to display intercepted requests/actions |\n| onPressClose  | Function | undefined |     no      | Called when Close button is pressed in the Main screen       |\n| interceptIOS  | Boolean  |   false   |     no      | Intercept native iOS requests                                |\n| disableShake  | Boolean  |   false   |     no      | Set to true to disable shake feature to display Netwatch     |\n|  maxRequests  |  Number  |    100    |     no      | Maximum requests displayed                                   |\n|   showStats   | Boolean  |   true    |     no      | Show stats indicator                                         |\n|  reduxConfig  |  Object  |    {}     |     no      | Extra infos for Redux Action. Accept only string as vaulues  |\n| useReactotron | Boolean  |   false   |     no      | Redirect requests to Reactotron instead of Netwatch          |\n|     theme     |  String  |  'dark'   |     no      | Possible values are 'dark' or 'light'                        |\n\n\n## Mocking Responses\n\nNetwatch also provides a way to mock responses which is useful during testing and development.\n\n## Using Netwatch UI for Mocking\n\nNetwatch UI provides a user-friendly way to create, export, and import mocks directly from the mobile application.\n\n### Creating Mocks\n\nTo create a mock:\n\n1. Open the Netwatch UI by shaking the device or triggering the configured gesture.\n2. Tap on any HTTP request in the list.\n3. Tap on the \"Mock Request\" button.\n4. Fill in the HTTP method, URL, status code, and response body fields. (leave blank to keep the original value)\n5. Tap \"Save\".\n\n\u003cp float=\"left\" align=\"center\"\u003e\n  \u003cimg src=\"assets/creating.gif\" width=\"300\" /\u003e\n\u003c/p\u003e\n\n### Exporting Mocks\n\nTo export a mock:\n\n1. Open the Netwatch UI.\n2. Navigate to the \"Mock List\" screen by tapping top right hamburger menu.\n3. Tap export button in the navigation bar.\n\nThe mock will be copied to the clipboard in a JSON format.\n\n\u003cp float=\"left\" align=\"center\"\u003e\n  \u003cimg src=\"assets/exporting.gif\" width=\"300\" /\u003e\n\u003c/p\u003e\n\n### Importing Mocks\n\nTo import a mock:\n\n1. Copy the mock JSON to your clipboard.\n2. Open the Netwatch UI.\n3. Navigate to the \"Mocked List\" screen by tapping top right hamburger menu.\n4. Tap on the \"Import\" button.\n\nThe mock from the clipboard will be parsed and added to the list of mocked requests.\n\n\u003cp float=\"left\" align=\"center\"\u003e\n  \u003cimg src=\"assets/importing.gif\" width=\"300\" /\u003e\n\u003c/p\u003e\n\n## Enabling and Disabling Mocks\n\nYou can easily control which mock responses are active at any time using the Netwatch UI.\n\n### Enabling a Mock\n\nTo enable a mock:\n\n1. Open the Netwatch UI.\n2. Navigate to the \"Mock List\" screen by tapping top right hamburger menu.\n3. Find the mock response you want to enable.\n4. Tap on the mock response. When the switch is on the right and highlighted, the mock is enabled.\n\n### Disabling a Mock\n\nTo disable a mock:\n\n1. Open the Netwatch UI.\n2. Navigate to the \"Mock List\" screen by tapping top right hamburger menu.\n3. Find the mock response you want to disable.\n4. Tap on the mock response. When the switch is on the left and grayed out, the mock is disabled.\n\n\n\u003cp float=\"left\" align=\"center\"\u003e\n  \u003cimg src=\"assets/enabling-disabling.gif\" width=\"300\" /\u003e\n\u003c/p\u003e\n\n## Using presets for fast Mocking\n\nNetwatch provides three ways to mock responses with presets using props: \n\n- via clipboard (`loadMockPresetFromClipboard`)\n- via input parameters (`loadMockPresetFromInputParameters`)\n- via the `mockPresets` prop.\n\n### `mockPresets`\n\n`mockPresets` is an array of `MockResponse` objects defining the mock HTTP request/response behavior.\n\n```jsx\nconst mockResponses = [\n  {\n    method: 'GET',\n    url: '/api/v1/users',\n    status: 200,\n    body: { message: 'Success' },\n  },\n];\n\n\u003cNetwatch mockPresets={mockResponses} enabled={true} /\u003e;\n```\n\n### `loadMockPresetFromClipboard`\n\nCopy your mock response data to your clipboard in the correct format and set `loadMockPresetFromClipboard` to `true`.\n\n### `loadMockPresetFromInputParameters`\n\nSet `loadMockPresetFromInputParameters` to `true` and pass the mock data as the `mockPresets` prop.\n\n*Note: If both `loadMockPresetFromClipboard` and `loadMockPresetFromInputParameters` are `true`, the data from the clipboard will be used.*\n\n## Advanced Mocking Examples\n\n### Simulating Request Timeouts\n\nSimulate request timeouts with the `timeout` field in `MockResponse`.\n\n```jsx\nconst mockResponses = [\n  {\n    method: 'GET',\n    url: '/api/v1/users',\n    status: 200,\n    body: { message: 'Success' },\n    timeout: 5, // Simulates a delay of 5 seconds\n  },\n];\n\n\u003cNetwatch mockPresets={mockResponses} enabled={true} /\u003e;\n```\n\n### HTTP Headers Mocking\n\nMock HTTP headers with the `headers` field in `MockResponse`.\n\n```jsx\nconst mockResponses = [\n  {\n    method: 'GET',\n    url: '/api/v1/users',\n    status: 200,\n    body: { message: 'Success' },\n    headers: {\n      'Content-Type': 'application/json',\n      'X-Custom-Header': 'CustomHeaderValue',\n    },\n  },\n];\n\n\u003cNetwatch mockPresets={mockResponses} enabled={true} /\u003e;\n```\n\n### Simulating HTTP Error Statuses\n\nSimulate HTTP error statuses such as 401, 500, and 400.\n\n```jsx\nconst mockResponses = [\n  {\n    method: 'GET',\n    url: '/api/v1/secure',\n    status: 401,\n    body: { message: 'Unauthorized' },\n  },\n  {\n    method: 'POST',\n    url: '/api/v1/users',\n    status: 500,\n    body: { message: 'Internal Server Error' },\n  },\n  {\n    method: 'POST',\n    url: '/api/v1/users',\n    status: 400,\n    body: { message: 'Bad Request' },\n  },\n];\n\n\u003cNetwatch mockPresets={mockResponses} enabled={true} /\u003e;\n```\n\n## Launching App with Netwatch Mocks using Appium\n\nYou can integrate Netwatch with Appium to facilitate your automation testing.\n\n### iOS\n\nUse Appium's `mobile: launchApp` method to start your app with specified parameters:\n\n```javascript\nconst mockResponses = [\n  {\n    method: 'GET',\n    url: '/api/v1/users',\n    status: 200,\n    body: { message: 'Success' }\n  }\n];\n\ndriver.execute('mobile: launchApp', {\n  sessionId: driver.sessionId,\n  bundleId: driver.capabilities.bundleId,\n  arguments: ['-netwatchMocks', JSON.stringify(mockResponses)],\n});\n```\n\nThen in your React Native application, set `loadMockPresetFromInputParameters` to `true`:\n\n```jsx\n\u003cNetwatch enabled={true} loadMockPresetFromInputParameters={true} /\u003e\n```\n\n### Android\n\nFor Android, use Appium's `startActivity` method:\n\n```javascript\nconst mockResponses = [\n  {\n    method: 'GET',\n    url: '/api/v1/users',\n    status: 200,\n    body: { message: 'Success' }\n  }\n];\n\ndriver.startActivity(\n  driver.capabilities.appPackage,\n  driver.capabilities.appActivity,\n  undefined,\n  undefined,\n  undefined,\n  undefined,\n  undefined,\n  `--es 'netwatchMocks' '${JSON.stringify(mockResponses)}'`\n);\n```\n\nThen in your React Native application, set `loadMockPresetFromInputParameters` to `true`:\n\n```jsx\n\u003cNetwatch enabled={true} loadMockPresetFromInputParameters={true} /\u003e\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fodemolliens%2Freact-native-netwatch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fodemolliens%2Freact-native-netwatch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fodemolliens%2Freact-native-netwatch/lists"}