Onboarding tutorial for React Native - Animated Carousel #1

Подписаться 17 тыс.

Просмотров 118 тыс.

50% 1

Need One on One Coaching? 20% OFF NOW!
1 Hour - tinyurl.com/DC1HRCoach
2 Hours - tinyurl.com/DC2HRCoach
4 Hours - tinyurl.com/DC4HRCoach
We start with creating a animated FlatList carousel, then make an animated indicator component to show which slide your on, then an AWESOME button that has a circular progress animation as well as controlling the FlatList, then finishing off with async storage to show the onboarding process only the first time a user opens your app!!
CHECK OUT THE ENTIRE APP TODAY!
/ animated-app-46720413
If you enjoyed this video please consider supporting me on Patreon! / designintocode
💥 Save TIME with a custom TEXT component!
/ custom-reusable-47843654
💾 Source Code
/ 46720668
Follow me!
Twitter: bit.ly/2MdnXBX
💬 Come chat on Discord!
/ discord
❤️ Subscribe for awesome videos! bit.ly/2KZU1ds
✅ Building a React Native + Firebase Social App
• React Native + Firebas...
✅ Taking Designs and Turning them Into Code
• Music Player screen UI...
✅ Awesome React Native Videos!
• React Native LOGIN SCR...
Software Used:
VSCode, React Native, Expo
#reactnative #animated #onboarding

Наука

Опубликовано:

26 янв 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 75

@DesignIntoCode 3 года назад

Hey! If you wanna see the ENTIRE app RIGHT NOW, go here! www.patreon.com/posts/animated-app-46720413

@96Kushagra 3 года назад

finally, the wait is over, got something exciting to learn again! Thanks @DesignIntoCode

@CodingNuggets 3 года назад

I have got to get on my native game. Thanks for keeping me in check. See you soon!

@viki_sky007 3 года назад

🙌🏼 big salute to you for putting your hardwork. Love and appreciation ❤️❤️❤️ God bless

@bkd_developer 2 года назад

Sukriya bhai mene 10 video dekh li mujhe smjh nhi ayeya pr tumhari video ke starting ke 3 minute dekh liya smjh a gya.... Sukriya again bro.

@sanilkp6180 2 года назад

Thank you very much for sharing this information! It really helped me! Appreciate your effort! Thank you!

@augustineonyekachiadmiora9015 3 года назад

you just got a subscriber... good video straight to the point. no long talk you won

@karthikop1915 8 месяцев назад

That really helps me out, Thankyou

@ddikodroid 3 года назад

Keep itu up bro!

@felipemelendez5741 Год назад

Awesome, thanks!

@hburakarslan 3 года назад

Keep going. Perfect.

@atealab6152 3 года назад

you sir are very considerate in every step you did. you deserve a million sub !

@jonmultimedia 3 года назад

Great tutorial. Thanks

@DesignIntoCode 3 года назад

Thank you!

@zm12123 2 года назад

Great tutorial! The copy and pasting was offputting, though. It would be way better if you typed out each line and explained your thought process behind it.

@maghani.official Год назад

I paused the video to come here like your comment. Its difficult to follow.

@lrajoo11 Год назад

Thanks

@igor_000 3 месяца назад

I love this shit, thank you broo

@rakshitvaja8313 2 года назад

Great tutorial! You build a great ui. And plz tell which theme is you used in VS Code.

@haibertbarfian6343 3 года назад

Hey Awesome video but can this be done in Reanimted V2 ? the community is moving toward Reanimated to be able to harness the power of having animations run on the UI thread. Unfortunately I cannot see any videos covering carousels using reanimatedV2

@nbaua3454 3 года назад

The title could have been 'Animated Onboarding App series - Part 1 (Prepare horizontal FlatList with paging)', but anyways, its nice work done.

@abashersi5725 3 года назад

Did anyone else get a "undefined is not an object.(evaluating viewableItems[0].index)" error?

@vamsikrishnachunduru8776 2 года назад

Hi Abas, I got the same error, it was because of missing destructuring the viewableItems variable, change it from viewableItems to { viewableItems } in the viewableItemsChanged function.

@hassaanshahzad1140 2 года назад

i am using typescript with CLI and getting the same error... what should i do?

@akinkunmi__ Год назад

@@vamsikrishnachunduru8776 Hi, I did this but still got the same error

@damidelOK Год назад

surely you put the index of the keyExtractor wrong

@damidelOK Год назад

@@akinkunmi__ surely you put the index of the keyExtractor wrong

@hitechfocus 2 года назад

Great

@Super50fifty 3 года назад

Would it be hard to refactor this into a typescript expo template?

@bhavyakoshiya3142 3 года назад

In my metro i am not seeing date and time like some people have can you tell me how can I enable it.. i am using catalina

@GM-qh7ug 3 года назад

plz can you make series on shopping app!

@abdelalimhassouna9573 2 года назад

Thank you for these tuts Very clear, concise, and to the point I applaud your teaching style :clapping-hands:

@HIRAKJYOTI1 2 года назад

This is awesome.. but i have pass and item's index in reactnavigation , screenamae, parameters: itemindex, i want that itemindex as current item in my flatlist, then if slide next nextitem should come as current, if prev, prev item should come to current item

@waleedvrock 8 месяцев назад

How to download these type of images .

@Mine4ever95 2 года назад

Hi! I get this error when i scroll. Invariant Violation: Bad mapping of type object for key x, event value must map to AnimatedValue. Can someone help me?

@official_smp2017 2 года назад

Did you end up figuring this out?

@dhanishmohd3674 Год назад

Did u get any solutions for that?

@Gannon777 8 месяцев назад

Same here :/

@Nawras672 Год назад

How can we use SVG files instead of png? when I try to use svg files the images just dont show up. No error message or anything.

@gheianagustin381 Год назад

same problem

@Light1c3 Год назад

It never shows me the first element, any ideas? If I have 3 elements, I don't see the first one, and if I have 5 elements, I don't see the first 2... lol

@rithu6482 3 года назад

Is there another part for the social app's updated version?

@DesignIntoCode 3 года назад

Not yet

@rithu6482 3 года назад

Oh cool

@habeebbombata9908 10 месяцев назад

Did everything step by step and didn't get any thing rendered, it was just blank

@reveriches1785 2 года назад

VScode font?

@laxmipriyapradhan1704 2 месяца назад

Can I get the code ??

@SmartMedia101 Год назад

In typescript what is the type for viewavleItems inside useRef(({viewableItems}) =>{... ?

@AwesomeTutes 11 месяцев назад

I used any. It worked.

@ivxsm4062 3 месяца назад

"Invariant Violation: Bad event of type undefined for key contentoffset, js engine: hermes" i get this error when i try to scroll any one know why ?

@mosakibb 2 месяца назад

I'm also facing this error. Did you solve it?

@rhythmagarwal1965 3 года назад

In my code the error is ReferenceError: Onboardingitems is not defined

@temitopeagboolanuel 2 года назад

@Rhythm. The problem was because of the 'export default' statement used to export the components. In strict mode, 'Export default' is only valid where there was a previous declaration of the same variable, and we need to declare a new instance of that same variable as a default value. The solution is; for every file where export default is used, in a line before the statement, just type 'let VARIABLENAME' For example in Onboarding.js, before the export default Onboarding statement, type "let Onboarding". Likewise in App.js. before the export default App statement, type "let App".

@guilhermechan7760 2 года назад

What is the extension for the boilerplate typing "rfn" at 1:36 ?

@guilhermechan7760 2 года назад

@@bitcoinbitcoin670 Thanks!

@SmashupPvper Год назад

@@guilhermechan7760 can you let me know what the extension is? the original comment seems to be deleted :0 thanks!

@guilhermechan7760 Год назад

@@SmashupPvper Hey Will! He mentioned an extension called "ES7+ React/Redux/React-Native snippets". I am not sure if it is the same as used in the video (I haven't tested it yet lol :P ). Hope this helps!

@SmashupPvper Год назад

@@guilhermechan7760 Thanks a lot for your quick reply I appreciate it! Just tried it and it doesn't seem like its the exact same but its very close. Thanks!

@thameemansari7514 2 года назад

please new upload

@g-neto6581 3 года назад

Hello! I'm sure what can be wrong with my code, but following the steps you've shown, when I try to see the list for the first time I get an error message saying: ReferenceError: OnboardingItem is not defined Module.G: odejs eact_native\Expo\animatedFlatListCarousel\components\OnboardingItem.js G:/nodejs/react_native/Expo/animatedFlatListCarousel/components/OnboardingItem.js:4 1 | import React from 'react'; 2 | import { View, Text, Image, useWindowDimensions, StyleSheet } from 'react-native'; 3 | > 4 | export default OnboardingItem = ({ item }) => { 5 | const { width } = useWindowDimensions(); 6 | 7 | return ( I've already taken a deep look inside my code to see why the OnboardingItem is not being exported and/or not being defined. Can someone explain to me what is going wrong there?

@DesignIntoCode 3 года назад

Could possibly be where you are importing it? Misspelled, wrong path...

@g-neto6581 3 года назад

@@DesignIntoCode Okay. It's working now, but the error wasn't because of the path, but it was the app.js that I've not set Onboarding.js between the Thank you for the help. Keep doing these awesome videos on your channel. You are amazing!

@AM-id5ry 3 года назад

Hello I am also having the same error but I do not know why it is happening... DesignIntoCode is there an email address that I can send you an email at to try and fix this? It is urgent

@temitopeagboolanuel 2 года назад

@@g-neto6581 Hi. Ran into same issue... How did you resolve it? Can you please state what you did more clearly? The Onboarding has been imported into my app.js, yet it still throws the error you mentioned.

@temitopeagboolanuel 2 года назад

@gheianagustin381 Год назад

why is it that the image is not showing?

@AwesomeTutes 11 месяцев назад

Check the corect path. I had the same issue.

@thameemansari7514 2 года назад

WE are need new videos. My team waiting for your videos. please............................. I hope you.