Develop Reference

Ionic Android app can't connect to local IP address

I am running my android app with ionic cordova run android, and doing a HTTP get to a local ip address:
this.http.get('http://192.168.2.124:8080')
.pipe(map((response: any) => {
alert(response);
return response;
}),
catchError(map((error: Response | any) => {
alert(error);
console.error('API error: ', error);
return error;
})));
However, nothing happens at all, no errors either.
Note:
replacing the host with something I deployed on the cloud works just fine;
using the phone's web browser to navigate to that endpoint also works.
I'm lost: is there a android or ionic configuration I'm missing to allow this?
Thank you

Vue Cordova Blank screen

I have a Vue2 App, when i try to use vue-cordova-cli on mine app for deploy on android's device, it doesn't works and only look a with blank screen, i look for all sites of internet for look the solution with not luck.
I display you the configuration that i have:
System Operative: Windows 10
CLI: Powershell (Administrative Privilege)
Android: 7.1.1
Commands npm
vue add cordova
npm run cordova-prepare
npm run cordova-serve-android
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
vue.config.js
module.exports = {
publicPath: '',
pluginOptions: {
cordovaPath: 'src-cordova'
}
}
More info: All my test are doing using my device connect to my pc using a usb link and i have a lot of deploy previously to that using that way.

How to add network_security_config.xml to manifest in expo app without ejecting

I'm building an app with expo.
Using Axios to handle the requests.
The API has a self-signed certificates.
Requests fail on android 7 (they work on android 9)
I read online that I need to add a network_security_config.xml to the android manifest. Link.
How can I do this in expo (probably app.json) without ejecting ?
Thank you !

I was facing a similar problem (needed to connect to a local API with self-signed certificate) and after a ridiculous amount of research and experimentation I was finally able to find a solution. You will need to create a config plugin, which requires Expo SDK version 41+. Note that you will lose the ability to use Expo Go, but you will remain in the managed workflow (i.e. no need to change native code) and you can use EAS builds to build a custom dev client, which is basically a version of Expo Go tailored to your project.
Add the certificate to your device's list of user certificates:
(This step is probably unnecessary if you include your (raw) certificate in the network config below, see this link.) Go to Settings -> Security -> Advanced -> Encryption & credentials -> Install a certificate to import the certificate
Ensure that the certificate is actually the problem:
try {
const response = await axios.post(urlPath, payload);
} catch (error) {
console.error(error.request?._response);
}
You'll know your app doesn't trust the certificate if you get a network error and error.request._response reads java.security.cert.CertPathValidatorException: Trust anchor for certification path not found.
Create the plugin:
You will now create a config plugin, which are basically JS functions which run during Expo's prebuild phase to modify native configuration such as the Android manifest before building the native project.
In your project root, create a plugins folder with the following two files:
network_security_config.xml:
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<base-config cleartextTrafficPermitted="true">
<trust-anchors>
<certificates src="system" />
<certificates src="user" />
</trust-anchors>
</base-config>
</network-security-config>
trust-local-certs.js:
const {AndroidConfig, withAndroidManifest } = require('#expo/config-plugins');
const {Paths} = require('#expo/config-plugins/build/android');
const path = require('path');
const fs = require('fs');
const fsPromises = fs.promises;
const { getMainApplicationOrThrow} = AndroidConfig.Manifest
const withTrustLocalCerts = config => {
return withAndroidManifest(config, async config => {
config.modResults = await setCustomConfigAsync(config, config.modResults);
return config;
});
}
async function setCustomConfigAsync(
config,
androidManifest
) {
const src_file_pat = path.join(__dirname, "network_security_config.xml");
const res_file_path = path.join(await Paths.getResourceFolderAsync(config.modRequest.projectRoot),
"xml", "network_security_config.xml");
const res_dir = path.resolve(res_file_path, "..");
if (!fs.existsSync(res_dir)) {
await fsPromises.mkdir(res_dir);
}
try {
await fsPromises.copyFile(src_file_pat, res_file_path);
} catch (e) {
throw e;
}
const mainApplication = getMainApplicationOrThrow(androidManifest);
mainApplication.$["android:networkSecurityConfig"] = "#xml/network_security_config";
return androidManifest;
}
module.exports = withTrustLocalCerts;
Run expo prebuild & link the plugin
In order to use the plugin, you have to a have a file called app.json in the project root. I'm not 100% sure where I got the file from, but I believe it was created automatically when I first ran expo prebuild. Note:
I recommend upgrading the Expo SDK to the most current version (currently 44), because now the prebuild command (which apparently is the same as eject) is now completely reversible (e.g. it doesn't install most of the additional dependencies it used to).
Prebuild will create the native folders, but you can safely delete these folders once you are done setting up the plugin (You really should delete them, if you want to remain in the managed workflow! When you run an EAS build, EAS will assume the bare workflow if it sees the native folders, and presumably not run your plugin again).
Run expo prebuild and follow the prompts -> This should create the app.json file.
Delete the generated native android folder (and ios, if it got created as well).
In app.json, add the following to the end of the expo key:
"plugins": [
"./plugins/trust-local-certs.js"
]
Run expo prebuild --no-install and check that android/app/src/main/AndroidManifest.xml contains a reference to your network config, and that android/app/src/main/res/xml/network_security_config.xml was correctly copied over from your plugins directory.
If all is well, your plugin is set up correctly and you should again delete the native folders (see note above).
Setup and run EAS build:
If you haven't done so already, set up your project for EAS builds by following
these instructions (install EAS CLI, run eas build:configure and configure a dev profile in eas.json). Then, run eas build --profile development --platform android. This will create a custom dev client in the cloud (running the plugin during the prebuild phase), which you can install on your device and acts as a replacement for Expo Go. To start the metro server, run expo start --dev-client. Your dev client should then be able to pick up the connection to the Metro server and if you run the axios request again, it should go through :)

Not receiving notifications react-native-push-notification on iOS

I integrated react-native-push-notification with ios and android following the documentation, also some tutorials on youtube, but I have a problem, I'm not receiving any notification, even local notification, on the iOS device, but on Android, it's working well. I don't know if I need to show you the code, because is the same as in the documentation.
By the way, I'm using firebase for cloud messaging and I configured it with my p8 key.

I had the similar issue even though every related settings were turned on. Was frustrating - i used "hi security " from Google Play store which manages the notifications. After "notification" was set to ON, I found all of the badges are showing up - missed call and unread messages on both home screen and app.

I also tried with react-native-firebase but it does not work.No push notification is received . Later I Implemented push notification using react-native-fcm and it worked. You can check the link https://github.com/evollu/react-native-fcm

You are not receiving notification probably because firebase is not integrated properly in your application. The steps to integrate properly are given below:
react-native-firebase library did not work for me .Integrating firebase to react native application using react-native-fcm succeded in receiving push notifications.
1.Install react-native-fcm:
npm install react-native-fcm --save
From firebase console,
for Android: download google-services.json file and place it in android/app directory.
for iOS: download GoogleService-Info.plist file and place it in /ios/your-project-name directory (next to your Info.plist)
3.Configure the project using :
cd ios && pod init
4.Edit the newly created Podfile:
pod install
5.Edit AppDelegate.h:
#import UserNotifications;
#interface AppDelegate:UIResponder<UIApplicationDelegate,UNUserNotificationCenterDelegate>
#interface AppDelegate : UIResponder <UIApplicationDelegate>
6.Edit AppDelegate.m:
#import "RNFIRMessaging.h"
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
[FIRApp configure];
[[UNUserNotificationCenter currentNotificationCenter] setDelegate:self];
return YES;
}
-(void)userNotificationCenter:(UNUserNotificationCenter *)center
willPresentNotification:(UNNotification *)notification
withCompletionHandler:(void (^) .
(UNNotificationPresentationOptions))completionHandler
{
[RNFIRMessaging willPresentNotification:notification
withCompletionHandler:completionHandler];
}
#if defined(__IPHONE_11_0)
- (void)userNotificationCenter:(UNUserNotificationCenter *)center
didReceiveNotificationResponse:(UNNotificationResponse *)response
withCompletionHandler:(void (^)(void))completionHandler
{
[RNFIRMessaging didReceiveNotificationResponse:response
withCompletionHandler:completionHandler];
}
#else
- (void)userNotificationCenter:(UNUserNotificationCenter *)center
didReceiveNotificationResponse:(UNNotificationResponse *)response
withCompletionHandler:(void(^)())completionHandler
{
[RNFIRMessaging didReceiveNotificationResponse:response
withCompletionHandler:completionHandler];
}
#endif
//You can skip this method if you don't want to use local notification
-(void)application:(UIApplication *)application
didReceiveLocalNotification:(UILocalNotification *)notification {
[RNFIRMessaging didReceiveLocalNotification:notification];
}
- (void)application:(UIApplication *)application
didReceiveRemoteNotification:(nonnull NSDictionary *)userInfo
fetchCompletionHandler:(nonnull void (^) .
(UIBackgroundFetchResult))completionHandler{
[RNFIRMessaging didReceiveRemoteNotification:userInfo
fetchCompletionHandler:completionHandler];
}
7.Add the path of header files into XCode:
Open XCode.
Press CMD+1 or click the XCode project.
Go to Build Settings, selecting All and Combined.
Search Header Search Path in the searchg tab.
Make sure there is a line of $(SRCROOT)/../node_modules/react-native-fcm/ios. If no, just add it.
8.Add GoogleService-Info.plist:
Make sure the file is not just moved into the folder. You need to Right Click the project folder in XCode and Add File to . Select Copy if needed in the Options page while selecting the file.
9.Shared Library Settings:
Make sure you see Pods.xcodeproj under Library folder if you are using Pod install method.
Make sure you see RNFIRMessaging.xcodeproj under Library folder.
If you don't see any of these files, please add them by Right Click the Library folder and Add File to to add them back. Pods.xcodeproj should be under ios/Pods/, and RNFIRMessaging.xcodeproj should be under node_modules/react-native-fcm/ios.
Make sure you see libRNFIRMessaging.a under Link Binary With Libraries under Build Phases tab. If no, drag the file under RNFIRMessaging.xcodeproj under Library folder into there.
10.Add Capabilities
Select your project Capabilities and enable:
Push Notifications
Background Modes > Remote notifications.
FirebaseAppDelegateProxyEnabled
This instruction assumes that you have FirebaseAppDelegateProxyEnabled=YES (default) so that Firebase will hook on push notification registration events. If you turn this flag off, you will be on your own to manage APNS tokens and link with Firebase token.

ripple emulate error for phonegap android project

In my other computer I have ripple emulating a phonegap android app, but now I´m trying to emulate in my classroom pc and doesn´t work the hello world neither my project.
I have phonegap,npm,ant,java dk,android sdk and ripple-emulator installed.
When I go to:
mypath/platforms/android/assets/www
and type:
ripple emulate
this error happend:
INFO: Server instance running on: localhost:4040 INFO: CORS XHR
proxy service on: localhost:4040/ripple/xhr_proxy INFO: JSONP
XHR proxy service on: localhost:4040/ripple/json_xhr_proxy
Cordova 3.0 project dected...
**fs.js:654 return binding.readdir(pathModule._makeLong(pah)): Error: ENOENT, no such file or director "c:\mypath...

Try running ripple emulate from the root of the project, not in the platform www folder.

one solution which is currently working on all platforms are based on some small source code tweaks. The major problem is regarding the www/platform folder. Especially older phonegap versions doesnt introduce the same Folder structure so you needto adjust the following file to make it properly:
Additional information:
Make sure ripple was installed globally as well as Phonegap and/or Cordova
npm install -g ripple-emulator
npm install -g phonegap
npm install -g cordova
This solution works for Linux, Mac and Windows. You only need to pay attention on the path. Filenames about the source code adjustments remain same. This explanation is based on windows but can be easily used for any other operating system.
1.) Find the ripple Folder on your hard Disk (on Windows you need to show your hidden files and than you should be able to find it at the following path:
Windows:
C:\Users\YOUR_USERNAME\AppData\Roaming\npm\node_modules\ripple-emulator
Pay attention to replace YOUR_USERNAME with your current username in the shown path. If you have customized your path where npm modules get installed please go to that folder and search for the following directory in it /ripple-emulator
2.) Next lets find the file which makes trouble to start ripple correctly. Within the /ripple-emulate directory navigate through the following subdirectories server\emulate. Full path e.g.
Windows:
C:\Users\YOUR_USERNAME\AppData\Roaming\npm\node_modules\ripple-emulator\lib\server\emulate
3.) Open cordovaProject.js and replace all strings which contain "platforms" with an empty one "" as shown Bellow, you can also copy the code shown bellow...
var platforms = fs.readdirSync(path.join(paths.orig, ""));
if (platforms.indexOf('android') >= 0) {
opts.cordova = 'android';
paths.android = path.join(paths.orig, "", "android", "assets", "www");
}
if (platforms.indexOf('ios') >= 0) {
opts.cordova = 'ios';
paths.ios = path.join(paths.orig, "", "ios", "www");
}
if (platforms.indexOf('firefoxos') >= 0) {
opts.cordova = 'firefoxos';
paths.firefox = path.join(paths.orig, "", "firefoxos", "www");
}
if (platforms.indexOf('blackberry10') >= 0) {
opts.cordova = 'blackberry10';
paths.blackberry = path.join(paths.orig, "", "blackberry10", "www");
4.) Now save it.
5.) Make sure you have uninstalled the ripple emulator plugin in chrome (to check open chrome browser, go to Settings and choose extensions). In case you don't know how to uninstall extensions in chrome you can find some additional instruction here https://support.google.com/chrome/answer/113907?hl=en In addition make sure you are using chrome as your Default browser.
6.) Now open your command line and navigate to your phonegap specific www folder and run the command
ripple emulate
optional you also can run it with the following command:
ripple emulate --path/TO_YOUR_PROJECT_FOLDER/www
Thank you & br
Schreda