I have a FontAwesome icon in my react-native application, how can i spin that icon.
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
<View>
<FontAwesome5
name={"circle-notch"}
style={{ fontSize: 10 }}
spin
/>
</View>
Related
I have a problem with setting video like a background. As you can see on picture, when I scroll at the bottom, my video is not ending before footer. It's displaying also after the footer. Image
Here is the part of code were I placed my video and btw, this video like a background needs to be only on this page.
return (
<>
<video src={videoBackground} autoPlay muted></video>
<Container style={{ padding: 0, margin: 0 }}>
<WrapperPage>
<WrapperContainer>
<Container maxWidth="sm">
<Box
sx={{
maxWidth: "100%",
my: 3,
textAlign: "center",
}}
>
<h1>
<div
className="wordSize animate__animated animate__bounceInDown"
style={{ fontSize: "6rem" }}
>
Blokaria
</div>
<div
className="animate__animated animate__bounceInUp wordSize"
style={{ fontSize: "2.5rem" }}
>
<div>Where we create unique value</div>
</div>
</h1>
<Typography></Typography>
</Box>
</Container>
{staniIbarVodo ? showData : ""}
<Container maxWidth="sm" sx={{ mt: 5, mb: 5, textAlign: "center" }}>
<Grid container spacing={4} direction="row" sx={{ my: 3 }}>
<Grid item xs={12} md={6}>
<Typography variant="h6" align="center" sx={{ mb: 2 }}>
{t("how-to-create-qr-code")}
</Typography>
<YoutubeEmbed embedId="1cz9q9OQ6Kg" />
<Typography component="legend">User reviews</Typography>
<Rating name="read-only" value={5} readOnly />
</Grid>
<Grid item xs={12} md={6}>
<Typography variant="h6" align="center" sx={{ mb: 2 }}>
{t("howToCreateNft")}
</Typography>
<YoutubeEmbed embedId="aYuXCImLVPQ" />
<Typography component="legend">User reviews</Typography>
<Rating name="read-only" value={4} readOnly />
</Grid>
</Grid>
</Container>
</WrapperContainer>
</WrapperPage>
</Container>
<video src={videoBackground} autoPlay muted></video>
</>
);
Here is the CSS:
video {
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
I really don't know what is the problem and if someone knows the solution, please help. Thank you!
Also I tried to set some static picture for background and everything is okay but this video makes me problem.
I have a navbar that is suppose to align all the page options to the right. However, it does not do this. The entire toolbar is a flexbox and I've tried using alignSelf: end but this would only move the text slightly downwards.
I am not sure why it does this because the orientation I've chosen for the toolbar is row and not column.
I have tried removing the options that appear when the screen resizes but this did not work either.
Below is the code that is the issue. I've also commented as to which box is causing the issue. (comment labeled ISSUE)
{/* Issue */}
{/* ABOUT, PROJECTS, CONTACT - full screen */}
<Box sx={{ display: { xs: 'none', md: 'flex' }, alignItems: "flex-end" }}>
{pages.map((page) => (
<Button
key={page}
onClick={handleCloseNavMenu}
sx={{ my: 2, color: 'black', display: 'block' }}
>
{page}
</Button>
))}
</Box>
The entire code:
import * as React from 'react';
import AppBar from '#mui/material/AppBar';
import Box from '#mui/material/Box';
import Toolbar from '#mui/material/Toolbar';
import IconButton from '#mui/material/IconButton';
import Typography from '#mui/material/Typography';
import Menu from '#mui/material/Menu';
import MenuIcon from '#mui/icons-material/Menu';
import Container from '#mui/material/Container';
import Button from '#mui/material/Button';
import MenuItem from '#mui/material/MenuItem';
const pages = ['About', 'Projects', 'Contact'];
const NavBar = () => {
const [anchorElNav, setAnchorElNav] = React.useState(null);
const handleOpenNavMenu = (event) => {
setAnchorElNav(event.currentTarget);
};
const handleCloseNavMenu = () => {
setAnchorElNav(null);
};
return (
<AppBar position="static" sx={{backgroundColor: "blue"}}>
<Container maxWidth="xl">
<Toolbar disableGutters sx={{display: { xs: 'flex' }, flexDirection: "row", backgroundColor: "blue"}}>
{/* LOGO */}
<Typography
variant="h2"
noWrap
component="div"
color="black"
sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}
>
name
</Typography>
{/*Drawer - small screen */}
<Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none'} }}>
{/* Menu triple bar */}
<IconButton
size="large"
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleOpenNavMenu}
color="inherit"
>
<MenuIcon />
</IconButton>
{/* ABOUT, PROJECTS, CONTACT - small screen */}
<Menu
id="menu-appbar"
anchorEl={anchorElNav}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'left',
}}
open={Boolean(anchorElNav)}
onClose={handleCloseNavMenu}
sx={{
display: { xs: 'block', md: 'none' },
}}
>
{pages.map((page) => (
<MenuItem key={page} onClick={handleCloseNavMenu}>
<Typography textAlign="center">{page}</Typography>
</MenuItem>
))}
</Menu>
</Box>
{/* LOGO - small screen */}
<Typography
variant="h6"
noWrap
component="div"
color="black"
sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}
>
name
</Typography>
{/* Issue */}
{/* ABOUT, PROJECTS, CONTACT - full screen */}
<Box sx={{ display: { xs: 'none', md: 'flex' }, alignItems: "flex-end" }}>
{pages.map((page) => (
<Button
key={page}
onClick={handleCloseNavMenu}
sx={{ my: 2, color: 'black', display: 'block' }}
>
{page}
</Button>
))}
</Box>
</Toolbar>
</Container>
</AppBar>
);
};
export default NavBar;
You need to use justifyContent or justifySelf to move content on the main axis and alignContent and alignSelf to move content on cross axis, you were using the wrong CSS property since the main axis in this case is row. For more info. regarding flexbox axes please refer to this link
Let me simplify this for you.
The work around is fairly easy. The parent Container has two children "Logo/Typography" and "Box", you want the "Box" child to move at the end of the container, you just need to give parent (Toolbar) justifyContent: space-between property to make sure both children are at opposite ends.
Play around with the code here
<AppBar position="static" sx={{ backgroundColor: "blue" }}>
<Container maxWidth="xl">
<Toolbar
disableGutters
sx={{
display: { xs: "flex" },
flexDirection: "row",
backgroundColor: "blue",
justifyContent: "space-between"
}}
>
{/* LOGO */}
<Typography
variant="h2"
noWrap
component="div"
color="black"
sx={{ mr: 2, display: { xs: "none", md: "flex" } }}
>
name
</Typography>
{/*Drawer - small screen */}
<Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
{/* Menu triple bar */}
<IconButton
size="large"
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleOpenNavMenu}
color="inherit"
>
<MenuIcon />
</IconButton>
{/* ABOUT, PROJECTS, CONTACT - small screen */}
<Menu
id="menu-appbar"
anchorEl={anchorElNav}
anchorOrigin={{
vertical: "bottom",
horizontal: "left"
}}
keepMounted
transformOrigin={{
vertical: "top",
horizontal: "left"
}}
open={Boolean(anchorElNav)}
onClose={handleCloseNavMenu}
sx={{
display: { xs: "block", md: "none" }
}}
>
{pages.map((page) => (
<MenuItem key={page} onClick={handleCloseNavMenu}>
<Typography textAlign="center">{page}</Typography>
</MenuItem>
))}
</Menu>
</Box>
{/* LOGO - small screen */}
<Typography
variant="h6"
noWrap
component="div"
color="black"
sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}
>
name
</Typography>
{/* Issue */}
{/* ABOUT, PROJECTS, CONTACT - full screen */}
<Box
sx={{
display: { xs: "none", md: "flex" }
}}
>
{pages.map((page) => (
<Button
key={page}
onClick={handleCloseNavMenu}
sx={{ my: 2, color: "black", display: "block" }}
>
{page}
</Button>
))}
</Box>
</Toolbar>
</Container>
</AppBar>
So I am encountering a weird issue where when I am on mobile scrolling on my website gets sticky, as in sometimes it lets you scroll and others it doesn't. Cant seem to figure out why, no console errors or anything like that. Included below code for just a few of the sub grid components but I have 9, they're all identical. Written in react with material-ui.
What I think the issue is is the DOM loading just a few of the grid items, then loading more and the scroll taking time to adjust. Although what leads me to question that is when you scroll to the bottom, the same issue happens even though nothing has changed in the state.
This is hosted on firebase at https://brightspotblog-26d91.web.app/ if you would like to see the issue for yourselves.
return (
<div className="App">
<Grid
container
spacing={0}
direction="column"
alignItems="center"
justify="center"
style={{ minHeight: "100vh", overflowX: "hidden"}}
>
<StarfieldAnimation
style={{
position: "absolute",
width: "100%",
height: "100vh",
zIndex: -10,
}}
/>
<Typography variant="h3" color="primary" style={{ padding: 25}} align="center">
The Final Frontier
</Typography>
<Grid
container
item
md={9}
spacing={5}
alignItems="center"
direction="row"
>
<Grid item md={4}>
<Card
variant="outlined"
style={{ backgroundColor: "transparent", borderColor: "white" }}
>
<CardContent>
<Typography variant="h4" color="primary">
Mercury
</Typography>
<Typography color="primary">Terrestrial Planet</Typography>
<Typography variant="body2" color="primary" component="p">
Mercury is the smallest and innermost planet in the Solar System. Its orbit around the Sun takes 87.97 days, the shortest of all the planets.
</Typography>
</CardContent>
<CardActions>
<Avatar alt="Mercury" src={Mercury} />
<div style={{ flex: 1 }} />
<Button color="primary" variant="outlined" >
Learn More
</Button>
</CardActions>
</Card>
</Grid>
<Grid item md={4}>
<Card
variant="outlined"
style={{ backgroundColor: "transparent", borderColor: "white" }}
>
<CardContent>
<Typography variant="h4" color="primary">
Venus
</Typography>
<Typography color="primary">Terrestrial Planet</Typography>
<Typography variant="body2" color="primary" component="p">
Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty. It is the second-brightest natural object in the night sky after Moon.
</Typography>
</CardContent>
<CardActions>
<Avatar alt="Venus" src={Venus}/>
<div style={{ flex: 1 }} />
<Button color="primary" variant="outlined" size="small">
Learn More
</Button>
</CardActions>
</Card>
</Grid>
<Grid item md={4}>
<Card
variant="outlined"
style={{ backgroundColor: "transparent", borderColor: "white" }}
>
<CardContent>
<Typography variant="h4" color="primary">
Earth
</Typography>
<Typography color="primary">Terrestrial Planet</Typography>
<Typography variant="body2" color="primary" component="p">
Earth is the third planet from the Sun and the only astronomical object known to harbor life. Earth formed over 4.5 billion years ago.
</Typography>
</CardContent>
<CardActions>
<Avatar alt="Earth" src={Earth} />
<div style={{ flex: 1 }} />
<Button color="primary" variant="outlined" size="small">
Learn More
</Button>
</CardActions>
</Card>
</Grid>
<Grid item md={4}>
<Card
variant="outlined"
style={{ backgroundColor: "transparent", borderColor: "white" }}
>
<CardContent>
<Typography variant="h4" color="primary">
Mars
</Typography>
<Typography color="primary">Terrestrial Planet</Typography>
<Typography variant="body2" color="primary" component="p">
Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System, larger than only Mercury.
</Typography>
</CardContent>
<CardActions>
<Avatar alt="Mars" src={Mars} />
<div style={{ flex: 1 }} />
<Button color="primary" variant="outlined" size="small">
Learn More
</Button>
</CardActions>
</Card>
</Grid>
</Grid>
</Grid>
</div>
);
try the following:
html,
body {
width: 100%;
margin: 0;
padding: 0;
}
in your app.css or a global stylesheet. I know I've run into this issue a couple of times with material ui
Newbie here.
I just started playing around with ReactJS on codesandbox.
I want to keep an image element (the green arrow) in a specific position over the gauge element. I tried it the simplest way I could think of, and it kinda suits what I need, but...
When I open the page, the image is misplaced, but if I do a page refresh, the image will be exactly where I want it... why?! What can be the reason and any idea of how to solve it?
Perhaps, can you tell me any other way of positioning an image in a specific place inside the div?
Here's the link: https://codesandbox.io/embed/gauge-ship-engine-1-h2nhx?fontsize=14&hidenavigation=1&theme=dark&codemirror=1
Here's the code:
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import ReactSpeedometer from "react-d3-speedometer";
import "bootstrap/dist/css/bootstrap.min.css";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import arrow from "./greenarrow.png";
class Gauge extends React.Component {
constructor(props) {
super(props);
this.state = {
value: ""
};
this.handleGaugeValueChange = this.handleGaugeValueChange.bind(this);
}
handleGaugeValueChange(e) {
console.log(1);
this.setState({
value: e.target.value
});
}
render() {
return (
<div className="center">
<h1 className="title">Ship Engine 1</h1>
<Container className="p-3">
<Row>
<Col>
<div
className="speedometer"
style={{
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center"
}}
>
<img
src={arrow}
alt="greenarrow"
style={{
position: "absolute",
opacity: 1,
zIndex: "1",
transform: "rotate(-35deg)",
marginLeft: "-65px",
marginTop: "-80px"
}}
/>
<ReactSpeedometer
maxValue={150}
ringWidth={20}
customSegmentStops={[0, 30, 55, 65, 90, 120, 150]}
segmentColors={[
"#FAFAFA",
"#FAFAFA",
"#007fff",
"#FAFAFA",
"#FAFAFA",
"#FAFAFA"
]}
needleHeightRatio={0.72}
valueTextFontSize="19px"
needleTransitionDuration={9000}
needleTransition="easeElastic"
currentValueText="${value} kW"
value={this.state.value}
/>
</div>
<div className="divLabelReq">
<label
className="labelReq"
htmlFor="value"
style={{ color: "#6b6964" }}
>
Requested: 39.7kW
</label>
</div>
</Col>
<Col>
<form className="form-settings" onSubmit={this.handleSubmit}>
<div className="form-row">
<div className="form-group col-md-5">
<label
className="label"
htmlFor="value"
style={{ color: "white" }}
>
Change Gauge Value:{" "}
</label>
<input
type="number"
className="form-control"
name="value"
id="value"
placeholder="0"
onChange={this.handleGaugeValueChange}
value={this.state.keywords}
/>
</div>
</div>
</form>
</Col>
</Row>
</Container>
</div>
);
}
}
export default Gauge;
const rootElement = document.getElementById("root");
ReactDOM.render(<Gauge />, rootElement);
Thanks in advance!
It looks like your green arrow has not a reference. For instance the parent element has not a position declared. Try something like:
<div
className="speedometer"
style={{
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
position: "relative"
}}
>
I am using FAB ( https://callstack.github.io/react-native-paper/fab.html#icon ) from react native paper library. I want to align button at bottom but it is overlapping with textInput field how can I place it below that textInput ? See screenshot below.
code:
//Inside return
<ScrollView>
<Text style={styles.title}>Add a Lead</Text>
<View style={styles.inputContainer}>
<Image source={require('../../assets/images/name.png')} style={{
marginTop: 15, width: 32, height: 32, resizeMode: 'contain'}}/>
<TextInput
placeholder='Name'
value={this.state.name}
style={styles.input}
onChangeText={ name => this.setState({name})}
error={this.state.nameError}
/>
</View>
<HelperText type="error" visible={this.state.emailError}>
{this.state.emailError}
</HelperText>
Similarly other items for phone email etc....
<View style={{marginTop: 20, flex: 1, flexDirection: 'row'}}>
<Image source={require('../../assets/images/comment.png')} style={{
marginTop: 20, width: 32, height: 32, resizeMode: 'contain'}}/>
<Text style={{marginTop: 25, marginLeft: 15}}>Comment</Text>
</View>
<View>
<TextInput
style={{height: 65, marginTop: 15, borderColor: 'gray', borderWidth: 1}}
onChangeText={(comment) => this.setState({comment})}
value={this.state.comment}
error={this.state.commentError}
multiline = {true}
numberOfLines = {4}
/>
</View>
<FAB
style={styles.fab}
small
icon="arrow_forward"
onPress={this.handleCreateNewLead}
/>
</ScrollView>
css:
fab: {
position: 'absolute',
margin: 16,
right: 0,
bottom: -20,
},
Screenshot:
What it is currently looking like:
For textarea (which you placed the ? icon) added position:relative.
<TextInput style={{height: 65, marginTop: 15, borderColor: 'gray', borderWidth: 1, position: relative}}
and change following style for fab component
fab: {
position: 'absolute',
margin: 16,
right: 10,
bottom: 10,
}
may it will works.
You need to wrap with View both of TextField and FAB component;
<View style={styles.container}>
<TextInput
style={styles.textField}
onChangeText={(comment) => this.setState({comment})}
value={this.state.comment}
error={this.state.commentError}
multiline={true}
numberOfLines={4}
/>
<FAB
style={styles.fab}
small
icon="arrow_forward"
onPress={this.handleCreateNewLead}
/>
</View>
and change your styles with these;
const styles={
container:{
flexDirection:"row",
alignItems:"center",
marginTop: 15
},
textField:{
flex:1,
height: 65,
borderColor: 'gray',
borderWidth: 1
},
fab: {
position:"absolute",
right:0,
},
};