I want to open Camer by using the below npm package, but it is producing this error.
https://www.npmjs.com/package/react-native-camera-kit
import {CameraScreen} from 'react-native-camera-kit';
<CameraScreen
// Barcode props
scanBarcode={true}
onReadCode={(event) => Alert.alert('QR code found')} // optional
showFrame={true}
laserColor="red"
frameColor="white"
/>
I had the same issue. It's an issue with the import in the package itself. Go to CameraScreen.tsx file either by exploring the node modules folder manually or just Ctrl + Left Click on the class CameraScreen in your code. In there, scroll to top and look at the imports. There will be a red line (depends on your code editor) under the Camera import (as shown in the attached image). Just change it to ./Camera.android or ./Camera.ios depending on the platform you're developing for. Solved my issue.
Image or problematic code
Related
Hi I'm trying to implement custom icons following similar tutorials from online but keep running into the same problem with different approaches. First I uploaded the svg to the fontello service. Then I put the .ttf file into my assets/fonts folder. Then I placed the config.json file in my src base folder. Finally, I linked them and even checked build phase settings to make sure its there in xcode. However, the icon doesn't show up with the following code and it shows up instead a question mark inside a white box.What should i be doing?
import { createIconSetFromFontello } from 'react-native-vector-icons';
import fontelloConfig from '../config.json';
const Icon = createIconSetFromFontello(fontelloConfig);
...
render(){
<Icon name="Icon_X" size={80} color="#000"/>
}
I am developing an interactive program to simulate power grid switching and I have it working beautifully with the rendering tools in the Processing library. Now I want to add a user interface with menus and buttons, etc. I found the ControlP5 library and it seems like what I need, but I am having a hard time importing it into my project. I have the most current ControlP5 folders/files on my machine and I have added them as a project library. IntelliJ is recoginizing my import statement, but it won't let me declare a variable using the ControlP5 class.
My import statement seems good to go... it is greyed out as an unused import.
But the very last line in the code copied here generates an error "Cannot resolve symbol 'ControlP5'"
import processing.core.PApplet;
import processing.core.PConstants;
import processing.event.*;
import controlP5.*;
public class Main extends PApplet {
Viewport viewport = new Viewport();
Click click = new Click();
UserInterface ui = new UserInterface();
ControlP5 cp5;
Here is a screen shot of my libraries. I have the Processing Core library which I am using for drawing tools, and I want to also use classes from the ControlP5 library which I believe I have correctly linked as an external library here.
Here is a screen shot of my module dependencies.
Here is a screen shot of the bottom of my project tree. I can see that Processing is correctly shown, but I do not see the ControlP5 library here.
I have tried multiple different methods of adding just certain subfolders of the "controlp5-master" folder which I downloaded with no luck.
I have also searched through Google, Processing forum, and Stack Overflow and can't find an answer.
Any advice?
My problem was solved on the Processing Forum. I simply referenced the wrong file when establishing my external library. The ControlP5 download package includes a jar file that is buried several folders deep. Once I pointed the library to that jar file, I was in business.
I want to install fonts using npm, for example, Open Sans or Roboto.
If I search for Open Sans on npm and filter for packages with over 1000 downloads per month I find a whole list. I am not sure which source to choose here, some are not well maintained and none of them are from the original source of the font, in this case, google.
npm-font-open-sans
typeface-open-sans
open-sans-all
open-sans-fontface
opensans-npm-webfont
I noticed that fonts are often used through a direct link to fonts.googleapis. I would prefer to have a local copy of the font to be able to develop offline. Is there a common way to install fonts through npm? Or is there another automated font download tool that I'm not aware of?
I use typefaces yarn add typeface-roboto
and then just do a require("typeface-roboto") / import "./typeface-roboto" or whatever font you choose.
I hope this is the answer you're looking for?
Use fontsource, typefaces is deprecated now.
yarn add #fontsource/open-sans // npm install #fontsource/open-sans
Then within your app entry file or site component, import it in. For example in Gatsby, you could choose to import it into a layout template (layout.js), page component (index.js), or gatsby-browser.js.
import "#fontsource/open-sans" // Defaults to weight 400 with all styles included.
Fontsource allows you to select weights and even individual styles, allowing you to cut down on payload sizes to the last byte! Utilizing the CSS unicode-range selector, all language subsets are accounted for.
import "#fontsource/open-sans/500.css"; // All styles included.
import "#fontsource/open-sans/900-normal.css"; // Select either normal or italic.
Alternatively, the same solutions could be imported via SCSS!
#import "~#fontsource/open-sans/index.css";
#import "~#fontsource/open-sans/300-italic.css";
Fontsource
The typefaces project is now deprecated and its successor is fontsource.
Usage
There's no much difference at the point of using it.
Install:
yarn add #fontsource/open-sans // npm install #fontsource/open-sans
Import:
import "#fontsource/open-sans"
Reference:
body {
font-family: "Open Sans";
}
I need 2 files for creating new component in React:
${NAME}.js
import React from 'react';
import css from './${NAME}.css';
const ${NAME} = () => (
<div></div>
);
export default ${NAME};
${NAME}.css
/* Empty */
Note: ${NAME} needs to be entered like constant while creating these files.
I would like to use PhpStorm (or WebStorm) file template feature (or some other simple way) to create both files - by only clicking to create component like on image below:
Is something like that possible ?
As far as I'm aware it's not possible right now unless you code a plugin for that yourself.
https://youtrack.jetbrains.com/issue/IDEA-91565 -- watch this ticket (star/vote/comment) to get notified on any progress.
UPDATE 2020-12-04: The aforementioned ticket has been fixed and multi-file templates are available since 2020.3 version.
Some links if you are thinking about coding it yourself:
IntelliJ Platform SDK / Plugin Development Docs
API Forum
Some example
I am trying to set up my main app icon using Fontawesomefx:
I'm using IntelliJ 2016 and I have imported the Maven libraries for Fontawesomefx 8.9 and Controlsfx 8.40.12 library (as it was stated it helps Fontawesomefx).
I am tying to get this very simple thing working:
I tried to cast it into Image, I tried to convert from Text to Image, I tried other types of casting and conversion yet unsuccessful so far.
Some aditional info:
FontAwesomeIconView extends GlyphIcon<FontAwesomeIcon> //Fontawesome lib
GlyphIcon<T extends Enum<T> & GlyphIcons> extends Text //Fontawesome lib
Text extends Shape //Java lib
Shape extends Node //Java lib
There are plenty links setting up an icon/text/label inside the app, but I couldn't find anything which sets the main app icon.
Any links, any help is much apreciated!
I don't think you will be able to do this directly.
FontAwesome is a set of Unicode characters in the private use area. When you use FontAwesomeFX to create an icon what you actually get is a Text node containing a single unicode character.
The application toolbar icon is set on the Stage as a list of Image objects (you can have icons of multiple sizes). An image must be a GIF, PNG, BMP or JPEG.
You would need to convert the Text node into an Image node to achieve what you want. You could just write a one-off app to render the icon you want into a label on a panel, screenshot that, and save it into a PNG resource that you then use as your app icon.
Or you could load the icon into a node, and use the snapshot() method to create an image from the rendered representation.