Just one issue i am facing. Once the App loads for the first time, Progress is showing 100%, where i am on the first slide and if i scroll to next slide its still 100%, Once i click the button , the progress animation starts working... seems like progress animation circle is not getting initialised in the useRef object. Any idea ?
@@vijaysaini83 hey, could you please look through my code? I have the same isssue, but useNativeDriver : false doesnt work. to be honest I dont know what to do. help, please
NextButton.js --> line 39: why do we need an array of dependencies in this place? ([percentage]) I have an error: Expected 1 arguments, but got 2. Does the method "addListener" take a second argument?
thanx for this great tutorial, I was wondering if you can make a tutorial on how can i make the carousel slider to automatically slide am struggling to implement the setInterval to your code
I fixed it! I had to add `fill='white'` to the SVG Circle with the ref. Hope this will help someone! This is my first time using SVG. Thanks so much sir! World class content!
I decided to code along and I have 2 issues, the area between the button and the progress bar is black while yours is white(i didn't specify that color anywhere), the progress bar is slower when scrolling forward and normal when scrolling backwards.
Is this on android or iOS? For the background, you could try setting the background color of the view box of the svg to white. For the second issue, I’m not sure what that could be. Never ran into that issue.
Hey! Amazing video! Thanks so much! Only one small problem: the AntDesign icon doesn't show up in my app - I did use expo like you did and import that in the NextButton component. Do you have any ideas on how I could fix this?
@@DesignIntoCode Thanks for your reply! I'm getting an error, but it doesn't affect other components to be rendered : ) The error message is: [Unhandled promise rejection: Error: Directory for 'file:///Users/ruiningli/Library/Developer/CoreSimulator/Devices/F14F1D63-B1E5-47E7-B447-2DC52CFCA523/data/Containers/Data/Application/95B81EF7-3378-4F6F-8FB3-DB113FEED871/Library/Caches/ExponentExperienceData/%2540anonymous%252Fmy-project-083a40b8-6bbc-4265-af4e-bbcb709996c5/ExponentAsset-3a2ba31570920eeb9b1d217cabe58315.ttf' doesn't exist. Please make sure directory '/Users/ruiningli/Library/Developer/CoreSimulator/Devices/F14F1D63-B1E5-47E7-B447-2DC52CFCA523/data/Containers/Data/Application/95B81EF7-3378-4F6F-8FB3-DB113FEED871/Library/Caches/ExponentExperienceData/%40anonymous%2Fmy-project-083a40b8-6bbc-4265-af4e-bbcb709996c5' exists before calling downloadAsync.] - node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:103:50 in promiseMethodWrapper - node_modules/@unimodules/react-native-adapter/build/NativeModulesProxy.native.js:15:23 in moduleName.methodInfo.name - node_modules/expo-file-system/build/FileSystem.js:105:17 in downloadAsync - node_modules/regenerator-runtime/runtime.js:63:36 in tryCatch - node_modules/regenerator-runtime/runtime.js:293:29 in invoke - node_modules/regenerator-runtime/runtime.js:63:36 in tryCatch - node_modules/regenerator-runtime/runtime.js:154:27 in invoke - node_modules/regenerator-runtime/runtime.js:189:16 in PromiseImpl$argument_0 - node_modules/react-native/node_modules/promise/setimmediate/core.js:45:6 in tryCallTwo - node_modules/react-native/node_modules/promise/setimmediate/core.js:200:22 in doResolve - node_modules/react-native/node_modules/promise/setimmediate/core.js:66:11 in Promise - node_modules/regenerator-runtime/runtime.js:188:15 in callInvokeWithMethodAndArg - node_modules/regenerator-runtime/runtime.js:211:38 in enqueue - node_modules/regenerator-runtime/runtime.js:238:8 in exports.async - node_modules/expo-file-system/build/FileSystem.js:101:7 in downloadAsync - node_modules/expo-asset/build/PlatformUtils.js:49:25 in _downloadAsyncManagedEnv - node_modules/regenerator-runtime/runtime.js:63:36 in tryCatch - node_modules/regenerator-runtime/runtime.js:293:29 in invoke - node_modules/regenerator-runtime/runtime.js:63:36 in tryCatch - node_modules/regenerator-runtime/runtime.js:154:27 in invoke - node_modules/regenerator-runtime/runtime.js:164:18 in PromiseImpl.resolve.then$argument_0 - node_modules/react-native/node_modules/promise/setimmediate/core.js:37:13 in tryCallOne - node_modules/react-native/node_modules/promise/setimmediate/core.js:123:24 in setImmediate$argument_0 - node_modules/react-native/Libraries/Core/Timers/JSTimers.js:130:14 in _callTimer - node_modules/react-native/Libraries/Core/Timers/JSTimers.js:181:14 in _callImmediatesPass - node_modules/react-native/Libraries/Core/Timers/JSTimers.js:441:30 in callImmediates - node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:387:6 in __callImmediates - node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:135:6 in __guard$argument_0 - node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:364:10 in __guard - node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:134:4 in flushedQueue * [native code]:null in flushedQueue * [native code]:null in invokeCallbackAndReturnFlushedQueue
Hey! If you wanna see the ENTIRE app RIGHT NOW, go here! www.patreon.com/posts/animated-app-46720413
Just one issue i am facing. Once the App loads for the first time, Progress is showing 100%, where i am on the first slide and if i scroll to next slide its still 100%, Once i click the button , the progress animation starts working... seems like progress animation circle is not getting initialised in the useRef object. Any idea ?
Found the solution, Animated.timing do not provide NativeDriver for Android. so keeping useNativeDriver : false worked.
@@vijaysaini83 Thanks saved my time.
2 hours getting crazy about it and your comment suddenly appears on top of the comments :)
@@vijaysaini83 hey, could you please look through my code? I have the same isssue, but useNativeDriver : false doesnt work. to be honest I dont know what to do. help, please
@@ЕкатеринаСамута-э7м Did you end up figuring this out? I have this same exact issue.
Thank you for sharing this. I appreciate sharing the knowledge!
im waiting for the next video so much love
I am new to react-native.......Thanks for the video
Wow. You so much make this stuff look easy.
please did your own work
Great video, my circular progress line stops at 270 degress even though im at last item. Any solution?
Wow, thanks, this vidio help me to learn animated
Great to hear!
Awesome video, need a video about rectangle progress bar
Great Work, keep it up
Thanks so much!
How do I navigate to the HomeScreen when the progress bar is on the last slide. great tutorial
did you find the answer?
you can replace the console.log('last item') with your navigation function
AWESOME. i'm waiting for clone whatsapp header, the header hide on scroll and the top tab in 0% position on top
NextButton.js --> line 39: why do we need an array of dependencies in this place? ([percentage])
I have an error: Expected 1 arguments, but got 2.
Does the method "addListener" take a second argument?
thanx for this great tutorial, I was wondering if you can make a tutorial on how can i make the carousel slider to automatically slide am struggling to implement the setInterval to your code
Fantastic, Thanks
Hello sir, thank you so much for this tutorial! May I ask why is my svg Circle black? :')
I fixed it! I had to add `fill='white'` to the SVG Circle with the ref. Hope this will help someone! This is my first time using SVG. Thanks so much sir! World class content!
@@cinimodmil Awesome, for anyone else if you are using another color rather than white you might want to use fill='none' instead :D
how can i open homescreen when im in the last slide???
I decided to code along and I have 2 issues, the area between the button and the progress bar is black while yours is white(i didn't specify that color anywhere), the progress bar is slower when scrolling forward and normal when scrolling backwards.
Is this on android or iOS? For the background, you could try setting the background color of the view box of the svg to white. For the second issue, I’m not sure what that could be. Never ran into that issue.
@@DesignIntoCode it's black on both android and ios and setting background color isn't working either.
Interesting. Shoot me a message on discord with a link to your code on GitHub and I’ll take a look at it
@@abdelnacerr I have the same issue, do you know the solution??
@@DesignIntoCode I have the same issue, can you help pls???
which font are you using?
Error: ProgressAnimation.addListener is not a function
code below:
useEffect(() => {
progressAnimation.addListener((value) => {
const strokeDashoffset =
circumfence - (circumfence * value.value) / 100;
if (progressref?.current) {
progressref.current.setNativeProps({
strokeDashoffset,
});
}
},[percentage]);
}, []);
pls help
Do you have the `.current` on the definition?
const progressAnimation = useRef(new Animated.Value(0)).current;
Button progress is not changing and when pressing the button it only moves toward the first to the second dot.
same problem. How did you fix it?
It's because there's some mistypo in onViewableItemsChange prop in Flatlist
Hey! Amazing video! Thanks so much! Only one small problem: the AntDesign icon doesn't show up in my app - I did use expo like you did and import that in the NextButton component. Do you have any ideas on how I could fix this?
Are you getting a warning or error? Have you tried other icons?
@@DesignIntoCode Thanks for your reply! I'm getting an error, but it doesn't affect other components to be rendered : )
The error message is:
[Unhandled promise rejection: Error: Directory for 'file:///Users/ruiningli/Library/Developer/CoreSimulator/Devices/F14F1D63-B1E5-47E7-B447-2DC52CFCA523/data/Containers/Data/Application/95B81EF7-3378-4F6F-8FB3-DB113FEED871/Library/Caches/ExponentExperienceData/%2540anonymous%252Fmy-project-083a40b8-6bbc-4265-af4e-bbcb709996c5/ExponentAsset-3a2ba31570920eeb9b1d217cabe58315.ttf' doesn't exist. Please make sure directory '/Users/ruiningli/Library/Developer/CoreSimulator/Devices/F14F1D63-B1E5-47E7-B447-2DC52CFCA523/data/Containers/Data/Application/95B81EF7-3378-4F6F-8FB3-DB113FEED871/Library/Caches/ExponentExperienceData/%40anonymous%2Fmy-project-083a40b8-6bbc-4265-af4e-bbcb709996c5' exists before calling downloadAsync.]
- node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:103:50 in promiseMethodWrapper
- node_modules/@unimodules/react-native-adapter/build/NativeModulesProxy.native.js:15:23 in moduleName.methodInfo.name
- node_modules/expo-file-system/build/FileSystem.js:105:17 in downloadAsync
- node_modules/regenerator-runtime/runtime.js:63:36 in tryCatch
- node_modules/regenerator-runtime/runtime.js:293:29 in invoke
- node_modules/regenerator-runtime/runtime.js:63:36 in tryCatch
- node_modules/regenerator-runtime/runtime.js:154:27 in invoke
- node_modules/regenerator-runtime/runtime.js:189:16 in PromiseImpl$argument_0
- node_modules/react-native/node_modules/promise/setimmediate/core.js:45:6 in tryCallTwo
- node_modules/react-native/node_modules/promise/setimmediate/core.js:200:22 in doResolve
- node_modules/react-native/node_modules/promise/setimmediate/core.js:66:11 in Promise
- node_modules/regenerator-runtime/runtime.js:188:15 in callInvokeWithMethodAndArg
- node_modules/regenerator-runtime/runtime.js:211:38 in enqueue
- node_modules/regenerator-runtime/runtime.js:238:8 in exports.async
- node_modules/expo-file-system/build/FileSystem.js:101:7 in downloadAsync
- node_modules/expo-asset/build/PlatformUtils.js:49:25 in _downloadAsyncManagedEnv
- node_modules/regenerator-runtime/runtime.js:63:36 in tryCatch
- node_modules/regenerator-runtime/runtime.js:293:29 in invoke
- node_modules/regenerator-runtime/runtime.js:63:36 in tryCatch
- node_modules/regenerator-runtime/runtime.js:154:27 in invoke
- node_modules/regenerator-runtime/runtime.js:164:18 in PromiseImpl.resolve.then$argument_0
- node_modules/react-native/node_modules/promise/setimmediate/core.js:37:13 in tryCallOne
- node_modules/react-native/node_modules/promise/setimmediate/core.js:123:24 in setImmediate$argument_0
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:130:14 in _callTimer
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:181:14 in _callImmediatesPass
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:441:30 in callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:387:6 in __callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:135:6 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:364:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:134:4 in flushedQueue
* [native code]:null in flushedQueue
* [native code]:null in invokeCallbackAndReturnFlushedQueue
Shoot me a message on discord (link in the description) with a link to your project on GitHub and I’ll take a look at your code.
What font is that are you using in vscode?
Maybe Hack
which extension are you using for boilerplate code ??
Not an extension, just a snippet I made.
@@DesignIntoCode can you make video on how to do that?
Here is how to create them, it’s very simple. code.visualstudio.com/docs/editor/userdefinedsnippets
@@DesignIntoCode thanks
Thanks It helps for me
Best!
Thank you!