Trying to build sign in page but the input width I am not getting. It is the width of button. The width 100% is not waking on inputs. Any idea
return (
<View style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}>
<Card>
<Input
placeholder="Email"
value={username}
onChangeText={setUsername}
/>
<Input
placeholder="Password"
secureTextEntry={true}
value={password}
onChangeText={setPassword}
/>
<Button
title="Sign in"
onPress={() => signin({ username, password })}
/>
</Card>
</View>
);
Also I am using
import { Card, Button, Text, Input } from "react-native-elements";
Related
I am using material UI version 5.4 and I have a sign-in form and applied validations on it. Validation is appearing properly but my problem is when I placed a long texted error message the exclamation mark is coming below outlined text field of the MUI material.
Here is the screenshot:
And here is the code:
<Box
component="form"
role="form"
sx={{
"& .MuiFormHelperText-root": { color: "#d32f2f" },
"& .MuiInputLabel-formControl": { paddingTop: "5px" },
}}
>
<Box mb={2}>
<TextField
type="email"
label="Email"
variant="standard"
fullWidth
onChange={(e) => emailHandler(e)}
error={emailError}
helperText={emailError ? emailErrorMessage : ""}
/>
</Box>
<Box mb={2}>
<TextField
margin="dense"
type="password"
label="Password"
variant="standard"
fullWidth
onChange={(e) => passwordHandler(e)}
error={passwordError}
helperText={passwordError ? passwordErrorMessage : ""}
/>
</Box>
<Box>
<span style={{ color: "#d32f2f", fontSize: "12px" }}>{error}</span>
</Box>
<Typography variant="button" color="info" to="/forgot-password" component={Link}>
Forgot Password?
</Typography>
<Box mt={4} mb={1}>
<Button variant="gradient" color="newColor" fullWidth onClick={signInHandler}>
sign in
</Button>
</Box>
<Box mt={3} mb={1} textAlign="center">
<Typography variant="button" color="text">
Don't have an account?{" "}
<Typography
onClick={() => {
navigate("/sign-up", { replace: true });
}}
style={{ cursor: "pointer" }}
variant="button"
color="info"
fontWeight="medium"
textGradient
>
Sign Up
</Typography>
</Typography>
</Box>
</Box>
How can I solve this styling issue?
I am creating a form and have the following so far:
I need the inputs Name to be on top and then Start Date and End Date to be in the rows below which is fine. However I want the text for "Start Date" and "End Date" to be on top of the input fields rather than within the row. I am not sure how to achieve this and have tried using flexDirection as follows:
<span>Name </span>
<Input
type="text"
onChange={(e) => setName(e.target.value)}
value={name}
/>
<div style={{ flexDirection: "row", display: "flex" }}>
<span
style={{
flexDirection: "column",
display: "flex",
}}
>
Start Date
</span>
<Input
style={{ flexDirection: "row", width: "45%", flexWrap: "wrap" }}
type="text"
onChange={(e) => setStartDate(e.target.value)}
value={startDate}
/>
<span>End Date</span>
<Input
style={{ flexDirection: "row", width: "45%", flexWrap: "wrap" }}
type="text"
onChange={(e) => setEndDate(e.target.value)}
value={endDate}
/>
</div>
One solution is wrap each span and input into a div and give each span display: block
It would be better to use classes instead of using inline style.
<span>Name </span>
<Input
type="text"
onChange={(e) => setName(e.target.value)}
value={name}
/>
<div style={{ flexDirection: "row", display: "flex" }}>
<div>
<span
style={{ display: 'block' }}
>
Start Date
</span>
<Input
style={{ flexDirection: "row", width: "45%", flexWrap: "wrap" }}
type="text"
onChange={(e) => setStartDate(e.target.value)}
value={startDate}
/>
</div>
<div>
<span style={{ display: 'block' }}>End Date</span>
<Input
style={{ flexDirection: "row", width: "45%", flexWrap: "wrap" }}
type="text"
onChange={(e) => setEndDate(e.target.value)}
value={endDate}
/>
</div>
</div>
I am facing an issue of adding the slide animation on the question and answer. I want on click of the radio button the slide effect comes and next question comes with Slideup animation.
<Grid item xs={12} sm={8} md={8}>
<Slide direction="up"
in={checked}
appear={true}
mountOnEnter
unmountOnExit
timeout={{ enter: 1000 , exit: checked ? 1 : 900}}
>
<Card variant="outlined" sx={{ bgcolor: "#bea"}} elevation={0}>
<CardContent>
<form onSubmit= {handleSubmit}>
<CardActions>
<Button type="submit" color="warning" variant="outlined" disabled={currentQuestion===0} className={classes.button} onClick={previousQuestion}>
Previous</Button>
</CardActions>
<FormControl component='fieldset' className={classes.formControl}
data-hidden={questions[currentQuestion].number !==
currentQuestion[questions[currentQuestion] .number]} >
<FormLabel component='legend'>
{questions[currentQuestion].question}
</FormLabel>
<FormLabel component='legend'>
{questions[currentQuestion].description}
</FormLabel>
<RadioGroup
aria-label='quiz'
name='quiz'
value={questions[currentQuestion].value}
checked={checked}
onChange={(e)=> handleRadioChange(questions[currentQuestion].number, e)}
sx={{
color: pink[800],
'&.Mui-checked': {
color: blue[600],
},
}}>
{options.map((option) => (
<FormControlLabel
key={option.score}
value={option.score}
control={<Radio sx={{
color: pink[800],
'&.Mui-checked': {
color: blue[600],
},
}}/>}
label={option.label}
/>
))}
</RadioGroup>
</FormControl>
<CardActions>
<Button type="submit" variant="contained" color="primary" className={classes.button} disabled={currentQuestion != 5} onClick={handleSubmit}>
Submit
</Button>
</CardActions>
</form>
</CardContent>
</Card>
</Slide>
This is not working smoothly. So please help. The problem is on click of previous button the value disappeared. The slide effect is not flawless.
Hello, I am using react-bootstrap library. I want to center the search bar and button on the navbar. But while centering, it's also taking into account the sibling element (logo) and leaning towards the right of the page. I don't want to solve this by applying brute force minus margin-left if possible. I'm confused with these justify-content stuff. Thanks in advance.
<Navbar style={{ backgroundColor: "#D3D3D3" }}>
<Nav className="d-flex justify-content-start">
<NavbarBrand href="/">
<img src={logo} alt="pokedex-logo" style={{ width: 250, marginLeft: 20 }} />
</NavbarBrand>
</Nav>
<Nav className="d-flex flex-grow-1 justify-content-center">
<Form className="d-inline-flex">
<FormControl
type="search"
placeholder="Type pokemon name"
value={search}
onChange={e => setSearch(e.target.value)}
/>
<Button
style={{ backgroundColor: "#ffe031", color: "#396bba" }}
onClick={() => history.push(`/pokemon/${search}`)}
>
<strong>Search</strong>
</Button>
</Form>
</Nav>
</Navbar>
Try it like this:
<Navbar style={{ backgroundColor: "#D3D3D3", display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'start' }}>
<NavbarBrand href="/">
<img src={logo} alt="pokedex-logo" style={{ width: 250 }} />
</NavbarBrand>
<Form className="" style={{ margin: 'auto' }}>
<FormControl type="search" placeholder="Type pokemon name" value={search} onChange={e => setSearch(e.target.value)}/>
<Button style={{ backgroundColor: "#ffe031", color: "#396bba" }} onClick={() => history.push(`/pokemon/${search}`)}>
<strong>Search</strong>
</Button>
</Form>
</Navbar>
Here, the Navbar has display flex and the flex direction is row so the logo along with the 2 search elements (text field and search button) will be shown in a row. Then alignItems:'center' centers these 3 elements vertically in the Navbar and the justifyContent: 'start' moves the 3 elements to the start of the Navbar horizontally.
After this, to make the 2 elements of search come in the center, margin:'auto' is used in the Form.
And here's another way: (if the above code doesn't correctly align the search elements in center)
<Navbar style={{ position: 'relative', display: 'flex', backgroundColor: "#D3D3D3" }}>
<NavbarBrand href="/" style={{float: 'left'}}>
<img src={logo} alt="pokedex-logo" style={{ width: 250 }} />
</NavbarBrand>
<Form style={{ float: 'none', position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }}>
<FormControl type="search" placeholder="Type pokemon name" value={search} onChange={e => setSearch(e.target.value)} />
<Button style={{ backgroundColor: "#ffe031", color: "#396bba" }} onClick={() => history.push(`/pokemon/${search}`)}>
<strong>Search</strong>
</Button>
</Form>
</Navbar>
In this code, the CSS properties of position and float are used. float: 'left' moves the logo to the left and the search elements have float: 'none'. The search elements use the position property to align to the center of the Navbar which has position: 'relative'.
I'm trying to learn react native.
I have the following code:
<View>
<View style={{flex:0.5,flexDirection="row"}}>
<Image source={{uri:"http://image.com/image1.jpg"}} style={{width:100,height:'auto'}} resizeMode={"cover"} />
<Text>Picture 1</Text>
</View>
<View style={{flex:0.5,flexDirection="row"}}>
<Image source={{uri:"http://image.com/image2.jpg"}} style={{width:100,height:'auto'}} resizeMode={"cover"} />
<Text>Picture 2</Text>
</View>
<View style={{flex:0.5,flexDirection="row"}}>
<Image source={{uri:"http://image.com/image3.jpg"}} style={{width:100,height:'auto'}} resizeMode={"cover"} />
<Text>Picture 3</Text>
</View>
<View style={{flex:0.5,flexDirection="row"}}>
<Image source={{uri:"http://image.com/image4.jpg"}} style={{width:100,height:'auto'}} resizeMode={"cover"} />
<Text>Picture 4</Text>
</View>
</View>
But this when I run this code, I get an error saying the line
<View style={{flex:0.5, flexDirection:"row"}}>
"is an unexpected token".
I tried replace 0.5 with 50% and "0.5" but those also causes error.
Basically if this were html css for the web, the behaviour I'm trying to achieve is:
<div>
<div style="width:50%; float:left;">
<img src="http://image.com/image1.jpg" style="width:100%; height:auto;" />
<span>Picture 1</span>
</div>
<div style="width:50%; float:left;">
<img src="http://image.com/image2.jpg" style="width:100%; height:auto;" />
<span>Picture 1</span>
</div>
<div style="width:50%; float:left;">
<img src="http://image.com/image3.jpg" style="width:100%; height:auto;" />
<span>Picture 1</span>
</div>
<div style="width:50%; float:left;">
<img src="http://image.com/image4.jpg" style="width:100%; height:auto;" />
<span>Picture 1</span>
</div>
</div>
In other words, I just want two columns of thumbnail images with a caption underneath each image.
Set up the container with flexDirection:'row' and each child to have half of the screen flexBasis without flex grow. something like this:
<View>
<View style={{flexDirection="row"}}>
<Image source={{uri:"http://image.com/image1.jpg"}} style={{flexBasis:Dimensions.get('window').width / 2, flexGrow:0}} resizeMode={"cover"} />
<Text {{flexBasis:Dimensions.get('window').width / 2, flexGrow:0}}>Picture 1</Text>
</View>
...
I started on react-native not much time ago and I think what you need is something like this:
import React, { Component } from 'react';
import {
StatusBar,
View,
Image,
StyleSheet,
TouchableHighlight
} from 'react-native';
import NavigationBar from './navigationBar';
const logo = require('../../imgs/logo5.png');
const clientMenu = require('../../imgs/menu_cliente.png');
const contactMenu = require('../../imgs/menu_contato.png');
const companyMenu = require('../../imgs/menu_empresa.png');
const serviceMenu = require('../../imgs/menu_servico.png');
export default class MainScene extends Component {
render() {
console.log('Rendering App!');
return (
<View>
<StatusBar
backgroundColor='#CCC'
/>
<NavigationBar />
<View style={styles.logo}>
<Image source={logo} />
</View>
<View style={styles.menu}>
<View style={styles.menuGroup}>
<TouchableHighlight
underlayColor={'#B9C941'}
activeOpacity={0.3}
onPress={() => {
this.props.navigator.push({ id: 'client' });
}}
>
<Image style={styles.imgMenu} source={clientMenu} />
</TouchableHighlight>
<TouchableHighlight
underlayColor={'#61BD8C'}
activeOpacity={0.3}
onPress={() => {
this.props.navigator.push({ id: 'contact' });
}}
>
<Image style={styles.imgMenu} source={contactMenu} />
</TouchableHighlight>
</View>
<View style={styles.menuGroup}>
<TouchableHighlight
underlayColor={'#EC7148'}
activeOpacity={0.3}
onPress={() => {
this.props.navigator.push({ id: 'company' });
}}
>
<Image style={styles.imgMenu} source={companyMenu} />
</TouchableHighlight>
<TouchableHighlight
underlayColor={'#19D1C8'}
activeOpacity={0.3}
onPress={() => {
this.props.navigator.push({ id: 'services' });
}}
>
<Image style={styles.imgMenu} source={serviceMenu} />
</TouchableHighlight>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
logo: {
marginTop: 30,
alignItems: 'center'
},
menu: {
alignItems: 'center'
},
menuGroup: {
flexDirection: 'row'
},
imgMenu: {
margin: 15
}
});
What you are trying to achieve can be done simply by this code:
<View style={{flexDirection:column}}>
<View style={{flex:1, flexDirection:row}}>
<View style={{flex:0.5,flexDirection:column}}>
<Image source={{uri:"http://image.com/image1.jpg"}} style={{width:100,height:'auto'}} resizeMode={"cover"} />
<Text>Picture 1</Text>
</View>
<View style={{flex:0.5,flexDirection:column}}>
<Image source={{uri:"http://image.com/image1.jpg"}} style={{width:100,height:'auto'}} resizeMode={"cover"} />
<Text>Picture 1</Text>
</View>
</View>
<View style={{flex:1, flexDirection:row}}>
<View style={{flex:0.5,flexDirection:column}}>
<Image source={{uri:"http://image.com/image1.jpg"}} style={{width:100,height:'auto'}} resizeMode={"cover"} />
<Text>Picture 1</Text>
</View>
<View style={{flex:0.5,flexDirection:column}}>
<Image source={{uri:"http://image.com/image1.jpg"}} style={{width:100,height:'auto'}} resizeMode={"cover"} />
<Text>Picture 1</Text>
</View>
</View>
</View>
You have to give style={{flex:1}} to the main view and this might solve your problem.
MdBalal's strategy will not work. flex:0.5 in RN is not the same as in web standard, it will not work if
you put more than 2 children components in container. A walk-around is group children to two components in one container. Eg:
Suppose we have 3 child components in Container,
**Before**:
<Container><Child/><Child/><Child/></Container>
**After**:
<Container><Child/><Child/></Container> and
<Container><Child/><EmptyPlaceholder/></Container>