I'm trying to use react-native-camera#0.4.1 (with react-native#0.39.2) to create a QR code scanner. The relevant essentials of my render() method are:
<Camera
aspect={Camera.constants.Aspect.fill}
onBarCodeRead={(data) => console.log(data)}
barCodeTypes={['qr']}>
</Camera>
Without the barCodeTypes prop, everything works as expected. But once I include it, the view does not render, and I get the following error message:
*** -[AVCaptureMetadataOutput setMetadataObjectTypes:] Unsupported type found
- use -availableMetadataObjectTypes
I'm guessing that I just need to write my ['qr'] argument in some other and correct way, but I'm not able to find any information in the documentation.
Ok, so I found another post on Stack Overflow that helped me figure out the availableMetadataObjectTypes. So to fix my particular problem, I'll just be changing barCodeTypes={['qr']} to barCodeTypes={['org.iso.QRCode']}.
It should be changed to
barCodeTypes={[RNCamera.Constants.BarCodeType.qr]}
Related
i'm trying to display the picture of a shop in a single-shop page after clicking on said shop on the shop-list page.
once i clicked it takes the datas (from phpmyadmin) of that shop only and display the details. the name, adresse, phone number, etc all work but the picture.
i created a colomn image where i stock the url that leads to the picture located in my assets folder of the react folder.
but i tried just with url to see if the Image balise would work... AND IT WORKED :
<View><Image style={{resizeMode : 'cover'}} source= {require('../../../assets/picture1.jepg')} /></View>
so i then tried with an object called pharmaimages (it's basically just the url itself that i stocked in my database with the '' included) but it says invalid. i also tried with the propriety uri but it's even less clear.
<View><Image style={{resizeMode : 'cover'}} source= {require(pharmaimages)} /></View>
in my mind it makes perfect sense but it just doesn't work
Try storing it as require('../../../assets/image.jpeg') in the database. Fetch the data and then once you map it or whatever you do in your app, show it using the following code:
<View>
<Image style={{resizeMode : 'cover'}} source={image} />
</View>
This is one of the common issues, that most of developers got into.
The other answers may also right, But to be more precise I am adding my comments on this Question.
Actually, the require statement will never evaluate value we are passing as parameter, It will directly look for the path we are providing into it, also It is working in same way like we are importing other libraries or Components.
So if we provide dynamic value at run time with require we may fail to see expected behaviour.
Here, I am also attaching some important links which might help you to understand clearly.
Links:
React Native Official Image Doc
Same issue related thread on Stackoverflow
WORKAROUND
To go with workaround for this kind of situation you can directly store your file paths with require function in your data storage.
for ex.
Instead of storing path like '../../../abc/def.png'
Store value as require('../../../abc/def.png')
I am trying to use the react-native-date-picker on my vanilla react native project (no expo). I followed all of the installation instructions, but any time I attempt to render the DatePicker I get the following error...
[Invariant Violation: requireNativeComponent: "RNDatePicker" was not found in the UIManager.]
Now, when I check the documentation, I can see that it looks like I need to declare <RNDateTimePicker mode="date" /> somewhere, but the documentation is so piss poor, I have no idea where to put it in the file or in relation to the date picker object. The documentation through and through is petulantly unhelpful, to say it positively. Does anyone know how to fix this issue, where to put that magic line, or have any idea what DatePickers aren't inherently broken with the documentation skills of a 2nd grader?
I'm building a React-Native app and whenever I run it on my Android emulator, I get this error:
Objects are not valid as a React child (found: object with keys
{$$typeof, type, key, ref, props, _owner, _store}). If you meant to
render a collection of children, use an array instead.
throwOnInvalidObjectType
D:\rn\manager\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:7436:6
Because this error means nothing to me, I decide to enable "Debug JS Remotely" in Chrome to see if I can get an error I understand. But with Debug Remotely enabled, the error goes away.
If I build the project and install the app on a real device, the errors come back.
But I feel like I'm stuck in a catch-22 because if I try to debug, I get no errors, and if I turn off debugging, I get errors.
Is there anyway to get around this?
Thanks!
The error mentions you use an object in your render() method where you shouldn't. Since you did not post any code, here is what you could do:
Keep removing elements from your render() method until you no longer get the error. Once it is gone, start placing code back until you hit the error again. The code causing the error will be or return an object, possibly a typo causing an object to be returned instead of a string for instance.
TL;DR: Stopped using firebase and used react-native-firebase instead
The problem for me wasn't the render method in any of my components or classes. I realized after trying the answer above, I basically removed all my files, and was left with one file. I changed the render method to display text inside one view, but I still got the error.
Then I started removing the modules I was importing inside that file one by one and found that it was the firebase module uninstalled firebase and installed react-native-firebase.
While experimenting with React Native and using States. I came against super(props). I searched here in the forum for a useful explaination, but I didn't find any.
Here is a look on the function, where I am using super and constructor...
1
I tried to delete props parameter in constructor, but it gave me an error. Then I tried to delete super(props), it gave me again an error. However, the code perfectly work, when I just used super() without parameter.
My conclusion is, in constructor i am saying we are using props and with super I am allowing an access over all props globally in code?
I am not really sure, correct me please If I am wrong.
I appreciate any comments with advises. Thanks in advance!
Edit:
I also added the rest of the code...For a clear undestanding..
2
I appreciate your help..
In React Native when using super(props) you can immediately access the props via this.props in the constructor while with only super() you can't.
In other methods like render however you can always utilize this.props.
Here is a complete examples of the explaination above:
https://stackoverflow.com/a/34995257/4293498
I'm try display a image on a component on React-native, but I don't know why this error happens...
Example of code:
render () {
let { convenience } = this.props
return (
<View style={{flexDirection: 'row', height: 50}}>
<Text style={{marginRight: 30}}>{convenience.name}</Text>
<Image source={require('./icons___favorito_ativo.png')} />
</View>
)
}
Printscreen:
I too faced the same error. After a lot of trying, I restarted the packager, and the app picked up the image. So the solution is: Restart the packager.
Hope this helps.
Currently an open issue with React Native: https://github.com/facebook/react-native/issues/6691. Highly annoying - Reloading the app and/or restarting the package manager is, for now, the only solution I currently am aware of.
That happened to me many times with images exported from sketch, it's weird.
I don't know why, but after exporting the same image from photoshop the error disappeared.
I had a spaces in my directory name. To fix it I just used another directory.
Changed
...\Desktop\develop (test)\MyProject...
to
...\Desktop\develop\MyProject...
I know this is going sound pretty weird, but I'm going to add this comment in case anybody else gets here. I created a index.ios.js file by copying a simple example from something online at https://rnplay.org I kept getting "unexpected character" errors. I'm using Atom.io as my script tool. I was thinking perhaps I had an encoding issue with the wrong character set. I've confirmed I'm using UTF-8
So I was using the (left/right) arrow keys on my keyboard, and I notice the cursor would stop moving for two keyboard arrow pushes, right at the location identified in my Emulator Red Screen of Disaster. It was like there were two invisible characters in my code. I played with this for a pretty long time to confirm. I was able to highlight the "hidden" characters and delete them.
After deletion, the new code works great.
Bizarre. Not sure what was there. (Note: I copied the Slider Example Code from https://rnplay.org/apps/5FsfPA and I used a "Select All" and Command-C to do the copying and Command-V to paste... if anybody wants to repeat the experiment)
And yes, I know how silly this sounds. Perhaps others have hit the same issue? The verification test is pretty easy. Start at the location identified by the Red screen error message. Use the keyboard arrow and verify the cursor on your text moves for each key push.
I had similar error but just with android.
And the problem was in ios suffix:
Filename was back-icon#4x.ios.png
Then in code:
export const backButton = require('../../images/back-icon#4x.ios.png');
When I remove the suffix in filename and in code ( to '../../images/back-icon#4x.png') error disappeared.
I had the same problem. The solution that worked for me was to remove "_" on image's filename and finally hot reload your application.