Debug With Third-Party Packages

You.i TV supports debugging React Native using one of the following software packages:

React DevTools

React DevTools package allows you to debug and inspect React Native components. You can install it as a part of a React Native project or React Native Debugger. The following instructions are for setting React DevTools as part of a project:

  1. Run the following set of commands in the RN project folder:

    yarn add --dev react-devtools
    yarn react-devtools
    
  2. Add the following lines at the start of the root javascript file, such as App.js, of the RN project:

    require('react-devtools-core').connectToDevTools({host: 'localhost', port:8081});
    import 'react-devtools';
    

Where localhost is the IP address of the machine where react-devtools is running.

Redux DevTools

Redux DevTools is a browser extension used for debugging Redux application’s state changes. You.i TV recommends using it as part of React Native Debugger instead of on its own. See the Setting up Redux DevTools section to set up Redux DevTools.

Setting up Redux DevTools

Do the following:

  1. Run the following command in the RN project folder:

    yarn add --dev redux-devtools-extension
    
  2. Modify your store as shown here. The following is an example of a modified simple store without middleware:

    import { createStore} from 'redux';
    import { composeWithDevTools } from 'redux-devtools-extension';
    let store = createStore(counter, composeWithDevTools());
    

React Native Debugger

React Native Debugger is a standalone app to debug React Native apps. It consists of React Native DevTools, Redux DevTools, Remote Debugger, and React Inspector. To install and setup React Native Debugger as a standalone app, see the instructions here.

By default, React Inspector is installed with the installation of React Native Debugger. To access it, right-click the React Native Tools window and select Enable Network Inspect.