how to use Mapbox-gl-geocoder in ionic - ionic4

I want to use geocoding in ionic-4 using mapbox.
import { MapboxGeocoder } from '#mapbox/mapbox-gl-geocoder';
But I have the error:
Cannot find module '#mapbox/mapbox-gl-geocoder'
How to import MapboxGeocoder in ionic.

Try this:
import * as MapboxGeocoder from '#mapbox/mapbox-gl-geocoder';

Related

Undefined when import methods from '#videosdk.live/react-native-sdk'

For my RN project, I use '#videosdk.live/react-native-sdk'.When I try to import a method from the library I get undefined. I can't figure out what's going on. I did everything according to the instruction and set it up correctly.
The problem is not even in the setup, but I installed the package '#videosdk.live/react-native-sdk', but I can't import methods from it.
import VideoSdk from '#videosdk.live/react-native-sdk'; I used this import but got undefined
You can't import VideoSdk. You need to import some other components like:
import {
MeetingProvider,
useMeeting,
useParticipant,
MediaStream,
RTCView,
} from "#videosdk.live/react-native-sdk";

React Native, need to conditionally import a library because get an exception in ExpoGo

I'm implementing In-App-Purchases in Expo, using RevenueCat.
Everything works fine in a build environment but in ExpoGo I get an exception if I import this library:
import Purchases, { PurchasesOffering } from 'react-native-purchases';
In my code I can detect when running in ExpoGo, so I would like to import this library only and if only running in NOT ExpoGo environment.
I tried this but is not working.
import { IsExpoGo, RevenueCatAPIKeys } from "./lib/constants";
if(!IsExpoGo){
import Purchases, { PurchasesOffering } from 'react-native-purchases';
}
Any clue?
can try something like this
const MODULE_NAME = !IsExpoGo ? require("react-native-purchases") : require("./lib/constants);
also take some help below link
https://reactnative.dev/docs/platform-specific-code#native-specific-extensions-ie-sharing-code-with-nodejs-and-web

React Native navigator.geolocation is undefined

I am trying to use:
navigator.geolocation.getCurrentPosition
but when I evaluate navigator.geolocation, I get:
navigator.geolocation is undefined
In your scenario since React Native version 0.60 the Geolocation module was migrated out of React Native Core. For more information follow docs
Migrating from the core react-native module
OLD :
navigator.geolocation.setRNConfiguration(config);
UPDATED :
import Geolocation from '#react-native-community/geolocation';
Geolocation.setRNConfiguration(config);
For your problem use like this:
import Geolocation from '#react-native-community/geolocation';
Geolocation.getCurrentPosition(info => console.log(info));
You have to import Geolocation as a separate module after installing it:
import Geolocation from '#react-native-community/geolocation';
const locationConfig = {skipPermissionRequests:false,authorizationLevel:"whenInUse"}
Geolocation.setRNConfiguration(locationConfig);
Then you call Geolocation.getCurrentPosition

How to import anime.js to my Vue project?

I have a question regarding importing an anime.js into my vue project. I am using vue cli. How do I include animejs to my project? I tried it this way:
import anime from 'animejs'
Vue.use(anime);
but I get an error in the console that says:
Uncaught TypeError: a.hasOwnProperty is not a function. . .
can you guys help me?
Vue.use() is used only for plugins designed for Vue.js. You can't simply add a library there, it won't work.
My suggestion is that you create that plugin and use it on your project to make anime.js acessible everywhere.
You could do it like this:
//vue-anime.js
import anime from 'animejs';
const VueAnime = {
install (Vue, options) {
Vue.prototype.$animeJS = anime;
}
}
export default VueAnime
Then later
import VueAnime from './vue-anime';
Vue.use(VueAnime);
Now every Vue component will be able to use anime acessing this.$animeJS.
Or simply -
import Vue from "vue";
import anime from 'animejs/lib/anime.min.js';
Vue.prototype.$anime = anime;
Then this.$anime in all components
#Phiter's answer looked good at first, but I wasn't able to get it to work in my vue-cli 3 environment. The below code worked though, so I think it may work for you. This is just a simple way to install an external library into your Vue app and expose it through a prototype:
// animejs.js
import anime from 'animejs'
const install = (Vue, options) => {
Vue.prototype.$animejs = anime
}
export default install
// Then, in your main.js (at least for me)
import VueAnime from './animejs'
Vue.use(VueAnime)
Now, when you need to access the library, just use this.$animejs in your project.
or simply like this in main.js after npm install:
import anime from 'animejs';
Object.defineProperty(Vue.prototype, '$anime', { value: anime });
then use this.$anime tu use it.
To use AnimeJS globally in Vue 3 project, just create a plugin (plugins/anime.js):
import anime from 'animejs';
export default {
install(app, options) {
app.config.globalProperties.$anime = anime;
},
};
Then include it (main.js or elsewhere):
import VueAnime from './plugins/anime';
createApp(App)
.use(VueAnime)
.mount('#app');
And now, it's accessible everywhere by this.$anime.
Please notice that a minor change from the previous version is installing the plugin for Vue 3.

Error in implementing custom native module for react native Android

I am trying to develop native module in android for react native.
Exactly followed the link at
https://facebook.github.io/react-native/docs/native-modules-android.html#content
but it is giving me error
/ReactNativeJS: undefined is not an object (evaluating '_ToastAndroid2.default.show')
I have implemented ToastAndroid.js
'use strict';
/**
* This exposes the native ToastAndroid module as a JS module. This has a
* function 'show' which takes the following parameters:
*
* 1. String message: A string with the text to toast
* 2. int duration: The duration of the toast. May be ToastAndroid.SHORT or
* ToastAndroid.LONG
*/
import { NativeModules } from 'react-native';
module.exports = NativeModules.ToastAndroid;
and then in other Jsfiles tried to import using
import ToastAndroid from './ToastAndroid';
change the name of Module "ToastAndroid" because ToastAndroid module is already in react-native package.
You are importing wrong. module.exports as the name implies exports your module to one of many exports that the file ToastAndroid.js can have. It's called a named export.
The correct import will therefore be import {ToastAndroid} from './ToastAndroid';
If you want to use import ToastAndroid from './ToastAndroid';
You should write export default NativeModules.ToastAndroid;
See this related answer for more information.