I'm trying to integrate the 3d cover flow for the project, but the coverflow not working as expected, I included image and code. Thanks in Advance for the help!
I have tried using the lastest package, i found that is not working, so i tried these old version, that also not working, the version which i used is "react-id-swiper": "2.3.2", "swiper": "^6.1.2".
code :
import React from 'react'
import Swiper from 'react-id-swiper';
import 'react-id-swiper/lib/styles/css/swiper.css';
import './App.css';
class App extends React.Component{
render() {
const params = {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true
},
pagination: {
el: '.swiper-pagination'
}
}
return (
<React.Fragment >
<Swiper {...params}>
<div style={{ backgroundImage:'url(http://lorempixel.com/600/600/nature/1)' }} />
<div style={{ backgroundImage:'url(http://lorempixel.com/600/600/nature/2)' }} />
<div style={{ backgroundImage:'url(http://lorempixel.com/600/600/nature/3)' }} />
<div style={{ backgroundImage:'url(http://lorempixel.com/600/600/nature/4)' }} />
<div style={{ backgroundImage:'url(http://lorempixel.com/600/600/nature/5)' }} />
</Swiper>
</React.Fragment>
);
};
}
export default App;
output :
How is it going brother. I also had the same problem and I realized one of the reason is that the latest of version of the swiper package is missing some css (you need the swiper package if you want to use react-id-swiper). For react-id-swiper it is okay to install the latest version, but downgraded the swiper package to 5.3.8 did the trick.
Let me know if this solves the issue.
Related
I started getting this error after migrating to react version 18
makeStyles.js:3 Uncaught Error: MUI: makeStyles is no longer exported from #mui/material/styles. You have to import it from #mui/styles.
I have looked through the docs and tried different things but it didn't work.
How do I make this work?
here is my code:
import { ThemeProvider, createTheme } from "#mui/material/styles";
import { makeStyles } from "#mui/styles";
export default function Program() {
const theme = useTheme();
const [programData, setProgramData] = useState([]);
const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
flexWrap: "wrap",
justifyContent: "space-around",
overflow: "hidden",
backgroundColor: theme.palette.background.paper,
},
image: {
height: "72%",
width: "530px",
objectFit: "cover",
paddingBottom: 3,
},
}));
useEffect(() => {
axios
.get("https://cryptic-shelf-72177.herokuapp.com/programs/api")
.then((response) => {
setProgramData([...response.data]);
})
.catch(function (error) {
console.log(error);
});
}, []);
const matches = useMediaQuery(theme.breakpoints.down("xs"));
const classes = useStyles();
return (
<div className={classes.root} style={{ padding: "3vw" }}>
<ImageListItem key="Subheader" style={{ height: "auto" }}></ImageListItem>
<ImageList
rowHeight={550}
cols={matches ? 1 : 3}
className={classes.gridList}
gap={12}
style={{ background: "#A52A2A " }}
>
{programData.length > 0 &&
programData.map((tile, index) => {
return (
<ImageListItem
key={Math.floor(Math.random() * new Date().getTime())}
component={Link}
to={"/programs/" + tile._id + "/programcomments"}
style={{ textDecoration: "none", color: "black" }}
>
<img
src={tile.programImage}
alt={tile.title}
class={classes.image}
/>
<ImageListItemBar
titlePosition="top"
title={tile.title}
// style={{ height: 400 }}
/>
<Typography
paragraph
style={{
borderBottom: "2px solid",
background: "white",
padding: 7,
}}
>
{tile.description.substring(0, 222)}..
</Typography>
</ImageListItem>
);
})}
</ImageList>
</div>
);
}
Everything was working fine until i migrated to React version 18, and made some material us changes that comes with React version 18 and materialui 5
Try this:
Remove all dependencies by deleting node-modules folder in your project.
Open a new terminal and run 'npm install'.
(Those two instructions above are optional)
Since there has been a major change moving from Mui v4 to v5, makeStyles() is deprecated, so that you have to use styled() function instead, and import it from '#emotion/styled';
Example:
import styled from '#emotion/styled';
const useStyles = styled(theme => ({
root: {
//Your styling rules
}
}))
Take a look at the following link as well, thanks for #TeslaDelMar 's answer:
https://www.reddit.com/r/reactjs/comments/uabs6g/material_ui_react_18/
Good luck!
Excuse me, please, I am just learning. In some gatsby templates I can insert as Image - an image from a URL and in some templates Image don't want to display it.
What does it depend on and how to edit the code to make the url work? (My knowledge about graphql is rather basic)
this is the code for the blog template:
/** #jsx jsx */
import { jsx } from 'theme-ui'
import { Link, graphql } from "gatsby"
import Img from "gatsby-image"
import { RiArrowRightLine, RiArrowLeftLine } from "react-icons/ri"
import Layout from "../components/layout"
import SEO from '../components/seo';
const styles = {
'article blockquote': {
'background-color': 'cardBg'
},
pagination: {
'a': {
color: 'muted',
'&.is-active': {
color: 'text'
},
'&:hover': {
color: 'text'
}
}
}
}
const Pagination = (props) => (
<div
className="pagination -post"
sx={styles.pagination}
>
<ul>
{(props.previous && props.previous.frontmatter.template === 'blog-post') && (
<li>
<Link to={props.previous.frontmatter.slug} rel="prev">
<p
sx={{
color: 'muted'
}}
>
<span className="icon -left"><RiArrowLeftLine/></span> Previous</p>
<span className="page-title">{props.previous.frontmatter.title}</span>
</Link>
</li>
)}
{(props.next && props.next.frontmatter.template === 'blog-post') && (
<li>
<Link to={props.next.frontmatter.slug} rel="next">
<p
sx={{
color: 'muted'
}}
>Next <span className="icon -right"><RiArrowRightLine/></span></p>
<span className="page-title">{props.next.frontmatter.title}</span>
</Link>
</li>
)}
</ul>
</div>
)
const Post = ({ data, pageContext }) => {
const { markdownRemark } = data // data.markdownRemark holds your post data
const { frontmatter, html, excerpt } = markdownRemark
const Image = frontmatter.featuredImage ? frontmatter.featuredImage.childImageSharp.fluid : ""
const { previous, next } = pageContext
let props = {
previous,
next
}
return (
<Layout className="page">
<SEO
title={frontmatter.title}
description={frontmatter.description ? frontmatter.description : excerpt}
image={Image}
article={true}
/>
<article className="blog-post">
<header className="featured-banner">
<section className="article-header">
<h1>{frontmatter.title}</h1>
<time>{frontmatter.date}</time>
</section>
{Image ? (
<Img
fluid={Image}
objectFit="cover"
objectPosition="50% 50%"
alt={frontmatter.title + ' - Featured image'}
className="featured-image"
/>
) : ""}
</header>
<div
className="blog-post-content"
dangerouslySetInnerHTML={{ __html: html }}
/>
</article>
{(previous || next) && (
<Pagination {...props} />
)}
</Layout>
)
}
export default Post
export const pageQuery = graphql`
query BlogPostQuery($id: String!) {
markdownRemark(
id: { eq: $id }
) {
id
html
excerpt(pruneLength: 148)
frontmatter {
date(formatString: "MMMM DD, YYYY")
slug
title
description
featuredImage {
childImageSharp {
fluid(maxWidth: 1980, maxHeight: 768, quality: 80, srcSetBreakpoints: [350, 700, 1050, 1400]) {
...GatsbyImageSharpFluid
...GatsbyImageSharpFluidLimitPresentationSize
}
sizes {
src
}
}
}
}
}
}
`
typical post:
---
template: blog-post
title: my title
slug: /plant/bud
date: 2020-05-13 12:37
description: abc
featuredImage: /assets/screen-post-hixmjdah9xhoo-unsplash.jpg (but online image from imgurl png doesnt work)
---
post nr 1
edited ///
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/static/assets/`,
name: `assets`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/src/content/`,
name: `content`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-transformer-remark`,
options: {
gfm: true,
plugins: [
netlifyCmsPaths,
`gatsby-remark-reading-time`,
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1024,
showCaptions: true,
linkImagesToOriginal: false,
tracedSVG: true,
loading: "lazy",
},
},
`gatsby-remark-responsive-iframe`,
{
resolve: `gatsby-remark-prismjs`,
options: {
classPrefix: "language-",
inlineCodeMarker: null,
aliases: {},
showLineNumbers: false,
noInlineHighlight: false,
// By default the HTML entities <>&'" are escaped.
// Add additional HTML escapes by providing a mapping
// of HTML entities and their escape value IE: { '}': '{' }
escapeEntities: {},
},
},
],
},
},
In Gatsby, you can insert images from external sources using the standard HTML <img> tag with the src property:
<img src="https://via.placeholder.com/150" alt="Alt text" width="500" height="600">
If you want to keep the benefits of gatsby-image across the external (or online) images, you should need to use some dependencies to achieve lazy loading and other features.
However, to use gatsby-image you need to allow Gatsby and the inferred GraphQL schema to use their transformers (gatsby-transformer-sharp and sharps (gatsby-plugin-sharp) across with the filesystem (gatsby-source-filesystem) or in other words, Gatsby needs to have access to the images that needs to parse to create a valid queryable GraphQL schema, that will be consumed with the gatsby-image.
In addition, you need to specify the folder of your project where those images belong (setting the filesystem):
const path = require(`path`)
module.exports = {
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: path.join(__dirname, `src`, `images`),
},
},
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
],
}
Once the filesystem is set and the images are processed, a GraphQL node is created, and you are allowed to use the fragments like the one you've provided:
featuredImage {
childImageSharp {
fluid(maxWidth: 1980, maxHeight: 768, quality: 80, srcSetBreakpoints: [350, 700, 1050, 1400]) {
...GatsbyImageSharpFluid
...GatsbyImageSharpFluidLimitPresentationSize
}
sizes {
src
}
}
}
Since the external images can't be directly processed by Gatsby, they can't be used with gatsby-image. Depending on the source of those images, some plugins allow you to keep using gatsby-image from external sources (usually from CMSs like Contentful and others).
You can check for further documentation in Working with images docs.
Update (01/06/2021)
In the last Gatsby version (v2.30) they've added a new experimental feature, still in beta to support external images in a <StaticImage> component. To enable it, just upgrade to the latest Gatsby version (via npm or yarn) and add the following flags in your running scripts:
GATSBY_EXPERIMENTAL_REMOTE_IMAGES=1 gatsby develop
GATSBY_EXPERIMENTAL_REMOTE_IMAGES=1 gatsby build
You can then pass absolute URLs to StaticImage:
<StaticImage src="https://placekitten.com/400/400" alt="Kittin" />
I am using an expo managed react-native project and it seems to be running fine on android but not iOS. For iOs i get the following error message :
"'main' has not been registered. This can happen if: * Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
A module failed to load due to an error and 'AppRegistry.registerComponent' wasn't called."
I have tried updating my index.js using AppRegistry.registerComponent('main', () => App) from similar posts but to no avail. What am I doing wrong?
index.js
import { registerRootComponent } from "expo";
import App from "./App";
// registerRootComponent calls AppRegistry.registerComponent('main', ()
=> App);
// It also ensures that whether you load the app in the Expo client or in
a native build,
// the environment is set up appropriately
registerRootComponent(App);
App.js
import "react-native-gesture-handler";
import { NavigationContainer } from "#react-navigation/native";
import { createStackNavigator } from "#react-navigation/stack";
import React from "react";
import { StyleSheet } from "react-native";
import { ScreenStack } from "react-native-screens";
import Login from "./Login";
import Join from "./Join";
import Home from "./Home";
import Dashboard from "./Dashboard";
import BorrowMap from "./BorrowMap";
import SpotRequest from "./SpotRequest";
// import { registerRootComponent } from "expo";
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={Home}
options={{ title: "Welcome" }}
/>
<Stack.Screen
name="Login"
component={Login}
options={{ title: "Login" }}
/>
<Stack.Screen
name="Join"
component={Join}
options={{ title: "Register" }}
/>
<Stack.Screen
name="Dashboard"
component={Dashboard}
options={{ title: "Dashboard" }}
/>
<Stack.Screen
name="Spot Request"
component={SpotRequest}
options={{ title: "Spot Request Details" }}
/>
<Stack.Screen
name="Finding Buddy"
component={BorrowMap}
options={{ title: "Finding Buddy" }}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
export default App;
Folder Structure
I am trying to use this package to create a range slider:
https://www.npmjs.com/package/react-native-range-slider
import React from 'react';
import { Platform, StyleSheet, Text, View, Image, Switch, Button } from "react-native";
import { createAppContainer } from 'react-navigation';
import DatePicker from 'react-native-datepicker';
import RangeSlider from 'react-native-range-slider';
<View style={{flex: 1, flexDirection: 'row'}}>
<RangeSlider
minValue={0}
maxValue={100}
tintColor={'#da0f22'}
handleBorderWidth={1}
handleBorderColor="#454d55"
selectedMinimum={20}
selectedMaximum={40}
style={{ flex: 1, height: 70, padding: 10, backgroundColor: '#ddd' }}
onChange={ (data)=>{ console.log(data);} }
/>
</View>
however keep running into the error:
Invariant Violation: requireNativeComponent: "RangeSlider" was not found in UIManager.
I was able to successfully install the package and ran
react-native link react-native-range-slider to link the library as well but I still get the error.
I am running:
react-native-cli: 2.0.1 and
react-native: 0.59.8
Can someone please help me out in fixing the issue?
You will receive this error on Android as it's only supported for iOS as of current.
I am trying to show loading indicator in webweb as follow. Loading indicator is showing but there is white background show after page is loaded. If I change to startInLoadingState to false, web content is showing but loading indicator does not show. It is happing in "react-native": "0.46.3" on ios
renderLoadingView() {
return (
<ActivityIndicator
animating = {this.state.visible}
color = '#bc2b78'
size = "large"
style = {styles.activityIndicator}
hidesWhenStopped={true}
/>
);
}
<WebView
source={source}
renderLoading={this.renderLoadingView} startInLoadingState={true} />
I like this approach which shows the activity indicator overlayed on the loading Webview so you don't have to wait until the entire page is loaded to start seeing content.
constructor(props) {
super(props);
this.state = { visible: true };
}
hideSpinner() {
this.setState({ visible: false });
}
render() {
return (
<View style={{ flex: 1 }}>
<WebView
onLoad={() => this.hideSpinner()}
style={{ flex: 1 }}
source={{ uri: this.props.navigation.state.params.url }}
/>
{this.state.visible && (
<ActivityIndicator
style={{ position: "absolute", top: height / 2, left: width / 2 }}
size="large"
/>
)}
</View>
);
}
A nice approach is setting the property startInLoadingState to true and set the renderLoading to return the desired View.
See the example below.
displaySpinner() {
return (
<View>
{/* Your spinner code goes here.
This one commes from react-native-material-kit library */}
<SingleColorSpinner />
</View>
);
}
render() {
return (
<WebView
startInLoadingState={true}
source={{ uri: this.state.myUri }}
renderLoading={() => {
return this.displaySpinner();
}}
/>
);
}
I have steped on that problem and after some research i found a pretty good solution.
It requires the "react-native-loading-spinner-overlay"
npm install --save react-native-loading-spinner-overlay
index.android.js
import Spinner from 'react-native-loading-spinner-overlay';
const main = 'http://www.myURI.pt';
class MyApp extends Component {
constructor(props) {
super(props);
this.state = { uri: main, visible: true };
}
showSpinner() {
console.log('Show Spinner');
this.setState({ visible: true });
}
hideSpinner() {
console.log('Hide Spinner');
this.setState({ visible: false });
}
render() {
return (
<View>
<Spinner
visible={this.state.visible}
textContent={'Loading...'}
textStyle={{ color: '#FFF' }}
/>
<WebView
scalesPageToFit
source={{ uri: this.state.uri }}
onLoadStart={() => (this.showSpinner())}
onLoad={() => (this.hideSpinner())}
/>
</View>
);
}
}
I think i didn't miss any line.
Alter your renderLoadingView function to the following, and the loading indicator should work as desired:
renderLoadingView() {
return (
<ActivityIndicator
color='#bc2b78'
size='large'
styles={styles.activityIndicator}
/>
);
}
So essentially, just remove the animating (as it is not required for the given usage) and hidesWhenStopped props from your ActivityIndicator. Hope this helps.
Copy & Pasteable: Minimal Webview Component with Loading Indicator
import React, { Component } from "react";
import { ActivityIndicator} from "react-native";
import { WebView } from "react-native-webview";
// Pass a "uri" prop as the webpage to be rendered
class WebViewScreen extends Component {
constructor(props) {
super(props);
this.state = { visible: true };
}
hideSpinner() {
this.setState({ visible: false });
}
render() {
return (
<React.Fragment>
<WebView
onLoadStart={() => this.setState({ visible: true })}
onLoadEnd={() => this.setState({ visible: false })}
// Pass uri in while navigating with react-navigation. To reach this screen use:
// this.props.navigation.navigate("WebViewScreen", {uri: "google.ca"});
source={{ uri: this.props.navigation.state.params.uri }}
/>
{this.state.visible ? (
<ActivityIndicator
style={{
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
jusityContent: "space-around",
flexWrap: "wrap",
alignContent: "center",
}}
size="large"
/>
) : null}
</React.Fragment>
);
}
}
export default WebViewScreen;
react-native webview is now deprecated.
You can import react-native-webview and do the following:
<WebView
source={{ uri: 'https://reactnative.dev' }}
startInLoadingState={true}
renderLoading={() => <Loading />}
/>
If you want to show a Spinner and then replace that spinner with the WebView already loaded, this is your answer:
import React from 'react';
import { StyleSheet, ActivityIndicator, View } from 'react-native';
import { WebView } from "react-native-webview";
function MyApp() {
const Spinner = () => (
<View style={styles.activityContainer}>
<ActivityIndicator size="large" color={white} />
</View>
);
return (
<WebView
bounces={false}
startInLoadingState={true}
renderLoading={Spinner}
style={styles.container}
source={{ uri: yourURL }}
showsHorizontalScrollIndicator={false}
scalesPageToFit
/>
)
}
export default StyleSheet.create({
container: {
flex: 1
},
activityContainer: {
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
top: 0,
left: 0,
backgroundColor: black,
height: '100%',
width: '100%'
}
});
I've used #AdamG's solution but there have a problem with absolute path. The below solution is set ActivityIndicator to the center but with a different way.
<View style={{ flex: 1 }}>
<WebView
onLoad={() => this.hideSpinner()}
style={{ flex: 1 }}
source={{ uri: 'yourhtml.html' }}
/>
<View style={{backgroundColor:'white', height:1}}></View>
{this.state.visible && (
<View style={{flex:1, alignItems:'center'}}>
<ActivityIndicator
size="large"
/>
</View>
)}
</View>
There is 2 another {flex:1} View and ActivityIndicator is in top of the bottom View. I've centered that.
<View style={{backgroundColor:'white', height:1}}></View>
And this line is set the opacity when you have loading state, there have two different View. In top view there is WebView and there is a black bottom border View belong to the WebView.For closing I've patched it with a white helper view.
Hey bro this is my solution, you have to use the event onLoadEnd instead onLoad, the event onLoad is not working for me.
import React, { Component } from 'react';
import { StyleSheet, ActivityIndicator, View } from 'react-native';
import { WebView } from "react-native-webview";
export default class MainActivity extends Component {
constructor(props) {
super(props);
this.state = { visible: true };
}
showSpinner() {
console.log('Show Spinner');
this.setState({ visible: true });
}
hideSpinner() {
console.log('Hide Spinner');
this.setState({ visible: false });
}
render() {
return (
<View
style={this.state.visible === true ? styles.stylOld : styles.styleNew}>
{this.state.visible ? (
<ActivityIndicator
color="#009688"
size="large"
style={styles.ActivityIndicatorStyle}
/>
) : null}
<WebView
style={styles.WebViewStyle}
//Loading URL
source={{ uri: 'https://aboutreact.com' }}
//Enable Javascript support
javaScriptEnabled={true}
//For the Cache
domStorageEnabled={true}
//View to show while loading the webpage
//Want to show the view or not
//startInLoadingState={true}
onLoadStart={() => this.showSpinner()}
onLoad={() => this.hideSpinner()}
/>
</View>
);
}
}
const styles = StyleSheet.create({
stylOld: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
styleNew: {
flex: 1,
},
WebViewStyle: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
marginTop: 40,
},
ActivityIndicatorStyle: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
},
});
My response will not directly answer your question but it will get you to think about using Skeleton loaders in place of traditional loading indicators (ie. spinner). I've replaced all my project's indicators with Skeletons and have received great user feedback since the change.
Here's a detailed explanation:
https://mechanicalrock.github.io/2022/07/11/replace-circular-loaders-with-skeletons-a.html
Hope this plants the seed as a pattern going forward.
<WebView
style={{
flex: 1
}}
startInLoadingState={true}
source={{ uri: "https://google.com" }}
renderLoading={() => (
)}
/>