Issue Description::
I am working on react native tracking application. Basically users check in from a certain place and they need to reach at the destination. Using this application we are finding out the path they are following. I need to get a geocodes from users check in location to destination to track the path he is following.
Now it builds a clean path in case of Android device, but having an issue with ios. For ios it takes a huge variation inside code.
I have tested this by traveling to same place using both devices(ios and android). For Android it's generates a exact latitude longitude values, but for ios there is a huge variation. Why this is happening. I have followed the official doc of react native for geolocation setup.
You can check this link:: https://facebook.github.io/react-native/docs/geolocation.html#ios
We are using react native geolocation service package, GitHub link
This is happening when I have updated react native version to 0.58
Code::
this.watchId = Geolocation.watchPosition((response) => {
this.currentWatchLocationTimeout = this.currentWatchLocationTimeout + WATCH_LOCATION_TIMEOUT;
currentPosition.lat = this.convertToDecimalPoints(response.coords.latitude);
currentPosition.lng = this.convertToDecimalPoints(response.coords.longitude);
//... additional code
}, (error) => {
this.onGeolocationErrorOccurCallback(error);
}, {
enableHighAccuracy: true,
distanceFilter: 5,
showLocationDialog: true
});
Additional Information ::
React Native: 0.58
react-native-geolocation-service: 2.0.0
platform: ios(only)
Best solution that works for me is changes inside react native geolocation files. You need to replace some lines of code. Go inside react native package,
react-native/Libraries/Geolocation/RCTLocationObserver.m
Then replace this line::
#define RCT_DEFAULT_LOCATION_ACCURACY kCLLocationAccuracyHundredMeters
with this::
#define RCT_DEFAULT_LOCATION_ACCURACY 0.0
After this replace this line::
.accuracy = [RCTConvert BOOL:options[#"enableHighAccuracy"]] ? kCLLocationAccuracyBest : RCT_DEFAULT_LOCATION_ACCURACY,
with this one::
.accuracy = RCT_DEFAULT_LOCATION_ACCURACY,
You need to directly search for these lines on above mentioned path.
I found this inside git commits, you can also check this link:: link
Related
I am developing simple grid location based application in React Native using Uber H3. I installed H3 by
npm install h3-js. Then
I created a file to read H3Index from latitude and longitude.
import {geoToH3} from 'h3-js';
const getH3Index = () => {
const result = geoToH3(37.3615593, -122.0553238, 7);
console.log(result);
};
When I start to run my React Native application, app hangs on white screen(splash screen) and blocks the whole application. If I comment these lines, app works fine. If uncomment this line, both iOS and Android app is not working.
Any help would be much appreciated!
Please see https://github.com/uber/h3-js/issues/35
This is likely due to a document is not defined error. See the issue thread for several possible workarounds, including this fork which is intended for React Native.
How can i get the list of system ringtones or storage ringtones/sounds in react native e.g ring tones, notification tones, so that i can give users choice to set them as notification tone?
I've searched some libraries but it didn't work
You can use this module if you are using Android. react-native-ringtone-manager
But it only use Android not ios
Usage
import RingtoneManager from 'react-native-ringtone-manager';
...
getRings() {
this.rings = RingtoneManager.getRingtones(RingtoneManager.TYPE_ALL);
if(this.rings != null) {this.rings = this.rings.map((data,index) =>{<Text>{data.title}</Text>})};
}
For iOS I tried react-native-notification-sounds npm pacakge .. But it gives all the sounds from the sound folder .. So you get a long list of sounds and no way to filter which is notification or ringtone sound.. Working on this
I have a use case in which the user should be able to click on a slider that has its data served from server.
The data contains some information that would be used to:
Open another view and initialize it with some parameters.
Open external app(s) and send data to it.
Can I use the Linking api in react to make it navigate internally within the app or is that reserved only for react navigation? My intuition is to use something like this:
Linking.canOpenURL(retrievedDate).then(supported => {
if (!supported) {
// use react navigation
} else {
Linking.openURL(retrievedData);
}
}).catch(err => console.error('An error occurred', err));
But I'm not sure if that's going to be the best practice/most generic one?
Your suggestions are highly appreciated.
Linking means you are online and running a web application.
React-Native is for developing (with React type coding) MOBILE apps. A mobile app is not running in a browser and its pages are not linked to URLs. So you should be using the navigation, which creates a certain UI for Android devices and a different UI for IOS (Apple) devices, and allows the user (and/or the programmer) to "navigate" between the "screens".
If for some obscure reason you are developing a web app with React-Native, you can of course use the linking api. https://facebook.github.io/react-native/docs/linking
Right to the point:
I'm using Expo XDE with react-native to build a cross-platform mobile app.
I want to save and retrieve a couple of variables using AsyncStorage ("localstorage" alternative in react-native).
After adding the pieces of code to store and retrieve,
Expo XDE is showing the following error when building the JavaScript bundle: "await is a reserved word"
According to the documentation (https://facebook.github.io/react-native/docs/asyncstorage.html), I got to use "await" when accessing AsyncStorage.
Any ideas? Is it a problem related to Expo XDE only?
Thanks!!
To use await, your function including const username = await AsyncStorage.getItem(); needs to be async.
You can do like this :
async myfunction() {
...
const username = await AsyncStorage.getItem();
...
}
I am using react-native-camera to build a barcode scanner for Android and iOS both.
I am able to scan the barcode in iOS but the issue is there is no visual for the scanning boundary. And I want the whole screen to be able to scan the bar code not just the middle of the screen.
Is there any way around it?
If there is some other library that would also work for me.
Well it took me all day but I finally found a library that worked. If anyone finds their way here and is looking for a barcode scanner for react native that works on android...I am here to help.
https://github.com/ideacreation/react-native-barcodescanner
1st if you do not have rnpm get it...it is very helpful!(npm install -g rnpm)(https://github.com/rnpm/rnpm)
then run these commands in your project file:
npm install --save react-native-barcodescanner
rnpm link react-native-barcodescanner
at this point I synced gradle and reran the app from android studios...not sure if it is needed(also sometimes rnpm link forgets a new line character...if you have an error message about the word include it is because this...just find it in your setting.gradle file add a new line before the word include)
now it is ready to use.
import it:
import BarcodeScanner from 'react-native-barcodescanner';
then use it in your render function's return statment:
<BarcodeScanner
onBarCodeRead={this._BarCodeRead}
style={styles.preview}
torchMode='off'
cameraType='back'
/>
If you need more info check out that link. I hope this helped someone avoid the torture I endured going through library after old library that did not work.
Happy coding! :)
I recommend using React Native Community's React Native Camera. It's quite well maintained and you can simply pass a callback prop to receive the output:
<RNCamera onBarCodeRead={this.handleBarCodeRead}></RNCamera>
Your callback will be invoked when a barcode is detected in the camera's view. From the docs:
Event contains data (the data in the barcode) and type (the type of the barcode detected).
There is a react-native library for scanning QR codes with Highlighting scanning area with animated scan bar that moves up and down.
You can use isShowScanBar prop to show scan bar or either disable by passing false to this prop.
Github Link https://github.com/shifeng1993/react-native-qr-scanner#readme
It's npm is also here https://www.npmjs.com/package/react-native-qr-scanner
It's props are listed here https://www.npmjs.com/package/react-native-qr-scanner#qrscanner
Firstly, Install the react-native-camera library as this library is dependent on it.
Just run this command in root directory of your project
npm i react-native-qr-scanner
then run this link command react-native link react-native-camera && react-native-qr-scanner
Import it using :
import {QRscanner} from 'react-native-qr-scanner';
<QRscanner onRead={this.onRead}
cornerBorderColor ='black'
cornerRadius={40}
isRepeatScan = {true}
cornerBorderRadius={40}
cornerColor ='black'
scanBarColor='black'
cornerBorderWidth={10}
cornerBorderLength={60}
hintText="Please Align QRCode"
renderBottomView={this.bottomView} flashMode={this.state.flashMode}
finderY={50}/>
onRead = (res) => {
alert(JSON.stringify(res))
}
It works for both Android and iOS
js.coach is a good place to look for react native plugins
https://github.com/ideacreation/react-native-barcodescanner
https://github.com/leofidjeland/react-native-barcode
Just found universal code scanner - combines android and ios:
https://www.npmjs.com/package/react-native-barcode-scanner-universal
Tried on Android works just fine.
Expo provides BarCodeScanner component out of the box (preinstalled in managed apps).
It works like a charm, I definitely recommend it.
You can see if BarCodeScanner works with your bar code, try it in snack: https://snack.expo.io/#documentation/barcodescanner-example