React native image on top of another view năm 2024

    
Now that we have all of our JSX code in place, let's go and add our new styles. Now I will warn you, this is probably gonna be as much style code writing as we're gonna be doing in the entire course. We have four rules to add and they are not small ones. 
So we'll get through this we'll get started off with the very largest one. Make sure that you have this nested inside of the 
export default function(props) {
const { id, description, thumb_image_url,logo_url } = props.item;
return (

0. And you can reference this, it's called the img-text-wrapper. And so we're gonna select that first. 
The very first thing we're gonna do is call position absolute on this because we want to be able to control exactly where each one of these elements shows up. And if you're curious about why we use position relative here, it's because it's a CSS rule that anytime that you wanna use position absolute, the parent component has to use position relative, so that's why we did that. 



And so now that we have position absolute, I want this to line up to the top. So I'm gonna say top 0, and then we're gonna make this a flex container and then we're gonna use the flex-direction column so that these items are stacked on top of each other. 
Then I want this to be justified to the center, so justify-content center, align-items center. If you went through the full HTML/CSS, flexbox, and CSS grid course then all of this should be a good review on how to get items to align vertically and horizontally. So we have align-items, let's see what else we need. Let's add the height to be 100%, we want the text alignment to all to be centered, and then let's see what else. Okay, we need some padding as well, so let's do padding-left at 100 pixels, and then padding-right at 100 pixels. 
portfolio.scss
.img-text-wrapper {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
padding-left: 100px;
padding-right: 100px;
}
So I'm gonna hit save and let's see what we have going on now. Okay, so this is progress, it's ugly but it is progress. 
So, now we can see that instead of having the natural behavior with HTML where the items are just stacked on top of each other, now we have the logo and also the description. It's harder to see for some of these, but we have those now layered on top of the background image. 
So this, even though it's ugly, is actually very close, and this is the longest set of styles that we need to write in this guide. So now that we have that and that's looking good, now let's go and let's style the subtitle. So we have that img-text-wrapper and we have a subtitle, and actually, let me just nest it inside of here. 
So I'll say subtitle and we just have a couple of rules for this one. First, we're going to have some animation so I'm gonna say transition 1s and then let's say ease-in-out. And I want to start off with the color being transparent, and the reason for this is because remember back to what we have here, I do not want the description showing up until we hover over the items just like this. 
So we're gonna start off with that subtitle or that description being transparent and then when we hover over, which we'll learn how to do that in the next guide, then it is going to add in those styles. So now you can see those are all, it looks like they're gone, but they're actually there, they're just transparent. So that is our subtitle. 
portfolio.scss
.subtitle {
transition: 1s ease-in-out;
color: transparent;
}
Now let's look and see, okay, we have the img-text-wrapper, and let's add in, and for this, I do not like these selectors. If I were to just keep on nesting these I think we're already kinda going a little bit too far, so I'm going to do something here where instead of nesting another level deep then I'm going to add this where I'm gonna say 
export default function(props) {
const { id, description, thumb_image_url,logo_url } = props.item;
return (

2. And the reason why I'm doing this is because the further you nest your SCSS files and your SCSS rules, the harder they're going to be to debug. 
So sometimes I like to give myself almost like a little reset button right here where I say okay, this is as far as we're going to go and as far as we're going to nest these items. And let's just move back and now we have a little bit easier to manage a set of styles. 
So inside of this subtitle now let's say, let's go with the color, and for right now, let's go with teal. And the reason why I can call this $teal, if you remember when we used our variables we have this teal color. And I may change it to dark teal, we'll see exactly how it looks in a second. Then I want the font-weight, let's say that we want this to be at 400.



portfolio.scss
.img-text-wrapper:hover .subtitle {
color: $teal;
font-weight: 400;
}
Okay, let's hit save and take a look at this and see if this is giving us the behavior we're wanting. I'll hit refresh, and there we go, it's loading up. And now if I hover over, there we go, do you see? It's kind of faint right now because we haven't added that cool kind of darkening feature. 
We'll eventually add this where the images will actually get darker when we hover over. But for right now you can see that when we hover over this div we are getting that nice fade in and fade out with the description, so that is working nicely. 
Last thing for this guide, let's just go and add the logo-wrapper style. So here I'm gonna say logo-wrapper. And then we wanna select the image inside of here, and so we want the image width to be 50%, and then let's just see what that looks like and see if that gives us what we're looking for. 
Oh wow, that is so much better, yeah, that's looking really good. The only difference I would say is let's add a little bit of margin to the bottom. So I'm gonna say image and then margin-bottom and let's go with 20 pixels, hit save, and that moves each one of these up just a little bit. 
portfolio.scss
.logo-wrapper img {
width: 50%;
margin-bottom: 20px;
}
So this is looking really good. A few of these, you may say, okay, these look like they're a little out of alignment. You can see where this logo's a little bit higher than these other ones and we'll clean those up later, so don't worry about that. 
For right now I just wanna focus on the high-level behavior which is to have the logo pretty much centered with the nice fade in and fade out of the description right below it. This is coming along very nicely, you can see with just a few guides we've been able to completely transition the way this homepage looks, and we're now very close to the final version. So great job if you went through that. 
How to put one image on top of another in React Native?
To handle this use case, you can use the component, which has the same props as , and add whatever children to it you would like to layer on top of it. You might not want to use in some cases, since the implementation is basic.22 thg 4, 2024nullImages - React Nativereactnative.dev › docs › imagesnull 
How do I put a view on top of another view in React Native?
You can use zIndex for placing a view on top of another. It works like the CSS z-index property - components with a larger zIndex will render on top. You can use react-native-view-overflow plugin for placing a view on top of another. It works like the CSS z-index property.nullIn React Native, how do I put a view on top of another ... - Stack Overflowstackoverflow.com › questions › in-react-native-how-do-i-put-a-view-on-t...null
How to make a view overlap another view in React Native?
To make a view overlap over another in React Native, use the 'position: absolute;' CSS property and adjust its top, left, bottom, or right values. Alternatively, use the 'zIndex' property to specify the stack order of the views.nullHow to make a view overlap over another in react native. - Brainlybrainly.com › questionnull
How to put one element on top of another in React Native?
Stacking in React Native with the CSS position property In other words, it positions the element relative to its nearest positioned ancestor. After applying the position attribute to an element, you'll then use the top , bottom , left , and right attributes to specify exactly where you want the element to be placed.2 thg 11, 2022nullUsing methods like zIndex in React Native to stack elementsblog.logrocket.com › zindex-react-native-stack-elements-best-practicesnull
Đọc tiếp