React-native-navigation: Release APK freezes to white screen in Android 9 but working fine in 7

[mmanishjha]

Issue Description

App is working fine in Debug mode but when i build signed APK and tried its showing blank screen. Its asking location and nothing happens .

I have checked many solutions not working .

React Native Environment Info:
    System:
      OS: macOS Sierra 10.12.6
      CPU: (4) x64 Intel(R) Core(TM) i5-5250U CPU @ 1.60GHz
      Memory: 105.54 MB / 4.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 12.2.0 - /usr/local/bin/node
      npm: 6.9.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.2, macOS 10.13, tvOS 11.2, watchOS 4.2
      Android SDK:
        API Levels: 28
        Build Tools: 28.0.3
        System Images: android-Q | Google Play Intel x86 Atom
    IDEs:
      Android Studio: 3.4 AI-183.6156.11.34.5522156
      Xcode: 9.2/9C40b - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3 
      react-native: 0.59.8 => 0.59.8 
    npmGlobalPackages:
      react-native-cli: 2.0.1

My App.js

import React, { Component } from "react";
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  Image,
  Alert,
  PermissionsAndroid
} from "react-native";

//library imports 
import { Container, Content, Icon, Header, Body } from 'native-base'
import { DrawerNavigator, StackNavigator, DrawerItems, SafeAreaView } from 'react-navigation'

import SettingsScreen from './SettingsScreen'
import HomeScreen from "./HomeScreen";


export default class App extends Component {

  componentDidMount() {

    const latu = "1"
    navigator.geolocation.getCurrentPosition(position => { 
      return fetch('http://********/api/Api.php?action=category&lat='+position.coords.latitude+'&lon='+position.coords.longitude)
      .then((response) => response.json())
      .then((responseJson) => {
        this.dataSource = responseJson
      const first = responseJson[0];
      var rdata=[];
      var idata=[];
      for (var i = 0; i < responseJson.length; i++) {
        rdata.push(responseJson[i].name);
        idata.push(responseJson[i].id);
      }
      this.setState({
        isLoading: false,
        ddata :rdata,
        iddata :idata
      })
      })


     },
     error => {
      return fetch('http://*******/api/Api.php?action=maincategory')
      .then((response) => response.json())
      .then((responseJson) => {
      this.dataSource = responseJson
      const first = responseJson[0];
      var rdata=[];
      var idata=[];
      for (var i = 0; i < responseJson.length; i++) {
        rdata.push(responseJson[i].name);
        idata.push(responseJson[i].id);
      }
      this.setState({
        isLoading: false,
        ddata :rdata,
        iddata :idata
      })
      })
  }

     )


  }

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      ddata:[],
      iddata:[]

    }


  }
  render() {
  if (this.state.isLoading) {
    return (
      <View style={{flex: 1, paddingTop: 150}}>
      </View>
    );
  }


var temp ="";
const DD=[];

var something = this.state.ddata
var idsomething = this.state.iddata
//Alert.alert(something);
const firstItem = idsomething[0];
//Alert.alert(firstItem);
for(var d=0;d<something.length;d++){
   let dd=d;
  let temp = something[dd]
  let idtemp = idsomething[dd]
  propName={temp}
  DD[idtemp]  = {
     screen: props => <HomeScreen {...props} />,
    navigationOptions: ({ navigation }) => ({
      title: temp || 'StaticTitle',
      drawerIcon: ({ tintColor }) => (
        <Image
          source={require('./assets/DrawerIcons/home.png')}
          style={styles.icon}
        />
      )
  })
}

}
DD[0]  = {
  screen: SettingsScreen,
    navigationOptions: ({ navigation }) => ({
      drawerLabel: () => null,
      drawerIcon: ({ tintColor }) => (
        <Image
          source={require('./assets/DrawerIcons/home.png')}
          style={styles.icon}
        />
      )
  })
}


const MyApp = DrawerNavigator(
   DD,
  {
    initialRouteName: firstItem,
    drawerPosition: 'left',
    contentComponent: CustomDrawerContentComponent,
    drawerOpenRoute: 'DrawerOpen',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle'
  });


    return (
      <MyApp />
    )
  }
}




const CustomDrawerContentComponent = (props) => (

  <Container>
    <Header style={styles.drawerHeader}>
      <Body>
        <Image
          style={styles.drawerImage}
          source={require('./assets/DrawerIcons/Logo.png')} />
      </Body>
    </Header>
    <Content>
      <DrawerItems {...props} />
    </Content>

  </Container>

);

const styles = StyleSheet.create({

  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  drawerHeader: {
    height: 200,
    backgroundColor: '#F8F44F'
  },
  drawerImage: {
    width: 250,
  },
  icon: {
    width: 24,
    height: 24,
  }


})

[MakhouT]

In your android/app/build.gradle do you have this?

project.ext.react = [
        entryFile: "index.js",
        bundleAssetName: "index.android.bundle",
        bundleInAlpha: true,
        bundleInBeta: true
]

I was having issues that android crashes instantly with a release signed APK. Adding this solved it for me.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[alexsoul95]

same issue here

[mmanishjha]

I have solved it by adding s in http . As i experienced that non secure api services doesn't work . So either add secure api url or you have add one flag in Androidmanifiest.xml .

[alexsoul95]

Dude, it helped, thank you so much! I was tearing my hair out last 3 days.

[alexsoul95]

To anyone wondering adding
<application android:usesCleartextTraffic="true"
to AndroidManifest.xml solved issue