We Keep Coding

Where did i find AndroidManifest.xml file in React Native Expo file?

Where did i find AndroidManifest.xml file in React Native Expo file for requesting permissions?
There is any other ways to request permission from user?

Basically, EXPO is a tool and provides tools to create a React-native app, When you create an app using EXPO there is no android/ios folder/project inside the react-native expo project if you need to add permissions in Android/iOS just update/Change you
app.json / app.config.js
update your app.config.js to look like
export default {
expo: {
android: {
permissions: ["ACCESS_COARSE_LOCATION", "ACCESS_FINE_LOCATION"],
config: {
googleMaps: {
apiKey: "...abc...",
},
},
}
},
};
You also check this official site for more info regarding this
https://docs.expo.dev/versions/latest/config/app/#permissions

add permissions array inside your app.json like this
{
"expo": {
"name": "Page",
...
"ios": {
"supportsTablet": false
},
"android":{
"permissions":["READ_EXTERNAL_STORAGE", "WRITE_EXTERNAL_STORAGE"],
"package":"com.example.app"
}
}
}
So your app.json should be
"android":{
"permissions":["READ_EXTERNAL_STORAGE", "WRITE_EXTERNAL_STORAGE"],
"package":"com.example.app"
}

Next Js - Firebase deployment issue

I am building up a new Next Js app and its a stright forward way to make the app gets deployed in vercel by linking the gitlab Next js project..
For same project I am in the need to deploy it in firebase.
Things I have tried:
-> Made firebase init
That gives firebase.json ,
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
But the above one gives the error like,
From this error I am able to get that it tries to fetch the index.html but I am not sure where it will be after npm run build ..
So I tried giving pages directory and index.js file like,
{
"hosting": {
"public": "pages",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
},
"rewrites": [{
"source": "/pages/**",
"destination": "/index.js"
},
{
"source": "**",
"destination": "/index.js"
}]
}
But this just prints the code available in index.js to the UI like,
import React, { Component } from "react";
import Router from "next/router";
export default class Index extends Component {
componentDidMount = () => {
Router.push("/landing",'');
};
render() {
return <div />;
}
}
The gitlab-ci.yml file as follows,
image: node:12.13.0-alpine
stages:
- deploy
cache:
paths:
- node_modules/
key: "$CI_BUILD_REPO"
deploy-prod:
stage: deploy
only:
- master
script:
- npm install
- npm run build
- npm install -g firebase-tools
- firebase -V
- firebase use anvisysytems --token "token_hidden"
- firebase deploy --only hosting -m "Pipe $CI_PIPELINE_ID Build $CI_BUILD_ID" --token "token_hidden"
Please help me to achieve the result of fetching the right index.html that will gets generated after building the Next Js application and make the app content load in UI instead of the errors(like above image) or code(like index.js code rendering in UI).

Firebase can host only static files,
To host NEXT js project as static files, you can use export option and then deploy it to Firebase.
https://nextjs.org/docs/advanced-features/static-html-export

Versioning an angular application in production

I have multi module application, where some of my modules are lazily loaded, and so the output files in dist folder looks like this 1.d2ef1******8da.chunk.js, 2.dsfd3******8da.chunk.js and like wise. The problem is, if I create a new build for the production, then the hash changes and so the file names. Suppose a user has not refreshed the page, they still will try to lazily load the old file which will be shown as file not found. In such case my page hangs. How should I handle it ?

You can make use of Angular Service Workers to change your app into a PWA (Progressive Web Application).
It makes use of angular service workers to alert users to reload if a new version of app is deployed.
For Ex:
Install #angular/service-worker, add it to package.json and install dependencies.
Import ServiceWorkerModule in AppModule:
import { ServiceWorkerModule } from '#angular/service-worker';
Register it in the AppModule imports array:
ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
Use it in app root component:
import { Component, OnInit } from "#angular/core";
import { SwUpdate } from "#angular/service-worker";
export class AppComponent implements OnInit {
constructor(private swUpdate: SwUpdate){}
ngOnInit(): void {
if (this.swUpdate.isEnabled) {
this.swUpdate.available.subscribe(() => {
if (confirm("A New version of site is available. Load New Version?")) {
window.location.reload();
}
});
}
}
}
If you are on angular 4 and cli ~1.6. The process should be same.
npm install #angular/service-worker
add it in App Module as explained above
create a ngsw-config.json file in your app’s src directory.
{
"index": "/index.html",
"assetGroups": [{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html"
],
"versionedFiles": [
"/*.bundle.css",
"/*.bundle.js",
"/*.chunk.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**"
]
}
}]
}
Trying it Out
With the configuration in place, we can build the app for production (ng build --prod) and test it out using a local static server using -
npx http-server /dist

Most of the steps apart from #4 above are done automatically by latest angular cli command (https://angular.io/api/service-worker):
ng add #angular/pwa

How to import module from npmjs as Typescript not Javascript instead of using require [Ionic]

As I mention, I want to import a module but I don't understand the document.
I'm using Ionic for develop an app.
I install the module :
npm install wordnet
Instead of using ..
var wordnet = require('wordnet');
wordnet.lookup('define', function(err, definitions) {
definitions.forEach(function(definition) {
console.log(' words: %s', words.trim());
console.log(' %s', definition.glossary);
});
});
How to use the module in the Typescript file for using it function.. as
import { wordnet } from 'wordnet'
Do I need to import module in app.module.ts or in the page page.module.ts or something...?

It depends on your setup. If you're using AngularCLI, then it should find the TypeScript / JavaScript code automagically. Check your node-modules directory to make sure the code is there. If not add the --save-dev flag when you install:
npm install --save-dev wordnet
IF this library relies on binary assets or CSS files, then you may have to edit the angular-cli.json file to tell it where to find image or CSS files. Here is a snippet from the AngularCLI conversion I did in my Learn With books that shows how I set up assets and CSS.
"apps": [
{
"assets": [
"img",
{
"glob": "**/*",
"input": "../node_modules/#swimlane/ngx-datatable/release/assets/fonts",
"output": "./fonts"
}
],
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/#swimlane/ngx-datatable/release/assets/icons.css",
"../node_modules/#swimlane/ngx-datatable/release/themes/material.css"
],
}
],
If you're using SystemJS to load modules then you'll have to set up wordnet in your SystemJS config. Generally something like this:
(function (global) {
System.config({
map: {
'wordnet': 'path/to/wordnet/code'
},
});
})(this);

Cordova plugins not work with Ionic

I am building out an Ionic app in Angular and ave never been able to get plugins to work.
As an example, I have tried using the statusbar plugin as described here:
http://ionicframework.com/tutorials/fullscreen-apps/
But it still shows in my app. I tried:
$ cordova plugin add org.apache.cordova.statusbar
and then "cordova prepare", "ionic run ios" and still no luck.
The plugins I get listed when I type
$ cordova plugin list
com.ionic.keyboard 1.0.2 "Keyboard"
org.apache.cordova.console 0.2.10 "Console"
org.apache.cordova.device 0.2.11 "Device"
org.apache.cordova.statusbar 0.1.7 "StatusBar"
I also am using Gulp. I have a folder with all my dev work in, and gulp moves and compiles it into a /dist folder from whence it is served. I'm pretty sure the plugins are moved across perfectly, is there anywhere I should check the references?
Any ideas if there is something you have to do in order to use Cordova plugins with Ionic?

The answer to this was that I had to add
<script src="cordova.js"></script>
to my page, just above my scripts.
Please be aware this file doesnt exist during development, it's injected at runtime... which is why I could solve it. Hope this helps someone!

Additional solution if including cordova.js doesn't resolve the problem
I have had the same issue, but cordova.js was already included in my index.html. window.plugins always has been undefined. Then I noticed that there is a cordova_plugins.js file inside the platforms/ios/www folder.
Here's what I did:
$ cordova plugin add cordova-plugin-flashlight
$ cordova prepare
added <script src="cordova_plugins.js"></script> right after cordova.js inside index.html
After that I could access the window.plugins variable.
HINT: take a look into your cordova_plugins.js and be aware that some plugins are attached to cordova.plugins (e.g. Keyboard Plugin, see below) others are attached to window.plugins (e.g. Flashlight)
For reference - my cordova_plugins.js file looks like this
cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [
{
"file": "plugins/cordova-plugin-console/www/logger.js",
"id": "cordova-plugin-console.logger",
"clobbers": [
"cordova.logger"
]
},
{
"file": "plugins/cordova-plugin-console/www/console-via-logger.js",
"id": "cordova-plugin-console.console",
"clobbers": [
"console"
]
},
{
"file": "plugins/cordova-plugin-device/www/device.js",
"id": "cordova-plugin-device.device",
"clobbers": [
"device"
]
},
{
"file": "plugins/cordova-plugin-splashscreen/www/splashscreen.js",
"id": "cordova-plugin-splashscreen.SplashScreen",
"clobbers": [
"navigator.splashscreen"
]
},
{
"file": "plugins/cordova-plugin-statusbar/www/statusbar.js",
"id": "cordova-plugin-statusbar.statusbar",
"clobbers": [
"window.StatusBar"
]
},
{
"file": "plugins/ionic-plugin-keyboard/www/ios/keyboard.js",
"id": "ionic-plugin-keyboard.keyboard",
"clobbers": [
"cordova.plugins.Keyboard"
],
"runs": true
},
{
"file": "plugins/cordova-plugin-flashlight/www/Flashlight.js",
"id": "cordova-plugin-flashlight.Flashlight",
"clobbers": [
"window.plugins.flashlight"
]
}
];
module.exports.metadata =
// TOP OF METADATA
{
"cordova-plugin-console": "1.0.1",
"cordova-plugin-device": "1.0.1",
"cordova-plugin-splashscreen": "2.1.0",
"cordova-plugin-statusbar": "1.0.1",
"cordova-plugin-whitelist": "1.0.0",
"ionic-plugin-keyboard": "1.0.7",
"cordova-plugin-flashlight": "3.0.0"
}
// BOTTOM OF METADATA
});

I tested this on Android and iPhone simulator and works correctly. Try this code:
angular.module('starter', [
'ionic',
'starter.controllers',
... more modules here
])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.hide();
}
});
})
.... more code
EDIT:
$ cordova plugin add org.apache.cordova.statusbar
$ ionic build ios
$ ionic run ios
EDIT II: (Try with a fresh Project and iPhone Simulator)
$ ionic start testStatusBar tabs
$ cd testStatusBar/
$ cordova plugin add org.apache.cordova.statusbar
$ vim www/js/app.js
Edit this:
if(window.StatusBar) {
// org.apache.cordova.statusbar required
// StatusBar.styleDefault();
StatusBar.hide();
}
$ vim www/index.html
add class="fullscreen" to the <body> element
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios