Nativescript + iOS webview + local files - ios

I'm currently working in a simple app, which has a HTML section which uses a webview.
The contents are in an app/www folder, and I access them from a "home.ts" component with something like this in the HTML
<GridLayout
class="main-layout"
columns="*"
rows="*"
>
<WebView
src="~/www/index.html"
class="web-view"
col="0"
id="wv"
row="0"
></WebView>
</GridLayout>
This file uses a few images, some JS and some CSS.
It works fine on Android, but I can't make it work on iOS. Oh, and it works fine on the iOS emulator, but not in an actual device (I currently have a iOS 9 iPod touch for testing these things).
I have the correct keys configured on Info.plist (it works with URLs as https://www.google.com), and I think I'm not doing anything weird.
This is my package.json
{
"description": "WebView App",
"license": "LicenseRef-LICENSE",
"readme": "README",
"nativescript": {
"id": "com.app.name"
},
"dependencies": {
"#angular/animations": "~4.1.0",
"#angular/common": "~4.1.0",
"#angular/compiler": "~4.1.0",
"#angular/core": "~4.1.0",
"#angular/forms": "~4.1.0",
"#angular/http": "~4.1.0",
"#angular/platform-browser": "~4.1.0",
"#angular/router": "~4.1.0",
"nativescript-angular": "~3.0.0",
"nativescript-theme-core": "~1.0.2",
"reflect-metadata": "~0.1.8",
"rxjs": "~5.3.0",
"tns-core-modules": "^3.0.1",
"zone.js": "~0.8.2"
},
"devDependencies": {
"#angular/compiler-cli": "~4.1.0",
"babel-traverse": "6.24.1",
"babel-types": "6.24.1",
"babylon": "6.17.1",
"copy-webpack-plugin": "~4.0.1",
"lazy": "1.0.11",
"nativescript-css-loader": "~0.26.0",
"nativescript-dev-typescript": "~0.4.0",
"raw-loader": "~0.5.1",
"resolve-url-loader": "~2.0.2",
"tns-platform-declarations": "^3.0.0-rc.2",
"typescript": "~2.2.1"
}
}

It's a known bug for local pages, it's not able to determine what ~ means in terms of filesystem
you need to change the src in your code and figure out what ~refers to.
using :
import * as fs from "tns-core-modules/file-system";
public webViewSRC: string = encodeURI(`${fs.knownFolders.currentApp().path}/www/index.html`);
See this issue :
https://github.com/NativeScript/NativeScript/issues/4443

Related

How to remove permissions for ios using expo

I have an app using expo, but I want to remove NSMicrophoneUsageDescription from de infoplist.
Using this command expo config --type introspect
I got
ios: {
....
config: {
....
},
infoPlist: {
....
NSCameraUsageDescription: 'Allow $(PRODUCT_NAME) to access your camera',
NSPhotoLibraryUsageDescription: 'Allow $(PRODUCT_NAME) to access your photos',
NSMicrophoneUsageDescription: 'Allow $(PRODUCT_NAME) to access your microphone',
...
}
my package.json dependencies
"dependencies": {
"#expo/config": "^6.0.16",
"#react-native-community/netinfo": "6.0.2",
"#react-native-community/picker": "^1.8.1",
"#react-navigation/elements": "^1.3.3",
"#react-navigation/native": "^6.0.6",
"#react-navigation/native-stack": "^6.2.5",
"#react-navigation/stack": "^6.0.11",
"#reduxjs/toolkit": "^1.6.2",
"#sentry/react-native": "^3.4.3",
"#stripe/stripe-react-native": "0.2.2",
"axios": "^0.24.0",
"date-fns": "^2.28.0",
"dotenv": "^16.0.0",
"expo": "~43.0.2",
"expo-app-loading": "~1.2.1",
"expo-apple-authentication": "~4.0.3",
"expo-application": "~4.0.0",
"expo-auth-session": "~3.4.2",
"expo-clipboard": "~2.0.3",
"expo-constants": "~12.1.3",
"expo-crypto": "~10.0.3",
"expo-dev-client": "~0.6.3",
"expo-device": "~4.0.3",
"expo-document-picker": "~10.0.3",
"expo-font": "~10.0.3",
"expo-image-picker": "~11.0.3",
"expo-linear-gradient": "^10.0.3",
"expo-linking": "~2.4.2",
"expo-localization": "~11.0.0",
"expo-notifications": "~0.13.3",
"expo-random": "~12.0.1",
"expo-secure-store": "~11.0.3",
"expo-status-bar": "~1.1.0",
"expo-updates": "~0.10.15",
"expo-web-browser": "~10.0.3",
"firebase": "^9.5.0",
"formik": "^2.2.9",
"husky": "^7.0.4",
"js-base64": "^3.7.2",
"jwt-decode": "^3.1.2",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-app-intro-slider": "^4.0.4",
"react-native-countdown-circle-timer": "^3.0.9",
"react-native-country-picker-modal": "^2.0.0",
"react-native-gesture-handler": "^1.10.3",
"react-native-get-random-values": "~1.7.0",
"react-native-global-props": "^1.1.5",
"react-native-paper": "^4.12.2",
"react-native-paper-dates": "^0.8.7",
"react-native-phone-number-input": "^2.1.0",
"react-native-picker-select": "^8.0.4",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.8.0",
"react-native-step-indicator": "^1.0.3",
"react-native-svg": "^12.1.1",
"react-native-toast-message": "^2.1.1",
"react-native-vector-icons": "^9.0.0",
"react-native-web": "0.17.1",
"react-native-webview": "11.13.0",
"react-redux": "^7.2.6",
"redux-logger": "^3.0.6",
"redux-saga": "^1.1.3",
"sentry-expo": "^4.2.0",
"ts-interface-builder": "^0.3.2",
"ts-interface-checker": "^1.0.2",
"uuid": "^8.3.2",
"yup": "^0.32.11"
},
So, I want to remove unused permissions as NSMicrophoneUsageDescription but I don't know how, can you help me?
I read the documentation in expo for permissions but it says that the plugins has its own configurations for permissions but it does not say somenthing about remove them
https://docs.expo.dev/guides/permissions/
I am assuming you want to deploy your app. If you are not requesting permission in your whole app.js, you dont have to do anything to remove the permission in the general.
In my experience, the apple store connects will still approve your app. On the apple store download page, the description will not show any permission required.
If I guess wrong and you just want to remove the permission, I recommend you eject the app. It will give you more flexibility to control the infoPlist.
This was resolved updating SDK to 45 and expo-image-picker to it more recent version, here you can modify in the app.json like this
[
"expo-image-picker",
{
"microphonePermission": false
}
]

iOS: SyntaxError: Invalid regular expression: range out of order in character class (Vue3)

I am trying to go in production with my vuejs (Vue 3) website. Everything is working fine but yesterday I tried it with iOS Safari and was shocked because it only renders a white blank page and an error message: (There was no detail about where this error occured)
iOS: SyntaxError: Invalid regular expression: range out of order in character class
I went through my whole project but I dont even use regular expressions. Could it come from a dependency? Anyone else stumbled over this error message?
Thanks in advance!
PS: I dont know if it helps but this are my dependencies from package.json
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^6.1.1",
"#fortawesome/free-solid-svg-icons": "^6.1.1",
"#fortawesome/vue-fontawesome": "^3.0.0-5",
"#kyvg/vue3-notification": "^2.3.4",
"#tailwindcss/line-clamp": "^0.4.0",
"#vitejs/plugin-vue": "^2.3.3",
"autoprefixer": "^10.4.7",
"bcrypt": "^5.0.1",
"body-parser": "^1.19.1",
"cors": "^2.8.5",
"express": "^4.17.3",
"express-fileupload": "^1.2.1",
"express-rate-limit": "^5.5.1",
"helmet": "^4.6.0",
"imgur": "^2.1.3",
"jsonwebtoken": "^8.5.1",
"moment": "^2.29.3",
"mongoose": "^6.1.2",
"morgan": "^1.10.0",
"nodemailer": "^6.7.5",
"nprogress": "^0.2.0",
"pdfmake": "^0.2.5",
"socket.io": "^4.4.1",
"tailwindcss": "^3.1.2",
"validator": "^13.7.0",
"vite": "^2.9.12",
"vue": "^3.2.31",
"vue-axios": "^3.4.1",
"vue-content-loader": "^2.0.1",
"vue-csv-import": "^4.1.2",
"vue-router": "^4.0.16",
"vue3-qrcode-reader": "^0.0.1",
"vue3-table-lite": "^1.2.3",
"vuex": "^4.0.2"
},

NativeScript 8.2 : how to get direction using CLHeading trueHeading

I am trying to get the direction in my nativescript app using the CLHeading trueHeading but it always returns as null.
locationservice.ts
import { Injectable } from "#angular/core";
#Injectable()
export class LocationService {
private iosLocManager: CLLocationManager;
private locManagerDelegate: LocationMangerDelegate;
constructor() {
this.iosLocManager = new CLLocationManager();
this.locManagerDelegate = new LocationMangerDelegate();
this.iosLocManager.desiredAccuracy = 3;
this.iosLocManager.distanceFilter = 0.1;
this.iosLocManager.delegate = this.locManagerDelegate;
}
getDirection(): number {
return this.locManagerDelegate.currentHeading;
}
startUpdatingHeading(): void {
this.locManagerDelegate.currentHeading = null;
this.iosLocManager.startUpdatingHeading();
}
stopUpdatingHeading(): void {
this.iosLocManager.stopUpdatingHeading();
}
}
export class LocationMangerDelegate extends NSObject implements CLLocationManagerDelegate {
public static ObjCProtocols = [CLLocationManagerDelegate];
currentHeading: number;
locationManagerDidUpdateHeading(locationManager: CLLocationManager, heading: CLHeading): void {
this.currentHeading = heading.trueHeading;
}
}
Component
constructor(private locationService: LocationService) {
this.locationService.startUpdatingHeading();
}
GetDirection(): void {
let direction = this.locationService.getDirection();
}
how can I get the value of trueHeading or how can I get the direction in NativeScript IOS ?
Package.json
{
"dependencies": {
"#angular/animations": "~13.2.0",
"#angular/common": "~13.2.0",
"#angular/compiler": "~13.2.0",
"#angular/core": "~13.2.0",
"#angular/forms": "~13.2.0",
"#angular/http": "7.2.16",
"#angular/platform-browser": "~13.2.0",
"#angular/platform-browser-dynamic": "~13.2.0",
"#angular/router": "~13.2.0",
"base-64": "^0.1.0",
"cross-env": "^5.2.0",
"lodash": "^4.17.11",
"#nativescript/angular": "^13.0.0",
"#nativescript/appversion": "2.0.0",
"#nativescript/camera": "5.0.10",
"nativescript-couchbase": "^1.0.18",
"#nativescript/email": "2.0.5",
"#nativescript/geolocation": "8.0.2",
"nativescript-phone": "3.0.3",
"nativescript-screen-orientation": "^2.0.0",
"nativescript-theme-core": "~1.0.4",
"reflect-metadata": "~0.1.13",
"rxjs": "~7.5.0",
"rxjs-compat": "^6.4.0",
"utf8": "^3.0.0",
"zone.js": "~0.11.5",
"#nativescript/core": "~8.2.0"
},
"devDependencies": {
"#angular/compiler-cli": "~13.2.0",
"#nativescript/schematics": "~0.5.0",
"#ngtools/webpack": "~13.2.0",
"#nativescript/webpack": "5.0.6",
"#angular-devkit/build-angular": "~13.2.0",
"#nativescript/ios": "8.2.1",
"#nativescript/types": "8.1.1",
"typescript": "~4.5.5"
},
"readme": "NativeScript Application",
"main": "./src/main.ts"
}
Reference.d.ts
/// <reference path="./node_modules/#nativescript/types/index.d.ts" />
Info.plist
<key>UIRequiredDeviceCapabilities</key>
<array>
<string>magnetometer</string>
<string>gps</string>
<string>location-services</string>
</array>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Description</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>Description</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>Description</string>
How can i get the direction from the CLHeading trueHeading? . it always returns null ? what am I missing?
Check the docs:
This property contains a valid value only if location updates are also enabled for the corresponding location manager object. Because the position of true north is different from the position of magnetic north on the Earth’s surface, Core Location needs the current location of the device to compute the value of this property.

TextInpout autocorrect show opposite in ios [react native]

It's happened only in ios, i attached imag and you can see the behavior (autoCorrect for ios)
the TextInput style:
textInput: {
flex: 1,
alignSelf: 'center',
fontSize: 16,
lineHeight: 24,
writingDirection: 'rtl',
top: 8,
textAlign: "right",
},
i tried all combination of rtl & ltr - right & left its text style,
so i thinking is not a problam with the text style
i attach package.json file in the project:
"dependencies": {
"#babel/plugin-proposal-decorators": "^7.4.4",
"#babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4",
"#jumpn/react-native-jetifier": "^0.1.4",
"#target-corp/react-native-svg-parser": "^1.0.6",
"babel-preset-react-native": "^5.0.2",
"bugsnag-react-native": "^2.21.1",
"color": "^3.1.0",
"faker": "^4.1.0",
"hat": "^0.0.3",
"lottie-ios": "2.5.3",
"lottie-react-native": "2.6.1",
"mobx": "3.4.0",
"mobx-persist": "^0.4.1",
"mobx-react": "^4.3.5",
"moment": "^2.22.2",
"moment-range": "^4.0.2",
"pushwoosh-react-native-plugin": "^5.13.1",
"react": "16.8.3",
"react-native": "0.59.8",
"react-native-check-box": "^2.1.7",
"react-native-circle-checkbox": "^0.1.6",
"react-native-collapsible": "^1.4.0",
"react-native-config": "^0.11.7",
"react-native-dash": "^0.0.9",
"react-native-device-info": "^1.1.0",
"react-native-email-link": "^1.6.2",
"react-native-extended-stylesheet": "^0.11.2",
"react-native-i18n": "^2.0.15",
"react-native-keyboard-aware-scroll-view": "^0.8.0",
"react-native-keyboard-aware-scrollview": "^2.0.0",
"react-native-modal": "^11.3.1",
"react-native-modal-datetime-picker": "^7.5.0",
"react-native-modal-selector": "^1.0.3",
"react-native-phone-call": "^1.0.9",
"react-native-picker-select": "^6.2.0",
"react-native-pose": "^0.9.1",
"react-native-restart": "^0.0.10",
"react-native-rtl-layout": "^0.0.1",
"react-native-signalr": "^1.0.6",
"react-native-splash-screen": "^3.2.0",
"react-native-status-bar-height": "^2.3.1",
"react-native-svg": "^9.4.0",
"react-native-svg-uri": "^1.2.3",
"react-native-unique-id": "^1.0.4",
"react-native-vector-icons": "^6.1.0",
"react-navigation": "^2.11.2",
"rn-placeholder": "^2.0.0",
"zxcvbn": "^4.4.2"
},
"devDependencies": {
"#babel/core": "^7.4.5",
"#babel/runtime": "^7.4.5",
"babel-jest": "^24.8.0",
"jest": "^24.8.0",
"metro-react-native-babel-preset": "^0.54.1",
"react-test-renderer": "16.8.3"
},
Possible Problem Cause
It could be that your device is using an RTL language (Arabic, etc.) and you explicit specified the textAlign and wirtingDirection.
Quick Solution
You don't have to specify textAlign and writingDirection on your textInput styling.
Localizing User Experience
If you want to localize the experience for your application to adapt RTL and LTR, follow along:
import { I18nManager } from 'react-native' // ... import I18nManager along your other react native imports
change your textInput styling to reflect the following:
textInput: {
top: 8,
flex: 1,
fontSize: 16,
lineHeight: 24,
alignSelf: 'center'
},
If you need to check the status of the phone either RTL or LTR you can check using the following:
const isDeviceRTL = I18nManager.isRTL;
if (isDeviceRTL) {
// ... do something cause device is RTL
} else {
// ... do something else cause device is LTR
}
Other way to use it in your styling is:
someTextStyle {
textAlign: I18nManager.isRTL ? 'right' : 'ltr',
writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr'
}
Note: you will not need to use this last state actually because react detects text and if your device is RTL or LTR and adapts automatically, just wanted to show you a use case
Hope this Helps!

white screen displayed after splashscreen in nativescript ios

There is white screen displaying after splash screen for few seconds in nativescript ios. It has been happening only for our project but sample project is working fine. I checked both simulator and iPhone 5, iPhone 6 , iPad mini ,white screen is displaying in all devices. I am using Nativescript with Angular 4, Here I included my package.json
{
"description": "NativeScript Application",
"license": "SEE LICENSE IN <your-license-filename>",
"readme": "NativeScript Application",
"repository": "<fill-your-repository-here>",
"nativescript": {
"id": "com.preludesys.calladoc",
"tns-ios": {
"version": "3.1.0"
}
},
"scripts": {
"tslint": "tslint -p tsconfig.json",
"ns-bundle": "ns-bundle",
"publish-ios-bundle": "npm run ns-bundle --ios --publish-app",
"generate-android-snapshot": "generate-android-snapshot --targetArchs arm,arm64,ia32 --install",
"start-android-bundle": "npm run ns-bundle --android --run-app",
"start-ios-bundle": "npm run ns-bundle --ios --run-app",
"build-android-bundle": "npm run ns-bundle --android --build-app",
"build-ios-bundle": "npm run ns-bundle --ios --build-app"
},
"dependencies": {
"#angular/animations": "~4.1.0",
"#angular/common": "~4.1.0",
"#angular/compiler": "~4.1.0",
"#angular/core": "~4.1.0",
"#angular/forms": "~4.1.0",
"#angular/http": "~4.1.0",
"#angular/platform-browser": "~4.1.0",
"#angular/router": "~4.1.0",
"nativescript": "^3.2.0",
"nativescript-angular": "~3.0.0",
"nativescript-camera": "^3.0.1",
"nativescript-drop-down": "^3.1.0",
"nativescript-google-maps-sdk": "^2.3.2",
"nativescript-imagepicker": "^3.0.6",
"nativescript-iqkeyboardmanager": "^1.1.0",
"nativescript-loading-indicator": "^2.3.2",
"nativescript-phone": "^1.3.1",
"nativescript-ripple": "^2.0.0",
"nativescript-telerik-ui": "^3.0.4",
"nativescript-theme-core": "~1.0.2",
"nativescript-unit-test-runner": "^0.3.4",
"nativescript-xml2js": "^0.5.2",
"reflect-metadata": "~0.1.8",
"rxjs": "~5.3.0",
"tns-core-modules": "^3.1.1",
"zone.js": "~0.8.2"
},
"devDependencies": {
"#angular/compiler-cli": "~4.1.0",
"#ngtools/webpack": "^1.3.0",
"babel-traverse": "6.24.1",
"babel-types": "6.24.1",
"babylon": "6.17.1",
"codelyzer": "^3.0.1",
"copy-webpack-plugin": "~4.0.1",
"extract-text-webpack-plugin": "~2.1.0",
"filewalker": "^0.1.3",
"jasmine-core": "^2.6.2",
"karma": "^1.7.0",
"karma-jasmine": "^1.0.2",
"karma-nativescript-launcher": "^0.4.0",
"lazy": "1.0.11",
"nativescript-css-loader": "~0.26.0",
"nativescript-dev-typescript": "~0.4.0",
"nativescript-dev-webpack": "next",
"raw-loader": "~0.5.1",
"resolve-url-loader": "~2.0.2",
"tslint": "^5.4.2",
"typescript": "~2.2.1",
"webpack": "~2.6.1",
"webpack-bundle-analyzer": "^2.8.2",
"webpack-sources": "~1.0.1",
"nativescript-worker-loader": "~0.8.1"
}
}
i dont know what is the issue and how can i fix it. so please j=help me.
You should repeat the layout of your boot screen or a slightly different version of it (with a spinner and loading... message) hard coded that gets removed or drawn over once the app is actually loaded. This will give a smooth and professional looking transition between the boot screen and the loaded application.
This short "splash after the splashscreen" appears on iOS during the load of the initial page.
You cannot avoid it. However, you can change the color in your global CSS file with this code:
Page {
background-color: black;
}
In our apps this white screen becomes more prominent after adding a few "heavy" plugins, as nativescript-telerik-ui, nativescript-google-maps-sdk, etc.
It happens on old (slow) Android devices, too.
It seems it is unavoidable, which is a shame, really. One thing you could try is to optimize the loading time with Webpack, lazy loading, etc., so the app loads faster.
It also is recommended to change the Page background color programmatically on boot.
I am using frames and i found solution to make Frame background same as Splash screen
Frame {
background:#4285F4;
}
For this to work on Android {N}7 too, do:
frame.ns-root {
background-color: black;
}

Resources