I'm making my first react native project, and I've used the create-react-native-app command to get everything set up. However, when I try to get an image to show up in Expo, it gives me an error message that it can't find the png file. I currently have the file under './img/record_video.png' (it's just an icon I'm going to use as a button).
Here's my project layout and the code I'm using to call it
That is, I'm using <Image source={require('./img/record_video.png')} /> in order to call that file.
This is the error message I receive on my phone from the Expo app In short it says undefined Unable to resolve module './img/record_video.png' from C:\Users\ddude\Desktop\AwesomeProject\App.js':The module './img/record_video.png' could not be found from 'C:\Users\ddude\Desktop\AwesomeProject\App.js'. Indeed, none of these files exist:
*'record_video.png'
*'C:\Users\ddude\Desktop\AwesomeProject\img\record_video.png\index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json)'
I'm not sure if it's that I'm using Expo and that it's not exporting to the phone properly, or if it needs to be in a specially-named folder. Any help would be appreciated, thanks!
remove the underscore & rename image assets to record-video.png, record-voice.png and convert-to-text.png. Restart the package manager and try.
Just another observation I do not see an image record_audio.png in img folder
as required in second line.
Hopefully it helps.
Related
I have spent all day on this, so if there's an answer, I cannot find it.
Task: use react-native-sqlite-storage to open a pre-populated database in a Windows React Native program.
Problem: No matter where I put the file, the program can't find it.
I am currently using openDatabase('test.db', location: 'default', createFromLocation: 1) as my call. This works fine on Android.
From looking at the repo (line 533), I can see that it needs to end up at "ms-appx:///www/", but how on earth do I get it there???
I am currently using VSCode, in case that has anything to do with it.
I'm implementing a react native app (with expo, I don't know if this can be relevant). In this app I'm sending an ajax request to an external service and that service returns a list of URLs related to images in svg format that I need to show in my app.
To show the images I'm using react-native-svg library (I've tried with Svg/Image and with SvgUri). Generally it work properly, but there is some SVG that break my app, because it includes a font-family not supported by my react-native project and the iOS simulator is showing me the error: Unrecognized font family '<FONT-FAMILY-NAME>'.
I've already checked several post on stackoverflow and they all suggest to add the specific font-family to the project, but this solution will not fix my issue in log term as in future I can receive a new SVG file with a different font that will break again my app. I obviously have absolutely no control on the SVG provided by the external service. So, what I'm interested to know is:
Is there any way to add dynamically a font-family to react-native project? For dynamically I mean that the app will add the font to its list when it's required by the SVG file
By using Svg/Image (or with SvgUri) is there any way I can overwrite the font to avoid it to break the app?
Thanks in advance for your answers.
I want to change my default icon's app to another one and generate my standalone app (with expobuild:android)
But when I add another image(capture) in my assets folder and replace it in app.js,it gives me an error:
{
"expo": {
"icon": "./assets/capture.png",
}}
I tried many time with and without default icon (I have error just with new image) so i'm sure that error came from the change of icons.
Do you have any idea ;
if you are using a CRNA solution, there is an easy way you can do it. Just go into the /assets folder and just paste there your new icon, then rename it to icon.png, just make sure you already removed the default one. It also works with the splash screen.
But if you created your project with create-react-native-app, you need to do it separatly in Android studio for Android and Xcode for iOS. See more with this link wich helped me too.
https://aboutreact.com/react-native-change-app-icon/
Hope it's gonna help ... Regards
I used this this repo and cloned it, then run one line command to resize the png to all the different formats.
bash resize.sh my-cool-new-app-logo.png
Then drag the folder over and merge/replace icons.
quick insight
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
I am trying to display a static image(ic_launcher) in my android app using react native. I am getting a black response. No errors. Just a blank view as though the resource doesn't exist.I am able to display images from the network.
Your ic_launcher files are probably placed in android/app/src/main/res/mipmap-xxx directories. Try to move it to android/app/src/main/res/drawable-xxx directories.
\android
|----\app
|----|---\src
|----|---|----\main
|----|---|----|---\res
|----|---|----|---|---\drawable
|----|---|----|---|---|---\ic_launcher.png
You should use require('image!img_name') as a source attribute of Image component.
See example app here https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ImageExample.js#L84 with it's resource placed under https://github.com/facebook/react-native/tree/master/Examples/UIExplorer/android/app/src/main/res/drawable