Following the document, I am including a toast in my projects:
import {ToastAndroid} from react-native
ToastAndroid.showWithGravity('A toast with gravity',ToastAndroid.SHORT,ToastAndroid.TOP);
But I got an error:
However, if I replace it with another function, it works:
ToastAndroid.show('A toast without gravity',ToastAndroid.SHORT);
I am using React Native 0.30.0
Is it a bug or I made the wrong way to use it.
ToastAndroid.showWithGravity(...) was implemented in ReactNative 0.31.0, upgrade your RN version.
First implemented here: v0.31.0-stable branch.
Related
I am currently updating the version of my application, and I have a function that is used that no longer exists, I tried several things according to the documentation
but I get either an "Invalid Hook Call" error or something else...
The problem without the withNavigationFocus function is that when the screen is rendered, the data is not displayed. I have to press Cmd+S to refresh and have the data on the screen. Knowing that the props are linked to Redux.
This is the line that causes the problem:
export default withNavigationFocus(connect(mapStateToProps, mapDispatchToProps)(Home));
I can't find an alternative so far, does anyone have an idea?
Upgrade doc link here
You can install a backward compatibility package and you can continue to use HOCs withNavigation and withNavigationFocus.
Inpm install #react-navigation/native#^5.x #react-navigation/compat#^5.x #react-navigation/stack#^5.x
It was designed with React Navigation 5. I didn't test with version 6
It is warning today my React Native got updated to 0.62 before i was not getting any of this warning.
Calling getNode() on the ref of an Animated component is no longer necessary. You can now directly use the ref instead. This method will be removed in a future release. React Native Fiber Host Component
in SafeView (at withOrientation.js:54)
If you are using ref.getNode() in your code, remove .getNode() part. If not then the warning is coming from one of the libraries that are not yet updated for react-native 0.62. Give it some time and then update your libraries. In the meantime you can safely disable this warning with console.ignoredYellowBox = ['Calling getNode()'] statement somewhere in your App.js
I am using bugsnag in react native to track bugs and I want fallback to custom component when error occurs. For React fall back component mentioned in docs. But in react native I didn't find. How to use this. Help me out
You're best contacting Bugsnag support directly to get a quick response to queries about the product.
Bugsnag doesn't yet support error boundaries in React Native like we do for React but we plan to in the near future. We're also about to start officially supporting Expo as a platform and will be supporting error boundaries on that.
Thanks!
If I add a package that requires changes in the native code, like MainActivity for android, is it still possible to use codepush to update the app?
I don't think that's possible, since code-push runtime on the device can only replace the javascript part and not the native parts.
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