I'm Jesse.

And today we're going to keep working on our brain computer app.

We have all of our phase one functionality working, but it doesn't look very good.

So we need to style it a little bit.

Just make it look a little bit nicer.

Doesn't have to be like amazing, right?

But we want to look a little bit better.

And if we get through that today, then we're going to do whatever else we need to do to get it ready to actually go to the Google play store.

We're gonna launch this first.

That's an android app.

Later on on IOS I happen to have an android phone.

So that's why I'm doing android first.

And I'm on a PC.

Uh, who?

I do have a Mac that I can use to launch this as an eyeless apa's well, but it's not as good for streaming.

So we're gonna try this first Azan android app since the last time we streamed.

I did in stole, uh, android studio so we can simulate the android app right now, I'm just gonna stay in the the web mode because it's easier to work with when we're styling.

But at some point when we need to, we can also check out the simulator in Android Studio.

Okay, So, see, there's a lot of you here, and a lot of you've been waiting for a long time.

I noticed a few.

You are in time zones toe where it's like 2 a.m. three a.

M.

Something like that.

I apologize for that.

I, um I used to be able to stream earlier in the day to accommodate time zones, especially the time zones, like, if you're in India or time zones in that area.

Ah, but unfortunately, I have to work during that time period now, So it's kind of hard for me to accommodate, I guess if I waited till even later, like towards nighttime here in my time zone, uh, I it would be Maybe morning.

There's just not really a time that I can stream that would accommodate all time zone.

So, uh, let me know if this is a very awkward time for you, and I'll keep that in mind.

But, um, I guess pride, the best thing for me to do maybe, is just try to do different times when I can, so that you could always watch the recording.

But, you know, maybe sometimes you can catch it live if I switch up the times.

One other thing I wanted to ah, to tell you all before we get started with the code, you may have noticed that part two is no longer available.

So this is part four of a streaming Siri's part two is not available.

Eso, after trying to figure out what happened apart to my best guess is that what happened is that I accidentally deleted.

It s Oh, I'm very sorry about that.

Um, I'm not I don't really remember the leading it for sure, but would, I do remember, is that before the last stream, like, right before the last dream, I was trying to set the stream up, and I accidentally created the stream with, um, basically like no scheduled start time, which means the stream would be scheduled start immediately.

And then I quickly realised my mistake and started a new stream.

Tried to start a new stream with the same name that would have the correct start time.

And I wanted to quit that old stream basically delete the old stream, so I wouldn't confuse people who were thinking that it would start immediately.

And, um, what I think happened is that I thought I was deleting that that stream that should have never been created.

But in reality, I may be deleted the wrong stream.

And I really did the 2nd 1 That's what I think happened.

Uh, the the reason I think that is because after I finished that stream, which a stream three, I went back and saw that the duplicate of Stream three was still there had never been deleted.

And so I'm thinking, maybe that's what happened.

I tried to contact you tube through the feedback.

Like their feedback motile on like Creator studio is like the YouTube, um, kind like admin panel for, um, creators.

I tried sending a message there.

I don't really know if they'll get around.

I don't know if they even would, um, put, like, recreate that video.

I know it's possible.

I have read online that it happens sometimes that they will recreate the video, but I'm not 100% sure like free code.

Can't doesn't monetize, so I don't know.

I don't know how Google would view that if it would.

You know, I've heard that they do it for large channels.

This is kind of a large channel, but I don't know.

So we'll see.

I'm kind of expecting that that video never come back.

So I really apologize for that.

Um I mean, I like I tried to read everything I could and do whatever I could to try to get it back.

But it's ending.

It's out of my hands at this time.

So anyway, uh, that's what happened to number two.

I did have a few people ask about it, so I figured I'd just let everybody know.

So let's go ahead and get started when, Like I said, we're gonna do some styling.

We may also add in you maybe clean up the code a little bit if I noticed somewhere where we could clean it up.

It's still very simple, though.

We've managed to do everything all in one file, but we do have some places where you know, for instance, we still some commented out code.

You know, this if statement is kind of pointless, right?

Since we're not doing anything else.

So a few places where we could clean things up, you know?

Rather not ship unnecessary code if I don't have to, so we'll be on the lookout for that.

But for now, we want to do some styling, which we basically did.

You're very, very little styling.

You know, up to this point, I don't even know if we have an object for Stiles.

No, we don't.

Okay, let's do that first.

Let's make that.

So in react, Native.

Let me set my timer as well.

So I'm gonna set a timer for 25 minutes and I'll do code for 25 minutes.

And then when the timer goes off, I'll go back to the live chat.

I'll answer some questions as many as I can get to in a five minute time period, and then we'll do a little bit more coke.

All right, So Okay, we did import style sheet, so maybe we have it somewhere.

I just don't know where we're using style sheets.

Here we go.

Just got mixed in there with everything else.

So when you're doing react native, it's ah, it's a good idea to use this style sheet dot Create and to put your styles in here.

It helps, as far as I know, with what react native does behind the scenes that helps with performance eso Let's let's move our styles into are, uh, style sheet dot create object and then we'll go from there that'll clean things up a little bit, get our styles.

Oh, in the same spot.

So if I take this so this would be our our inputs, it looks like all our imports have the same the same styling, so I should be able to select all of them and let's get rid of them.

And let's say style equals stiles dot input and then appear in our style objects.

Let's create a key called input.

Whoa, Didn't not mean for that to happen.

Input.

And then let's paste.

Oops.

I wondered if that was gonna happen, since I I cut all of them.

But let's paste our styles into here.

Okay?

Now what we should get is are let's log out so we can actually see this.

See if it'll area.

Um, so see these now have the same styles and we cleaned up a decent amount of code here because we just move this into Stiles.

This works just like a normal style sheet with a few differences.

So a normal style she uses CSS syntax, right?

This is Josh Shipp objects syntax.

So you notice we don't have hyphenated properties here, there?

Campbell case.

So if you take your normal CSS properties and camel, case them than the work.

And, um, also, we have no values and react native, so there's no pixels at the end.

It's just straight numbers.

Okay, Anything else is a string.

We can also throw JavaScript in here, which is a pretty cool feature.

Um, and then by default, everything is in flex box in react native and the flex direction by default is column.

Whereas normally in on the Web, the default flex direction is ro.

Those are the main differences now.

React native uses a subset of CSS, which means that you can't use all of what's available in CSS and react native, but most of it's still available.

S so if you if you try to do something that's not available, you'll get a message in, um, well in your browser, depending on what you're using, Ah, whether a browser or, uh, an emulator or testing on a device.

At some point you'll get some warning to say that.

You know, this doesn't work.

At the very least, you'll see on the screen that it doesn't work.

Right?

So, for now, uh, I think everything we're trying to do will definitely work.

So let's look through the rest of our app just to make sure we didn't miss anything.

No, we didn't miss anything.

So right now, let's add some styling to our our links here, or I'm sorry, our inputs here, Um, the inputs are really close together, which looks kind of weird.

So let's add a little little space between these, so I'm gonna add Ah, that's that's, um, Margin.

And I'm gonna do margin vertical.

This is a little different.

You don't see this too often in CSS, but in react native with our style sheet weaken.

Same Arjun vertical.

And let's just give it an eight and see how that looks.

Now, what this will do is margin.

Vertical will add a margin on the top and the bottom at the same time.

So we end up with in between inputs.

Here we end up with actually 16 pixels or 16 units, right of margin and then at the bottom.

Here we have eight, so I don't know.

Sorry if it Ah, there's a little bit of a delay on the stream.

My computer has been doing this weird thing lately where every once in a while, like I could hear my music, like slows down and from recording a video, are streaming it just like stops for a second or two.

I haven't been able to figure out what's doing it yet.

Hopefully, I can just maybe try to restart.

That'll fix the problem.

Um, all right, So I don't really like that much, huh?

That much padding.

And to be honest with you, let's Ah, let's give this a little mobile mobile view here.

So let's try to imitate a mobile view and see if we can get a right Now it's showing this I wonder Device toe.

All right, Cool.

So we can kind of see how this would look on a mobile device.

It's actually look super small.

I think we can definitely make this stuff bigger.

I wonder why.

Why did it look so small?

Uh, did we have it on?

Oh, because I had it zoomed in a lot, that's why.

So, uh, definitely going to take the zoom off of that, at least on the desktop or the Web version, I don't know.

And my, uh, my timer stopped.

That's interesting.

I wonder if my stream freezing in my timer stopping or have anything to do with each other.

I guess we'll have to keep an eye on the clock.

Now, Uh, at about 5 30 Eastern time or about 1/2 hour into the stream, I'm gonna take a break and go to the good of the chat.

All right, so let's Ah, let's make these a little bit bigger.

I want to make let's make the text bigger as well.

Uh, which?

I don't think we have any styles on the text.

So let's make style equals, Let's say styles dot who heading?

I've been typing on a different keyboard Old day for work.

So now I'm ah, keep miss typing everything.

So we're gonna do for our texts whenever the style start heading.

Oops.

And, uh, let's give this a font size of let's say 24 to see what?

That how that looks all right.

A little bit bigger.

Not you bad and um, I kinda you know, I want this to be kind of stand out a little bit more.

So let's do margin bottom.

Uh, well, we'll give this a 16 for a margin.

Bottom forgot my comma.

See what that looks like.

Okay, a little bit better.

All right.

Not bad.

And actually, with more space there, the spacing on these inputs doesn't look quite as bad.

Also are inputs are you know, I think they could definitely be wider.

Like, right now, you can't even see, uh, all the content.

I wonder what would happen if we just comment out the with.

Would it go for with Okay, it's it looks like maybe it's it's defaulting to some sort of pre set with.

I guess I'm okay with that, To be honest with you, though, I mean, I think we could go like there's quite a bit of white space here.

We may wanna, you know, go a little bit wider.

Especially because the device ideas is so large.

There may not really be a way to fit it in there, but actually feeling just a little bit wider.

I think it would.

It would work eso Let's figure out why it's getting this with and I'm gonna We don't need much space for the preview, right?