App on emulator crashes if Debugging JS remotely is turned off for a certain page

Question

This is very surprising and I don't know why this is happening. But I might have an idea on the component causing this. I am using the react-native-router-flux library for navigation. In the following code, I use the drawerIcon prop defined here to change the default hamburger icon:

<Scene key="eng"
          drawer
          drawerIcon={<MenuButton />}
          drawerWidth={250}
          hideNavBar
          contentComponent={MenuContent}
        >
          <Scene key="home" component={Home} hideNavBar={false} title="Home" initial />
          ...
          <Scene key="weekOffer" component={WeekOffer} hideNavBar={false} title="Deal of the Week!" />

When I enable Debug JS remotely, pressing on the hamburger drawer opens the drawer, then when I press on the scene with the key weekOffer, it works just fine! However when I turn off remote debugging, the same sequence of events (pressing on the scene with key weekOffer) crashes my app!!

This does not happen when any other scene...

My Menu Button Component looks like this:

class MenuButton extends Component {
  render() {
    return (
      <View style={{ justifyContent: 'center', alignItems: 'center', height: 35, width: 40, }}>
        <View style={styles.iconContainerStyle}>
          <Icon name='menu' size={23} style={styles.iconStyle} />
        </View>
      </View>
    );
  }
}

And finally my weekOffer component looks like this:

class weekOffer extends Component {
  constructor(props) {
    super(props);
    console.log(props);
    this.id = null;
    this.ref = firebase.firestore().collection('WeeklyOffer').doc('offer');
    this.state = {
      paused: false,
      phone: null,
      loading: true
    };
  }
  componentWillMount() {
    this.ref.get().then(doc => {
      const docObject = doc.data();
      const docObjectId = Object.assign({}, docObject, { id: doc.id });
      console.log(docObjectId);
      this.setState(
        docObjectId,
        );
      console.log(this.state);
    })
    .catch(err => {
        console.log('Error getting documents', err);
    });
  }


  render() {
  ...
    return (
  <View style={{ flex: 1 }}>
    <TouchableOpacity
      style={styles.infoStyle}
      onPress={() => {
        if (this.props.language === 'arab') { Actions.comDetailsAr(this.state); }
        else { Actions.comDetails(this.state); }
        }
      }
    >
      <Text />
      <Text style={styles.textStyle}> {lang[this.props.language].about} </Text>
      <Icon name='info-with-circle' size={40} style={{ color: '#ffffff' }} />
    </TouchableOpacity>

    <TouchableOpacity
      style={styles.imageContainerStyle}
      onPress={() => this.setState({ paused: !this.state.paused })}
    >
      <Video
        source={{ uri: this.state.offer }}
        rate={1.0}                   // 0 is paused, 1 is normal.
        volume={1.0}                 // 0 is muted, 1 is normal.
        muted={false}                // Mutes the audio entirely.
        paused={this.state.paused}               // Pauses playback entirely.
        resizeMode="contain"           // Fill the whole screen at aspect ratio.
        repeat                       // Repeat forever.
        onLoadStart={this.loadStart} // Callback when video starts to load
        onLoad={this.setDuration}    // Callback when video loads
        onError={this.videoError}    // Callback when video cannot be loaded
        style={styles.backgroundVideo}
      />
    </TouchableOpacity>

    <FooterSharing
      phone={this.state.phone}
      offerLink={this.state.offer}
      id={this.state.id}
    />
  </View>
);
  }
}



export default weekOffer;

Does anyone have any idea why an app on the emulator would crash if Debug js remotely is turned off??