Does Expo have a way to view a PDF and jump to a specific page in said PDF. I've looked into https://www.npmjs.com/package/react-native-pdf but i found it to be incompatible with expo given its use of native React-Native libraries. I've also tried https://github.com/xcarpentier/rn-pdf-reader-js, but there appears to be a couple of issues with it and it doesn't look like the creator updates it anymore.
rn-pdf-reader-js seems to be not working for the expo 38+. You can try this fork instead:
https://github.com/stratoss/rn-pdf-reader-js
Just import it as import PDFReader from '#bildau/rn-pdf-reader' and you are good to go.
"rn-pdf-reader-js": "^4.1.1"
"expo": "^40.0.0"
The library work just fine for me in their latest version the only issue comes around that the base64 contain octet-stream so i replace it with pdf like that:
setBase64(reader.result.replace("octet-stream", "pdf"))
and pass it to the source like that:
<PdfReader
source={{
base64: base64,
}}
/>
I hope this helps you. otherwise, please provide us more details about so we can help.
Related
I would like to create a box to select the date as in the attached photo.
What do you recommend to create something similar in react native with expo?
I tried using MUI's Mobile DatePicker API, but it doesn't work, errors occur.
Update:
I created this box to select the date, but when I go to press it gives me an error.
The error is the following:
https://www.npmjs.com/package/#react-native-community/datetimepicker
Works with Expo. Static version set at 3.x.x (something version 3). So you won't have the full functionality that is described on their docs, but you'll have enough.
expo install #react-native-community/datetimepicker
instead of npm to ensure you get the compatible version.
This library can be a bit difficult to work with. The main suggestion I have for you is to create a custom component on your own that looks like your design. Then wrap it with a TouchableOpacity and onPress set the DateTimePicker to show its modal. Grab the value you need from the onChange result, and pass it to your local state. Dont try anything fancy after that because as I mentioned earlier, the library is difficult to work with and really fights hard against any customization. It works well though and will certainly solve your problem.
I need to read a pdf417 barcode from a taken photo with React Native. I tried react-native-camera, but it only reads barcodes from camera. Have anyone used another library to do this?
Thanks.
If you want to decode barcode from image(if I understood correctly your problem), react-native-camera does not support this feature. A good alternative for this will be Barcode recognition tools in JS. For instance, have a look at this link and demos in it.
Good luck
Does the React Native library "React Native Fast Image" (https://github.com/DylanVann/react-native-fast-image) have any difference in behavior if we use "require()" instead of "{uri:}"?
(I'm confused as "{uri:}" is the only way mentioned in the docs)
They have an issue open which explains how they are planning to go about having local image support, as far as I can tell they have the code merged on master so shouldnt take too long for them to release it.
Github Issue
I searching like crazy to find a package for react native that can work with google calendar, getting event data and display that separately (title, description, etc).
Does anybody know a package for react native?
Cheers,
I ended up using react-native-calendar, but created a code for myself, see the code I used here: https://github.com/wix/react-native-calendars/issues/416#issuecomment-413202491
If you are using Expo, you can try this. https://docs.expo.io/versions/latest/sdk/calendar.html
Expo has createCalendarAsync, getCalendarsAsync, updateCalendarAsync and other apis that work for you. Hope that helps.
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