We Keep Coding

The split method is not working - want to split the date

I'm trying to split the date on both release_date and first_air_date however the split() method isn't working for me. What am I doing wrong - please explain! I'm a beginner. Many thanks in advance!
Below is my code:
import { Typography } from "#mui/material";
import { Box } from "#mui/system";
import React from "react";
function Card({ daily }) {
let text = daily.release_date;
let airDate = daily.first_air_date;
const myArray = text.split("-");
const splitDate = airDate.split("-");
const word = myArray[0];
const date = splitDate[0];
console.log(word);
console.log(date);
return (
<Box
sx={{
width: "25%",
height: "550px",
backgroundColor: "#144272",
alignSelf: "flex-start",
borderRadius: "10px",
}}
>
<Box
sx={{
width: "100%",
height: "85%",
backgroundColor: "red",
borderRadius: "20px",
}}
>
<img
className="img-src"
src={`https://image.tmdb.org/t/p/w500/${daily.poster_path}`}
alt=""
style={{
width: "100%",
height: "100%",
objectFit: "cover",
borderRadius: "20px",
}}
/>
</Box>
<Box
sx={{
display: "flex",
align: "center",
fontFamily: "Open Sans, sans-serif",
fontWeight: "normal",
fontSize: "20px",
color: "#fff",
margin: "5px 10px",
flexDirection: "column",
}}
>
{daily.original_title ? (
<Typography sx={{}}>{daily.original_title}</Typography>
) : (
<Typography sx={{}}>{daily.name}</Typography>
)}
<Typography
sx={{
fontFamily: "Open Sans, sans-serif",
fontWeight: "lighter",
fontSize: "15px",
color: "#fff",
margin: "5px 10px",
}}
>
{/*word*/}
</Typography>
{daily.release_date ? (
<Typography sx={{}}>{text}</Typography>
) : (
<Typography sx={{}}>{/*airDate*/}</Typography>
)}
</Box>
</Box>
);
}
export default Card;
I used the split() method in another component, here is the code for that one and it worked fine:
import React from "react";
function Card({ recomendations }) {
let text = recomendations.release_date;
const myArray = text.split("-");
let word = myArray[0];
console.log(word);
return (
<Box
sx={{
width: "25%",
height: "550px",
backgroundColor: "#144272",
alignSelf: "flex-start",
borderRadius: "10px",
}}
>
<Box
sx={{
width: "100%",
height: "85%",
backgroundColor: "red",
borderRadius: "20px",
}}
>
<img
className="img-src"
src={`https://image.tmdb.org/t/p/w500/${recomendations.poster_path}`}
alt=""
style={{
width: "100%",
height: "100%",
objectFit: "cover",
borderRadius: "20px",
}}
/>
</Box>
<Box
sx={{
display: "flex",
align: "center",
fontFamily: "Open Sans, sans-serif",
fontWeight: "normal",
fontSize: "20px",
color: "#fff",
margin: "5px 10px",
flexDirection: "column",
}}
>
<Typography sx={{}}>{recomendations.original_title}</Typography>
<Typography
sx={{
fontFamily: "Open Sans, sans-serif",
fontWeight: "lighter",
fontSize: "15px",
color: "#fff",
margin: "5px 10px",
}}
>
{word}
</Typography>
</Box>
</Box>
);
}
export default Card;

React Native (flexDirection: "row") not working

For some reason when I'm trying to align the contents of the Card which is the Image and Card.Title it will always align it like a column, the two won't go next to each other.
However, if I put the flexDirection: "row" in the modal container (which contains these two cards) it puts the cards side by side as it should. Why would it not work on the contents of the card itself?
Thanks
<Provider>
<Portal>
<Modal Modal visible={themeVisible} onDismiss={hideThemeModal} contentContainerStyle={modalStyle}>
<Card containerStyle={{ backgroundColor: '#3D3D3D', margin: 0, padding: 0, borderWidth: 0, elevation: 0, borderColor: '#212121' }}>
<Card.Title style={{ color: '#FFFFFF', marginBottom: 0, fontSize: 25, marginTop: 10 }} >Theme Selection</Card.Title>
<Text style={{ color: '#AAAAAA', textAlign: 'center', marginBottom: 10 }} >Thanks for supporting Fitness!</Text>
</Card>
<TouchableOpacity onPress={hideThemeModal}>
<Card containerStyle={{ flexDirection: "row", backgroundColor: '#3D3D3D', marginTop: 10, paddingBottom: 30, padding: 30, borderWidth: 0, borderTopWidth: 1, borderBottomWidth: 1, elevation: 0, borderColor: '#212121' }}>
<Image style={{ width: 25, height: 25 }} source={require('./assets/yellow-dark.png')} />
<Card.Title style={{ color: '#FFFFFF' }} >Yellow / Dark</Card.Title>
</Card>
</TouchableOpacity>
</Modal>
</Portal>
</Provider>
Tried float: left, flexdirection, inline-block, etc no change
Here is the styles for modalStyle and the safeareaview style
const modalStyle = {
backgroundColor: '#3D3D3D',
padding: 20,
margin: 35,
borderWidth: 1,
borderRadius: 7.5,
borderColor: '#F3AF21',
};
const styles = StyleSheet.create({
container: {
display: "flex",
flex: 1,
backgroundColor: '#181818',
},
});

Card component has 2 props for styling. containerStyle is used to style the outer container while wrapperStyle for inner container. In your code you should replace containerStyle with wrapperStyle
<Card wrapperStyle={{ flexDirection: "row", backgroundColor: '#3D3D3D', marginTop: 10, paddingBottom: 30, padding: 30, borderWidth: 0, borderTopWidth: 1, borderBottomWidth: 1, elevation: 0, borderColor: '#212121' }}>
<Image style={{ width: 25, height: 25 }} source={require('./assets/yellow-dark.png')} />
<Card.Title style={{ color: '#FFFFFF' }} >Yellow / Dark</Card.Title>
</Card>
Note: You can adjust the other attributes in both the styles as per your need.

Why isn't responsive grid stacking items?

I'm trying to create a responsive page where the element stack upon each other when viewed on a mobile device however instead of stacking they keep aligning side by side. How could I stack them?
I've tried messing with the spacing and padding but that didn't seem to help. I also looked into adjusting the flexgrow values but that didn't work either.
Here's my code:
<Grid container justifyContent="center" alignItems="center" flexGrow={1}>
<Box sx={homeStyle.main}>
<Box sx={homeStyle.blueBox}>
<Box sx={homeStyle.noBeneAvailText}>
Register
</Box>
<Box sx={homeStyle.noBeneAvailDetailText}>
Information About you
</Box>
<Grid container spacing={2}>
<Grid item xs={6}>
<TextField
variant="outlined"
id="first-name-input"
label="First Name"
defaultValue=""
fullWidth
/>
</Grid>
<Grid item xs={6}>
<TextField
variant="outlined"
id="last-name-input"
label="Last Name"
fullWidth
/>
</Grid>
</Grid>
<Grid container spacing={2}>
<Grid item xs={6}>
<TextField
variant="outlined"
id="phone-number-input"
label="Phone Number"
defaultValue=""
fullWidth
/>
</Grid>
<Grid item xs={6}>
<TextField
variant="outlined"
id="email-input"
label="Email Address"
fullWidth
/>
</Grid>
</Grid>
</Box>
</Box>
</Grid>
const homeStyle = {
updateInfoText: {
//color: "#FFFFFF",
fontFamily: "Roboto",
fontStyle: "bold",
fontWeight: 800,
fontSize: "14px",
lineHeight: "20px",
textAlign: "center",
letterSpacing: "0.1px",
},
updateInfoButton: {
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
alignSelf: "center",
py: "10px",
px: "24px",
// gap: "10px",
width: { lg: "540px", md: "666px", xs: '311px' },
height: "40px",
mt: "15px",
backgroundColor: "#3C4FB9",
color: 'white',
borderRadius: "100px",
flex: "none",
order: 2,
flexGrow: 0,
'&:hover': {
backgroundColor: '#9BA5DF',
color: '#36414E',
}
},
noBeneAvailDetailText: {
width: { lg: "740px", md: "666px", xs: '311px' },
fontFamily: "Roboto",
fontStyle: "normal",
fontWeight: 400,
fontSize: "16px",
lineHeight: "24px",
textAlign: "left",
alignItems: "center",
color: "#56677B",
flex: "none",
alignSelf: "stretch",
flexGrow: 0
},
noBeneAvailText: {
width: { lg: "740px", md: "666px", xs: '311px' },
height: "32px",
fontFamily: "Roboto Slab",
fontStyle: "normal",
fontWeight: 500,
fontSize: "24px",
lineHeight: "32px",
textAlign: "left",
alignSelf: "stretch",
color: "#252D36",
flex: "none",
flexGrow: 0
},
benefitsAvaillibilityTextFrame: {
display: "flex",
flexDirection: "column",
alignItems: "center",
textAlign: "center",
padding: "0px",
gap: "12px",
width: { lg: "740px", md: "666px", xs: '311px' },
height: { lg: "92px", md: "92px", xs: '140px' },
flex: "none",
order: 2,
alignSelf: "center",
flexGrow: 0,
},
blueBox: {
display: "flex",
flexDirection: "column",
alignItems: "center",
//alignSelf: "center",
// justifyContent: "center",
pt: { lg: "52px", md: "52px", sm: "39px", xs: '24px' },
pr: { lg: "52px", md: "52px", sm: "39px", xs: '16px' },
pb: { lg: "52px", md: "52px", sm: "39px", xs: '24px' },
pl: { lg: "52px", md: "52px", sm: "39px", xs: '16px' },
gap: { lg: "32px", md: '32px', sm: "32px", xs: '20px' },
width: { lg: "544px", md: '770px', sm: "500px", xs: '343px' },
height: { lg: "750px", md: '750px', sm: "700px", xs: '783px' },
background: "#F5F7FF",
borderRadius: "8px",
flex: "none",
order: 1,
alignSelf: "center",
flexGrow: 0,
},
welcomeText: {
width: { lg: "626px", md: '770px', xs: '343px' },
height: { lg: "44px", md: '38px', xs: '32px' },
fontFamily: 'Roboto Slab',
fontStyle: "normal",
fontWeight: 500,
fontSize: { lg: "36px", md: '30px', xs: '24px' },
lineHeight: { lg: "44px", md: '38px', xs: '32px' },
textAlign: "center",
letterSpacing: "-0.02em",
color: "#252D36",
flex: "none",
order: 0,
alignSelf: "center",
flexGrow: 0,
},
main: {
display: "flex",
flexDirection: "column",
alignSelf: "center",
alignItems: "center",
pt: { lg: "90px", md: '40px', sm: "32px", xs: '32px' },
pr: { lg: "407px", md: '32px', sm: "16px", xs: '16px' },
pb: { lg: "80px", md: '40px', sm: "32px", xs: '32px' },
pl: { lg: "407px", md: '32px', sm: "px", xs: '16px' },
gap: { lg: "40px", md: '32px', sm: "32px", xs: '20px' },
width: { lg: "1000", md: '834', xs: '375' },
height: { lg: "888", md: '1100', xs: '942' },
background: "#FFFFFF",
flex: "none",
order: 1,
flexGrow: { lg: 1, md: 0, xs: 0 },
},
container: (theme) => ({
display: "flex"
}),
item: (theme) => ({
border: "1px solid blue"
}),
itemFlexGrow: (theme) => ({
flexGrow: 1,
border: "1px solid red"
})
Currently, it looks like this:

I think you need to set the xs which preset the width of the grid in the x-small screen like mobile to 12 to take the full width.
<Grid container spacing={2}>
<Grid item xs={12}>
<TextField
variant="outlined"
id="first-name-input"
label="First Name"
defaultValue=""
fullWidth
/>
</Grid>
<Grid item xs={12}>
<TextField
variant="outlined"
id="last-name-input"
label="Last Name"
fullWidth
/>
</Grid>
</Grid>
<Grid container spacing={2}>
<Grid item xs={12}>
<TextField
variant="outlined"
id="phone-number-input"
label="Phone Number"
defaultValue=""
fullWidth
/>
</Grid>
<Grid item xs={12}>
<TextField
variant="outlined"
id="email-input"
label="Email Address"
fullWidth
/>
</Grid>
</Grid>

Rotate background image using sx props

I'm trying to rotate a background image using the MU5 'sx' props syntax, I do not know how to do it and cannot seem to find the answer. I just want to rotate the background image, but not any child-components of the grid:
<Grid container direction='column'sx={{
backgroundImage: `url(${Image})`, transform: 'rotate(90deg)', backgroundSize: '100% 100%',
backgroundPosition: 'top left', backgroundRepeat: 'no-repeat',
}}>
</Grid>

There is no background-image transformations, but if you dont want to rotate any child, you can work with pseudo element ::before, add the background image and rotate, like this:
<Box
sx={{
width: 300,
height: 300,
position: "relative",
border: "dashed 3px royalBlue",
overflow:'hidden',
":before": {
content: "''",
width: "100%",
height: "100%",
position: "absolute",
zIndex: "-1",
transform: "rotate(30deg)",
backgroundImage:
"url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScz4ccW2Mc2m5qU4rRicqn5lk7EN4qxsjLitrENxkiYPo7SC1hAkFd4BbTgxJhEov9iTc&usqp=CAU)"
}
}}
>
<Box sx={{ p: "10px", backgroundColor: "orange", color: "white" }}>
Child 1 dddd
</Box>
<Box sx={{ p: "10px", backgroundColor: "orange", color: "white" }}>
Child 2 dddd
</Box>
<Box sx={{ p: "10px", backgroundColor: "orange", color: "white" }}>
Child 3 dddd
</Box>
</Box>

Defining margin-top in react in VH

I want to define the height of this container with VH but when i do i get errors.
return (
<Container style={{ marginTop: 80vh }}>
<Container maxWidth="xs" style={{ position: 'relative' }}>
<Paper
style={{
padding: 24,
paddingBottom: 10,
backgroundColor: '#151A1F',
borderRadius: 6,
}}
>

Put it in a string:
<Container style={{ marginTop: "80vh" }}>