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;

Extra white space above Grid component from Material UI

When applying Grid to my post layout on my social media website, for some reason I am left with extra white space above the Grid element or GIF in this case. How do I remove this extra white space? Here is an image of the whitespace:
Here is an image of what logged for the whitespace via inspect:
Here is the code in question:
import { useEffect, useState, useMemo, useRef } from "react";
import userInformation from "../../services/userInformation";
import { Link, useNavigate } from "react-router-dom";
import ReactPlayer from 'react-player'
import VectorIllustration from "./VectorIllustration";
import AvatarPicture from '../../images/AvatarPicture.png'
import HomeTwoToneIcon from '#mui/icons-material/HomeTwoTone';
import { Avatar } from "#nextui-org/react";
import PageviewTwoToneIcon from '#mui/icons-material/PageviewTwoTone';
import GroupsTwoToneIcon from '#mui/icons-material/GroupsTwoTone';
import EmailTwoToneIcon from '#mui/icons-material/EmailTwoTone';
import SettingsApplicationsTwoToneIcon from '#mui/icons-material/SettingsApplicationsTwoTone';
import { Dialog, Button, IconButton, ImageList, ImageListItem, InputAdornment, DialogTitle } from "#mui/material";
import { TextField, Grid } from "#mui/material";
import { useDispatch, useSelector } from "react-redux";
import { storeUserInformation } from "../../reducers/storeInformationReducer";
import { Loading } from '#nextui-org/react'
import '../../style-sheets/Home.css'
import FavoriteBorderTwoToneIcon from '#mui/icons-material/FavoriteBorderTwoTone';
import FavoriteIcon from '#mui/icons-material/Favorite';
import HeartBrokenIcon from '#mui/icons-material/HeartBroken';
import MessageIcon from '#mui/icons-material/Message';
import IosShareOutlinedIcon from '#mui/icons-material/IosShareOutlined';
import MessageOutlinedIcon from '#mui/icons-material/MessageOutlined';
import InfiniteScroll from 'react-infinite-scroll-component'
import ViewProfileBox from "./ViewProfileBox";
const Home = () => {
const state = useSelector(state => state)
const [savedUser, setSavedUser] = useState()
const [like, setLike] = useState([])
const [mouseOver, setMouseOver] = useState(false)
const [replies, setReplies] = useState([])
const [numberOfPosts, setNumberOfPosts] = useState(Array.from({ length: 5}))
const [hasMore, setHasMore] = useState(true)
const [open, setOpen] = useState(false)
const [imageToView, setImageToView] = useState('')
const dispatch = useDispatch();
const navigate = useNavigate();
useEffect(() => {
const initializer = async () => {
const user = await JSON.parse(window.localStorage.getItem('loggedAppUser'))
setSavedUser(user)
userInformation.setToken(user.token)
const response = await userInformation.findUser(user.user.email)
const arrayOfKeys = Object.keys(response.data.user)
const arrayOfValues = Object.values(response.data.user)
let i = 0
arrayOfKeys.forEach(element => {
dispatch(storeUserInformation(arrayOfValues[i], element))
i++
});
}
initializer()
}, [])
useEffect(() => {
setLike(numberOfPosts.map((post, i) => (like[i] === undefined ? false : like[i])))
setReplies(numberOfPosts.map((post, i) => (replies[i] === undefined ? false : replies[i])))
}, [numberOfPosts])
const handleLike = (index) => {
setLike(like.map((val, i) => index === i ? !val : val));
}
const handleReplies = (index) => {
setReplies(replies.map((val, i) => index === i ? !val : val));
}
const handleOpen = (e) => {
setOpen(true)
setImageToView(e)
}
const handleClose = () => setOpen(false)
const style = {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 400,
bgcolor: 'background.paper',
border: '2px solid #000',
boxShadow: 24,
p: 4,
};
const fetchMoreData = () => {
console.log(state.posts)
console.log(numberOfPosts.length)
if ((Object.entries(state.posts)).length - numberOfPosts.length < 5) {
setTimeout(() => {
setNumberOfPosts(numberOfPosts.concat(Array.from({length: ((Object.entries(state.posts)).length - numberOfPosts)})))
}, 1500)
setHasMore(false)
return;
} else {
setTimeout(() => {
setNumberOfPosts(numberOfPosts.concat(Array.from({length: 5})))
}, 1500)
}
}
return (
<>
<div style={{
position: 'relative',
width: '1920px',
height: '1080px',
background: '#F7F9FE'}}>
<VectorIllustration />
<h1 style={{position: 'absolute', width: '30%', height: '5%', left: '20%', top: '4%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '400', fontSize: '32px', lineHeight: '40px', color: '#000000'}}>Welcome {state.storage.name}!</h1>
<Link to='/home' style={{position: 'absolute', width: '10%', height: '6.5%', left: '2%', top: '20%', background: 'linear-gradient(90deg, rgba(255, 255, 255, 0.47) 0%, rgba(255, 255, 255, 0) 93.56%)', textDecoration: 'none', color: '#FFFFFF', display: 'flex', textAlign: 'center', justifyContent: 'center', flexDirection: 'column'}}>Home</Link>
<HomeTwoToneIcon style={{position: 'absolute', left: "3%", top: '21.5%', fontSize: '225%'}} color='primary' />
<Avatar src={state.storage.profileImageURL ? state.storage.profileImageURL : AvatarPicture} style={{position: 'absolute', left: '83.5%', top: '11%', height: '132px', width: '132px'}}></Avatar>
<Link to='/findasponsor' style={{position: 'absolute', width: '10%', height: '6.5%', left: '3.5%', top: '29%', textDecoration: 'none', color: '#FFFFFF', display: 'flex', textAlign: 'center', justifyContent: 'center', flexDirection: 'column'}}>Find A Sponsor</Link>
<PageviewTwoToneIcon style={{position: 'absolute', left: "3%", top: '30.5%', fontSize: '225%', opacity: '0.7'}} />
<Link to='/Groups' style={{position: 'absolute', width: '10%', height: '6.5%', left: '3.5%', top: '37%', textDecoration: 'none', color: '#FFFFFF', display: 'flex', textAlign: 'center', justifyContent: 'center', flexDirection: 'column'}}>Groups</Link>
<GroupsTwoToneIcon style={{position: 'absolute', left: "3%", top: '38.6%', fontSize: '225%', opacity: '0.75'}} />
<Link to='/Messsages' style={{position: 'absolute', width: '10%', height: '6.5%', left: '3.5%', top: '45%', textDecoration: 'none', color: '#FFFFFF', display: 'flex', textAlign: 'center', justifyContent: 'center', flexDirection: 'column'}}>Messages</Link>
<EmailTwoToneIcon style={{position: 'absolute', left: "3%", top: '46.5%', fontSize: '225%', opacity: '0.75'}} />
<Link to='/Settings' style={{position: 'absolute', width: '10%', height: '6.5%', left: '3.5%', top: '54%', textDecoration: 'none', color: '#FFFFFF', display: 'flex', textAlign: 'center', justifyContent: 'center', flexDirection: 'column'}}>Settings</Link>
<SettingsApplicationsTwoToneIcon style={{position: 'absolute', left: "3%", top: '55.5%', fontSize: '225%', opacity: '0.75'}} />
<h1 style={{position: 'absolute', width: '201px', height: '76px', left: '4%', top: '68%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '500', fontSize: '26px', lineHeight: '38px', textAlign: 'center', color: '#1B1C1F', textDecoration: 'underline'}}>Go Local</h1>
<p style={{position: 'absolute', width: '201px', height: '76px', left: '4%', top: '73%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '500', fontSize: '15px', textAlign: 'center', color: 'black'}}>Currently, you are viewing sponsors/ sponsees globally. Would you like to view only sponsors/sponsees in your country?</p>
<Button style={{position: 'absolute', left: '4.5%', top: '85%', background: '#FFFFFF', borderRadius: '16px'}}>No</Button>
<Button style={{position: 'absolute', left: '10.5%', top: '85%', background: '#FFFFFF', borderRadius: '16px'}} onClick={(e) => navigate('./Settings')}>Yes</Button>
<h1 style={{position: 'absolute', top: '70%', left: '78%'}}>Trending Users</h1>
<Link to='/home/:id' style={{position: 'absolute', top: '73.25%', left: '94%'}}>View all</Link>
<p style={{position: 'absolute', top: '20%', left: '79%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '600', fontSize: '20px', lineHeight: '25px', textAlign: 'center'}}>{state.storage.followers}</p>
<p style={{position: 'absolute', top: '23%', left: '77.5%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '300', fontSize: '16px', lineHeight: '20px', textAlign: 'center', color: '#A2ADBC'}}>Followers</p>
<p style={{position: 'absolute', top: '20%', left: '94.5%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '600', fontSize: '20px', lineHeight: '25px', textAlign: 'center'}}>{state.storage.following}</p>
<p style={{position: 'absolute', top: '23%', left: '93%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '300', fontSize: '16px', lineHeight: '20px', textAlign: 'center', color: '#A2ADBC'}}>Following</p>
<h1 style={{position: 'absolute', top: '28%', left: '83.6%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '500', fontSize: '20px', lineHeight: '25px', textAlign: 'center'}}>{state.storage.name}</h1>
<p style={{position: 'absolute', width: '360px', height: '54px', left: '77.6%', top: '33%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '300', fontSize: '14px', lineHeight: '18px', textAlign: 'center', color: '#6D7683'}}>{state.storage.biography}</p>
<ViewProfileBox savedUser={savedUser}/>
{(Object.values(state.posts)).length !== 0 ?
<InfiniteScroll height='100%' dataLength={numberOfPosts.length} next={fetchMoreData} hasMore={hasMore} loader={<Loading style={{position: 'absolute', left: '50%'}}/>}
id='all-post-container' scrollThreshold={0.5} endMessage={<p style={{ textAlign: "center" }}>
<b>That's all folks!</b>
</p>}
style={{position: 'absolute', top: '25%', left: '20%', backgroundColor: '#F7F9FE', height: '72%', width: "54%", borderRadius: '30px'}}>
<Grid
container
direction="column"
justifyContent="center"
alignItems="center"
spacing={15}
>
{numberOfPosts.map((key, i) => {
return (
<Grid container item>
<Grid item xs={12} container style={{backgroundColor: 'white', paddingTop: '20px'}}>
{/* avatar, username, etc */}
<Grid item xs={1} container style={{ justifyContent: "center" }}>
<Avatar src={AvatarPicture} />
</Grid>
<Grid item container xs={11} style={{ gap: "10px" }}>
<Grid item xs={11}>
#{state.posts[i]?.username}
</Grid>
<Grid item xs={11}>
{state.posts[i]?.location} {state.posts[i]?.date}
</Grid>
</Grid>
</Grid>
<Grid item xs={12} className="indent2" style={{backgroundColor: 'white'}}>
{/* post text */}
<p
className="Post"
style={{
padding: "1em",
backgroundColor: "#FFFBEE",
borderRadius: "20px",
margin: '1%'
}}
>
{state.posts[i]?.text}
</p>
</Grid>
{state.posts[i]?.video && (
<Grid item xs={12} className="indent2" style={{backgroundColor: 'white'}}>
{/* post video */}
<ReactPlayer url={state.posts[i].video} controls width='100%'/>
</Grid>
)}
<Grid container wrap="nowrap">
{state.posts[i]?.images && (
<Grid item xs={12} className="indent2" style={{backgroundColor: 'white'}}>
{/* post image */}
<ImageList sx={{overflowX: 'auto' }} rowHeight={200}>
<ImageListItem sx={{display: 'flex', flexDirection: 'row'}}>
{state.posts[i].images.map(image => {
return (
<img
src={image}
alt='title'
loading='lazy'
style={{paddingRight: '1em', objectFit: 'contain'}}
onClick={(e) => handleOpen(e.target.src)}
/>
)
})}
<Dialog
open={open}
onClose={handleClose}
style={{ maxWidth: "100%", maxHeight: "100%" }}
BackdropProps={{invisible: true}}
>
<img
style={{ width: 'auto', height: '100%' }}
src={imageToView}
alt="image"
/>
</Dialog>
</ImageListItem>
</ImageList>
</Grid>
)}
</Grid>
<Grid container wrap="nowrap">
{state.posts[i]?.gif && (
<Grid item xs={12} className="indent2" style={{backgroundColor: 'white'}}>
{/* post gif */}
<img src={state.posts[i].gif} style={{objectFit: 'contain'}} />
</Grid>
)}
</Grid>
<Grid item xs={12} className="indent2" style={{backgroundColor: 'white'}}>
{/* icon bar */}
<Grid container style={{ padding: 12, gap: 20 }}>
<Grid item>
<IconButton
onClick={() => handleLike(i)}
onMouseLeave={() => setMouseOver(false)}
onMouseOver={() => setMouseOver(true)}
>
{like[i]&& mouseOver ? (
<HeartBrokenIcon style={{ color: "red" }} />
) : like[i] ? (
<FavoriteIcon style={{ color: "red" }} />
) : (
<FavoriteBorderTwoToneIcon />
)}
</IconButton>{" "}
{state.posts[i]?.likes}
</Grid>
<Grid item>
<IconButton onClick={() => handleReplies(i)}>
{replies[i] ? (
<MessageIcon color="primary" />
) : (
<MessageOutlinedIcon />
)}
</IconButton>{" "}
{state.posts[i]?.comments}
</Grid>
<Grid item>
<IconButton>
<IosShareOutlinedIcon />
</IconButton>{" "}
{state.posts[i]?.shares}
</Grid>
</Grid>
</Grid>
<Grid item xs={12} className="indent2" style={{backgroundColor: 'white', borderRadius: '16px'}}>
{/* comment */}
<TextField
InputProps={{
startAdornment: (
<InputAdornment>
<Avatar src={state.storage.profileImageURL} style={{ marginRight: 12 }} />
</InputAdornment>
),
classes: {
notchedOutline: "notched-outline-border-radius"
},
maxLength: 500
}}
maxRows={10}
multiline
placeholder="Write your comment"
style={{ width: "100%" }}
/>
</Grid>
</Grid>
)})}
</Grid>
</InfiniteScroll> : <div id='content-loader' style={{position: 'absolute', top: '25%', left: '20%', backgroundColor: '#F7F9FE', height: '72%', width: "54%", borderRadius: '30px'}}><Loading size='lg' style={{position: 'absolute', left: '50%', top: '50%'}}/></div>}
</div>
</>
)
}
export default Home;
Here is the code that deals specifically with the posting of a gif:
<Grid container wrap="nowrap">
{state.posts[i]?.gif && (
<Grid item xs={12} className="indent2" style={{backgroundColor: 'white'}}>
{/* post gif */}
<img src={state.posts[i].gif} style={{objectFit: 'contain'}} />
</Grid>
)}
</Grid>

I found the solution. The whitespace had the same measurements for the Grid of the post for images. For some reason, even though a post only had a GIF, it was acting as if it also had an image because images is set with an empty array, so to avoid the Grid for images to be rendered i placed a state.posts[i].images.length > 0 ultimatum so there has to be at least 1 image for the image Grid to execute...

How to position a child div to span from the beginning to the end of a parent div?

I'm trying to position the FullWidthDiv component to span from the beginning of the MainDiv side, all the way to the end. I've tried giving in an absolute position and playing around with flex, but I can't get it to not start from the SubDiv component.
Is it possible to achieve this?
My CodeSandbox approach.
Here is what I'm trying to achieve

It is a little bit hacky, but you can center ChildDiv with align-items: center.
Also, shrink the FullWidthDiv to 280.
And last you have to add flex: 1, width: 100% to the div, that hold SubChildDiv inside App component.
export default function App() {
return (
<MainDiv>
<ChildDiv>
<div style={{flex: 1, width: '100%'}}>
<SubChildDiv />
<SubChildDiv />
</div>
<FullWidthDiv />
</ChildDiv>
</MainDiv>
);
}
const MainDiv = ({ children }) => (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
width: 250,
height: 250,
backgroundColor: "red",
padding: "1rem"
}}
>
{children}
</div>
);
const ChildDiv = ({ children }) => (
<div
style={{
width: 200,
height: 200,
backgroundColor: "blue",
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "space-between"
}}
>
{children}
</div>
);
const SubChildDiv = () => (
<div
style={{
display: "flex",
width: "100%",
height: 30,
backgroundColor: "green",
border: "1px solid black"
}}
/>
);
const FullWidthDiv = () => (
<div
style={{
width: 280,
height: 30,
border: "1px solid black",
backgroundColor: "green"
}}
/>
);
If you want the FullWidthDiv to be with 100% width, you have to calculate the 100% width and add the padding from both sides of MainDiv it will look something like that: calc(100% + 2rem).

Adding react components to header based on the page

On all but two pages of my site I would like the header to include two buttons. How can I make the header aware of this so it includes the buttons when needed and doesn't for the other two pages. I'm using React and Gatsby.
Could I accomplish this by adding if statements to my component? If so I'm not sure how to move beyond this step.
const isHomepage = pathname == `/`
const isContact = pathname == `/contact/`
let styles = {}
if (isHomepage) {
}
} else if (isContact) {
} else {
}
This is my code for the header:
import React from 'react'
import Link from 'gatsby-link'
import colors from '../utils/colors'
const Header = ({ siteTitle }) => (
<div
style={{
background: colors.white,
marginBottom: '1.45rem',
borderBottom: '1px solid',
borderBottomColor: colors.green,
height: '3rem',
top: 0,
left: 0,
width: '100%',
position: 'fixed',
}}
>
<div
style={{
paddingLeft: 20,
paddingRight: 20,
marginLeft: 'auto',
marginRight: 'auto',
maxWidth: 960,
}}
>
<div
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
height: 53,
}}>
<h3 style={{
margin: 0,
}}>
<Link
to="/"
style={{
color: colors.green,
textDecoration: 'none',
fontWeight: 450,
}}
>
{siteTitle}
</Link>
</h3>
</div>
</div>
</div>
)
export default Header

Use conditional rendering based on location.pathname
{['/path1', '/path2'].indexOf(location.pathname) === -1 && (
<button>1<button>
<button>2<button>
)}
import React from 'react'
import Link from 'gatsby-link'
import colors from '../utils/colors'
const Header = ({ siteTitle }) => (
<div
style={{
background: colors.white,
marginBottom: '1.45rem',
borderBottom: '1px solid',
borderBottomColor: colors.green,
height: '3rem',
top: 0,
left: 0,
width: '100%',
position: 'fixed',
}}
>
<div
style={{
paddingLeft: 20,
paddingRight: 20,
marginLeft: 'auto',
marginRight: 'auto',
maxWidth: 960,
}}
>
<div
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
height: 53,
}}>
<h3 style={{
margin: 0,
}}>
<Link
to="/"
style={{
color: colors.green,
textDecoration: 'none',
fontWeight: 450,
}}
>
{siteTitle}
</Link>
{['/path1', '/path2'].indexOf(location.pathname) === -1 && (
<button>1<button>
<button>2<button>
)}
</h3>
</div>
</div>
</div>
)
export default Header

React Native backgroundColor overlay over image

I am using an image as the background for one of my pages. I'd like to add a backgroundColor with an opacity over the image. I'm not sure how I can achieve this with React Native.
render() {
return (
<Image source={require('./assets/climbing_mountain.jpeg')} style={styles.container}>
<Text>Hello</Text>
</Image>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
width: null,
height: null,
}
Here is how I'd achieve this on a web page: How to make in CSS an overlay over an image?

A cool thing you can do is drop an absolutely positioned view over it.
<View>
<Image source={require('./assets/climbing_mountain.jpeg')} style= {StyleSheet.absoluteFillObject}} resizeMode='cover'>
<Text>Hello</Text>
</Image>
<View style={styles.overlay} />
</View>
...
const styles = StyleSheet.create({
overlay: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'rgba(0,0,0,0.5)'
}
})
absoluteFillObject is the same as
{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0
}
If you want to be able to tap through your overlay, just set the pointerEvents prop on the view to none
docs: https://facebook.github.io/react-native/docs/stylesheet.html#absolutefillobject

I was able to get this working thanks to #Kevin Velasco.
render() {
return (
<View style={styles.container}>
<Image source={require('./assets/climbing_mountain.jpeg')} style={styles.imageContainer}>
</Image>
<View style={styles.overlay} />
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
width: null,
height: null,
},
imageContainer: {
flex: 1,
width: null,
height: null,
},
overlay: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'rgba(69,85,117,0.7)',
}
})

Here I use to solve my project, thansk to all:
<View>
<View
style = {{
//make overlay
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
//change this color to the other one which you want
backgroundColor: 'green',
}}
/>
<Image
source = {{ uri: Your-Image-Here }}
style = {{ height: 150, width: 200, resizeMode: 'cover', borderBottomLeftRadius: 20, borderTopLeftRadius: 20 }}
/>
</View>

Make an overlay on react native image background: If you want to make an overlay on the background image ONLY in react native and not affect other elements that are inside the < ImageBackground> tag, do this:
//Fetching the background image from online, you can use any image source of your choice.
const GoProImageBackGd = { uri: "https://images.pexels.com/photos/2462402/pexels-photo-2462402.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" };
// Setting the background image for the view:
<View style={styles.GoProBox}>
<ImageBackground source={GoProImageBackGd} resizeMode='cover' style={styles.goProBgImage}>
<View style={styles.overlayView}/>
<Text style={styles.goProText}> Want to join the hot section? Go hot with Pro!</Text>
<GoProButton />
</ImageBackground>
//Stylesheet
const styles = StyleSheet.create({
GoProBox: {
width: '95%',
height: 200,
margin: 5,
backgroundColor: '#00cc00',
borderRadius: 10,
alignSelf: 'center',
overflow: 'hidden'
},
goProBgImage: {
width: '100%', height: '100%',
},
goProText: {
textAlign: 'center',
fontSize: 20,
marginTop: 10,
fontWeight: 'bold',
padding: 10,
color: 'white'
},
GoProButton: {
height: 60,
width: 200,
backgroundColor: 'red',
borderRadius: 15,
alignSelf: 'center',
justifyContent: 'center',
top: 50
},
overlayView: {
height: "100%",
width: "100%",
position: 'absolute',
backgroundColor: 'rgba(0, 204, 0, 0.5)',
}
})

this is how i dit it to get it work for me
const visaCard = require('../Images/card_visa.png');
const [iscardBloqued, setIsCardBolqued] = useState(false);
const [hideInfos, setHideInfos] = useState(true);
Here is How the component looks like
<View style={styles.imageContainer}>
<ImageBackground
source={visaCard}
imageStyle={{ borderRadius: wp(3) }}
style={styles.imageStyle}
resizeMode="cover"
>
{hideInfos && (
<TouchableOpacity activeOpacity={0.8} style={styles.cardWhiteButton}>
<FText style={styles.whiteButtonText}>Afficher les infos</FText>
</TouchableOpacity>
)}
{iscardBloqued && (
<View style={styles.overlay}>
<TouchableOpacity
activeOpacity={0.7}
style={{ alignItems: 'center' }}
>
<Lock />
<FText style={styles.overlayText}>Carte bloqueé</FText>
</TouchableOpacity>
</View>
)}
</ImageBackground>
</View>
And her is my Style page: "i prefered to separate it from my component"
export default StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
},
imageContainer: {
alignSelf: 'center',
marginTop: hp(3),
},
imageStyle: {
height: hp(25),
width: wp(85),
},
cardWhiteButton: {
marginHorizontal: wp(8),
backgroundColor: 'white',
marginTop: hp(17),
height: hp(5),
width: wp(32),
alignItems: 'center',
justifyContent: 'center',
borderRadius: wp(5),
},
whiteButtonText: {
fontSize: hp(1.4),
color: 'white',
fontFamily: 'Roboto',
},
overlay: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'rgba(0,0,0,0.89)',
justifyContent: 'center',
alignItems: 'center',
borderRadius: wp(3),
},
overlayText: {
color: 'white',
fontSize: hp(1.6),
fontFamily: 'Roboto',
marginTop: hp(2),
},
});