How to build animated & responsive tablet UIs with React Native (at the lakeside)

Рет қаралды 145,896

Күн бұрын

▶ Source code github.com/craftzdog/inkdrop-...
▶ My dotfiles github.com/craftzdog/dotfiles...
▶ My equipment uses.craftz.dog/
▶ Check out my product: Inkdrop - Markdown note-taking app
www.inkdrop.app/?...
Follow me online here:
▶ Twitter / inkdrop_app
▶ Subscribe to my Newsletter www.devas.life/
▶ Blog blog.inkdrop.app/
▶ Instagram / craftzdog
Credits:
▶ Proofreading - Marco Cognetta / good_in_theory
▶ BGM - Epidemic Sound www.epidemicsound.com/referra...
00:00 Intro
02:34 Add note list header component
07:39 Create TextInput restyle component
14:24 Add a TextInput to the header bar
20:27 Move the theme picker to the sidebar
25:39 Add a left header bar button that can transform i
37:07 Add a clear button to the header bar
38:55 Implement the header bar animations
43:19 Enable tablet layouts
44:29 Add a navbar to the detail screen
53:37 Add editor state atom
56:48 Create a note list screen for phones
01:03:07 Use 'useSetAtom' for better performance
01:03:21 Make the screen responsive
01:11:08 Create a note list screen for tablets
01:13:47 Create a three-column lavout component
01:28:12 Memoize props of some components to improve
01:29:33 Hide left view in portrait mode
01:30:11 Toggle the sidebar
01:31:05 Add the sidebar to the left view
01:32:09 Implement detail screens for phones and tablets
01:40:02 Update the stack navigator for phones
01:40:19 Display note body on the detail screen
01:44:45 Ending
#ReactNative #CodeWithMe #ASMR

Пікірлер: 165

@devaslife 7 ай бұрын

Check out my Markdown note-taking app designed for developers 👉 www.inkdrop.app/?JU4VBbe23jg

@NazC113 Жыл бұрын

man's typing to the beat of nature.

@devaslife Жыл бұрын

🤩

@NazC113 Жыл бұрын

@@devaslife Hello there senpai \[^∆^]

@devaslife Жыл бұрын

A wallpaper of the lakeside is available on Unsplash🙌 unsplash.com/photos/ULM39UthLYI

@rob8363 Жыл бұрын

Love the locations you pick for these videos, it's beautiful there! I've been getting back into React Native recently after a 4 year break, so much has changed (for the better), your videos are a source of inspiration.

@maks12007 Жыл бұрын

Hello.My i take i answer.In vim html javascript files autocompilation not woring how this is fix.

@rana_co_ Жыл бұрын

@@maks12007 Javascript doesn't have an official languge server for nvim you can convert your files to typescript and then autocompletion will work as butter

@rana_co_ Жыл бұрын

I have been using your nvim config for like 6 months now and it really has changed a lot! I just love your minimalism!!!

@davidl5786 Жыл бұрын

I love the concept of working/coding in nature or just outdoors . I find it very relaxing and out of the box . Very often here on KZfaq you find people working in these super penthouses or mega offices with the latest computer and thousands of led lights . But we often forget that you only need a laptop to do most of the work and most importantly some vitamin D :)

@jasonloh1159 Жыл бұрын

I like how you show your key presses when you are using neovim, this helps me alot as a begineer when im encountering problems with command choice in neovim, you are showing me some easy and efficient commands that i can quickly pick up. Nice Video

@hanighazi5823 Жыл бұрын

We are so lucky that such a good, high quality videos are online for free! Thanks for the efforts! wish you all the best

@studyingasyouwere Жыл бұрын

You inspired me to start learning and posting web dev contents Taka! Thank you and keep being you. Much love! ♥

@wsky9646 Жыл бұрын

Seeing your work inspires me to work on my projects! Thanks man!

@shuaidong7995 Жыл бұрын

I look forward to your works every day. I like watching your works very much. I can also focus on my work. Thank you for your video

@whoIsDeck Жыл бұрын

Love to see you in new loactions and content you choose

@LNum Жыл бұрын

Days with a new devaslife video are joufyl days. Thank you again.

@levmisiliuk6436 Жыл бұрын

Bro every video of yours is just something unreal. Very beautiful and very cool!

@lucisdev Жыл бұрын

Thank you very much for the effort to generate this high quality content. A greeting from Spain

@ainr_dev Жыл бұрын

Your videos are very atmospheric!

@fezkhanna6900 Жыл бұрын

What a beautiful video and fantastic content. Lots of love from Sydney, Australia 🎉

@khanhbui143 Жыл бұрын

having waited for your video for a long time

@stoyick Жыл бұрын

I have to say, for no other KZfaqr am I this excited when I see a new video 😂

@ardafirarda3295 Жыл бұрын

This not just engineering. It's ART!

@raymondmichael4987 Жыл бұрын

Thank you buddy, I'll watch this later. You're my inspirational coder.

@HarisKhan-bh6uj Жыл бұрын

these locations feel sublime !! wish i can visit here in near future !

@vladyslavhimself6788 Жыл бұрын

You have a beautifull content design, that gives people motivation for writing code. Thank you! Keep going!

@h1t262 Жыл бұрын

Awesome. Good job. Beautiful locations and sounds. I like work with you :)

@CarlosReyesVDev Жыл бұрын

Your content is amazing. Another awesome video!

@hosnibona64 Жыл бұрын

Nice! Thanks for introducing me to Restyle! ❤

@_komaster Жыл бұрын

Started using neovim from watching your video. It took me a month to learn and love. Now it's my main editor :D

@Luisillo_o 6 ай бұрын

The real ASMR, just insane bro🖤

@maxhweb Жыл бұрын

every video from you is like a present

@bizzarrazzib 5 ай бұрын

its so perfect to see your work :), I run your videos on background during my work time and enjoy every sound :) thank you to share your life and skills to us

@roshanleembu3017 Жыл бұрын

Started using neovim after watching your video and It's helping me alot. And I'm learning new ways to do things in neovim day by day. Your workflow always inspires me. Thank you

@devaslife Жыл бұрын

awesome

@bishenpatel1676 Жыл бұрын

Someone assigns me something to do : sure I'll take a look at it once I've spent 2 hours watching Takuya's video.. You've been nothing but amazing Takuya... Appreciate your videos and effort into making these videos... Keep up the good work.. I'm ( or we are ) looking forward for your new videos...

@DavidWoodMusic Жыл бұрын

I will never get over how much I love your workflow. Great video! Much love brother

@python007 5 ай бұрын

This man has shown me more of the natural world than most nature shows have

@codeface7448 Жыл бұрын

Man is super talented, great work

@ignaciosanmartin2143 6 ай бұрын

Technology in contrast with nature, amazing

@andyfeng6 Жыл бұрын

The song of birds is really healing.😆

@jacopoguzzo4097 Жыл бұрын

Can't wait the release on this new version of Inkdrop🤩

@devaslife Жыл бұрын

💪

@xyzing99 10 ай бұрын

OMG, your dev env is amazing.

@nguyencong612 Жыл бұрын

As usual, an amazing video again. it gives me tons of inspiration. I'm in Tokyo, and every time watching your videos I want to move to Osaka😅, bro

@brayanyevenes5954 Жыл бұрын

It is an honor to see your videos, I wanted to ask you if it is possible to see someday making a video with the t3-stack

@mayufitcook Жыл бұрын

Your color grading is Siiiiick :)

@aseemlalfakawma5084 Жыл бұрын

Love these videos, keep it up!

@alcor9921 Жыл бұрын

Как же красиво. Когда-нибудь я попаду в Японию... надеюсь... я постараюсь.

@sirskyy9920 Жыл бұрын

incredible work

@MrJfernandes7 Жыл бұрын

You've inspired me to start a channel to share some of my products. I love your style. What do you use for screen capture? I love the transparent feel

@habong17359 Жыл бұрын

i now see many other youtubers whose videos are inspired by your video styles. But man, none of them are nowhere near the originator, devaslife!

@depreza68 Жыл бұрын

you're the reason I dive into vim man, nature is so calming

@user-os1yk6zu4g Жыл бұрын

Happy New Year!🎉

@prajumsook Жыл бұрын

Nice location and content.

@mindkindness9289 Жыл бұрын

I really like your video. especially sound keyboard and nature. 🥰

@WiseManCOD Жыл бұрын

Hello devaslife. I've been watching you for a couple years now and always have been mesmerized by your skills. I'm a CS student in university and they teach us no web development at all, it's all low level C and C++. I've been self learning JavaScript, HTML, CSS, and some very basic React and Svelte. I was wondering, how did you learn React and all these frameworks? I really wanna be able to freelance once I graduate or get a job in web development at the very least. I would appreciate some insight from someone like you!

@kk.guitar617 Жыл бұрын

i like video like this, just focus to code and natural sound

@hamidmohajerini9026 5 күн бұрын

It is really a wonderful video, I enjoyed it

@eiprofesoi Жыл бұрын

beautiful!

@MsHamzagalal Жыл бұрын

Love your videos so much ❤❤❤

@MyKreved Жыл бұрын

Hi Takuya! Wonderful video as usual! Just wondering, what backend do you use for the Inkdrop?

@liftingisfun2350 Жыл бұрын

I would also like to know!

@speeddesigning112 Жыл бұрын

beautiful videos, no talking not bullshit about anything just straight to the point with beautiful music and most importantly natural environment

@TenDallasUA Жыл бұрын

Hey man. Thanks for such useful and good-quality content. I have a question regarding react-native. Could you advise any cool cheatsheet with popular libs, components, etc. especially in context of ui part? Would be very thankful

@DrNabeel20 Жыл бұрын

Very cool!

@anvarinho Жыл бұрын

Like, right from the start👍👍👍👍

@israeldeleon2411 Жыл бұрын

Takuya is the best I was waiting for this video

@gianniskaragiannis9739 Жыл бұрын

Hi Takuya, big fan of your work. But I have a question. Did you create your own database for Inkdrop or used something like Firebase etc. ?

@aumm8755 Жыл бұрын

Sensei🙏

@moonbamboo3797 Жыл бұрын

beautiful

@Ikakoo2410 Жыл бұрын

🙏🏻 Thank you!

@diwakar8815 Жыл бұрын

i fell asleep halfway. Not cause its boring cause its ASMR made me do it. I swear😁

@herbst1398 Жыл бұрын

Hello and good morning from Wiesbaden Germany, i really like your channel

@jairoevaristo2289 Жыл бұрын

I would like to see a video building in electron JS congratulations for the very good quality

@ingenierohernandezmitre7275 Жыл бұрын

AMAZING

@josuemirandapr Жыл бұрын

The fun fact its that im not developer, i just learned only html and a bit of css and quit cause it was hard to learn for me because of the short time i have daily... But im literally subscribed, and i see everyone single video entirely cause its so satisfying and don't know how to describe it but i love it! Even if i don't understand what is he doing 😭🤣

@dekyuda Жыл бұрын

What a nice place to doing some code 😊. Hope someday i can go there of i visit japan

@franciscomorales-it5fj Жыл бұрын

Coding was never so A E S T H E T I C👌😍

@thoniorandriamialisona3933 Жыл бұрын

I really love the sound and design of your keyboard! Is this the K6 from "Keychron"!? And really thank you very much for giving me a motivational to use VIM!

@user-jo4tr6zp5n Жыл бұрын

Hi Takuya! I love your videos and your content. It looks incredible. I would like you ask you to make a custom theme for oh-my-fish, if it is interesting!

@eduar2tc904 Жыл бұрын

Amazing level

@jimmyjimenez8599 Жыл бұрын

What text editor do you use by the way? Love the videos!

@nickmdrummer 5 ай бұрын

Great video as always! I would like to know what application you use for the cursor.

@scc4213 Жыл бұрын

I am missing the sound of Keychron

@estefanionsantos Жыл бұрын

Hello! Very cool your video! How do you make this effect with the transparent background?

@edgargiobanny Жыл бұрын

Your videos are very good, it would be great if you could comment with your voice. I think you haven't made any video, right? What I like most about your videos is the effect of the keyboard when you are typing, thanks for sharing greetings from Mexico

@therealist9052 4 ай бұрын

Why did you change the language to Latin in the example on the right? Awesome video btw! You've got a new sub!

@user-eo1es6vz6s Жыл бұрын

Wow, you don't have snow on the street yet, in our country the forests are already covered with snow) The location you chose for this video is gorgeous, the video is amazing)

@devaslife Жыл бұрын

It never snows in november in japan

@nizz4m Жыл бұрын

Could you do the tutorial includes with API interactions ?

@tq_h Жыл бұрын

idk coding can be that chill ~~

@publicdatatownhall2261 3 ай бұрын

Wowwww amazing , what is the software you used to make this presentation , it's sooooo cooool

@callmezero5309 Жыл бұрын

What text editor do you use? Looks great!

@rifkysatyana2415 Жыл бұрын

Love your content. I have a question tho, how does he get that auto-complete for closing html tags.. I'm using LunarVim andI don't get any of those. Really helpful for any answers.

@dev-c6905 Жыл бұрын

❤

@ssixa5754 Жыл бұрын

Good video, with what programs?

@liftingisfun2350 Жыл бұрын

What do you use for your backends? Python?

@craigasketch Жыл бұрын

how do you use your keyboard on top of the macbook keyboard? I'm trying to do the same but it keeps hitting keys :(

@hatemasker Жыл бұрын

How you screencast over your video that you are shooting with transparent effect please ? I really like your videos !!

@wenxiulong4209 Жыл бұрын

Your neovim configuration is create! But will it be a performance issue if Mac Pro memory is only 8G(2015).?

@userasd360 Жыл бұрын

Hey, is it possible to create a multipage complex frontend tutorial in react / next js. This will enhance a lot of advanced concepts related to the framework and fe. (FullStack)

@HeitorYT Жыл бұрын

Have you tought about trying Qwik, SolidStart and VueJS?

@yashmistry1918 Ай бұрын

How does he have video recording in background and how can I see it through transparent terminal? If terminal was recorded on laptop it would show whatevers on the background in laptop..