We Keep Coding

How to make an image-covered background in react

I have an image and i need to make it cover all of the background.
The problem is, that for some reason the image isn't covering all of the background,
and it always stops somwhere where i put another object, and never goes farther then this.
Im using material ui and my code looks like this
import { Image } from "../images";
import { TextField } from "#mui/material";
const useStyles = makeStyles({
Background: {
display: "flex",
alignItems: "center",
justifyContent: "center",
justifyItems: "center",
flexDirection: "row-reverse",
width: "100%",
height: "100%",
backgroundImage: `url(${Image})`,
backgroundSize: "cover",
backgroundRepeat: 'no-repeat',
backgroundPosition: '50% 10%',
}
})
function Login() {
const classes = useStyles();
return (
<div className={classes.Background}>
<TextField></TextField>
</div>
);
}
This is the result i get:

Try this style
Background: {
display: "flex",
alignItems: "center",
justifyContent: "center",
justifyItems: "center",
flexDirection: "row-reverse",
width: "100%",
height: "100vh",
backgroundImage: `url(${asd})`,
backgroundSize: "cover",
backgroundRepeat: "no-repeat",
backgroundPosition: "50% 10%"
}

Elevation not working suddenly after the modification in my react-native app content which worked before

I have used elevation property in my app it was working fine before but suddenly after few other changes the elevation not working.
styling i have used which worked fine before.
flexDirection: 'row',
backgroundColor: 'white',
height: hp('9%'),
alignItems: 'center',
borderRadius: wp('2%'),
marginBottom: hp('2%'),
marginLeft: wp('5%'),
elevation: 5, ```

You can try "position: 'relative'" under elevation on styles.
flexDirection: 'row',
backgroundColor: 'white',
height: hp('9%'),
alignItems: 'center',
borderRadius: wp('2%'),
marginBottom: hp('2%'),
marginLeft: wp('5%'),
elevation: 5,
position: 'relative',

place <Text> at middle and left end

I have a screen where I want to place the first, main text item (Filter)in the exact middle of the screen while the second item (All Delete) should be at the right end. Both of them should be in the same line.
I would prefer not to use padding/margins since they can vary in different phone sizes. I am already using text-align but it doesn't work for me.
export default function App() {
return (
<View style={styles.container}>
<View style={styles.topTextContainer}>
<Text style={styles.filterText}>Filter</Text>
<Text style={styles.deleteAllText}>All Delete</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
topTextContainer: {
paddingTop: moderateScale(35),
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
filterText: {
fontSize: moderateScale(15),
fontWeight: 'bold',
textAlign: 'center'
},
deleteAllText: {
fontSize: moderateScale(13),
color: '#363636',
fontWeight: '300',
marginLeft: moderateScale(75),
},
});
Codesandbox: https://snack.expo.io/#nhammad/frowning-bagel

You can use a absolute position for the delete button and set right:0 like below.
deleteAllText: {
fontSize: moderateScale(13),
color: '#363636',
fontWeight: '300',
position: 'absolute',
right: 0
}
The other option is to use marginLeft:'auto' for the both the texts which can help but wont keep the first one in center.

With exact milld do you mean in the middle of the screen width and height like this:
const styles = StyleSheet.create({
container: {
flex: 1,
},
topTextContainer: {
paddingTop: moderateScale(35),
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
height: "100%"
},
filterText: {
fontSize: moderateScale(15),
fontWeight: 'bold',
textAlign: 'center'
},
deleteAllText: {
fontSize: moderateScale(13),
color: '#363636',
fontWeight: '300',
position: "absolute",
right: 0
//marginLeft: moderateScale(75),
},
});
If yes, you should set the height: "100%"
if you want to have it on the top middle than this should be the right approach:
const styles = StyleSheet.create({
container: {
flex: 1,
},
topTextContainer: {
paddingTop: moderateScale(35),
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
filterText: {
fontSize: moderateScale(15),
fontWeight: 'bold',
textAlign: 'center'
},
deleteAllText: {
fontSize: moderateScale(13),
color: '#363636',
fontWeight: '300',
position: "absolute",
right: 0
//marginLeft: moderateScale(75),
},
});
setting deleteAllText position: absolute and right: 0

Circle shape with center text not working React Native iOS

I am trying to drawing circle shape view for textview inside that some text.
It is working with Android, But, iOS not working properly. Text is coming top of the view.
<Text style={styles.na}> NA </Text>
styles
na: {
width: 60,
height: 60,
borderRadius: 60 / 2,
backgroundColor: 'orange',
alignItems: 'center',
textAlign: 'center',
fontWeight: 'bold',
color: 'white',
fontSize: 15,
textAlignVertical: 'center',
marginRight: 10,
overflow: 'hidden',
},
Any suggestions?

try this code, works for me
<View style={{
width: 60,
height: 60,
justifyContent: "center",
borderRadius: 60 / 2,
backgroundColor: 'orange',
}}>
<Text style={{
alignSelf: 'center',
fontWeight: 'bold',
color: 'white',
fontSize: 15,
}}>NA</Text>
</View>

try alignSelf : center
alignSelf has the same options and effect as alignItems but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent. alignSelf overrides any option set by the parent with alignItems.
Reference

Align text center on mui's textfield

Here is what I want:
Here is my result:
I try to assign the style to my input props, but no luck, any ideas? Thanks.
<TextField
key={'verifyKey_'+i}
multiline={false}
InputProps={{
textAlign: 'center',
disableUnderline: true,
style: {
color: 'red',
textAlign: 'center'
}
}}
style={{
height: '50px',
width: '50px',
textAlign: 'center',
justifyContent: 'center'}}/>

Using flexbox and replace textAlign: 'center' with alignItems: 'center':
{
height: '50px',
width: '50px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}

Your code is essentially correct, you just need to lower case "InputProps" to "inputProps". Casing is important here.
inputProps={{ style: {textAlign: 'center'} }}
See also https://github.com/mui/material-ui/issues/5139

You are using
width: '50px'
But you had it to 100%
width: '100%'
To make textAlign property worked properly..
If above wouldn't worked then add one more style to specify more precise
display:block for your text field.