This screen works fine when testing using Expo, but crashes the app when it is bundled to apk
I'm not sure whats causing the crash here, but it works on Expo.This has been tested on both emulators and real android devices, which have the same behavior.
This is the error log from the device when visiting the screen:
04-22 10:14:11.713 7008 7008 E unknown:ReactNative: Tried to remove non-existent frame callback04-22 10:14:11.778 1731 7439 E ResolverController: No valid NAT64 prefix (101, <unspecified>/0)04-22 10:14:11.786 7008 7065 E GraphResponse: {HttpStatus: 400, errorCode: 100, subErrorCode: 33, errorType: GraphMethodException, errorMessage: Unsupported get request. Please read the Graph API documentation at https://developers.facebook.com/docs/graph-api}04-22 10:14:11.963 7008 7008 E c : java.lang.RuntimeException: A TaskDescription's primary color should be opaque04-22 10:14:11.963 7008 7008 E CrashlyticsCore: Crashlytics must be initialized by calling Fabric.with(Context) prior to logging exceptions.04-22 10:14:12.023 1731 7449 E ResolverController: No valid NAT64 prefix (101, <unspecified>/0
And this is the respective screen:
import React, { Component } from 'react'import { View } from 'react-native'import MapView from 'react-native-maps'import { Appbar } from 'react-native-paper'import Database from './components/Database'const db = new Database()import styles from './components/allStyles'export default class MapScreen extends Component { state = { emergencies: [], }; componentDidMount() { db.mapOn(emergencies => { this.setState(previousState => ({ emergencies: previousState.emergencies.concat(emergencies), })) }) } render() { k = 0 return (<View style={styles.absoluteFillView}><MapView style={styles.absoluteFillView} mapType={"satellite"} showsUserLocation={true} region={{ latitude: 39.625083, longitude: -79.956796, latitudeDelta: 0.0025, longitudeDelta: 0.0025, }}> {this.state.emergencies.map(emergency => { if(k + 1 == this.state.emergencies.length){ color = 'red'; } else { color = 'orange'; } return (<MapView.Marker key = {k++} title={emergency.title} description={emergency.description} coordinate={{ latitude: emergency.latitude, longitude: emergency.longitude, }} pinColor={color} /> ); })}</MapView><Appbar.Header dark = {true} style={{backgroundColor:'#bdbdbd'}}><Appbar.Action icon = 'arrow-left' size = {24} onPress={() =>{ this.props.navigation.navigate('Home') }} /></Appbar.Header></View> ); } componentWillUnmount(){ db.mapOff() }}
Here are the event listener functions used in the componentDidMount() and componentWillUnmount():
mapOn = callback => { firebase.database().ref('alerts/emergency/').on('child_added', snapshot => { callback(this.edit(snapshot)) })}mapOff = () => { firebase.database().ref('alerts/emergency/').off()}edit = snapshot => { const { name, description } = snapshot.val() const { longitude, latitude } = snapshot.val().location const emergency = { title: name, description, longitude, latitude} return emergency}Any help into what may be causing the issue would be very helpful.