How to add padding to all child elements in React Native - css

I'm trying to add styling to child components of a React Native View. Since you cant use the > * selector in React Natives StyleSheet.create function how do you achieve this result?
Here is the code of a form I want to style:
<View style={styles.container}>
<View style={styles.centered}>
<Button mode="contained" onPress={onAddItem} style={styles.default}>
Add Item
</Button>
</View>
{showForm ? (
<View style={styles.form}>
<TextInput
label="Title"
returnKeyType="next"
theme={{ colors: { primary: 'blue',underlineColor:'transparent',}}}
style={{ width: 300 }}
value={title.value}
onChangeText={(text) => setTitle({ value: text, error: '' })}
error={!!title.error}
errorText={title.error}
autoCapitalize="none"
/>
<DropDownPicker
label="Select Type"
open={open}
value={value}
items={items}
setOpen={setOpen}
setValue={setValue}
setItems={setItems}
/>
<DropDownPicker
open={open2}
value={value2}
items={condition}
setOpen={setOpen2}
setValue={setValue2}
setItems={setCondition}
/>
<TextInput
label="Quantity"
returnKeyType="next"
theme={{ colors: { primary: 'blue',underlineColor:'transparent',}}}
style={{ width: 300 }}
value={quantity.value}
onChangeText={(text) => setQuantity({ value: text, error: '' })}
error={!!quantity.error}
errorText={quantity.error}
autoCapitalize="none"
/>
</View>
) : null}
</View>

Related

How to align startIcon material ui icon at the center?

I'm attempting to keep the icon button center aligned, but something isn't working right. Adding left: "0.5rem" to sx prop is pushing the button icon further. I'm trying not to use makeStyles to override the position. Any tip/direction would be helpful :)
Sandbox link
You can try using style:
<Stack direction="row" style={{display:"flex", justifyContent:"center", alignItems:"center"}}>
<Tooltip title="Delete">
<Button sx={{ minWidth: 0 }} startIcon={<DeleteIcon />} />
</Tooltip>
<Divider orientation="vertical" flexItem />
<Tooltip title="Send">
<Button sx={{ minWidth: 0 }} startIcon={<SendIcon />} />
</Tooltip>
<Tooltip title="Headset">
<Button sx={{ minWidth: 0 }} startIcon={<HeadsetMicOutlined />} />
</Tooltip>
<Divider orientation="vertical" flexItem />
</Stack>
In case you want to set it in you theme here is how you can do it so you don't have to do it in every Button component.
export const theme = createTheme({
...
components: {
MuiButton: {
styleOverrides: {
startIcon: {
margin: '0'
},
},
}
},
});

How to align button to stay at the bottom of page and avoid keyboard in React Native?

How can I keep the button at the absolute bottom of the viewable screen, while also avoiding the keyboard?
Right now the button is jumping up the screen when I open the keyboard.
I have tried using position: "absolute", bottom: "0" for the button element too, and that did not have any effect on the position of the button.
Here is my code:
return (
<KeyboardAvoidingView
behavior="padding"
style={styles.container}
>
<StatusBar style="light" />
<View style={styles.inputContainer}>
<TextInput
placeholder="First name (required)"
onChangeText={(name) =>
setFirstName((prev) => name)
}
style={styles.input}
/>
<TextInput
placeholder="Last name (optional)"
onChangeText={(lastname) =>
setFirstName((prev) => lastname)
}
style={styles.input}
/>
</View>
<Button
onPress={() => null}
title="Next"
buttonStyle={styles.button}
/>
</KeyboardAvoidingView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "space-between",
},
inputContainer: {
width: 350,
top: "20%",
alignSelf: "center",
},
input: {
borderBottomWidth: 3,
height: 50,
},
button: {
backgroundColor: Colors.blue,
width: 300,
marginBottom: 80,
height: 50,
alignSelf: "center",
},
});
This is how it looks when I open the keyboard:
The behavior of the avoiding view is different for both platforms.
<KeyboardAvoidingView
behavior= {Platform.OS === "ios"? "padding":"height"}
style={styles.container}
>
<StatusBar style="light" />
<View style={styles.inputContainer}>
<TextInput
placeholder="First name (required)"
onChangeText={(name) =>
setFirstName((prev) => name)
}
style={styles.input}
/>
<TextInput
placeholder="Last name (optional)"
onChangeText={(lastname) =>
setFirstName((prev) => lastname)
}
style={styles.input}
/>
</View>
<Button
onPress={() => null}
title="Next"
buttonStyle={styles.button}
/>
</KeyboardAvoidingView>
I hope this solves your problem.
Otherwise if you need more control over the keyboard behavior you can pragmatically change the default behavior using this package.
React-Native-Android-Keyboard-Adjust - I have used this package in few of the places and it helps in most of the cases.
Note: Package works on android only

Unable to change input fields height MUI reactjs

Input textfields height is not changing with in-line css.
<FormControl
sx={{
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "blue",
},
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderColor: "red",
},
"&.label[data-shrink=false]+.MuiInputBase-formControl .MuiInputBase-input-MuiOutlinedInput-input":
{
height: "25px",
},
}}
>
<LocalizationProvider
dateAdapter={AdapterDateFns}
sx={{
BackgroundColor: "red",
}}
>
<DateRangePicker
startText="Start date"
endText="End date"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(startProps, endProps) => (
<React.Fragment>
<TextField
{...startProps}
/>
<Box sx={{ mx: 2 }}> to </Box>
<TextField {...endProps} />
</React.Fragment>
)}
/>
</LocalizationProvider>
</FormControl>
This is working when changing it in browser
if you change
"&.label[data-shrink=false]+.MuiInputBase-formControl .MuiInputBase-input-MuiOutlinedInput-input":
to
"& .MuiInputBase-input":
it should work

Chakra Card component is mapping vertically rather than horizontally

I am trying to render a card and map each card as a row of three (even better if this number is altered responsively).
I'm unsure as to which lines of code are overriding SimpleGrid, and have tried to use Grid and Flex. I do not have any CSS either.
I have attached the code that I am rendering.
return (
<>
{data.map((item: ICard, index: number) => (
<SimpleGrid columns={3} minChildWidth="30%" py={6} ml={10} key={index}>
<Box
maxW={"445px"}
w={"full"}
boxShadow={"2xl"}
rounded={"md"}
p={6}
overflow={"hidden"}
>
<Box
h={"310px"}
bg={"gray.100"}
mt={-6}
mx={-6}
mb={6}
pos={"relative"}
>
<div
style={{
height: 310,
width: 445,
backgroundImage: `url(${
item.edmIsShownBy ?? item.edmPreview
})`,
backgroundSize: "cover",
backgroundPosition: "middle",
}}
></div>
</Box>
<Stack>
<Text
color={"green.500"}
textTransform={"uppercase"}
fontWeight={800}
fontSize={"sm"}
letterSpacing={1.1}
>
{item.dcCreator ?? searchTerm ?? "Unknown Artist"} {item.year}
</Text>
<Heading fontSize={"2xl"} fontFamily={"body"}>
{item.title}
</Heading>
<Text color={"gray.500"} noOfLines={4}>
{item.dcDescription ?? item.dcDescriptionLangAware}
</Text>
</Stack>
<Stack mt={6} direction={"row"} spacing={4} align={"center"}>
<Avatar
src={item.edmPreview ?? item.edmIsShownBy}
alt={"Author"}
/>
<Stack direction={"column"} spacing={0} fontSize={"sm"}>
<Text fontWeight={600}>
{item.dataProvider}, {item.country}
</Text>
<Text color={"gray.500"} noOfLines={3} mx={1}>
Find {item.title ?? "this artwork"} at{" "}
{item.source ?? item.edmIsShownAt}
</Text>
</Stack>
</Stack>
</Box>
</SimpleGrid>
))}
</>
);
You need to take the SimpleGrid out of the data.map. Otherwise you are rendering a SimpleGrid for each record:
This is a quick test I run (forced the data to have something) ==>
import * as React from "react";
import {
Box,
SimpleGrid,
Stack,
Heading,
Text,
Avatar
} from "#chakra-ui/react";
export default function Example() {
const data: any = [
{ id: 1, title: "title1" },
{ id: 2, title: "title2" },
{ id: 3, title: "title3" }
];
return (
<>
<SimpleGrid columns={3} minChildWidth="30%" py={6} ml={10}>
{data.map((item: any, index: number) => {
return (
<Box
maxW={"445px"}
w={"full"}
boxShadow={"2xl"}
rounded={"md"}
p={6}
overflow={"hidden"}
>
<Box
h={"310px"}
bg={"gray.100"}
mt={-6}
mx={-6}
mb={6}
pos={"relative"}
>
<div
style={{
height: 310,
width: 445,
backgroundImage: "",
backgroundSize: "cover",
backgroundPosition: "middle"
}}
></div>
</Box>
<Stack>
<Text
color={"green.500"}
textTransform={"uppercase"}
fontWeight={800}
fontSize={"sm"}
letterSpacing={1.1}
>
{"Unknown Artist"} 2008
</Text>
<Heading fontSize={"2xl"} fontFamily={"body"}>
{item.title}
</Heading>
<Text color={"gray.500"} noOfLines={4}>
{item.dcDescription ?? item.dcDescriptionLangAware}
</Text>
</Stack>
<Stack mt={6} direction={"row"} spacing={4} align={"center"}>
<Avatar
src={item.edmPreview ?? item.edmIsShownBy}
alt={"Author"}
/>
<Stack direction={"column"} spacing={0} fontSize={"sm"}>
<Text fontWeight={600}>
{item.dataProvider}, {item.country}
</Text>
<Text color={"gray.500"} noOfLines={3} mx={1}>
Find {item.title ?? "this artwork"} at{" "}
{item.source ?? item.edmIsShownAt}
</Text>
</Stack>
</Stack>
</Box>
);
})}
</SimpleGrid>
</>
);
}

Grid columns too far apart

I am currently designing a login page using ant design in React. I tried using the grid system to design the login page. However, I am stuck with this issue where my columns are too far apart from one another. I would like to close the gap between them. Below is the screenshot of my issue:
Below is my code
import React from 'react'; import { Row, Alert, Col, Form, Input, Button, Checkbox, Card } from 'antd'; import { UserOutlined, MailOutlined, LockOutlined } from '#ant-design/icons';
const Register = () => { const onSubmit = (values) => {};
return (
<>
<Row
justify='center'
align='middle'
style={{ height: '100vh', flexWrap: 'wrap' }}
>
<Row style={{ width: '100%' }} justify='center'>
<Col xs={18} md={8}>
<Alert type='error' message='User already exist' banner />
</Col>
</Row>
<Col xs={18} md={8} style={{ width: '100%' }}>
<Card className='login-card'>
<Form
name='normal_login'
className='login-form'
initialValues={{
remember: true,
}}
onFinish={onSubmit}
>
<h1 id='signin-header'>Register</h1>
<Form.Item
name='name'
rules={[
{
required: true,
message: 'Please input your name!',
},
]}
hasFeedback
>
<Input
prefix={<UserOutlined className='site-form-item-icon' />}
placeholder='Name'
/>
</Form.Item>
<Form.Item
name='email'
rules={[
{
required: true,
message: 'Please input your email!',
},
{
type: 'email',
message: 'Please input a valid email!',
},
]}
hasFeedback
>
<Input
prefix={<MailOutlined className='site-form-item-icon' />}
placeholder='Email'
/>
</Form.Item>
<Form.Item
name='password'
rules={[
{
required: true,
message: 'Please input your password!',
},
]}
hasFeedback
>
<Input.Password
placeholder='Password'
prefix={<LockOutlined className='site-form-item-icon' />}
/>
</Form.Item>
<Form.Item>
<Form.Item name='remember' valuePropName='checked' noStyle>
<Checkbox>Remember me</Checkbox>
</Form.Item>
</Form.Item>
<Form.Item>
<Button type='primary' htmlType='submit' block>
Register
</Button>
<div id='register-text'>
Arleady have an account? Login now!
</div>
</Form.Item>
</Form>
</Card>
</Col>
</Row>
</> ); };
export default Register;
Try to use alignItems: 'stretch' in your first row.
...
<Row
justify='center'
align='middle'
style={{ height: '100vh', flexWrap: 'wrap', alignItems: 'stretch' }}
>
<Row style={{ width: '100%', marginBottom: '10px' }} justify='center' align="bottom">
...
Working CodeSandBox

Resources