- 40
- 198 005
Rakha Wibowo
Приєднався 28 кві 2016
React Native 3D With React Three Fiber | Three.Js
Hello, in this video i will show you how to load 3D Model in React Native using React Three Fiber and Drei
Full Code - github.com/Rakha112/react-native-animation/tree/main/season2/app/3dModel
Starlink Model - api.starlink.com/public-files/starlink_standard_actuated_product_3d_models.zip
metro.config.js for Expo - gist.github.com/Rakha112/c1619b7d89b015d5697d5202900d52c8
metro.config.js for CLI - gist.github.com/Rakha112/07ac0e45dd0c897819d65efe0fe53598
React Three Fiber - docs.pmnd.rs/react-three-fiber/getting-started/introduction
React Three Drei - github.com/pmndrs/drei#readmethebiblegarth
gltfjsx - gltf.pmnd.rs/
Hey if you found this video helpful and if you want to support me, you can buy me a coffee from this link ko-fi.com/rakhawibowo
Chapters:
0:00 - Demo
0:14 - Installing Dependencies
4:11 - Convert Model to Code
6:28 - Load the 3D Model
18:13 - Model Animation
20:43 - Gradient Background
26:01 - Thankyou
Music:
Balloon (Prod. by Lukrembo)
ua-cam.com/video/Byg7QBAbf90/v-deo.html
Animal Friends (Prod. by Lukrembo)
ua-cam.com/video/ag2RePNqwCs/v-deo.html
Full Code - github.com/Rakha112/react-native-animation/tree/main/season2/app/3dModel
Starlink Model - api.starlink.com/public-files/starlink_standard_actuated_product_3d_models.zip
metro.config.js for Expo - gist.github.com/Rakha112/c1619b7d89b015d5697d5202900d52c8
metro.config.js for CLI - gist.github.com/Rakha112/07ac0e45dd0c897819d65efe0fe53598
React Three Fiber - docs.pmnd.rs/react-three-fiber/getting-started/introduction
React Three Drei - github.com/pmndrs/drei#readmethebiblegarth
gltfjsx - gltf.pmnd.rs/
Hey if you found this video helpful and if you want to support me, you can buy me a coffee from this link ko-fi.com/rakhawibowo
Chapters:
0:00 - Demo
0:14 - Installing Dependencies
4:11 - Convert Model to Code
6:28 - Load the 3D Model
18:13 - Model Animation
20:43 - Gradient Background
26:01 - Thankyou
Music:
Balloon (Prod. by Lukrembo)
ua-cam.com/video/Byg7QBAbf90/v-deo.html
Animal Friends (Prod. by Lukrembo)
ua-cam.com/video/ag2RePNqwCs/v-deo.html
Переглядів: 2 916
Відео
React Native Custom Drawer With Reanimated
Переглядів 3,1 тис.6 місяців тому
Hello, in this video i will show you how to create Custom Drawer in React Native with Reanimated Full Code - github.com/Rakha112/react-native-animation/tree/main/season1/src/33-React-Native-Custom-Drawer-2 Reanimated - docs.swmansion.com/react-native-reanimated/ Hey if you found this video helpful and if you want to support me, you can buy me a coffee from this link ko-fi.com/rakhawibowo Chapte...
React Native Dark Mode Curtain Effect Animation With Reanimated and Skia
Переглядів 1,6 тис.6 місяців тому
Hello, in this video i will show you how to create Line Chart in React Native with Skia, Reanimated 3 and D3.js from scratch Full Code - github.com/Rakha112/react-native-animation/tree/main/season1/src/24-React-Native-Dark-Mode Reanimated - docs.swmansion.com/react-native-reanimated/ Skia - shopify.github.io/react-native-skia/docs/getting-started/installation Hey if you found this video helpful...
React Native Line Chart With Reanimated 3, Skia and D3 From Scratch!!!
Переглядів 2,7 тис.7 місяців тому
Hello, in this video i will show you how to create Line Chart in React Native with Skia, Reanimated 3 and D3.js from scratch Full Code - github.com/Rakha112/react-native-animation/tree/main/season1/src/32-React-Native-Line-Chart Reanimated - docs.swmansion.com/react-native-reanimated/ Gesture Handler - docs.swmansion.com/react-native-gesture-handler/ Skia - shopify.github.io/react-native-skia/d...
React Native Custom Carousel with Reanimated 3
Переглядів 1,8 тис.7 місяців тому
Hello, in this video i will show you how to create Custom Carousel in React Native with Reanimated from scratch Inspired by Nitish Khagwal, Twitter nitishkmrk/status/1675402858118922240?t=Izpjhn6FxC4fDIzdLzKQ0w&s=19 Full Code - github.com/Rakha112/react-native-animation/tree/main/season1/src/31-React-Native-Carousel Reanimated - docs.swmansion.com/react-native-reanimated/ Hey if you...
React Native Bar Chart With Skia And Reanimated From Scratch
Переглядів 3,1 тис.8 місяців тому
Hello, in this video i will show you how to create Bar Chart in React Native with Skia and Reanimated from scratch The design is inspired by Purrweb Agency on Dribbble - dribbble.com/shots/22756562-Calorie-Counter-Mobile-iOS-App Full Code - github.com/Rakha112/react-native-animation/tree/main/season1/src/30-React-Native-Bar-Chart Reanimated - docs.swmansion.com/react-native-reanimated/ Skia - s...
React Native Card Swipe With Reanimated And Gesture Handler From Scratch
Переглядів 3,8 тис.8 місяців тому
Hello, in this video i will show you how to create Card Swipe in React Native with Reanimated and Gesture Handler Full Code - github.com/Rakha112/react-native-animation/tree/main/season1/src/29-React-Native-Card-Swipe Reanimated - docs.swmansion.com/react-native-reanimated/ Gesture Handler - docs.swmansion.com/react-native-gesture-handler/docs/ Hey if you found this video helpful and if you wan...
React Native Onboading Screen With Reanimated And Gesture Handler
Переглядів 4,1 тис.9 місяців тому
Hello, in this video i will show you how to create Animated Onboarding Screen in React Native with Reanimated and Gesture Handler inspired by Cuberto This video is inspired by Cuberto on Dribbble - dribbble.com/shots/6654320-Animated-Onboarding-Screens Full Code - github.com/Rakha112/react-native-animation/tree/main/season1/src/28-React-Native-Onboarding-Screen-Cuberto Reanimated - docs.swmansi...
React Native Dark Mode Switch
Переглядів 4,3 тис.10 місяців тому
Hello, in this video i will show you how to create Dark Mode Switch in React Native with Reanimated and Skia This video is inspired by Kavsoft's video on UA-cam - www.youtube.com/@Kavsoft Make sure you check out Kavsoft's videos - ua-cam.com/video/aHtDymtNdSs/v-deo.htmlsi=_kelat73ycLhCHpH Full Code - github.com/Rakha112/react-native-animation/tree/main/season1/src/27-React-Native-Dark-Mode-Swit...
React Native Carousel With Pagination, Auto Play and Infinite Loop
Переглядів 4,6 тис.10 місяців тому
Hello, in this video i will show you how to create a Carousel with Pagination, Auto Play and Infinite Loop Full Code - github.com/Rakha112/react-native-animation/tree/main/season1/src/26-React-Native-Carousel-Disney+ Reanimated - docs.swmansion.com/react-native-reanimated/ Liniear Gradient - github.com/react-native-linear-gradient/react-native-linear-gradient Hey if you found this video helpful...
React Native 3D Shop App UI With React Three Fiber - ThreeJs
Переглядів 3 тис.10 місяців тому
Hello, in this video i will show you how to create a 3D Shop App UI in React Native With React Three Fiber Full Code - github.com/Rakha112/react-native-animation/tree/main/season1/src/25-React-Native-3D-Shop Reanimated - docs.swmansion.com/react-native-reanimated/ Gesture Handler - docs.swmansion.com/react-native-gesture-handler/docs/ React Three Fiber - docs.pmnd.rs/react-three-fiber/getting-s...
React Native Onboarding Screen (Masking) With Reanimated 3 and Skia
Переглядів 8 тис.11 місяців тому
Hello, in this video i will show you how to create Masking Onboarding Screen in React Native With Reanimated 3 and Skia Full Code - github.com/Rakha112/react-native-animation/tree/main/season1/src/23-React-Native-Masking-Onboarding-Screen Reanimated Docs - docs.swmansion.com/react-native-reanimated/ Skia Docs - shopify.github.io/react-native-skia/docs/getting-started/installation/ Illustration ...
React Native Animated Circular Progress Bar With Reanimated 3 and Skia
Переглядів 2,7 тис.11 місяців тому
Hello, in this video i will show you how to create Animated Circular Progress Bar in React Native using Reanimated 3 and Skia Full Code - github.com/Rakha112/react-native-animation/tree/main/season1/src/22-React-Native-Circular-Progress-Bar Reanimated Docs - docs.swmansion.com/react-native-reanimated/ Skia Docs - shopify.github.io/react-native-skia/docs/getting-started/installation/ Hey if you ...
React Native Animated Donut Chart With Reanimated 3 and Skia
Переглядів 3,4 тис.11 місяців тому
Hello, in this video i will show you how to create Animated Donut Chart in React Native using Reanimated 3 and Skia Full Code - github.com/Rakha112/react-native-animation/tree/main/season1/src/21-React-Native-Donut-Chart Reanimated Docs - docs.swmansion.com/react-native-reanimated/ Skia Docs - shopify.github.io/react-native-skia/docs/getting-started/installation/ Hey if you found this video hel...
React Native Custom Drawer With Reanimated 3 and Gesture Handler From Scratch
Переглядів 1,9 тис.Рік тому
React Native Custom Drawer With Reanimated 3 and Gesture Handler From Scratch
React Native Shared Element Transition With Reanimated 3
Переглядів 8 тис.Рік тому
React Native Shared Element Transition With Reanimated 3
React Native 3D Three.Js | 3D Character With Animation Using React Three Fiber
Переглядів 1,9 тис.Рік тому
React Native 3D Three.Js | 3D Character With Animation Using React Three Fiber
React Native 3D Three.Js | Load 3D Model With React Three Fiber and Drei
Переглядів 10 тис.Рік тому
React Native 3D Three.Js | Load 3D Model With React Three Fiber and Drei
React Native Scrollable Bottom Sheet with Back Drop using Reanimated and Gesture Handler
Переглядів 8 тис.Рік тому
React Native Scrollable Bottom Sheet with Back Drop using Reanimated and Gesture Handler
React Native 3D Onboarding Screen Using Reanimated and React Three Fiber
Переглядів 2,7 тис.Рік тому
React Native 3D Onboarding Screen Using Reanimated and React Three Fiber
React Native Custom Animated Bottom Tab Navigator With Reanimated 3
Переглядів 7 тис.Рік тому
React Native Custom Animated Bottom Tab Navigator With Reanimated 3
React Native Onboarding Screen ( Change Color ) With Reanimated 3
Переглядів 24 тис.Рік тому
React Native Onboarding Screen ( Change Color ) With Reanimated 3
React Native Custom Floating Action Button (FAB) With Reanimated From Scratch
Переглядів 3,6 тис.Рік тому
React Native Custom Floating Action Button (FAB) With Reanimated From Scratch
React Native Accordion With Reanimated From Scratch
Переглядів 6 тис.Рік тому
React Native Accordion With Reanimated From Scratch
React Native Stack Carousel / Card Animation With Reanimated And Gesture Handler From Scratch
Переглядів 2,8 тис.Рік тому
React Native Stack Carousel / Card Animation With Reanimated And Gesture Handler From Scratch
React Native Onboarding Screen With Reanimated 3
Переглядів 14 тис.Рік тому
React Native Onboarding Screen With Reanimated 3
React Native Custom Swipeable Toast With Reanimated From Scratch
Переглядів 6 тис.Рік тому
React Native Custom Swipeable Toast With Reanimated From Scratch
React Native FlatList Grid or FlatList Columns With Reveal Animation Using Moti
Переглядів 7 тис.Рік тому
React Native FlatList Grid or FlatList Columns With Reveal Animation Using Moti
React Native Basic Reveal Animation With Moti
Переглядів 3,7 тис.Рік тому
React Native Basic Reveal Animation With Moti
React Native Custom Image Carousel with Pagination and Auto Play using Reanimated 2 From Scratch
Переглядів 3,5 тис.Рік тому
React Native Custom Image Carousel with Pagination and Auto Play using Reanimated 2 From Scratch
Hi bro amazing tutorial please create vedio on creating kanban board in react native like dragging one card from one list to another horizontally
Little bit urgent not working in Android please help
Good dev ...thanks a lot & keep uploading new new things
bro i need little help where can i reach you, I'm looking for features like multiple actions/animations on avatar. Simply i have downloaded a character (.fbx) T-shaped from mixamo >> import(.fbx) and export(.glb) from blender >> then gltsjsx conversion done. but when i try to import that .glb file i'm getting erros like ExpoAsync import
Hey! You can reach me on Telegram at t.me/Rakhawibowo. Just send me a message, and I’d be happy to help you out
thank you very much!
Hi sir, I don't know if this happens to other people, but why does the bottom sheet always open automatically when the application is first opened, which should only appear when the toggle is activated?
one of da best . keep up da good work mate
Thank you man, great work
bro, can you make a node graphic, like family tree node tutorial
are u Indonesian?
You helped me a lot, thank's!
after installing dependencies getting this error, The NODE_ENV environment variable is required but was not specified. Ensure the project is bundled with Expo CLI or NODE_ENV is set. Proceeding without mode-specific .env--> BUILD FAILED
What went wrong: Execution failed for task ':expo-modules-core:compileDebugKotlin'. > A failure occurred while executing org.jetbrains.kotlin.compilerRunner.GradleCompilerRunnerWithWorkers$GradleKotlinCompilerWorkAction > Compilation error. See log for more details
Hey, could you let me know the versions of React Native and Expo you're using ?
@@rakhawibowo react native : 0.76.1
@@rakhawibowo expo :51.0.38
I haven't tried it on React Native 0.76 yet, but I have tested it on React Native 0.75 with the new architecture. It seems like the error might be due to using the new architecture
It's really a good video , i am struggling with three js in react native. i try multiple times but I can't render the model . now finally it's working. Thank you very much for that video.
Thank you so much! I’m really glad the video helped you out!
White screen in IOS
Hey, if you’re trying it on iOS, make sure to test on a real device. The iOS simulator won’t be able to render it, as it no longer supports OpenGL rendering
Very good video, thank you but I want to ask instead of displaying the shoe like you, I have a file.glb about a car, how can I change the code because when I change the path to the car file it gives an error?
Hey, make sure you’ve generated the code for your model on the website gltf.pmnd.rs/, and don’t forget to update the path to wherever your model is located
Extremely helpful... Better to use this one instead of outdated/bulky carousel libraries.
Im from VietNam. Thanks for your contribution to the community, Happy 8386 forever top
thank you
No problem bro!
Hey, Is there any video tutorial or documentation to achieve same screen transition using expo, expo-router and reanimation 3? :) I have looked over internet but didn't find answer, it will be very helpful of you.
how to pass data thorugh these accordian item to a component, i want to pass these title and value const handlePress = (title,v) => { router.push('/(syllabus)/syllabusview'); console.log(title, v) }
Actually the best bottom sheet i've seen so far. New Sub definitely
Thanks bro, That's awesome to hear!
thanks, i dont know about animations, im beginner with react native animations, i try custome to my proyect ,great work
Thanks bro, Glad I could help!
Is react js such an opportunity?
You did this with three js? Is this possible with react three fiber? Did you use some responsive media query? Nice work!
In this video, I'm using React Three Fiber. You can find the full video on my channel, Thanks bro!
One question. Does this method convert webGL code to native OpenGL code and generate APK?
In this video, I’m using React Three Fiber, and as of the time of this comment, React Three Fiber uses expo-gl for React Native, which relies on OpenGL
Thanks Crack... Excellent Content... Greetings from Colombia
Thank you so much for your support, I really appreciate it!
love it
Bro i am facing issue
Can you tell me the issue you're facing?
I was facing the issue regarding useGLTF hook I am unable to use it in react-native expo app
Does it is efficient
I haven't done extensive testing, but for models like the one in the video, it run smoothly on low-end Android devices
you should be more famous !!!
What if we using App.js, what should I do ?
Tried this in an expo project and didnt work..
Could you let me know what issues you're facing? I've tried several times, and it works well without any problems. Make sure you're using the latest version of Reanimated
thank you!!!!
No problem!!
How can I loop it. I want to show the cards again if its coming to its end. Please help!
Hey, In this video, it has been demonstrated how to loop through the card data
how much it takes to learn animating like this, and how much it take in real work to build this for the first time from scratch ?. i can't do it by my self if i didn't watch your video ... how can i learn animating skills like yours . thanks for this video.
Make sure you master the basics of Reanimated and Skia. These two libraries are essential for creating custom components and animations in react native. Watching tutorials is a great, I used to watch a lot of them myself. Just be sure to create your own custom components or animations after watching the tutorials
Would love to see this using flatlist or scrollview!!!
Mantap mas, terima kasih ilmunya perbanyak konten 3d react native mas khususnya r3f
Terimakasih banyak udah nonton video ini mas!!!
Looks good, but I’d suggest implementing it with React Native Skia and adding a clip property to change the tab icon color when the circle moves, not when pressed. It doesn’t look great when the user presses the button, and it disappears because it becomes the same color as the tab bar, but in general - cool
can we do that with expo router
Thank you, that's very helpful.
Can I do the same in react native js
Of course, you can do the same using React Native JavaScript. You just need to change the extension from .tsx to .jsx and remove all type definitions
can this be achieve using javascript only
I'm not quite sure what you mean by "JavaScript only," but if you're referring to using it without TypeScript, the answer is yes. You just need to change the file extension to .jsx and remove all type definitions if there are any
Hi! Thanks for the video!! Have a question, what is the difference between getting contentOffset using useAnimatedScrollHandler, and without, strait through callback function passed to onScroll in FlatList?
Hi! Thanks for watching! The main difference is performance, useAnimatedScrollHandler runs on the UI thread, allowing for smoother animations and avoiding re-renders, while onScroll with a callback runs on the JS thread, which can lead to lag and jankiness during scrolling. If you're animating based on scroll position, useAnimatedScrollHandler is the better choice!
Great video
Hey, Thank you so much for watching !!!
Thank you very much for your source code dude, I appreciate it
Hey, Thank you so much for watching, I really appreciate it!!!
Thanks for your content!
Hey, Thank you so much for watching this video !!!
How to display these toast over <Stack.Screen name={ROUTES.ACCOUNT_SCREEN} options={{presentation: 'modal', }} component={AccountScreen} /> In this case it opens behind the modal not over the modal
How can we add tooltip at the bar when selected?
❤❤❤❤❤❤❤❤❤