React Native navigator.geolocation is undefined - react-native

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

Related

App getting Crashed while installing it for the first time in React Native

ERROR TypeError: Restricted in strict mode, js engine: hermes is getting thrown when trying to import Axios for network request in react native application. The error gets removed when i'm trying to remove the import statement from the below code.
api.js
import axios from "axios";
export default axios.create({
baseURL:"https://.com/v3/test",
headers:{
Authorization:'Bearer fsdfsfsd'
}
});
Try to downgrade the axios version.
yarn remove axios
yarn add axios#0.27.2
If it is not getting listed from node modules when trying to import Axios, import the package as follows:
const axios = require('axios')

React Native AsyncStorage Functions is not defined

I am using AsyncStorage to store data in local storage of the device. but when I am using AsyncStorage.setItem or AsyncStorage.getItem, it gives an error that
_reactNative.default.getItem is not a function. (In '_reactNative.default.getItem('itemName'),'_reactNative.default.getItem' is undefined)
I have used import AsyncStorage from "react-native";
You need to change your import statement to import { AsyncStorage } from 'react-native
However, as the React Native docs for AsyncStorage suggest, you should be using #react-native-community/async-storage.

ReactNative TabBarIOS Undefined

Hell, I'm trying to create a tab bar in my react native app, but after importing it, it appears it's always undefined. Has this component been deprecated? I still see it listed in the docs. https://facebook.github.io/react-native/docs/tabbarios.html
import React, { Component } from 'react';
import {
TabBarIOS
} from 'react-native';
export default class App extends Component {
render() {
return (
<TabBarIOS/>
);
}
}
I'm using react-native 0.59.3
Looks like this has been removed as part of a core cleanup effort. There doesn't appear to be any native alternative that also behaves correctly on tvos.
https://github.com/facebook/react-native/commit/02697291ff41ddfac5b85d886e9cafa0261c8b98
I've gone ahead and extracted TabBarIOS out into a native module for anyone looking for this.
https://github.com/modavi/NativeIOS
install instructions:
npm install git+https://github.com/modavi/NativeIOS#master
react-native link native-ios

how to use Mapbox-gl-geocoder in ionic

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';

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.