How to Debug React Native Apps in Development and Production

Production: Install Instabug

Thanks to Instabug for sponsoring this class! Instabug allows you to gather feedback in-app, capture bug reports, detect app crashes, and more! I've been really happy with the performance and insights of their service.

Terminal

yarn add instabug-reactnative
react-native link instabug-reactnative

App.js

import React from 'react';
import { Button, View, Text, StyleSheet } from 'react-native';
import Instabug from 'instabug-reactnative';

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
  },
  text: {
    fontSize: 30,
    fontWeight: 'bold',
  },
});

class App extends React.Component {
  state = { number: null };

  constructor(props) {
    super(props);

    Instabug.startWithToken('<YOUR_APP_TOKEN>', [
      Instabug.invocationEvent.shake,
    ]);
  }

  componentDidMount() {
    this.getNumber();
  }

  getNumber = () => {
    fetch('https://debugging-class-server.glitch.me/number')
      .then(res => res.json())
      .then(res => {
        this.setState({
          number: res.number,
        });
      })
      .catch(() => {
        alert('an error occurred!');
      });
  };

  incrementNumber = () => {
    this.setState(state => {
      return {
        number: state.number + 1,
      };
    });
  };

  decrementNumber = () => {
    this.setState(state => {
      return {
        number: state.number - 1,
      };
    });
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>{__DEV__.toString()}</Text>
        <Text style={styles.text}>{this.state.number}</Text>
        <Button title="Increment Number" onPress={this.incrementNumber} />
        <Button title="Decrement Number" onPress={this.decrementNumber} />
        <Button title="Get New Number" onPress={this.getNumber} />
      </View>
    );
  }
}

export default App;

android/app/src/main/java/com/debuggingcourse/MainApplication.java

package com.debuggingcourse;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.instabug.reactlibrary.RNInstabugReactnativePackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new RNInstabugReactnativePackage.Builder("<YOUR_APP_TOKEN>",MainApplication.this)
            .setInvocationEvent("shake")
            .setPrimaryColor("#1D82DC")
            .setFloatingEdge("left")
            .setFloatingButtonOffsetFromTop(250)
            .build()
      );
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

Want to track your progress? Create an account with React Native School!

Continue

Join the email list to be notified of all new lessons and classes!