Onboarding tutorial for React Native - Animated Carousel #1
HTML-код
- Опубликовано: 26 сен 2024
- Need One on One Coaching? 20% OFF NOW!
1 Hour - tinyurl.com/DC...
2 Hours - tinyurl.com/DC...
4 Hours - tinyurl.com/DC...
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
Hey! If you wanna see the ENTIRE app RIGHT NOW, go here! www.patreon.com/posts/animated-app-46720413
finally, the wait is over, got something exciting to learn again! Thanks @DesignIntoCode
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.
I paused the video to come here like your comment. Its difficult to follow.
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.
Did anyone else get a "undefined is not an object.(evaluating viewableItems[0].index)" error?
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.
i am using typescript with CLI and getting the same error... what should i do?
@@vamsikrishnachunduru8776 Hi, I did this but still got the same error
surely you put the index of the keyExtractor wrong
@@akinkunmi__ surely you put the index of the keyExtractor wrong
you just got a subscriber... good video straight to the point. no long talk you won
you sir are very considerate in every step you did. you deserve a million sub !
Thank you very much for sharing this information! It really helped me! Appreciate your effort! Thank you!
Thanks
That really helps me out, Thankyou
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?
Did you end up figuring this out?
Did u get any solutions for that?
Same here :/
How to download these type of images .
Great tutorial. Thanks
Thank you!
Awesome, thanks!
Keep itu up bro!
Did everything step by step and didn't get any thing rendered, it was just blank
The title could have been 'Animated Onboarding App series - Part 1 (Prepare horizontal FlatList with paging)', but anyways, its nice work done.
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
I love this shit, thank you broo
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
Great tutorial! You build a great ui. And plz tell which theme is you used in VS Code.
"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 ?
I'm also facing this error. Did you solve it?
Same here. Any of you find anything?
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
Can I get the code ??
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.
same problem
In typescript what is the type for viewavleItems inside useRef(({viewableItems}) =>{... ?
I used any. It worked.
plz can you make series on shopping app!
Thank you for these tuts
Very clear, concise, and to the point
I applaud your teaching style :clapping-hands:
I have got to get on my native game. Thanks for keeping me in check. See you soon!
Great
In my code the error is ReferenceError: Onboardingitems is not defined
@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".
why is it that the image is not showing?
Check the corect path. I had the same issue.
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?
Could possibly be where you are importing it? Misspelled, wrong path...
@@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!
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
@@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.
@@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.
Is there another part for the social app's updated version?
Not yet
Oh cool
VScode font?
undefined is not an object.(evaluating viewableItems[0].index)
surely you put the index of the keyExtractor wrong
What is the extension for the boilerplate typing "rfn" at 1:36 ?
@@bitcoinbitcoin670 Thanks!
@@guilhermechan7760 can you let me know what the extension is? the original comment seems to be deleted :0 thanks!
@@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!
@@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!
please new upload
WE are need new videos.
My team waiting for your videos. please............................. I hope you.
please give me this free source of code
23352 Quitzon Orchard
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
Yoo enna ya panni vetchirukinga ....😑
Would it be hard to refactor this into a typescript expo template?
🙌🏼 big salute to you for putting your hardwork. Love and appreciation ❤️❤️❤️ God bless
Keep going. Perfect.