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.
Related
I'm trying to use Sentry.captureException in my React Native app, but it's not working properly.
I'm receiving the eventId, but there is no issues on Sentry website.
Here is the code:
const eventId = Sentry.captureException(new Error("Testing"));
console.log(eventId); /// ccfa8f3799524c8ea9e138fb792******
PS. Native errors are working fine, if I try throw('Testing') it works.
PS. Android only, iOS is working fine
RN: 0.63.3
#sentry/react-native: 2.0.0
You can use it like this:
Sentry.captureEvent({
event_id: <error_id>,
message: <message>,
extra: <data_in_json>,
});
I have a problem with an App im Developping with Expo - React Native. The problem is that, having only one small value stored in AsyncStorage, its takes around 25 seconds to load. There are the details:
Expo: Version 33
Ract Native (comes with Expo): 0.59.8
My stored values: {keyOne: "ValueOne"}
This is only an example for testing, obviously in the actual app i have more values. The code i am using for testing, inside App.js is:
async componentDidMount(){
console.log("Storing value...");
await AsyncStorage.setItem("keyOne", "valueOne");
console.log("Value stored");
var value1 = await AsyncStorage.getItem("keyOne");
console.log("Obtained value: "+value1);
}
With this code, the 25 seconds are spend storing the item.
I'm facing this problem specifically in Samsung Phones, for example a Galaxy S7 SM-g930F. This happens when developing and in production app.
Also, if I store more values, the first that i obtain is the one slow, the rest are very fast.
Another detail is that, if i make the same test with SecureStore, is very fast.
Can i do something to speed things up?
Some alternative to AsyncStorage?
Make sure to do following.
Upgrade react-native version to 0.59.5 +
Don't import {AsyncStorage} from react-native (as it is deprecated now)
Use this package instead Async Storage
Import like this import AsyncStorage from '#react-native-community/async-storage';
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
I tried react native code push and it works flawlessly. Let's say I modify the text in my buttons to say something else, then with a single command, the update is sent to the users.
Now, lets say I am using a new npm library which requires some native code. Say react-native-image-picker (https://github.com/react-community/react-native-image-picker). Can code push handles this? I want the image picker functionality to be updated too in my users app. Thank you.
No - CodePush can only update JavaScript code and images.
CodePush does not update native code at all so any changes to native code require a full app build and deploy via the relevant app store or app distribution tool (e.g. HockeyApp).
Note: There are some limitations around images - full details here.
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