react native fetch function not working after build and run on real android 11 devices and above

[ahsanu123]

as the title says, the app(fetching data from server) is running well on real android device(android 11 below), when i running app on real android 11, 12 the app is not working. i dont know why, all build, code, nothing get error.

here the build result on command promt

Configuration on demand is an incubating feature.

Task :app:bundleReleaseJsAndAssets
warning: the transform cache was reset.
Welcome to Metro!
Fast - Scalable - Integrated

info Writing bundle output to:, D:\Programming\MobileApp\semerbak\Semerbak\android\app\build\generated\assets\react\release\index.android.bundle
info Writing sourcemap output to:, D:\Programming\MobileApp\semerbak\Semerbak\android\app\build\generated\sourcemaps\react\release\index.android.bundle.map
info Done writing sourcemap output
info Done writing bundle output
info Copying 18 asset files
info Done copying assets

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/6.7/userguide/command_line_interface.html#sec:command_line_warnings

BUILD SUCCESSFUL in 12m 51s
413 actionable tasks: 6 executed, 407 up-to-date

i also change my buid.gradle on root/android/build.gradle, android 11 api level (api 30)

ext {

buildToolsVersion = "30.0.3"
    minSdkVersion = 21
    compileSdkVersion = 30
    targetSdkVersion = 30
	
	
    ndkVersion = "20.1.5948944"
}

i also use latest stable version react native on this time(0.64.2), here the 'react-native info' result

info Fetching system and libraries information...
System:
OS: Windows 10 10.0.19041
CPU: (4) x64 Intel(R) Core(TM) i3-5005U CPU @ 2.00GHz
Memory: 1.02 GB / 3.92 GB
Binaries:
Node: 16.4.0 - D:\NodeJs\node.EXE
Yarn: Not Found
npm: 7.18.1 - D:\NodeJs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK:
API Levels: 28, 29, 30
Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.3
System Images: android-23 | Google APIs Intel x86 Atom, android-24 | ARM EABI v7a, android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
Android NDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: Not Found
Visual Studio: 15.3.26730.8 (Visual Studio Enterprise 2017)
Languages:
Java: 1.8.0_282
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.1 => 17.0.1
react-native: 0.64.2 => 0.64.2
react-native-windows: Not Found
npmGlobalPackages:
react-native: Not Found

Steps To Reproduce

1. make project with fetch function
2. on root folder cd android and then gradlew assembleRelease
3. then install app on real android 11 device

Expected Results

here is the expected result on real android device (below android 11)

and here result on android 11

i also tried axios, but as you can see in screenshot android 11, axios not return anything

here code

App = () =>{
const [axiosResponse, setAxiosResponse] = React.useState('');
const [fetchResponse, setFetchResponse] = React.useState('');
const [jsonFetchResponse, setJsonFetchResponse] = React.useState('');

const axiosfetch = async () => {

var body = new FormData();
body.append('command', 'login');
body.append('username', "siah");
body.append('password', "123");

const data = await axios({
    method: 'post',
    url: 'http://semerbak-swag.com/api/',
    headers: { "Content-Type": "multipart/form-data" },
    data: body,
})
.then(response => {
  setAxiosResponse(JSON.stringify(response, null, 4));
  console.log(response.data.logindata);
  return response.data.logindata;
},
error => {
  setAxiosResponse(error);
  console.log(error);
});  

};

const fetching = () => {

var form = new FormData();
form.append('command', 'login');
form.append('username', "siah");
form.append('password', "123");

fetch('http://semerbak-swag.com/api/', {
  method:'POST',
  headers: { 
    "Content-Type": "multipart/form-data" 
  },
  body: form,
})
.then(response => response.json())
.then(json => {
  setJsonFetchResponse(JSON.stringify(json, null, 4));
})
.catch(error => setFetchResponse(JSON.stringify(error)));

fetch('http://semerbak-swag.com/api/', {
  method:'POST',
  headers: { 
    "Content-Type": "multipart/form-data" 
  },
  body: form,
})
.then(response => setFetchResponse(JSON.stringify(response, null, 4)))
.catch(error => setFetchResponse(JSON.stringify(error)));

};

return(
<View style={{flex:1, backgroundColor:'black'}} >


<TouchableOpacity
onPress={()=>axiosfetch()}
style={{
backgroundColor:'white',
paddingHorizontal: 15,
paddingVertical:2,
}}
>
AXIOS


<Text style={{color:'white', fontSize:16, marginBottom:25}} >AXIOS: <Text style={{color:GLOBAL.COLOR.LIGHTBLUE, fontSize:16}} >{axiosResponse}

  <View style={{flex:1}} >
    <View>
    <TouchableOpacity 
      onPress={()=>fetching()}
      style={{
        backgroundColor:'white',
        paddingHorizontal: 15,
        paddingVertical:2,
      }}
      >
        <Text style={{fontSize:18}} >FETCH</Text>
      </TouchableOpacity>
      <ScrollView >
        <Text style={{color:'white', fontSize:16, marginBottom:25}} >FETCH: <Text style={{color:GLOBAL.COLOR.LIGHTBLUE, fontSize:16}} >{fetchResponse}</Text></Text>
        <Text style={{color:'white', fontSize:16, marginBottom:25}} >JSON DATA: <Text style={{color:GLOBAL.COLOR.LIGHTBLUE, fontSize:16}} >{jsonFetchResponse}</Text></Text>
      </ScrollView>
    </View>

  </View>
</View>

);
}

//export default
export default App;

[chrisglein]

Given that this is not working based on Android version, and given that it's a more fundamental API (fetch) rather than a React Native one... have you tried that same fetch in a non-RN app? Is there something that changed on the Android side that's getting in the way? If you debug the RN example, does the fetch response come back? As in is the problem that it doesn't render or that it doesn't respond?

[ahsanu123]

after searching for solution in internet, i found this
#24627 (comment)

and after add this code in AndroidManifest.xml inside root/android/app/main/

<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
android:allowBackup="false"
android:theme="@style/AppTheme"
++ android:usesCleartextTraffic="true" //==> Add this

its work well in real devices android 11 and android 12
thanks :)