Just started learning React-native.
I'm getting stuck on the picker component.
Picker not working on react-native": "0.68.2
I installed it --> npm i #react-native-picker/picker
Imported --> import {Picker} from '#react-native-picker/picker';
But still getting error message
#react-native-picker/picker could not be found within the project or in these directories: node_modules ..\node_modules
Tried a simple program to list languages, not working!
class testingPicker extends Component {
state = {
language:'a'
}
render(){
return(
<View>
<Picker
style={{width:'100%'}}
>
{/* Adding options to picker */}
<Picker.Item label="A" value="a"/>
<Picker.Item label="B" value="b"/>
</Picker>
</View>
)
}
}
export default testingPicker;
User "react-native-picker-select" library for picker in react native
For more details Visit
https://blog.logrocket.com/how-to-use-react-native-picker-select/
Related
Below snippet is taken from _app.tsx file. I know that having Script component inside the Head component is wrong but this buggy code is blocking the sweetalert library (which I am using in another page to render pop up) from dynamically inserting the CSS rules.
import Head from "next/head";
import Script from "next/script";
import type { AppProps } from "next/app";
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<Head>
<Script
id="branch-io"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `(function(){console.log("hello world")}())`,
}}
/>
</Head>
<Component {...pageProps} />
</>
);
}
For example in this page when I click on the button the popup will be displayed without any CSS applied to it.
import swal from "sweetalert";
export default function Home() {
return (
<button
onClick={() => swal("Hello world!")}
style={{
width: "25vw",
height: "25vh",
color: "white",
backgroundColor: "red",
}}>
Patronus Potter
</button>
);
}
I can resolve the bug by correcting the mistake in the _app.tsx file but my question is why does it happen? Not able to pin point an answer to the question. Any pointers on how to investigate further would be appreciated or Does anybody know why this happens?
I'm using next.js and I was hoping to see my gallery collection like this on click of one of my images which is not happening. Actually, it's like I have just used a normal component, because literally nothing is happening when I click one of my images. Please help.
// this is my app component
import SimpleReactLightbox from 'simple-react-lightbox'
const MyApp = ()=>{
return(
<SimpleReactLightbox>
<Component {...pageProps} />
</SimpleReactLightbox>
)
}
// this is my collection
import { CollectionStyledTypography } from './styles/collectionStyledComponents'
import { SRLWrapper } from 'simple-react-lightbox'
import Image from 'next/image'
const Collection = ({ imagesList = [] }) => {
return (
<SRLWrapper>
<div style={{ margin: '50px' }}>
{imagesList.map((image, index) => (
<CollectionStyledTypography component="div" key={index}>
<Image src={image.src} alt={image.alt} layout="fill" />
</CollectionStyledTypography>
))}
</div>
</SRLWrapper>
)
}
export default Collection
SRL is no longer being developed, and it won't work in React 18. You will have to downgrade to 17 to make it work. I am facing the same problem, nothing happens when i click on an image.
Im trying to properly use material-ui for react in a wordpress plugin.
Problems arise when using inputs for forms and the styling being overwritten by wordpress own styling in the forms.css file.
Im struggling to find a solution for material-ui writing css that has better specificity than forms.css without having to rewrite the styling(I dont wont my own custom styling for material-ui components: I want to use the default one)
Here is an example(text has been edited for readability(removed selectors that dont matter and styling):
react jsx:
<div id='ad-campaign-edit' style={modalStyle} className={classes.root}>
<form
className={classes.form}
noValidate
autoComplete='off'
>
<TextField
id='ad-campaign-name'
className={classes.textField}
variant='filled'
label='Navn på kampanjen'
/>
<TextField
id='ad-campaign-sub-title-text'
className={classes.textField}
variant='filled'
label='Undertekst'
/>
<TextField
id='ad-campaign-sub-price'
className={classes.textField}
variant='filled'
label='Pris'
/>
<Checkbox
defaultChecked
className={classes.textField}
color='primary'
inputProps={{ 'aria-label': 'secondary checkbox' }}
/>
</form>
</div>
forms.css(WP):
input[type="text"], {
...
}
generated css from material-ui:
.MuiInputBase-input {
...
}
other things to note: the css from material-ui is generated after the styling from wordpress in the dom.
Looking at the rules for css specificity(ref www.specifishity.com) forms.css is (0-1-1) and material-ui is (0-1-0).
My question is: how can I make material-ui take presedence without having to rewrite all the css with something like the makeStyles hook?(Can I add better specificity to material-ui in general?)
edit: Forgot to add html/jsx
edit2: rewrote specificity understanding.
I solved it, it's working but not completely.
This solution can be a starting point.
You need to install this npm
https://www.npmjs.com/package/jss-increase-specificity
Then you have to create a <StyleProvider> like described here
https://material-ui.com/styles/advanced/#jss-plugins
What I did
import { create } from 'jss';
import { StylesProvider, jssPreset } from '#material-ui/core/styles';
import increaseSpecificity from 'jss-increase-specificity';
const jss = create({
plugins: [...jssPreset().plugins, increaseSpecificity({ repeat: 1 })],
});
export default function App() {
return (
<StylesProvider jss={jss}>
...
</StylesProvider>
);
}
I am trying to integrate Material Ui with meteor and as a sample test tried executing the below but ended up with errors and no Idea how to resolve it. Anyone there to assist me in fixing this. Below are few detail to track.
How I installed ? --> meteor npm install #material-ui/core
How I Integrated code? Through Blaze React component
ExampleTest.js
Template.ExampleTest.helpers({
ExampleContainer() {
return ExampleContainer;
}
});
ExampleContainer.js
const ExampleContainer = withTracker(() => {
---------
})(Example);
Example.js
import React, { Component } from "react";
import { Button } from "#material-ui/core";
class Example extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Button color="primary">Hello World</Button>
</div>
);
}
}
export default Example;
What error did I receive ?
Error: In template "ExampleTest", call to `{{> React ... }}` missing `component` argument.
at Blaze.View.<anonymous> (react-template-helper.js?hash=3fb2a2954362a4acdee8150fb77f0f500dd28206:67)
at blaze.js?hash=cbd85c3fe14949f2d2b9a3b76334f5f0e96d553c:1934
at Function.Template._withTemplateInstanceFunc (blaze.js?hash=cbd85c3fe14949f2d2b9a3b76334f5f0e96d553c:3769)
at blaze.js?hash=cbd85c3fe14949f2d2b9a3b76334f5f0e96d553c:1932............
Any assistance on this ?
It looks like you're using Blaze template engine. You should use React instead.
https://www.meteor.com/tutorials/react/components
Material UI is a UI framework for use with React. It doesn't work with Blaze, and I don't think there is any way to use both Blaze and React in the same page.
To add Material UI to a Meteor/React project, install the package from the command line:
npm install #material-ui/core
And include the Roboto font in the head of your HTML:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
For me this just worked, with nothing special needed for Meteor.
More instructions here: https://material-ui.com/getting-started/installation/
Strange behaviour, when I try to make an appbar with this code:
import React, { Component } from 'react';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
// Needed for onTouchTap
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
export default class App extends Component {
render() {
return (
<MuiThemeProvider muiTheme={getMuiTheme()}>
<div>
<AppBar title="Title"/>
</div>
</MuiThemeProvider>
);
}
}
The result gives me a stacked appbar:
I have absolutly no idea why it does that and did not find any similar issue. I am running on a fresh Meteor instance with React and Material-UI installed via meteor npm install material-ui
EDIT: After investigation, it seems the problem is that the appbar does not have display:flex. Yet, it is impossible to add it manually with style={{display:'flex'}} (nothing changes).
I know this is old, but in case anyone sees this, the way to do this is to nest a <Toolbar /> inside the <AppBar />.
<AppBar /> docs
One quick and dirty fix: <AppBar title="Title" className="appBar" />
And in main.css:
.appBar{
display:flex;
}
Weird behaviour though.