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.
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.
@@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!
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?
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
It has been said before but I wanted to re-iterate, this video is more of a copy paste excersise, very little explination of anything, many missed opprotunities to teach. In the end I learned very little. I really do appreciate your time though.
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
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
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 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.
@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".
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
Thanks
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.
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.
I have got to get on my native game. Thanks for keeping me in check. See you soon!
you just got a subscriber... good video straight to the point. no long talk you won
That really helps me out, Thankyou
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 sir are very considerate in every step you did. you deserve a million sub !
🙌🏼 big salute to you for putting your hardwork. Love and appreciation ❤️❤️❤️ God bless
Thank you very much for sharing this information! It really helped me! Appreciate your effort! Thank you!
you are my king
Keep itu up bro!
Great tutorial. Thanks
Thank you!
Awesome, thanks!
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!
How to download these type of images .
Which website did you use to generate all images?
what theme and font do you use in vs code ?
Keep going. Perfect.
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 :/
The title could have been 'Animated Onboarding App series - Part 1 (Prepare horizontal FlatList with paging)', but anyways, its nice work done.
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
It has been said before but I wanted to re-iterate, this video is more of a copy paste excersise, very little explination of anything, many missed opprotunities to teach. In the end I learned very little. I really do appreciate your time though.
Great tutorial! You build a great ui. And plz tell which theme is you used in VS Code.
In typescript what is the type for viewavleItems inside useRef(({viewableItems}) =>{... ?
I used any. It worked.
Would it be hard to refactor this into a typescript expo template?
I love this shit, thank you broo
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
Did everything step by step and didn't get any thing rendered, it was just blank
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
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
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
Is there another part for the social app's updated version?
Not yet
Oh cool
plz can you make series on shopping app!
"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?
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.
Can I get the code ??
Thank you for these tuts
Very clear, concise, and to the point
I applaud your teaching style :clapping-hands:
VScode font?
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.
please new upload
undefined is not an object.(evaluating viewableItems[0].index)
surely you put the index of the keyExtractor wrong
WE are need new videos.
My team waiting for your videos. please............................. I hope you.
Great
Yoo enna ya panni vetchirukinga ....😑
please give me this free source of code
23352 Quitzon Orchard