I would like to know how to import vector icon I've created or from directory in pc by using react native?
I believe that you're trying to use custom font icons. I've built a library to make it easy.
https://github.com/WrathChaos/react-native-custom-icon
Usage:
import MyIcon from "react-native-custom-icon";
import IcomoonConfig from "./assets/icomoon/selection.json";
<MyIcon name="fireworks" color="red" size={50} config={IcomoonConfig} />
You need to install react-native-vector-icons. It's a must dependency. You can put your svg icons to https://icomoon.io/ and get your .ttf font icons from there. It comes with selection.json and icomoon.ttf files. All you need to do is; put these files on your project and look at the above usage example.
If you cannot make it, I wrote a Step By Step Guide
Related
I want to add Dots in my react native Line Chart component.
I have installed react-native-svg and react-native-svg-charts.
I need to import Dots, Line, Gradient from '#/screens/AreaChartScreen/chartAdds' but the import statement does not work.
Probably are your babel and jsonconfig configurations that are wrong; the configuration is more tricky than with next/react.
I saw this video and may help you.
https://youtu.be/03F0xzI9VnU :)
I'm creating a vue native app but the input text looks like an input text on HTML. I thought vue-native would create a native input with native styles per device.
Do I forget something?
I found https://nativebase.io/ which seems to be the solution I need. Since I'm new on this native apps, is this library the way to implement native styles per device?
While react-native renders native views, it doesn't take native (platform and os-version-specific) styles to apply to them. These would look different on each platform and version of the device, and also be impossible to style from react-native. There are some components that look like native ones (e.g. Button, Switch) but they are also styled from react-native so that you can override any styles you want
So yes, the only way to make react-native views look like native ones is to style them accordingly, and that's what libraries like nativebase do
I'm trying to use font-awesome icons in a react native app, therefore I installed it and imported it using react-native-vector-icons :
import Icon from "react-native-vector-icons/FontAwesome";
.....
<Icon name="map-pin" />
however I don't know where to find the name of the icons, I browsed in the font awesome web site, found some icons, but when I tried to use them, it doesn't work for example in their website this icon's name is abacus, however, when I use it in my app, I get a warning and the icon doesn't display.
You can get the icon names from here https://expo.github.io/vector-icons/
You can use https://oblador.github.io/react-native-vector-icons/ to find the icon names. It has all the icons in the react-native-vector-icons library.
As you said, you can get the names from the official FontAwesome Webiste, but you need to be careful. There are regular icons and pro icons. The pro icons are marked with a small blue banner on the right top. By default, only the free/regular icons are available in the react-native-vector-icons package.
Regular Icon:
Pro Icon
As you can see, the abacus icon is a pro icon and therefore not available in the free tier.
<Drawer some_styles>
<View >
<Hamburger active={this.state.menuActive}
onPress={this._handleMenuButtonPress}/>
</View>
</Drawer>
I have to use .svg image as icon of hamburger instead of predefined icon.How to set our own image to hamburger. Thanks in advance.
I have used this article to help me include custom icons. I will briefly summarise the steps:
Install react-native-vector-icons, this is a library which allows you to add custom icons alongside their standard built-in icons (which are already great btw).
Convert your SVG icon(s) to a font (.tff file), Fontello or Icomoon are online tools supported by rn-vector-icons which allow you to do just that
Add that font to your project
Create a small config file where you tell rn-vector-icons which font needs to be linked
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