How to Debug React Native Apps in Development and Production

How to Run App in Production Mode

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.

Note: You'll need to sign your Android app in order to run it in release mode. Documentation on how to do that can be found here.

App.js

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

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 };

  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;

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!