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

I am a talented fullstack developer from Nigeria, very passionate about learning and also helping people grasp concepts more.

Recent posts:

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

Using the ResizeObserver API in React for responsive designs

With ResizeObserver, you can build aesthetic React apps with responsive components that look and behave as you intend on any device.

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

Creating JavaScript tables using Tabulator

Explore React Tabulator to create interactive JavaScript tables, easily integrating pagination, search functionality, and bulk data submission.

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

How to create heatmaps in JavaScript: The Heat.js library

This tutorial will explore the application of heatmaps in JavaScript projects, focusing on how to use the Heat.js library to generate them.

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

Eleventy adoption guide: Overview, examples, and alternatives

Eleventy (11ty) is a compelling solution for developers seeking a straightforward, performance-oriented approach to static site generation.

So let me switch over to Visual Studio Code and let's start as usual in updating the JSX structure here. The reason why I follow this approach is that I feel like it's a more logical progression to build out my JSX structure first and then add my CSS and my selectors and everything like that. It makes it, at least in my mind, a little bit easier to follow.

So let's come here, we have this image logo, and description, and the link, I'm just gonna get rid of all of it and write the JSX code just from scratch. So I'm going to create a div, now this one is not gonna be a self-closing div, and let's give it a class name of img-text-wrapper 'cause this is gonna sit right on top of that background image that we worked on in the last guide.

The very first thing we want to show is that logo, so let's add a div here that's gonna hold the logo. And we can give this a class name of logo-wrapper, 'cause that is going to wrap around the logo. And then inside of here, I wanna just have a regular image tag, so I'm gonna say img and the source of this is going to be logo, so say source equals logo, and then make sure that you close that off, or else you'll get an error.

And hit save just so we get our nice formatting from the prettier gem or the prettier extension. And now let's add the description, so I'll say div className equals, and let's call it the subtitle, and then call description, close off that div and we should be good to go.


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.


.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.

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

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.


.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.


.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.

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

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.


.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 › 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 › 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. - › 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 › zindex-react-native-stack-elements-best-practicesnull