This is a pretty generic error but in my case the difference is I installed this https://www.npmjs.com/package/react-native-dropdown-picker package and implementing it by first importing:
import DropDownPicker from 'react-native-dropdown-picker';
import Icon from 'react-native-vector-icons/Feather';
Then I'm creating the DopDownPicke as:
<DropDownPicker items={[
{ label: '1', value: 1 },
{ label: '2', value: 2 },
{ label: '3', value: 3 },
{ label: '4', value: 4 },
{ label: '5', value: 5 },
]} defaultValue={this.state.noOfIndToVac}
style={styles.dropDown}
itemStyle={{
justifyContent: 'flex-start'
}} dropDownStyle={{ backgroundColor: '#fafafa' }}
onChangeItem={item => this.setState({
noOfIndToVac: item.value
})} />
This is when I get the error
Unrecognized font family 'Feather'
I honestly don't care if I have the Feather font or not in the app, so is it possible to add a line of code that picks the system default font and stops showing this error?
It looks like you haven't finished setting up react native vector icons, because if you are successful, the feather icon should be included, check this official repository https://github.com/oblador/react-native-vector-icons
Related
How to make one option in react-select stick. (i.e: like position fixed, it will stay at the top even when we scroll through options in the drop-down)
Do you try to add css on react-select ?
import React from 'react'
import Select from 'react-select'
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
]
const MyComponent = () => (
<Select options={options} style={{position: 'fixed !important'}} />
)
Kind regards,
Kilian GOËTZ.
I am trying to make a react-select component but I keep running into an issue where if I change the high and width of the original react-select it throws everything else of center.
Here is the original react-select box code:
import React from 'react'
import Select from 'react-select'
const options = [
{ value: 'item-1', label: 'item-1' },
{ value: 'item-2', label: 'item-2' },
{ value: 'item-3', label: 'item-3' },
{ value: 'item-4', label: 'item-4' }
]
export default function Example(){
return (
<Select options={options}
closeMenuOnSelect={true}
placeholder="Placeholder"
/>
)}
and a picture:
original react-select image
this is size of react-select box I want:
height: 20,
width: 118.5
modified react-select for correct height and width
as you can see it throws off the placement of the input box, placeholder, and icons.
Here is the code for the above image:
import React from 'react'
import Select from 'react-select'
const options = [
{ value: 'item-1', label: 'item-1' },
{ value: 'item-2', label: 'item-2' },
{ value: 'item-3', label: 'item-3' },
{ value: 'item-4', label: 'item-4' }
]
const customStyles = {
control: base => ({
...base,
height: 20,
minHeight: 20,
width: 118.5,
}),
}
export default function Example(){
return (
<Select options={options}
styles={customStyles}
closeMenuOnSelect={true}
placeholder="Placeholder"
/>
)}
and this is how I have been trying to modify the component. This has gotten me somewhat close to the desired outcome but the input box sizing and icon placements are still off and sized weird:
import React from 'react'
import Select from 'react-select'
const options = [
{ value: 'item-1', label: 'item-1' },
{ value: 'item-2', label: 'item-2' },
{ value: 'item-3', label: 'item-3' },
{ value: 'item-4', label: 'item-4' }
]
const customStyles = {
control: base => ({
...base,
height: 20,
minHeight: 20,
width: 118.5,
}),
valueContainer: base => ({
...base,
height: 20,
minHeight: 20,
width:20,
alignItems: 'left',
}),
indicatorsContainer: base => ({
...base,
height: 20,
minHeight: 20,
alignItems: 'center',
}),
}
export default function Example(){
return (
<Select options={options}
styles={customStyles}
closeMenuOnSelect={true}
placeholder="Placeholder"
/>
)}
react-select what I have been able to achieve with the posted code image 1
react-select what I have been able to achieve with the posted code image 2
I have been at this for hours and I just cannot seem to get everything to fit nice and neat into the react-select box when I resize it. Any help would be greatly appreciated.
After installing the Material Table using React JS and mapping the data to it, this error will be displayed on the console while running the application. The reason for this is hard for me to imagine.
Below is the table I developed.
`
const empList = [
{ id: 1, name: "Neeraj", email: 'neeraj#gmail.com', phone: 9876543210, city: "Bangalore" },
{ id: 2, name: "Raj", email: 'raj#gmail.com', phone: 9812345678, city: "Chennai" },
{ id: 3, name: "David", email: 'david342#gmail.com', phone: 7896536289, city: "Jaipur" },
{ id: 4, name: "Vikas", email: 'vikas75#gmail.com', phone: 9087654321, city: "Hyderabad" },
]
const [data, setData] = useState(empList)
const columns = [
{ title: "ID", field: "id", editable: false },
{ title: "Name", field: "name" },
{ title: "Email", field: "email" },
{ title: "Phone Number", field: 'phone', },
{ title: "City", field: "city", }
]
<h5>
List of Services
</h5>
<MaterialTable
title="Employee Data"
data={data}
columns={columns}
/>
</div>`
I have also encountered the same bug and it seems that they haven't covered the case that no theming is provided. So, in order for the MaterialTable to work properly you need at least the following implementation:
import * as React from 'react';
import MaterialTable from 'material-table';
import { ThemeProvider, createTheme } from '#mui/material';
export class DataGridReact extends React.Component {
public render(): JSX.Element {
const defaultMaterialTheme = createTheme();
return(
<div style={{ width: '100%', height: '100%' }}>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<ThemeProvider theme={defaultMaterialTheme}>
<MaterialTable
columns={[
{ title: 'Name', field: 'name' },
{ title: 'Surname', field: 'surname' },
{ title: 'Birth Year', field: 'birthYear', type: 'numeric' },
{ title: 'Birth City', field: 'birthCity', lookup: { 1: 'Linz', 2: 'Vöcklabruck', 3: 'Salzburg' } }
]}
data={[
{ name: 'Max', surname: 'Mustermann', birthYear: 1987, birthCity: 1 },
{ name: 'Cindy', surname: 'Musterfrau', birthYear: 1995, birthCity: 2 }
]}
title="Personen"
/>
</ThemeProvider>
</div>
);
}
}
So I figured out the solution. If your current version of material table is 2.0.3, just uninstall your version and re-install version 1.69.3. This will solve the issue, it worked for me. They have released the 2.0.3 version quite recently (10 days back) and it seems to have bugs and I guess that's the reason why you and me faced issues.
I tried all possible things but it seems to have a problem with the material-table package itself. I tried to install the v1.69.3 also, but then it showed some 19 errors all of which were from the Metrial-Table Package,
which shows that it is really buggy. With some other versions it showed some 20 errors all from the package itself, these errors were silenced after I reinstall #material-ui/core as mentioned on their website https://material-table.com/#/docs/install:~:text=npm%20install%20material%2Dtable%20%2D%2Dsave%0Anpm%20install%20%40material%2Dui/core%20%2D%2Dsave, But the problem that the table is not showing is still there.
Finally installing the very old release having dependency of react version older than 16, helped me.
You can run :
npm uninstall material-table
then run following:
npm install material-table#1.36.0 --save
and then check if it works,
if not try to run
npm install #material-ui/core --save
or
npm install in the terminal.
I hope it will work for you to help you get running, but I noticed though the table shows but it disturbs some functionlaity of material ui itself.
So i had the same problem on some pcs and not on others. Figured out the issue was due to the node js version. so the following worked for me:
changing to material-table version to 1.69.3 or 1.36.0 works but it was
messing up the styling of my other mui components. So shifted back to
material-table 2.0.3
I was using node version 14.19.0 so changed it to 16.5.1 using nvm.
delete the node modules completely shift+ delete
npm i to install all dependencies.(remember during this step the node
version should be 16.5 , so check once using node -v)
npm start
I updated mui's packages, using:
yarn upgrade #mui/icons-material #mui/material #mui/styles --latest since I was using material-table 2.0.2.
then don't froget to wrap the table with the ThemeProvider: ( THANKS #nikried FOR your answer, it was very helpful! )
import * as React from 'react';
import MaterialTable from 'material-table';
import { ThemeProvider, createTheme } from '#mui/material';
export function SimpleExample () {
const defaultMaterialTheme = createTheme();
return(
<div style={{ width: '100%', height: '100%' }}>
<ThemeProvider theme={defaultMaterialTheme}>
<MaterialTable
columns={columns}
data={data}
/>
</ThemeProvider>
</div>
);
}
}
if you have other problems, don't forget to check the peerDependencies of material-table inside node_modules, and try to use the same package's version montioned to avoid all the possible conflicts.
I work on a large project (monorepo). The technology stack is Next, Apollo GraphQL, Ant-Design. I wanted to add the #ant-design/charts package, but it crashes the error below. I have run out of ideas for repair: c
Error on page:
../../node_modules/#antv/xflow/dist/index.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: ../../node_modules/#ant-design/flowchart/es/graph/index.js
Terminal:
(node:40023) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)
error - ../../node_modules/#antv/xflow/dist/index.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Use dynamic import of Next.js and false server side rendering for this module.
import dynamic from 'next/dynamic';
const Line = dynamic(() => import('#ant-design/charts').then(({ Line }) => Line),
{ ssr: false }
);
const data = [
{
year: '1991',
value: 3,
},
{
year: '1992',
value: 4,
}
]
const LineChart = () => {
const config = {
data: data,
xField: 'year',
yField: 'value',
label: {},
point: {
size: 5,
shape: 'diamond',
style: {
fill: 'white',
stroke: '#5B8FF9',
lineWidth: 2,
},
},
tooltip: { showMarkers: true },
state: {
active: {
style: {
shadowBlur: 4,
stroke: '#000',
fill: 'red',
},
},
},
interactions: [{ type: 'marker-active' }],
slider: {
start: 0.1,
end: 0.8,
},
};
return (
<div>
<Line {...config} />
</div>
);
};
export default LineChart;
Closed, installing sub package #ant-design/plots solved my problem
I am trying to create a Pie Chart dashboard. Chart is getting drawn based on the value, but the legend is not getting displayed. I have tried the label as below.
Chart
Summary.js:
import React, { Component } from 'react';
import PieChart from 'react-minimal-pie-chart';
class Summary extends Component {
render()
{
return(
<PieChart className="chart-style" x={50} y={60} outerRadius={100} innerRadius={50}
data={[
{ value: 11, color: '#E38627',label: 'New' },
{ value: 12, color: '#C13C37',label: 'Closed' },
{ value: 8, color: '#6A2135',label: 'Reopened' },
]}
/>
);
}
}
export default Summary;
Adding this works for me.
label={(props) => { return props.dataEntry.title;}}
Example
<PieChart
label={(props) => { return props.dataEntry.title;}}
data={[{ title: "One", value: 10, color: "#E38627" },
{ title: "Two", value: 15, color: "#C13C37" },
{ title: "Three", value: 20, color: "#6A2135" },
]}
/>
Its works at least for display labels, but you can customize it for showing percentage as well.
A good way to solve it is to provide a label function
<PieChart ...
label={props => { return props.data[props.dataIndex].label;}}
/>
You can also just provide label={true} but then it will show te value not the label in the data array.