Deep linking not working with https url on expo - react-native

I'm trying to create a deep link into my app but it's not working with https url, it's working with a regular deep link in this format: myapp:// ..., here's the code :
intent filters in app.json:
"scheme": "myapp",
.
.
.
"intentFilters": [
{
"action": "VIEW",
"data": [
{
"scheme": "https",
"host": "*.myapp.io",
"pathPrefix": "/"
},
{
"scheme": "https",
"host": "myapp.io",
"pathPrefix": "/"
},
{
"scheme": "myapp",
"host": "*",
"pathPrefix": "/"
}
]
}]
Config in App.tsx :
const config = {
screens: {
TabsNavigator: {
screens:{
HomeScreenNav: {
screens: {
"Home/ViewRecommendation": 'viewRecommendation/:recommendationId',
}
}
}
}
},
}
const linking = {
prefixes: [Linking.createURL('/'), 'https://app.myapp.io/'],
config
};
return (
<NavigationContainer linking={linking} ref={navigationRef}>
<RootSiblingParent>
<AppWrapper />
</RootSiblingParent>
</NavigationContainer>);
When I use myapp://viewRecommendation/recommendationId, it works but when I use https://app.myapp.io/ , it doesn't work, it just opens the brower. I'm on android and I'm using expo btw.
Does anyone have an idea what the problem is ? Thank you btw, any help would be apprechiated

Related

Why are absolute imports not working in my react-native expo project?

An example of the imports follows:
import { useAppDispatch, useAppSelector } from '~/redux/hooks'
import * as walletActions from '~/redux/wallet/actions'
import { actions, selectState as selectWalletState } from '~/redux/wallet/slice'
import { multichain } from '~/services/multichain'
import { config } from '~/settings/config'
In my tsconfig.json...
"compilerOptions": {
"baseUrl": ".",
"paths": {
"~/*":["./src/*"]
},
...
This all compiles, and typescript understands my imports; I can click around them in VSCode.
However, when I open the app in Expo, I get the error
Unable to resolve module ~/redux/hooks from ... ~/redux/hooks could not be found within the project or in these directories:
node_modules
Here is my babel.config.js
module.exports = function (api) {
api.cache(true)
return {
presets: ['babel-preset-expo'],
plugins: [
['react-native-reanimated/plugin'],
[
'module:react-native-dotenv',
{
envName: 'APP_ENV',
moduleName: '#env',
path: '.env',
},
],
[
'module-resolver',
{
alias: {
'~/': './src/',
},
},
],
],
}
}

Nuxt.js: 404 code in production on some dynamic routes

My Nuxt project has around 700-1000 static and dynamic pages hosted via Netlify. ~300 of them are generated correctly.
In production, I discovered that certain dynamically generates routes get a HTTP 404 status code. However, they are generated and loaded without any other error in production. They just get the 404 error code which has bad implications for SEO. Dev server and running the generated dist folder via nuxt start locally both show no 404 code on those pages. Static generated pages work fine.
Here are my settings for nuxt.config.js (see full list below)
target: 'static',
generate: {
fallback: true,
....
}
I do not specify the dynamic routes on generate() because of the nuxt crawler .
package.json:
{
"name": "xxxxxxx",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"generate_coin_list_file": "node scripts/generate_coin_list.js",
"generate_coin_images": "node scripts/download_coin_images.js"
},
"dependencies": {
"#nuxt/content": "^1.14.0",
"#nuxtjs/axios": "^5.13.6",
"#nuxtjs/gtm": "^2.4.0",
"#nuxtjs/proxy": "^2.1.0",
"#nuxtjs/sitemap": "^2.4.0",
"core-js": "^3.15.1",
"frontmatter-markdown-loader": "^3.7.0",
"ipx": "^0.9.4",
"lite-youtube-embed": "^0.2.0",
"nuxt": "^2.15.8",
"nuxt-jsonld": "^1.5.3",
"v-click-outside": "^3.2.0",
"vue-disqus": "^4.0.1"
},
"devDependencies": {
"#nuxt/image": "^0.6.2",
"#nuxtjs/tailwindcss": "^4.2.0",
"eslint-config-prettier": "^8.3.0",
"postcss": "^8.3.5",
"prettier": "^2.3.2"
}
}
I am not sure where to look for since this error does not seem to follow a pattern. Because I can generate it locally without the error it could be problem with Netlify. What do you guys think of this? Thank you!
Example:
_slug.vue
export default {
name: 'BlogSlug',
async asyncData({ $content, params, route, error }) {
let author = {}
let article = await $content('articles', { deep: true })
.where({
slug: params.slug,
})
.fetch()
.catch(() => {
error({ statusCode: 404, message: 'Page not found' })
})
article = article[0]
const allArticles = await $content('articles', {
deep: true,
})
.sortBy('date', 'desc')
.limit(6)
.fetch()
.catch(() => {
error({ statusCode: 404, message: 'Page not found' })
})
if (article.author) {
author = await $content('authors')
.where({
id: article.author,
})
.fetch()
.catch(() => {
error({ statusCode: 404, message: 'Page not found' })
})
}
return { article, allArticles, author }
},
...
}
nuxt.config.js
import coinList from './data/coin_list.json'
export default {
target: 'static',
head: {
title: 'XXXXXX',
htmlAttrs: {
lang: 'de',
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' },
{
hid: 'twitter:card',
property: 'twitter:card',
content: 'summary_large_image',
},
],
link: [
{
hid: 'apple-touch-icon',
rel: 'apple-touch-icon',
sizes: '180x180',
href: '/favicon.ico',
},
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
],
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
'~/assets/css/tailwind.css',
'node_modules/lite-youtube-embed/src/lite-yt-embed.css',
],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
'~/plugins/metadata',
'~/plugins/youtube.client.js',
'~/plugins/jsonLd.js',
{ src: '#/plugins/vClickOutside', ssr: false },
'~/plugins/disqus',
],
// Auto import components: https://go.nuxtjs.dev/config-components
components: [
'~/components',
{ path: '~/components/utils', extensions: ['vue'] },
{ path: '~/components/global' },
],
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/tailwindcss
'#nuxtjs/tailwindcss',
[
'#nuxt/image',
{
provider: 'static',
},
],
'#/modules/sitemapRouteGenerator.js',
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
'#nuxtjs/axios',
'#nuxt/content',
'#nuxtjs/proxy',
'#nuxtjs/gtm',
// has to be last
'#nuxtjs/sitemap',
],
sitemap: {
hostname: process.env.NUXT_ENV_BASE_URL,
path: '/sitemap.xml',
},
// GTM Analytics
gtm: {
enabled: true,
pageTracking: true,
},
axios: {},
image: {
// Options
domains: ['assets.coingecko.com', 'coingecko.com'],
presets: {
blog: {
modifiers: {
format: 'webp',
},
},
},
},
// Content module configuration: https://go.nuxtjs.dev/config-content
content: {
// nestedProperties: ['articles.slug'],
},
generate: {
fallback: true,
async routes() {
const routes = await _getRoutes()
async function _getRoutes($content) {
const paths = []
coinList.forEach((coin) => {
paths.push({
route: `/coins/${coin.id}/historisch/`,
payload: coin.id,
})
})
return paths
}
return routes
},
},
router: {
routeNameSplitter: '/',
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
extend(config) {
config.module.rules.push({
test: /\.md$/,
loader: 'frontmatter-markdown-loader',
})
},
},
}
Module: sitemapRouteGenerator.js
export default function () {
this.nuxt.hook('generate:done', (context) => {
const routesToExclude = /\/index|\/articles\/|\/undefined/ // Add any route you don't want in your sitemap. Potentially get this from an .env file.
const allRoutes = Array.from(context.generatedRoutes)
// console.log(context.generatedRoutes)
const routes = allRoutes.filter((route) => !routesToExclude.test(route))
// console.log(routes)
this.nuxt.options.sitemap.routes = [...routes]
})
}
I solved the issue. The fix was to generate all routes of dynamic pages in the generate hook even though Nuxt states about the generate crawler:
Since Nuxt 2.14+, nuxt generate has a crawler feature integrated which will crawl all your links and generate your routes based on those links. Therefore you do not need to do anything in order for your dynamic routes to be crawled.
I guess it only works on static pages and partly on dynamic routes (?). Since I used a nested directory structure I had to modify the route path before manually.
generate: {
fallback: true,
async routes() {
let routes
const contentRoutes = await _getContentRoutes()
async function _getContentRoutes() {
const { $content } = require('#nuxt/content')
const files = await $content({ deep: true }).only(['path']).fetch()
return files.map((file) => file.path.replace('/articles/', ''))
}
return routes
},
},
In this example I have some markdown files in content/articles/SOMEARTICLE.md so I had to remove the '/article' from the path. Otherwise nuxt throws an error when generating the routes.

Error while implementing Geojson in React Native

I am trying to implement a Geojson layer on a map in React-Native.
Development environment:
react-native-maps: 0.24.2,
expo: 33.0.0
I have tried the following three methods without success:
Overlay
Polygon and icon (using image)
Geojson
I feel Geojson is the simplest and direct method of implementing this layer on a map (Apple Maps for iOS and Google Maps for Android). Geojson method is unfortunately not working.
I don't know how to create a codesandbox for React Native but you will find my code snippet below.
displayLightPollutionLayer() {
const features = {
"type": "FeatureCollection",
"name": "artificialNightSkyBrightness_example",
"crs": {
"type": "name",
"properties":
{
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"features": [
{
"type": "Feature",
"properties":
{
"Name": null,
"description": null,
"drawOrder": 15,
"icon": "https:\/\/nightskybrightness.s3.eu-west-3.amazonaws.com\/ArtificialSkyBrightness537.JPG"
},
"geometry":
{
"type": "Polygon",
"coordinates": [
[
[4.2499263, 50.937513844500003],
[4.2499263, 42.404183924500003],
[-4.12507035, 42.404183924500003],
[-4.12507035, 50.937513844500003],
[4.2499263, 50.937513844500003]
]
]
}
}
]
}
return (
<Geojson geojson={features}/>
)
}
Error:
Invariant Violation: Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of LightPollutionAtlas.
Expected result:
The images should be positioned all over the map at predefined coordinates and should be zoomable.
Geojson is a component of 'react-native-geojson' module. So you need to import that module, add this line on top of your class.
import Geojson from 'react-native-geojson';
Also "if haven't already", run npm install react-native-geojson, Inside your project folder.
Also as I have noticed (maybe I am wrong) Geojson doesn't support Images directly so, one thing that you can try is to add this code in return of displayLightPollutionLayer function:
return (
<Geojson geojson={features}>
<Image source="https:\/\/nightskybrightness.s3.eu-west-3.amazonaws.com\/ArtificialSkyBrightness537.JPG" style = {{flex:1}}/>
</Geojson>
)
Here is how I solved my problem. As of today in react-native-maps v0.24.2, Geojson doesn't render images. As per my understanding, Geojson component in react-native-maps renders only points, polygons and polylines. I thus switched to Overlay component to position images at predefined coordinates on the map (Apple Maps for iOS). I haven't tested the solution yet for Google Maps on Android but I believe it should work fine.
I have separated the code into two components :
1. Creation of Overlays.
2. Creation of Map View that incorporates the above overlays.
class PollutionOverlay extends React.Component {
constructor(props) {
super(props)
}
render() {
return(
<View>
<Overlay
image={{ uri: 'valid URI'}}
bounds={[[50.9375138445,-4.12507035],[42.4041839245,4.2499263]]}
/>
<Overlay
image={{ uri: 'valid URI`enter code here`'}}
bounds={[[50.9375138445,4.2499263],[42.4041839245,12.62492295]]}
/>
</View>
)
}
}
export default PollutionOverlay;
-------------------------------------
import PollutionOverlay from 'valid path';
class LightPollutionAtlas extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
<MapView
style={styles.mapStyle}
maxZoomLevel={9}
>
<PollutionOverlay />
</MapView>
)
}
}
const styles = StyleSheet.create({
mapStyle: {
flex: 1
}
});
export default LightPollutionAtlas;
Update your displayLightPollutionLayer function as follows, to draw the polygon,
displayLightPollutionLayer(markers) {
const features = {
"type": "FeatureCollection",
"name": "artificialNightSkyBrightness_example",
"crs": { "type": "name", "properties": { "name":
"urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{
"type": "Feature",
"properties": {
"Name": null,
"description": null,
"drawOrder": 15,
"icon": "https:\/\/nightskybrightness.s3.eu-west- 3.amazonaws.com\/ArtificialSkyBrightness537.JPG"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[ 4.2499263, 50.937513844500003 ],
[ 4.2499263, 42.404183924500003 ],
[ -4.12507035, 42.404183924500003 ],
[ -4.12507035, 50.937513844500003 ],
[ 4.2499263, 50.937513844500003 ]
]
]
}
}
]
}
return (<Polygon
coordinates={this.getCoordinates(features)}
title={marker.title}
description={marker.description}
/>);
}
getCoordinates(features) {
let updatedFeatures = features.features[0].geometry.coordinates.map((coordinate) => {latitude: coordinate[0], longitude: coordinate[1]});
return updatedFeatures;
}
render() {
return (
<MapView
region={this.state.region}
onRegionChange={this.onRegionChange}
>
{this.displayLightPollutionPolygonLayer()}
</MapView>
)
}
I have updated the logic, please add all necessary validations to avoid unwanted crashes.

nuxtjs issue with IE11 compatibility_ object assign

I am suffered by IE compatibility. (my vue version is 3.1.0, nuxt is 2.3.4)
It keeps error with Object.assign. Here is the list what I have tried.
babel-preset-vue-app(https://www.npmjs.com/package/babel-preset-vue-app). Heard that it does not support vue2.X. I followed the description on this post. It gets an error while building source.
Adding babel-polyfill in nuxt.config.js. It does not error, but still I got Object.assign error on the page.
Install babel/plugin-transform-object-assign. It also does not make any error in build process, but got Object assign thing in the page.
Is there any option I can try to feet IE11 compatibility?
Here is my current .babelrc and nuxt.config.js.
.babelrc
{
"presets": [
[
"env",
{
"modules": false
}
],
[ "vue-app",
{
"useBuiltIns": true,
"targets": {
"ie": 9,
"uglify": true
}
}
]
],
"plugins": [
"#babel/plugin-transform-object-assign",
"transform-vue-jsx",
[
"module-resolver",
{
"root": [
"./src"
],
"alias": {
"~sbdc": "./src/sbdc"
}
}
]
]
}
build option in nuxt.config.js
build: {
babel: {
presets: [
['vue-app', {
useBuiltIns: true,
targets: { ie: 9, uglify: true }
}
]
]
},
optimization: {
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 0,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/](babel-polyfill|moment|lodash|axios|get-size|jquery|js-cookie|jwt-decode|numeral|vuetify)[\\/]/,
name: 'utilityVendor'
}
}
}
},
output: {
publicPath: serviceConfig.pwa_publicPath || false
},
extractCSS: true,
plugins: [
new webpack.ProvidePlugin( {
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
} )
]
}
Thanks for sharing you solutions!
======= Edited in 0114 =============
Etra information #1.
When I look at the error on ie11 browser, it automatically transform code like below
return {layout:"popup",data:[{resultBody:Object.assign(Object.create(null), ... sorry, sensitive data
while the original code is...
asyncData: async function ({req}) {
return {
resultBody: req.body,
};
},
req.body is supported by body-parser.
After hours of struggling, I solved this with not good way(In my thought).
I just add object-assign polyfill js to nuxt.js
module.exports = {
...
head: {
script: [ { src: '/js/object-assign.js' } ]
},
...
};
But I still want to know the proper way to apply babel-polyfill into nuxt project.

Angular2 - Nebular theme API endpoints

I am developing application under Angular2 and I choose Nebular frontend - https://akveo.github.io/nebular/#/home
Documentation is not really detailed for me and I am not expert in Angular2.
I am struggling in part - API endpoints https://akveo.github.io/nebular/#/docs/auth/configuring-a-provider
Where I can save the API basepoint? In which file or part of file?
Affected code:
{
baseEndpoint: 'http://...
...
My code (core.module.js):
import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '#angular/core';
import { CommonModule } from '#angular/common';
import { NbEmailPassAuthProvider, NbAuthModule } from '#nebular/auth';
import { throwIfAlreadyLoaded } from './module-import-guard';
import { DataModule } from './data/data.module';
import { AnalyticsService } from './utils/analytics.service';
import { environment } from './../../environments/environment';
const NB_CORE_PROVIDERS = [
...DataModule.forRoot().providers,
...NbAuthModule.forRoot({
providers: {
email: {
service: NbEmailPassAuthProvider,
config: {
delay: 3000,
login: {
rememberMe: true,
},
},
},
},
forms: {
validation: {
password: {
required: true,
minLength: 6,
maxLength: 255,
},
email: {
required: true,
}
}
}
}).providers,
AnalyticsService
];
#NgModule({
imports: [
CommonModule,
],
exports: [
NbAuthModule,
],
declarations: [],
})
export class CoreModule {
constructor(#Optional() #SkipSelf() parentModule: CoreModule) {
throwIfAlreadyLoaded(parentModule, 'CoreModule');
}
static forRoot(): ModuleWithProviders {
return <ModuleWithProviders>{
ngModule: CoreModule,
providers: [
...NB_CORE_PROVIDERS,
],
};
}
}
I'm trying to put it to work and i'm at the same part of the manual.
As i could understand, the baseEndpoint: 'http://... thing and others configuration goes on the authentication provider config variable. Looks like it's of the type NgEmailPassAuthProviderConfig (defined on #nebular/auth/providers/email-pass-auth.options).
#NgModule({
imports: [
// ...
NbAuthModule.forRoot({
providers: {
email: {
service: NbEmailPassAuthProvider,
config: {
baseEndpoint: 'http://localhost:8080', // <-- here
login: {
rememberMe: true,
},
},
},
},
}),
],
});
I already managed to put it to call a api method on a Spring rest API. I can see the HttpResponse on browser with status: 200 but still getting "Oh snap!
Something went wrong." message on the NbLoginComponent.
In order to create the api correctly follow these steps
1) implement this on your localhost :
2) add this code to core.module.ts
strategies: [
NbPasswordAuthStrategy.setup({
name: 'email',
login: {
requireValidToken: false,
},
baseEndpoint: 'http://localhost:4400/api/auth/',
logout: {
redirect: {
success: '/auth/login',
failure: '/auth/login',
},
},
requestPass: {
redirect: {
success: '/auth/reset-password',
},
},
resetPass: {
redirect: {
success: '/auth/login',
},
},
errors: {
key: 'data.errors',
},
}),
],
I propose to create a proxy proxy.conf.json in the root of the project with content
{
   "/api/*": {
     "target": "http://localhost",
     "secure": false,
     "logLevel": "debug"
   }
}
then start the angular application with the command
$ ng serve --port 8097 --proxy-config proxy.conf.json
remember the * 8097 * port you mentioned in the ng serve command
to finish adding your base url as follows:
{
baseEndpoint: '/api/',
...
for more information about proxy config refer you to https://morioh.com/p/07bddb33e3ab
I hope this help