I wanted to use icons in my react-native app, so I installed react-native-elements. The Icons itself work but I have to add a property called tvParallaxProperties on the Icon element like that:
<Icon tvParallaxProperties={undefined} name={'up'} type="antdesign" />
I read the docs and google about that, but I cant find the use of that. Does anyone know why I need this property and whats the use of it?
If you don't want to write this option under all of the Icons there's 2 solutions.
First which I don't recommend if you are creating real project not for training purpose.
Install RN Elements bleeding Edge from docs and the newest BETA version (unstable).
Or which worked for me is change imports of Icons like:
import { Icon } from 'react-native-elements' to: import Icon from 'react-native-vector-icons/AntDesign';. The last element of import of course is your Icons package and you can change it fe. to: MaterialCommunityIcons
After adding this import you can delete option type: antdesign and this tvParallaxProperties={undefined}
Like docs says tvParallaxProperties are for (Apple TV only) Object with properties to control Apple TV parallax effects.
Related
Hi I am not sure if this is about my VScode settings or the way I installed bootstrap. I used yarn to install react-bootstrap and bootstrap as show in react-bootstrap's documentation. But when I type <Button and press enter it automatically imports <Button component like this:
import { Button } from "bootstrap";
this doesn't work. I have to manually fix it to
import { Button } from "react-bootstrap";
is it a bug or did I do something with wrong order?
If you have inline suggestions turned on (Preferences -> Text Editor -> Suggestions), you'll see that Intellisense provides import suggestions alphabetically — first by identifier then by package.
With inline suggestions, you're given a list you can navigate through to select whichever option you're looking for. In this case, you'd type But and it would show the react-bootstrap Button as the second option, so you'd press down arrow and tab to accept that option.
I have a problem adding the monitor_heart icon from material-design-icons/font to a react project. The icon is located here:
(https://marella.me/material-icons/demo/) you have to type "monitor_heart"
So far I added icons from material-ui without any problem unfortunately here I have a problem.
I have installed the package:
npm and #material-design-icons/svg
I imported the icon:
import monitor_heart from "#material-design-icons/svg/filled/monitor_heart.svg"
i add it to App:
div <monitor_heart /> /div //or {monitor_heart}
but it not work -I don't know how can I get to this specific icon and just execute it / show it on the screen. What I did it wrong? Can anyone help me?
code located here:
https://github.com/beginnerinreact/material-icon-problem
Ok now it works!
I had to add correct form of import:
import { ReactComponent as Monitor_heart } from "#material-design-icons/svg/outlined/monitor_heart.svg" where I have to stress that this is a React component
I'm trying to get the values on each bar with the chartjs datalabels plugin.
So above the bar 'a' a want to see the number 30 and above or inside bar 'b' I want to see the number 50.
But it isn't showing any values at all.
Can anyone help and tell me what's wrong?
I've also tried to use different versions of chartjs but it didn't help.
Currently I'm using Chartjs 3.2.0
and for the chartjs-plugin-datalabels 2.0.0
here is an example in codesandbox
https://codesandbox.io/s/chart-js-plugin-5ez9p?file=/src/App.tsx
As per the documentation you still need to register the plugin before you can use it:
import {Chart} from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';
Chart.register(ChartDataLabels);
Working codesandbox: https://codesandbox.io/s/chart-js-plugin-forked-dig8k?file=/src/App.tsx
First you need to register the chartjs-plugin-datalabels plugin.
For Registration you can also add plugins props to your TsChart.
import ChartDataLabels from "chartjs-plugin-datalabels";
In TsChart tag add plugins props which accepts
Chart.PluginServiceRegistrationOptions[]
Eg. **TsChart type="bar" data={data} options={options} plugins={[ChartDataLabels]}**
So the component lib has a dark theme.
I would like to use dark style only for a single component, say a Popover. All the rest sd remain default.
Is there a way to achieve that?
you could use less reference import feature for theming single component. Sudo code would be something like
#import (reference) "#ant-design/dark-theme"
.my-popover {
&:extend(#popover-prefix-cls all);
}
you can find the class name #popover-prefix-cls by going into individual components styles file and checking the class
References: https://css-tricks.com/reference-imports-in-less-are-kinda-cool/
using the method described at https://fontawesome.com/how-to-use/on-the-web/using-with/sass I believe I will end up accumulating almost 2.8MB of web fonts in the src folder of my React project. I need to use CSS to add icons to a calendar style, but won't that affect tree shaking? In other words, won't I end up with a huge package size just for using a single icon?
The method #Mike Poole presented is the most correct one for tree shaking. If you use the webfont method, you have no option but to load the entire set. But if you need to use just a few icons, and can't load 'em via js for some reason, you can simply get the svg files you need and add them directly, as either <img> tags or background-images.
Tree shaking using FontAwesome is straightforwards. If you only use a single icon then you only need to import that icon (and certainly don't need to use SASS to do so).
Here is the example that FontAwesome use if you only want to use the solid fa-coffee icon:
import { faCoffee } from '#fortawesome/free-solid-svg-icons'