I am trying to use a parallax from react-materiallize for a portfolio site. I've got the images working in the parallax however it doesn't not seem to be scrolling.
I've loaded JQuery before material CSS in the index.html file
import React, { Component } from 'react'
import {Parallax, Row} from 'react-materialize'
export default class ParalaxComponent extends Component {
render(){
debugger
return (
<Row>
<Parallax imageSrc="https://www.thoughtco.com/thmb/DF3Q0T5_0O5CmGBTCWCBTcyGgmw=/768x0/filters:no_upscale():max_bytes(150000):strip_icc()/JavaScript-58acbb8a3df78c345bad32c2.jpg"></Parallax>
</Row>
)
}
}
The image shows up but the animation is not being triggered thank you for your help.
Here is the app on github if that's an easier way to debug the issue.
Ended up using 'npm react-parallax' instead.
There is great documentation and a demo app here
Related
In my App.js i have set :
import * as NavigationBar from "expo-navigation-bar";
...In my component
useEffect(() => {
if (android) {
NavigationBar.setBackgroundColorAsync("transparent");
}
}, []);
which sets my navigation bars transparent in all screens,but when a modal is visible :
<Modal
animationType="none"
transparent
visible={isVisible}
presentationStyle="overFullScreen"
hardwareAccelerated
>
...navigation bar becomes white,even when i try to set it also within my modal component as well,any known solutions for this ?
I had this problem in Android as well. What I believe is happening is the react-native modal is simply taking the default android:navigationBarColor in the styles.xml and so every time it pops up, it overwrites the current navigation bar color until it gets dismissed.
The flag statusBarTranslucent did not work for me.
I was able to fix this by navigating to /res/values/styles.xml in your app or src folder
It really helps if you change your view style to "Android"
then
Then in the AppTheme style I added navigationBarColor to be transparent.
It looks like this
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:textColor">#android:color/black</item>
<item name="android:navigationBarColor">#android:color/transparent</item> // <----This is what I added
</style>
Then in my react native code, I used react-native-navigation-bar-color. I believe this should work with expo-navigation-bar since the main issue is derived from react native modal trying to overlay the default navBarColor value.
import changeNavigationBarColor from "react-native-navigation-bar-color";
const setDarkMode = (isDarkMode: boolean) => {
// logic to change my app's themeProvider to dark mode
changeNavigationBarColor(isDarkMode ? "black" : "white"); // Then I change the navigation bar color.
};
Hopefully this helps someone!
I'm trying to render 2 SVG files on my react app.
Here:
But when importing it as a component to React:
import { ReactComponent as ClosedEnvelope } from "../../close.svg";
import { ReactComponent as OpenEnvelope } from "../../open.svg";
const Envelope = ({closed) => {
return (
<div>
{closed ? <ClosedEnvelope /> : <OpenEnvelope />}
</div>
);
};
It renders the SVG incorrectly:
As you can see the "arrow" on the bottom left side is overflowing.
Seems like an issue with the method I used, because loading the SVG as an image, does work.
What may the problem be?
Thanks in advance
Here are the links to the SVG files:
Close envelope Github
Open envelope Github
Well, Apparently the 2 SVG files, had the same classes and IDs, which caused them to change a little.
If you have the same issue,
Change all the classes in one SVG file.
Change all IDs, also in the CSS like clip-path: URL(#SOME_ID)
This worked for me.
I'm having this weird issue where my styling is not sticking. I have a NavBar set to be 20vh in height. I also have an image set to be 100% in width. However, when I refresh the page, the NavBar height shrinks and the image width increases significantly. I'm not sure what is causing this problem. I have pasted the relevant code below but you can also find the repo for the app at this link (dev branch).
const useStyles = makeStyles((theme) => ({
navBar: {
height: "20vh",
width: "100%",
},
}));
const NavBar = () => {
const classes = useStyles();
return <div className={classes.navBar}>NavBar</div>;
};
const useStyles = makeStyles((theme) => ({
introImg: {
width: "100%",
height: "auto",
},
}));
const Intro = () => {
const classes = useStyles();
return <img src={marco4sup} className={classes.introImg} />;
};
As you can see, the NavBar is definitely not 20vh and the image is expanding beyond 100% of the page width.
Alert: I will give a pull request on the repo on github so you can implement the code. Fast Refresh is a Next.js feature that gives you instantaneous feedback on edits made to your React components. Fast Refresh is enabled by default in all Next.js applications on 9.4 or newer. With Next.js Fast Refresh enabled, most edits should be visible within a second, without losing component state.
How It Works
If you edit a file that only exports React component(s), Fast Refresh will update the code only for that file, and re-render your component. You can edit anything in that file, including styles, rendering logic, event handlers, or effects.
If you edit a file with exports that aren't React components, Fast Refresh will re-run both that file, and the other files importing it. So if both Button.js and Modal.js import theme.js, editing theme.js will update both components.
Finally, if you edit a file that's imported by files outside of the React tree, Fast Refresh will fall back to doing a full reload. You might have a file which renders a React component but also exports a value that is imported by a non-React component. For example, maybe your component also exports a constant, and a non-React utility file imports it. In that case, consider migrating the constant to a separate file and importing it into both files. This will re-enable Fast Refresh to work. Other cases can usually be solved in a similar way.
Arrow functions aren't supported. Name your functional component.
export default function MyPage () {...
Without export defualt function MyPage() {... it won't use fast refresh therefore your code won't work, to implement it into your Code do the following(for code block1):
export default function UseStyles () {
navBar: {
height: "20vh",
width: "100%",
},
}));
const NavBar = () => {
const classes = useStyles();
return <div className={classes.navBar}>NavBar</div>;
};
Sorry if there are any grammatical errors my english isn't great.
And also if you want your navbar to be sticky set the position to sticky like the following:
position: sticky;
After a lot of searching, I can't seem to find a solution for this.
I'm using forawesome icons on my main page, and on load they are huge for a short period of time.
here is an example: https://makeyka.herokuapp.com/
I've tried
import {config} from "#fortawesome/fontawesome-svg-core";
config.autoAddCss = false;
then trying to add the css with no luck
Turn off autoAddCss:
import { config } from '#fortawesome/fontawesome-svg-core'
config.autoAddCss = false
Load in CSS directly in SCSS file:
#import 'node_modules/#fortawesome/fontawesome-svg-core/styles'
And in your style put this:
<style jsx global>{`
...
#import url('https://fonts.googleapis.com/css?family=Didact+Gothic');
${dom.css()}
...
`}</style>
please follow the link: https://fontawesome.com/how-to-use/on-the-web/other-topics/server-side-rendering
Basically this question is abut React.js. However I was stumbling over the very same issue in context of Vue.js. This solution of mine is basically meant to work with Vue.js in context of single-file components.
Insert this code in your entry code file:
import { config } from "#fortawesome/fontawesome-svg-core";
config.autoAddCss = false;
Now, prepend another block addressing the required file to any existing <style> block in your root element's component:
<style src="#fortawesome/fontawesome-svg-core/styles.css"></style>
class .hero-section-content-intro(container for all font Icons) has width: 300;
until CSS file for Icon is not loaded all icons takes width : 300 (of parent)
you need to handle this case to resolve issue.
add font-size for icons.
I'm struggling with react-spring to fade out a loading screen and then unmount it.
The component unmounts but without animation and I can't figure why. I created a sandbox to illustrate:
https://codesandbox.io/s/nkxjxwo2xl
import React from 'react'
import ReactDOM from 'react-dom'
import { Transition } from 'react-spring'
class Loader extends React.PureComponent {
state = { loaded: false }
componentDidMount() {
setTimeout(() => {
this.setState({ loaded: true })
}, 1000)
}
render() {
const { percentage } = this.props
const styles = {
height: '100vh',
width: '100vw',
background: 'tomato'
}
return (
<Transition native from={{ opacity: 1 }} leave={{ opacity: 0 }}>
{!this.state.loaded &&
(style => (
<div style={Object.assign({}, styles, style)}>
<div>{Math.round(percentage)} %</div>
</div>
))}
</Transition>
)
}
}
ReactDOM.render(<Loader percentage={0} />, document.getElementById('root'))
There are no react-spring tags yet if anyone could create one, I think it would be helpful.
Yep, you fixed it yourself, the animated.div component was missing. I would recommend the use of it, though. Even if your view is small, it will still be rendered out 60 times per second by React otherwise (meaning it will go through all component phases 60 times + render). With native set it renders once and the animation will be applied in a requestAnimationFrame-loop directly in the dom (via instance.style.setProperty, it completely skips React - which makes a difference once your app gets bigger.
I found the solution if anyone finds this question.
Using the native attribute, you'll need to use animated.div (or any animated component) in order to have it animated. Or simply remove the native attribute. In my case, it is a loader which is not often displayed so I went for the easier way by simply removing the native attribute.
More info on the Spectrum react-spring community