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"/>
}
Related
I'm using Vue 3 along with Tailwind and in my template I display a list of background images, so I'm looping through an array of images and this div is responsible for showing them:
<div :class="`h-full bg-[url('#/assets/img/${article.preview_image}')] bg-center bg-no-repeat bg-cover hover:scale-105 transition duration-[2000ms] ease-in-out`" />
This way it doesn't work although I have no errors in the console and when I check the DOM it's rendered alright, the images just don't show up
The weird part is that when I hard code the name of the image like bg-[url('#/assets/img/my_image.jpg')] it works, and when I go back to using my loop variable it still works although it was not working at first, and it's not cache related because I disabled it
And then when I restart the server the images are gone again
Any idea what's causing this?
By the way, the data comes from a data.json file, if it matters. Like:
[
{ preview_image: 'xxx.jpg'},
{ preview_image: 'xxx.jpg'}
{ preview_image: 'xxx.jpg'}
]
I tried to use a .ts file instead but the problem remains
This may be a webpack issue where your image files are not bundled correctly. I se you have tried a .ts file. Can you try again but use require("filePath"), with the image files. This ensures that the files are bundled.
Cheers :)
I'm building a React Native app which has multiple Targets/Flavors for iOS/Android respectively. So, I have the same code base for both App1 and App2, but they have different logos, launch screens etc. I can't figure out how to add different images to the different versions.
My Android setup in android/app/build.gradle is:
flavorDimensions "appVersion"
productFlavors {
app1 {
applicationId="com.app1name"
dimension "appVersion"
}
app2 {
applicationId="com.app2name"
dimension "appVersion"
}
Then in android/app/src I have a main folder, and an app2 folder, each of which contains a res folder which has the following structure:
res
- drawable-hdpi etc
- mipmap-hpi etc (logos are in here)
- values
When I build app1, it uses the logos etc. from the main folder; if I build app2, it uses the ones from app2 (if they exist).
Likewise for the Targets in XCode, I have 2 Targets, app1 and app2, and have set up the image assets so it pulls in the correct logo etc.
This works fine for the logos and launch screens, but how do I handle images which are to be shown in the app itself? So say the dashboard needs to show Image1.png for App1, and Image2.png for App2 - where should Image1.png and Image2.png be stored?
The main issue is that the image path in React Native can't be a variable. To show an image in React Native I have to use something like:
<Image
source={require('path/to/image')}
/>
I thought I could use a switch statement, so store image_app1.png and image_app2.png in a folder somewhere, and then do something like the following:
switch(appVersion) {
case app1:
imageName = image_app1.png
break
case app2:
imageName = image_app2.png
break
}
and then use imageName to create the path and then require it, but this doesn't work because the path can't be a variable.
The other solution I've seen is to require all images at the outset, and then just show the correct one:
const image1 = require('/path/to/Image1.png')
const image2 = require('/path/to/Image2.png')
switch(appVersion) {
case app1:
<Image source={image1} />
break
case app2:
<Image source={image2} />
break
}
but potentially that involves pre-loading quite a few images (I may later have more app versions, and some of these images might be quite big) and I imagine it could slow things down.
Is there a way to put the images into the appropriate folders in android / ios (so just call the image image.jpg or whatever for all versions, but have different versions in the different folders) and then just refer to image.jpg and let it find the correct one? Or is there a standard way to handle this scenario?
You could use react-native-fs or react-native-blob-util (preferred one, since react-native-fs is no longer maintained), create assets folder inside your target folder and load images from there
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
I am trying to import an img.JPG photo in my React Native project using import image from './media/img.JPG';.
But I get an error saying the file doesn't exist
For reference, my files look like this:
It came out well on the screen when the external path was inserted.
In your question, you say the image name is img.PNG, but in the code it says img.JPG. Could that be the issue?
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