**Adding Text to React Native App**

As I started working on my React Native app, I realized that adding text was not as straightforward as I thought it would be. I was trying to add a text element to the app, but nothing seemed to work. I tried using `position absolute` for the buttons and added the text, but I didn't know if I was doing something wrong. So, I decided to wrap all of this in a `View` and set the top margin to auto to push everything down over the wave.

However, it turned out that my app had a `WaveContainer` component with an image and buttons, and I wasn't sure how to add text underneath it without messing up the layout. So, I decided to experiment and try different things. I wrapped all of this in a new `View`, but I didn't know if it was already inside the `WaveContainer`. After some trial and error, I realized that adding a text element directly on top of the image wasn't working.

To fix this issue, I decided to use the `styles` property and add a link to the code in our chat. But, as expected, React Native can be more annoying than straight-up React. It has many features and options, but sometimes it's hard to figure out how to use them. I tried using `styles.dot` and added some styles, but nothing seemed to work.

After much frustration, I finally realized that the issue was with the `z-index` property. I set it to 1 and added a `text style`, but still, the text wasn't appearing underneath the image. So, I decided to try removing the text from its current position and add it again, just in case. And, yes! It worked!

But, why is this so hard? Why can't we just use React and React Native together without all these extra steps and properties? I mean, `metro` wouldn't let me into my project, and I had to refresh the app multiple times to make it work. But, I guess that's just part of the learning process.

**Learning from My Mistakes**

As I continued working on my app, I realized that I need to be more careful when using React Native. It has many features and options, but sometimes they can be confusing. So, I decided to take a step back and think about what I was trying to do.

I remembered that in React, we use `position absolute` for buttons and other elements that need to be positioned outside of the normal flow. But, when it comes to text, we need to use a different approach. In this case, I used the `SafeAreaView` component to wrap my text element, which allowed me to add it underneath the image without messing up the layout.

But, even with this solution, I still had some issues. The text wasn't appearing on top of the image, and I couldn't figure out why. After much trial and error, I finally realized that it was due to the `z-index` property. By setting it to 1, I was able to add the text underneath the image.

**Conclusion**

Building a React Native app can be challenging, but it's also a great learning experience. We can learn so much from our mistakes and experiment with different solutions until we find what works best. In this case, I learned that using `SafeAreaView` and setting the `z-index` property can help us add text underneath images without messing up the layout.

I also realized that React Native is a powerful tool, but it has its own set of challenges. We need to be patient and willing to learn as we go. And, sometimes, we just have to experiment and try different things until we find what works best.

So, if you're new to React Native or struggling with text placement in your app, I hope this article was helpful. Remember that practice makes perfect, so don't be afraid to try new things and learn from your mistakes. Good luck!

"WEBVTTKind: captionsLanguage: enum that's how this video should start yo guys what is up i wanted to learn react native so i thought what better way than to get two other badass developers with me from team cp and we just do it together so one of our hosts today is lam what's up lam what's up yo and then we got david in the house what's up guys this is gonna be a ton of fun and we're just gonna build on the fly we don't even know how it's gonna go i don't see dude why is this so hard to just do normal comments and stuff it's like add a text two hours later oh i know how to add text but we're gonna figure it out together my goal is to master react native and hopefully together we build something from scratch i think lem you already have some experience with react native right yeah i've got some experience i got some experience okay dope he's uh he always acts really humble but he's a badass so we're excited to see what we do okay cool so with that said um let's just go all right that was a good intro we did a good job guys okay so i'm gonna whip up a new react project right lem yep uh if i do something i probably can do um an expo project yes i will do expo what is it expo init the name of the project yeah i think so all right so that's it right do you know any of this david not really this is all new i mean i write it like once you excited to get your ass kicked david yeah yes that's how we learn and now let's open this bad boy up github practice react native learn react native open that app.js you aren't start can i do that can i do that yeah i'm gonna do ios simulator let's see you have like xcode and everything on there right yes i have xcode installed yeah because that install takes forever yeah what is happening oh it's working code okay that's a good sign yo guys i'm actually so excited like it takes so long though yeah initial render is uh is pretty painful because it has to you know convert everything but after that speeds up a little bit i don't know where your emulator is though it says running application on iphone 12 pro mac is it on a different desktop let's check so now if we change this to let's change this text to you guys see the new update that i made to the app oh that's so cool yep let's go okay so i guess the first thing i'm going to do is just want to make it like dark mode enabled from the start so can i just change this color to freaking background color zero zero zero and like just type in color here and go uh white like that but why did the font color not change yeah it should be it should be color white i wonder if it is because we need to uh target the actual text um text element yeah that could be it like within the container the actual text element change text color and react what i find you have to give the text a style i think and then you could probably do it like oh wait wait wait i got you i got you i think we can do this look i think we can pass text the style right here and we can just go styles um styles like that and then i think you can do then we can go color white this maybe let's go to our app oh that worked because look at here essentially you can pass it a style whatever object kind of like this guy's doing like this you can pass that style just like that you know but i'm just actually giving it an object like you can literally take this thing here pop that in right there like that yeah but that's not in inline style that's not good yeah yeah yeah boom okay yes out of the box we have dark mode ready let's go whoa who the did that me cause i'm wait so you have to like add quotes in there i'm just testing it here okay try oh that worked okay go 800. so how do we do an h2 is there such a thing as h2 lim uh no no it's just the uh just the text then you have to adjust from there you have to actually bring it up to like and when you do sizes it's like the if there's no pixel amounts it's just like a number uh and you'd have to size it manually oh the browser app okay so can we do font size is that yeah it's a thing yeah so can i give it ems or what what do i give it i mean no i can't i don't i don't think you can actually give it ems you have to actually give it like a number amount hey hey hey all right we just need to make our own whoa that looks cool so far more like an apple-ish thing all right that actually looks clean a react native framework is stunning okay get started but um so far so good let's let's see their github because that's what's gonna tell me if i should use them or not 8.1 k bro that's great and okay i kind of like the like the rounded corners and the playfulness of their design like that's the one thing i don't like about material ui like material ui looks like you develop for an android like it literally looks like you're an android developer and i hate that but like this looks very uh like kind of like delicious like you want to eat it's like i don't know it's nice clearly i'm a designer with my design design terminology you just have to say you know it uh it we we're making it pop and then you're a designer yeah making it pop yeah like look this makes it pop and it looks like um looks like 3d and cartoony and fun and inviting and playful i love the feel of that when i look at material ui it feels like you're going to text me and it's going to be a green blob of text and i'm just going to block you you yeah install into an existing app i mean we do have an existing app i'll tell you that we've done a lot of work on it so far beautiful using yarn yarn ad expo ah if you use expo you should install you should expo install like this oh nice but wouldn't whenever i do yarn add doesn't it already automatically change it to x-bow install because that's what i thought i don't know i just like even when i install because even when i do um yarn start it actually does expo start under under the hood oh yeah like i think in your uh your package.json it probably just says expo okay so let's install it on our expo hopefully our entire app will change and look beautiful right away boom what it didn't do everything damn ooh okay so i like when they give me code because that means i don't have to write it wrap the root component of your app into application provider so let's go to our app and let's just paste copy pasta that oh my god what could have possibly gone wrong let's see wait hold on you deleted the whole styling but what's the error saying it says could not be found but like i did install the did you uh did you uh import the layout wait hold on hold on hold on it says if you use expo use expo install react native svg but like look it never said ui kitten so or any of this that's confusing right yeah okay i'm just gonna type that do you see eva or kitten anywhere i don't see any of that i just see like regular looking stuff so i'm just going to do yarn add and let's see what happens that's kind of confusing directions on their end i think it was put on theme eva dark oh is it that easy oh dude that is so cool oh that makes me so happy i did nothing and everything worked that's what i like wow okay i i'm gonna be honest i even love the dark mode like i love the color they have in the background too i'm a huge fan not gonna lie i'm a huge fan of uh ui kitten already we strongly recommend paying enough attention on this guide in order to have develop a better developer experience important for me though okay so it's kind of like bootstrappy here we got the buttons so like let's put a button and let's give it like a success or primary and let's see what that looks like so who's going to put the button you guys want to do the honors of putting a button right underneath home yeah good one gonna be lamb because it didn't compile on my end should we how about how about this let's make like a clever programmer app so then one day we can put it in our app store and students can go and watch clever programmer videos or courses or whatever what do you guys think about that yes yeah okay it let's do it so i'm gonna change it from home to clever programmer because that i know how to do so i'm proud of that so you don't have to do that weird thing where you could title you can actually go old school and then we can write inside of it start learning and we'll just write two t's nice beautiful anybody want to add just a little margin between clever programmer and start learning we should try yeah yeah all right and um yeah let me let me try it okay oh and that's also cool we can have how many times a button was pressed and what i want to do is i want to have a counter and we'll do set counter and i'll do use state of zero nice so where did you add the margin bottom to the text um oh now i had to just set counter thing that's weird why did that not work perfect so you're incrementing the counter by one beautiful yep and where are we having the problem now i think it's in the stylesheet.create but i don't see the problem why is that a problem is mice are we not closing things properly is that what's happening that's exactly how it started starting spelling there's misspelling create okay now it should be oh wait can't find variable style sheet that's the problem do we have to import styles oh yeah yeah oh i have to import it from react native wait is it is it from react native or i think it's can we not get it from the kitten thing so let's look for style sheet here style no you can hold on guys so import oh yeah you okay so you import style sheet from react native you guys are right okay so style sheet just comes from react native so go ahead and import that there we go let's go nice all right so the 16. so i'm going to add another text right underneath here and we'll do text all right and then i'm just going to say um you clicked the button we'll go counter times nice is it actually working it looks like a potato the quality no it's working so yoho style dot um i'm gonna call this uh i'm gonna refactor this and we're gonna call rename symbol and call it a header text like this oh and then okay i'll do style equals styles dot paragraph text i mean i don't know if that's too verbose or not nice you're already on it paragraph text dude this is sick yeah rec native is fun this is good you added the margin to it that's interesting why is it not maybe just take some time huh maybe we just have to like i mean you added a huge margin bottom to paragraph text exactly style so let's see the documentation eh oh category h1 what the what is that oh that oh when you do that it all it actually uses the h1 built-in styling oh shh yeah wait so if i do over here paragraph text category uh equals p nothing change because i i guess that's the default how about h h4 it says unsupported configuration real quick text yeah margin bottom should be like hey look so it just took time to refresh but h4 worked i think i just don't know why i'm not getting um i don't know what's happening with the margin though yeah because you because you added margin bottom yeah like big time why don't we just um why don't we just go to here let's do this let's take this out and we'll do styles no let's not do that yeah styles.container and then let's create container and and hold on hold on i got you i got you don't don't make the dictionary because i got or that object just one second hold on okay um dictionary python guy here you guys i mean we weren't the ones that didn't choose the right language to start with oh wait comma was in the wrong why does it like putting it in just one line where and nobody can see what it is but okay that's fine um now to this what we want to add is uh margin bottom right oh no that's not that's not going to do what we wanted to do i basically want every text element inside of this layout to have a margin bottom is there an easy way to do that uh yeah so what you can do is um i believe you can do embedded styles so like if you can just do that how do we do that if you can just show us i want to see how yeah if i remember correctly which one is it that we we're trying to fix we just want every element inside of this container to have a certain margin bottom like we also don't understand why like why is this margin bottom not working here for paragraph text let's start there i'll say um i mean the official documentation says margin bottle margin bottom works like margin dash bottom in css that's it should so basically every component has its own styling yeah it's looking that way well can you figure out why how can we add margin bottom to that paragraph text the button and the text is too close so why is that yeah yeah let's see pull up window david all right maybe put a margin top on the button okay that makes sense dang that margin top is not working for the oh wait some margin takes a while no it's not that it just takes a while the paragraph text margin bottom is like not working at all but the margin top is working because if i if i had 32 on the bottom uh button you have to save it like multiple times but like this line here is just like not doing anything i don't think yeah how about giving it like an 800 just to like throw it off yeah that threw it off okay so it kind of works so if margin bottom just mysteriously doesn't work then just try to aim for margin top i guess wait wait wait let's let's try that because can you you save it too all right let's just move on so we figured this out we don't need to now obsess over it so we got this i think we don't need the paragraph text all right so that's good now what else should we add guys um i would say let's go with user authentication because we need that definitely or we can just put the uh i think we're gonna need yeah let's do more front end stuff for now like i would like to add like cards where people could see the courses or something at the top you know like a javascript course um pwj like i don't know like a javascript course a pwg course something like that you know and then a bottom where we have like maybe home and then we got something else that would be really good yeah let's look at the um ui and see if they have a bottom uh bottom at bar kind of thing there you go i think bottom tabs might be what we're looking for perfect i'm gonna follow you then all right and look at their code let's see they got a really simple uses example here down at the uh at the bottom of the uh bottom of the help it looks like we only need like two components let's see which one are you looking at the uh so on the uh the tabs uh bottom tabs help it's the very last entry oh that uh the users with the star right yeah yeah just with the start just to uh just to get that one you know that one uh example going wait so we need the star icon so that's that's the thing where it complaining about did you import it oh wait uh yeah wait would it be working if i did it like there you go but it's not showing or what if well it's not showing because you're oh you added it in my bed yeah all right i just added it in yeah yeah can you make the name of it a little bit more complicated that's how it was in documentation let's see i can't remember what the error says kazia made it a little more complicated just worry piece of let's see but hold on what is the error saying like i don't know i don't see it that's what i was saying you didn't import it that's what i was like dude did you import it you're like yeah i was like okay but then i went because i imported it okay where because i don't see any import it's right there bottom level this is what it is icon eva icons pack i mean i could still be wrong but let's see am i still wrong holy yes you are uh yeah yeah you're a kid in components yeah we need icon registry apparently all the odds and ends we need wait i have no idea what's happening here icons pack name so it's not registered with the registry service show me what you're using as example code sure so can you guys link it in slack whatever the stuff you're looking at because i think the problem that's happening is um it's not registered with the icon registry service or whatever that supposed to mean because that's what the first stack error says says unidentified object ufo alright so you guys uh did this right navigation container and create bottom tab navigator um i was looking at the one to the uh the example at the very bottom the super simple one with one uh oh my god that is so beautiful what it's good what example this one the super simple one this one nope yeah it's like yep right up right at the bottom no it's not even more simple very bottom one that one oh okay so you guys did that and then you're i was looking at it i haven't i haven't uh i haven't tried yet okay let me know i don't know which one uh you're using david so david got so did you do bottom navigation tab yeah you did okay we don't need this for now so i'm gonna remove that too so we got icon bottom navigation tab it's being imported from ui kitted components um and then icon like that so where's your icon show me your icon yeah it's under export default which might be things up i'm just gonna like uh put it over here that's probably not the problem wait we're getting a better problem now star icon you're passing it in something with props name star okay and then your bottom sheet icon you're giving it this yeah autumn sheet giving it a star icon okay um i think you might need to put these in the right order let's like put it put it in the right order you know like let's build it first and then our app is gonna get access to it um so you mean like on the top whoa what is happening here okay can't find variable so star icon you're clearly describing what a star icon is um is it returning an expression you might not be returning anything here you might have to put it in parentheses so you can retrieve no you don't have to because when you're working with arrow functions it works immediately like it's it's just gonna uh return one thing without the parents but if you put the parents you can like put more stuff in there okay evaluating icons evaluating icons pack dot name i love github issues and it's closed so that's a good sign i guess you forgot to register an icon package and sometimes it's just like the owners like it so we never installed eva icons i don't think guys or no did we uh i don't think so you sure i thought this was the first thing we did no okay let's go here well it wasn't that big list of uh if it was a big list of yarn stuff yeah we did not do eva icons actually that's why we don't have them so let's do eva icons and then i don't think we need to do react natives svg because we've already installed that so let's install this and that should work because really it's the problem but it's not recognizing the icon so we should i think it should work now let's hit save weird do i have to do it the way they did it like darn add and then like plus react native svg like that i don't think that should make any difference right um register icons that is what we need to do because even if you look at the error the first error starts with some registry so oh i was on the right track son suckas i was on the frickin right track way before you fools okay we're gonna also need icon registry i like how in their example like they don't freaking show this yeah so in the default um you need to actually register the icons so like right here you actually need to register all your icons like that why am i getting a big fat red error oh okay just wrap it in jsx element i guess um like this okay my life are we so we are getting icon registry that's good i am getting that i've installed it too we are doing this here as well um registry eva icons pack so that's the icons pack we're using within our app oh wait am i ending the freaking thing yeah i am what's the error i don't understand yeah let's go see how easy that was guys yeah oh these are nice father father icon okay let's see what type of cards they got i mean we could also add a chessboard i'm sure our students would have the need for that yeah like how is like code academy app laid out let me actually go see codecademy or something or like um what are those like popular code apps like uh solo learn so learn um i know like uh codementor io i don't know i think like i see uh uh play just learn like in i might bring it just like freaking scream oh i love scrimba okay this is a cool landing page so take a look at this guys i'm gonna drop it in our chat in slack um what are our names so this is uh memo which is like one of the most popular coding applications this is their landing page um the email should come to us in about i mean it's just a photo there we go okay so let me go downloads image so this is what it is so this is something like how our hours should look like okay yeah so we can have our landing page like this that would be cool okay i actually know a side which generates an svg with that wavy thing oh perfect nice wavy svg generator let's try it wavy svg get waves.i o i think that's exactly it let me let me see it i have it bookmarked but how do i apply this image here that's that's that's that it's down there it's down there like you can download it uh there is a download button somewhere and you just like you will get the the yeah that exact svg vegeta you see that blue thing no i mean the blue thing is cool but like how do i how do i put an image into it that's what i'm saying oh that's not happening there so this is not what i want this is just the wave i want one where you give it an image i want one where you give it an image and then it gives you i mean it's cool to have a wave don't get me wrong that's so but i want to have a landing page like theirs i mean we can just sketch it together is there an image generator no no i mean i mean like you download the svg you like you have an image and then just put the two oh how about this i got an idea let's use how do can i flip this upside down oh perfect yep um nah that's gonna look weird i'm trying to think how we can make it work um let's see her photo again let's go to downloads so like how do we get this thing like i'm sure there's some way right lem holy is 11 shock or what can you guys hear me here we are i've been on mute this whole time how do we do this uh i'm thinking that we're going to have to we're going to have to build an svg i can do that and uh real quick okay yeah do you wanna okay that's dope let's do that all right let's see grab my pen tool is my internet so back let's see that's got kind of a subtle wave to it bring an iphone frame i mean there's gotta be a website that does this to be honest i just can't freaking um let's see svg generator like their second page is really freaking dope as well actually i'll air drop it to myself i mean it's pretty much the same it's just a different photo they're using which looks pretty freaking cool this is the one oh sh i really like this like the photo they're using and everything's like super sick let's see so i think i think if we use this wave generator we can like um we can put the svg that generates uh like one like that on top and then like make the make a div under it the same color um can't in photoshop you just create a shape like yeah with the with pen tool right so you should be able to create a shape like this and then just pop an image in there right i mean i don't know how to exactly do that in photoshop but i know that should be possible yeah i'm actually um i'm in figment now i'm gonna load uh an iphone frame just so i can get a good reference uh-huh do you want me to send this over to you in slack i'll drop this in slack as well okay um interesante i like the font to create a profile to save your progress and then this one is start learning to code so let's actually david let's build this while he builds an image okay let's like okay this right here with the like the whole thing let's just model this exact thing okay and you got the image right uh yeah yeah can you unfuck up whatever you up bro please uh uh collaborative programming words yo david so first of all this is a bottom navigation tab right but it's like smack in the middle of the screen so how do we fix that what do you mean it's smacking oh you mean like you want to put it like down there or some yeah i want to put it down there that's exactly what i want to do let me give it a style because what the because what else is the point of bottom navigation tab if it's not going to put at the bottom you know what i mean like oh because because we're centering our right like we're centering our entire freaking so let's not do that let's remove a line items you probably do uh if the containers if it's parents containers flex one you can do uh margin top as auto how about we use display grid instead of flex cause uh it's just better hold on hold on hold on hold on let's before we bring out our bazooka let's just use our brains a little bit this guy's always ready to throw in the kitchen sink at every problem so margin auto so okay so i mean it won't stop refreshing what the is happening oh because david will not stop writing code i see you know what i'm just gonna like put my hands up no no no no you're doing good i'm just seeing don't touch the keyboard okay okay you're fine david you're fine i just wanted to see what it might be so okay so margin top auto worked but it moved everything no position absolutes okay fine why because is that isn't that like doesn't that lead to a ton of problems oh bottom nav okay okay okay okay okay okay i see what you're doing okay i can with that that's cool that's cool i'm gonna then what i'm gonna do is i'm gonna make a position of this relative okay i mean i think that that should be the initial state though but but yeah yeah i don't think so that's what pro uh css developers tell me it's a happening make the parent relative and make the child absolute okay um is it not working i mean in real life most of the times the parent is a relative of the sun so um so david what did you do did you get that joke pills today but by the way i i might have but i don't what pills did you get that up the whole app every time code you know what i'm just gonna this like not do it what invalid position of value ab but you never wrote ab you wrote absolute i'm not understanding i think it's my abs that it's probably uh hold on do you guys see the error because i don't understand it i just removed all the styling on that did my server just die could have i just killed it from here i'm just gonna yarn start remote colleague kills american company servers but you did that i didn't you developers smashes the whole company oh man um okay so all right wait i can just stick this right in the freaking folder hold on a sec about to put my graphic into the assets how about we put all the content in first and then worry about oh he's about to drop it in assets that's sick um guys why is this like should i close this simulator or what the is happening opening oh it's still opening huh interesting opening okay it's taking its sweet time oh i know the svg is going to work i'll make a ping too all right so is there a reason why this is taking so long that's weird right like there's some weird with like whenever you're doing react native development like normal common sense stuff like doesn't work probably because we don't do that too much and it's just a lack of experience but module parse failed what is that we you may need an appropriate loader to handle this file currently no loaders are configured to process this file uh okay well everything was working so what changed what did we add that had that impact because we were good here oh son i don't know if you're going to be able to use the svg so uh i'm i'm also going to stick a a png in that folder okay oh so what you're doing is what you want to do is put a regular image and then put the svg on top of that with like a higher z index or something is that what you're trying well so well what i actually just made a uh g that would uh that would cover the bottom like uh portion of the page and yeah we can put like a we can put that to like a z index of like negative one something like that and then uh have it under everything okay oh yeah i want to give my folder open here bottom dot png i mean david don't don't be sad we'll add in the authentication as soon as the first landing page is built thank you i'm so happy now like i can't even tell how happy this is man at least that will break um okay so does it seem so my app is just gone like just straight up just gone like is it there for you guys i'm just getting errors on like fail to compile let me try uh you may need an appropriate loader so i'm gonna google that let's see stack overflow 126 upvotes npm install babel preset yes 2015. wait hold on this is uh let me let the world know that we're working with react native here in all caps i've been banging my head against the wall all day trying to figure out is this guy okay hope he's not dead um it still says react and not react native even though i wrote react native in all caps would we still have to do this babble crap i haven't before i guess you'll resolve more incorrectly closing the upper property try this loaders presets react es 215 um okay i'll see so why do we need that because everything was working up until now so i'm not going to do that solution because it just sounds silly to me like did somebody in here go and change app.json or our babble config babel preset expo so that looks like normal to me and then where's our loader hello loader where the hell is our loader let's see you know what's what's the uh the error rate again um the error is saying module parse failed you may need an appropriate loader to handle this file type currently no loaders are configured to process this file but we have the loader that we don't need image or or an icon or anything i mean we do have an icon but that icon we had the whole time everything was working um fine but then i think david did something and and it changed so do you remember your last couple of changes david the thing the the style for that uh that stuff right there okay so so let's try that real quick because that's when things were working let me go back to our app nope still still up um should i just remove that right there the problem is happening inside of input.component.js on line 105. are we using any inputs i don't think so not at all do you even have input imported in nope react react native native expo loader why did we change bro what the um i'm just gonna start it again it's like if it won't run we can't really make any progress you know like we literally need to be able to at least see it right try compiling now i got rid of the uh um the svg that was in the assets oh it might be the svg you're right that was the new change that we added let me actually look react native assets svg how to use svgs with react native yeah you have to actually have a bring in a loader so that might be it i do have react native svg by the way we have installed that already okay um but like where to add svgs is the question um ah see look we need a transformer that does this this is what we need to do you see all this we need a metroconfig.js and babel needs to know how to transform the path for the svgs that's why we were having the problem and then in your assets you could add svgs i think our app is going to compile now with the svg not there like so far i don't see any problems and like yeah i don't get any errors at all let's hit w open in the web browser project is running at 1906. let's hit enter wait why do i still have that problem you took it out right yeah uh let's try it on the land wait a minute is there like do we have to clean up cash there is a way it might be worth it look the app is loading it's bundling boom the app is there yeah so it was that 3g good debugging um i think we're going to have to use this transformer um this looks way too complicated yeah right like shouldn't that be the why don't i just go with a png well like with rack native anyways like all of your images are loaded to uh um in s3 instance a what instance um uh amazon storage oh really yeah let's look at react native transformer and if this has a ton of github stars then that means we should use it if it doesn't then it's probably a scam um okay so i believe we'd be able to make svg's work my friend but we would have to go this route do you guys want to go this route uh not really all right i mean if there's any easier way so what's the solution the solution is to go png yeah i think the solution is to go png okay so for example david take note of one hour and 36 minutes when we decided to scratch svgs and go png's that might be a good note to add and then you can actually drop that in the video as well okay uh-huh okay so quick quick quick quick quick all right i want to see what interesting so we got cards card statuses nice not exactly what i was imagining when i was thinking cards but okay um can you help okay so cool so let's um let's make damage work now right lamb okay so let's add the image to the home page um app app actually let's look at dribble for inspiration i totally forgot we can do that yeah because dribble is just the best oh yeah inspiration explore design work um mobile right there where that's what i was looking for mobile ah okay cool that's beautiful the grocery one oh the dashboard looks so good yo that's actually the type of dashboard we want built for our too loaned processed and approved take note of that i can put that together okay let's work on that that's what i'm saying now we got david in before david was just sleeping in his head david go get a coffee okay or you're fired okay david it's like everything is like that david go get sleep or you're fired he's like oh okay this is for job okay it's for work great i can sleep in peace now okay i'm not gonna lie guys i'm starting to get excited as looking at these designs i'm actually so happy right on so cool i really like the uh ones with like uh that uh uh the one with the illustrations on it that one's really cool like that's super friendly um what are you talking about everything has illustrations your your mouse is like pretty much on it right now okay this one yeah there's a blue one right there oh no i like the uh oh i like the shapes and stuff i do wait wait i have i have a resource for that too wait so it's like if they want to go through the builds or if they want to go through like certain things that could be cool um do you guys not want it to be dark themed you guys want the app to be like i don't know all the way dark i love dark theme you know yeah dark dark dark theme all the way but yeah dude this is exciting because if i learn how to build designs like this like my life will change forever because these are the designs i want to like i mean i can point to the stuff that excites me um oh that's kind of cool why the oh pun intended i should have you um make like a uh a pinterest board or something of like uh designs that really uh uh that really captivate you and uh i could i could work something up dude that is sick like there's a bunch of that like gets me really excited that's cool i mean i know it's not like coding related but like jeez that's cool it's like imagine giving people like coding exercises like hey you got five minutes go it's like a simple exercise like loop through an array um whenever you're working on these kind of stuff let me know me too seriously like this this type of design if i can do this that is exciting as because then i mean then it's game over oh yeah exactly wow you are right lam i will say that this is probably like the i just sent in a link to the chat with the with a bunch of stuff like this so let me just go here oh i have quasi design inspiration so i'll just keep putting this in here done um i'm like i really want to go for a dark theme but i don't know why none of these are dark themes um isn't there a filter yeah filter color filter ah you're right filter wait tags dark uh dark ah that's what's up nice that's a nice landing page which is invisible for some reason okay i could with something like this too this is not bad this is kind of cool but you know still not completely what i'm after but that's pretty cool um the day streaks are pretty cool like i would like to have for students to kind of like what streak they're on i'll build something up hey this is so inspiring that it literally makes me want to like go crazy building an app you know oh you get excited when you look at this this is cool i think you should be able to like click on a card and then it shows you what's what the course contains or what the video contains or whatever and then you can hit play then we should uh level up our oh my goodness this is cool like each core should be like this that's really cool yeah that's really cool so like you look up a course and you're like oh javascript course or like you know whatever react beginner course and then it has all the videos in there that'd be really dope um but we should get some landing page inspirations like i kind of want to look at some landing pages and then wow that's so beautiful i like want all these apps to be in the app store where i can just go and download them oh like dashboards like these i would want to have you know like like dashboards like these lamp 100 that is cool so like i just dropped a little sample of something that i have uh i designed recently where in the chat oh it just came through oh son damn that's clean that's dope bro yeah i like how on the left hand side of slash archive slash char underscore pages mac and a key where is like landing page like i want to see like here let's get out of here let's go i don't know we're in mobile so you want to go up to inspiration and go there so landing no but i want i want mobile landing pages oh okay or like let's just look at login pages dark login but what do we call it register pages is that what they call it like not the login page i want the registration page like where you register you know where you click get started and that i want yeah there's like three of them okay lem how far are we into the the svg thing are we good to go on that because i think we can just code up the design of memo that we saw for now oh yeah um i can put the i can put the spg back um there is a uh like the wavy bottom there's a png of it right now that we can work with um okay i am actually i'm actually gonna have to uh have to jump here in like a little bit i got a uh i got a student call i gotta take care of okay oh man but it's been so much fun oh yeah so do we have that image with this like little wave or like we don't right now yeah well the there's the png of it in the uh uh but this is but this is just a wavy bottom right this is not an image with the waves hold on i'm all right i'm i'm sorry i'm i'm a little confused i think i misunderstood i mean is there an image um but how did these guys do this is this not oh they don't have an image here right like it's not like that this is just an image and then in photoshop that put these waves is that not what they did no i think what they did is that um they have the image as like um as like z index like zero or something like that right and then they added the waves over it yeah okay so david we can work on this right yep okay let's work on this then and we can add oh yeah we obviously can add like regular images um in react okay if you gotta go all good all good brother all good all right hey this has been this has been excellent i had a i had a blast awesome bro enjoy all right take care boys take care man bye take care all right i'm gonna go with touchable opacity what's up david what's up we're the last one standing let's go all right let's go image there's an easier way how about that so bomb hey nice my boy fast i think we can just import it from somewhere where is the image um let's use um so next time we ran into a problem like that where we know we're not wrong let's clean our cache the cache yeah so okay we're good let's now bring this image back and hopefully it messes everything up again oh yo this is a this is mobile development for you just adding an image just takes like our lives experience and swift it was so much easier nah react native is way easier i think so i think wait hold on so now let's what's uh let's now we're making progress dude i'm excited so yeah yep let's fix this image and bro i think lem like scammed us bro like how do we add the waves no let's just turn that into a png put it right under and then just like have like a negative margin between the two with the top image beings your way hold on i'm not on the same page as you one second so let's go to is this what you're saying go to get waves yeah yeah all right i think this is the easiest one yeah yeah okay just somehow download this now i'm excited bro okay so we'll just down i'll just download the first first actually rhymes with cam so all right so svg copied up um so we'll make a new file and it will be oh no we cannot do svgs remember is it we cannot do switches he gave us some cash too no no no we can't do svgs where's lim yo give me the file give us the png file he put it in the freaking thing and then i removed it but he gave us the png file how about i go into uh uh he's gonna give it to us okay oh my leg is asleep one that gives you png i have the png oh download png that's exactly what i was looking for perfect bump oh okay you can you can work that way too yeah yeah wait who dropped the wavy bottom oh not me not me i moved in here's lambs i don't um so i'm adding lambs as well showing finder wavy bottom png okay so how do we how do we use that image i would put it right under uh like here okay here let me upload that image to freaking imgur and use it from there because what is this anchor it's just hosting images yeah but is it like whatever you upload it's gonna be public right i mean yeah i don't know what kind of private images you're adding all right so let's copy this paste it paste this image um let's give it a height that's like way smaller 200 there we go perfect magnificent oh you should have unticked the background from that haiku or high k up thing i can go upside down on this i don't know on the right like on the right side yeah like i could go upside down and but how do i get um like uh like uh for example i don't want any of uh that i just want the blue uh see see the on the right hand side color uh two lines below yeah and on the right side next to the top one oh two two three three there is the eye thing and just uncheck the eye perfect because now i can position absolute this to be just right below oh wait no no i can i can position absolute this and i can override it onto the image right uh yeah exactly exactly yeah but like you can also do and i think that's that's better if uh if we do margin negative that's a dope app by the way it's called uh opted high gay yeah uh where the did it go right there like it even gives blurry gradient and all that that we need for exactly i just discovered it today i mean right now right after i discovered it or not no no i i was messing with it earlier um yeah where is it a project all right so i will add it like that wait it was supposed to be a png but it's doing some weird ass now i'm gonna call it uh upside down upd and instead i will do require and hopefully it's gonna everything up forever yay it did i don't know dot slash dot slash like that speed yes okay now what i need to do is give it us uh let's go and drop in touchable opacity like this let's what's that let's wrap this image in touchable opacity what's the touchable opacity um i'll show you and now we can actually give it styling as well so let's give it styling and we'll do styles dot um waves or something that makes sense yeah okay and then let's go here and let's go waves and position absolute and let's go margin top you need to give it an uh position to be actually absolute oh disconnected what disconnected skype wait why did the app disconnect hello why did the app disconnect what the that's weird it looks stupid on the simulator but on my phone it's actually not looking too bad that's half there okay um margin top 200 margin top 200 again 2 000 that's nothing um i just want to like put it here you know isn't that what we're supposed to do or what yeah uh i mean like i'm supposed to like i'm i'm trying to add it to the top of that but that's not going to do anything right that's not going to do what we want it to do is it because if i my gut feeling says okay can we wrap the two images together and then just put the second one on the bottom like the waves in the bottom the waves at the bottom hold on um okay if you want to try that as long as just i think we don't up any cash related thing what do you mean wrap the two images what do you mean by that i'm in like the um i don't think they're like divs i mean you could put it in like a view you could put it in a view yeah but like they already are interviews i don't understand like what's the point of that so i mean wait uh okay go for it girlfriend i'm in view like this boom and then put this here and yeah it's acting up let's go and instead of like this i would do images wait misspelled style oh hold on the problem is i can't find view read the error dude doesn't mean oh we gotta import it is it not important no i don't think so that's important what okay this is this boom there bam okay and now i would do like this here something like this uh why doesn't it center this image can you show the app can see it ice cream okay let's learn from this because these guys got well but that's not what we want right we want um how like what are these hold on i'm not conceptually understanding something like i think that's more important to understand so these waves here are just white waves right or what what the is this yeah that's a white wave that goes from the very bottom all the way to almost the middle where it covers the image which probably would take up the whole screen anyway okay so we are so the image really needs to be a background image then right actually that makes sense so let's go ahead and make our first of all let's go and make our image background image first so let's go react native background image let's start off there let's just keep simple and go from there so yeah i've used this before image background perfect so let's import image background here and then the first guy we're going to make it image background no no not your waves right there wait what is happening no no you want this uh the first one i don't want it in the wavy image styling i want it on its own right okay um am i not seeing it because it's a background image wait resize okay you you need to add a couple of styling stuff so there's a resize mode wait what's the error happening here style that what the is this error every time i comment out your view hold up with what is it because oh this is this is but isn't it an object should be like that yeah makes sense okay i don't know that's an integer oh what um let's actually do what this what where'd i do this instead this is what the documentation i can see it says like ah wait wait okay so so the container needs to be flex one flex direction column for some reason i don't care now let's just add it um okay do whatever you want i'm gonna look in oh okay okay that makes sense container flex one so yeah container flex one and flex direction column it's or it's uh i just add it there uh let me just comment these out for real quick see how that hap how that will turn out now we just need like we don't need you bro this is exciting um wow damn that's sick as um wait wait wait wait wait wait but i want this to be the same color as that dark mode screen that we had because that was sick okay we just need to uh change the color there but not touching anything else you're you're at the right place yep so that's where you set the color like i think like that color ah that's i think that's too dark so what was that color that it gave us like that uh-huh something like that i i think yeah yo bro like there is the ui kitten dark mode color hold on let's get rabbit from them because they had a pretty nice uh dark theme color going on it was this one right it was one of these i think the 800 one it's pretty good is it 800 okay oh dude i'm gonna start coding every single day fighting as it is so fun bro wait it's not ah why does it look so dark here but like then when i actually pick it it's like not dark at all but that was the color somewhere like ah yeah that's good that's good probably you're going way too dark like this i think ah i think that's that's good yeah that's good right okay let's go yep like i like purple colors dude i really do like me too ah like a good purple better than ah okay or let's just try this dark one the one that we did get so let's drop it in let's grab the name of this and name it final two and name this final like this okay look at that look at that um how can i um can should we zoom out the image the background no no no no i i think i think um can we zoom it out a little bit center you want to go lex part about this boom that you can do flex dash start or something right oh okay react native flex start i want to zoom the image out you see what i'm saying so i can like see the hold on um hold on dude i'm gonna take that image let's do it like this okay so let's grab uh that's what i'm saying it looks way better like this yeah yeah i mean we just need like a good vertical images like that and then like let's go ahead beautiful so we got or should this be called the hero image right it's like really easy to understand i don't know the terminology what the is any hero image it's like the hero image you know like bam main one like the main oh okay okay dude this is so cool we learned how to make waves oh what the is sick um now we just need to go to noob app and like do a couple of things uh definitely need to wrap up our app in this provider that's for sure gosh this simulator is ass i hate the trade-offs it's like okay so you could do the whole regular reacting but that's just really really really hard really hard okay or you could go the expo round it's gonna be really easy but it's not gonna work yeah pretty much you're like um okay um this one's not gonna work because you're not gonna be able to figure it out it's because it's not gonna work because it's let's add another button underneath that so hold on let's do it like this okay so i know you gave this button some styling and stuff like that where did you color it okay so what i'm going to do is i'm going to remove some of the styling background color and default is blue you don't like it i do but on the dark blue background the light blue let's go success on it let's go status is equal to success because that's gonna work out oh vim mode in dark mode so i'm pretty good actually okay actually i'm see you two weeks from now we know you're doing this you're playing with a whim how do i install i can install packages and too in here i'm not sure i want to give our own one last try yeah like i'm gonna i'm gonna develop here in the future what happened no no it's just so discouraging that metro doesn't work sometimes so we have to like debug the out of everything yeah can you unselect everything oh yeah thank you yeah i actually just went to you this expo and i don't i don't find a way to install packages oh wait add dependency yeah so let's give it a try afterwards it's like if we keep get running into errors or some we'll give it a try let me try warning warning i feel like it might look pretty freaking cool because i love the orange color and it's like very clever programmy right yeah yeah yeah um i love it that's how this video should start okay so we've made pretty good progress i mean not having any skills in front end then not having react native skills and not knowing not ever doing any wave to putting together what we did i'm impressed um so now let's say so actually what we should say is start learning to code right and then we should have get started underneath there so let's actually see if we can write text here let's go text and let's go start what the does it say it's not there it's right like i don't even know how to inspect tools in the i don't think you can because i mean at the end of the day you're like looking at swift stuff all right so i see okay so i see this button looks juicy i can click it that's a good sign now how do i add the text underneath there to start learning the code because i'm not seeing the text it's because i mean i gave my text the same styling as a button so i should see the text right i guess yep so i'm trying to make it work and uh because it's position absolute and all of the good stuff you know let's go color and i'll go white i don't see dude why is this so hard to just do normal comments and stuff it's like add a text two hours later oh i know how to add text it's like that you and i would have like finished in react yes so long ago i know i would have finished it this whole episode bro um so where is the text why don't i see it uh what no idea i literally gave it the same styling as the button oh okay wait why'd you leave the session because you kicked me out i guess i didn't but i don't know i'm joining again so it's all good face id okay so this is looking really good we have our landing page looking really really beautiful um i wish i could add a little bit of text somewhere um i probably will at some point but i think this is pretty freaking good for now let me actually try adding text like that so there's text being added all the way to the top there which is interesting so let's look at the styling of this layout we got container direction is column okay i would like to add text here just looking good right yeah insane dude like look at this this looks cool right oh yeah what's crazy is that that's a button because i couldn't add a text there you know i don't know why i couldn't add a text there so i just made it a button and it's a button with a ghost outline hey don't around with my button what are you doing so i added a button with the ghost appearance and a basic status so that gives you a button like that okay okay yeah so how i started adding text i'm going to delete your text david is um i started adding text like this so you now see my wow is showing up on the background i see you put it in a safe area too it's good it's good i would like it to be kind of like uh where they have theirs so like if i go here you see they have theirs like underneath the photo says start learning to code so something like that would be cool but like we were having a lot of difficulty so what we had to do was kind of do weird like we use position absolute for these buttons um and yeah to add that text i mean i could do position absolute but that you know i don't know it feels like i'm doing something wrong all right so what i would probably do um in this situation right is like i would wrap all of this in a in a view right like the uh the buttons give me just one second before you go on uh yeah let me actually hide that wow text because i don't really need it right now so save save um add cp mobile app landing page get push wait there's nowhere to push all right um let's go let's see let's see and you have like image so i would have a uh so the whole app i think is in layout and then we have the wave container and i have no idea where the wave container is how big it is no idea i don't know how to do inspect element and react native yeah me either um i think if we have uh let's see like if we had a uh a view wrapped around your buttons and the line of text that you want to add and set the top margin to auto it'll it'll push everything down over the uh the wave uh and if we set the bottom margin it will so you're saying kind of like wrap all of this in a view but it already isn't a view right but inside of that uh oh is it already inside of that waves container okay so wave container has the image and the buttons and i think and then this is the image that it has so what happens when you put a text a text element in there i'll show you what happens there's a text element and it doesn't exist anywhere let's go what does uh styles dot can i have a link to get into the code sent it in our chat okay cool dude react native is so much more annoying than straight up react yeah but it can do it can do a lot of things though like being able to do like desktop without being such a memory sync like uh like a uh electron i see it's like some time to get to get used to like for real clever programmers we'll go new go cp react native app creating the repository we'll add a team to it invite teams the squad yeah um write code and uh all right so none of us can figure out how to add a text right i'm trying it out right now all right lamb whatever idea you got just go for it ask for forgiveness you know not permission the way you see anything render and react native is you have to save like 20 times and refresh does the different firebase my life dude i want to just develop and react js bro why why can't we just do that why do we have to no metro's not gonna let me in oh wait hold on you can see it here just hit save and you'll see it on my ecam that's so weird where is the text hmm okay z index let's see the index one i'm going to say text style see if area view it's inside the v-waves let's see yeah i don't see anything what the heck but if i take it out of here all right so as soon as you bring it into waves all right that's like though bro let's just sit there let me shave oh shouldn't the safe area view like wrap around everything though well normally the safer review is to keep it in like the oh yeah yeah like the safe review apart from the images i think so it's done like everything is in the safe area okay so it works there but then when we put it beneath waves let me save a couple more times just to you know make sure it actually yeah then just appears all right so let's take a look at those i'll be right back waves i wonder if it is because all right um all right guys so i hope you enjoyed that us building out the landing page of clever programmer we i think are gonna one day publish this but it also gives me an incentive and a reason to code this thing up so i hope you had fun i had a ton of fun building this oh and if you enjoyed this smash the like button okay subscribe to the channel because this is the channel where you learn all things react react native and full stack development so thanks so much and i'll see you in the next video you\n"