Rakha Wibowo
Rakha Wibowo
  • 40
  • 167 933
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)
th-cam.com/video/Byg7QBAbf90/w-d-xo.html
Animal Friends (Prod. by Lukrembo)
th-cam.com/video/ag2RePNqwCs/w-d-xo.html
มุมมอง: 1 501

วีดีโอ

React Native Custom Drawer With Reanimated
มุมมอง 2.6K2 หลายเดือนก่อน
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.3K3 หลายเดือนก่อน
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!!!
มุมมอง 1.7K3 หลายเดือนก่อน
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.6K4 หลายเดือนก่อน
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
มุมมอง 2.3K4 หลายเดือนก่อน
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
มุมมอง 2.6K5 หลายเดือนก่อน
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
มุมมอง 3.5K5 หลายเดือนก่อน
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
มุมมอง 3.7K6 หลายเดือนก่อน
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 TH-cam - www.youtube.com/@Kavsoft Make sure you check out Kavsoft's videos - th-cam.com/video/aHtDymtNdSs/w-d-xo.htmlsi=_kelat73ycLhCHpH Full Code - github.com/Rakha112/react-native-animation/tree/main/season1/src/27-React-Native-Dark-Mode-Swi...
React Native Carousel With Pagination, Auto Play and Infinite Loop
มุมมอง 3.5K7 หลายเดือนก่อน
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
มุมมอง 2.5K7 หลายเดือนก่อน
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
มุมมอง 6K7 หลายเดือนก่อน
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.2K8 หลายเดือนก่อน
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
มุมมอง 2.5K8 หลายเดือนก่อน
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.7K8 หลายเดือนก่อน
React Native Custom Drawer With Reanimated 3 and Gesture Handler From Scratch
React Native Shared Element Transition With Reanimated 3
มุมมอง 7K8 หลายเดือนก่อน
React Native Shared Element Transition With Reanimated 3
React Native 3D Three.Js | 3D Character With Animation Using React Three Fiber
มุมมอง 1.3K9 หลายเดือนก่อน
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
มุมมอง 8K9 หลายเดือนก่อน
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
มุมมอง 6K9 หลายเดือนก่อน
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.5K10 หลายเดือนก่อน
React Native 3D Onboarding Screen Using Reanimated and React Three Fiber
React Native Custom Animated Bottom Tab Navigator With Reanimated 3
มุมมอง 6K11 หลายเดือนก่อน
React Native Custom Animated Bottom Tab Navigator With Reanimated 3
React Native Onboarding Screen ( Change Color ) With Reanimated 3
มุมมอง 20K11 หลายเดือนก่อน
React Native Onboarding Screen ( Change Color ) With Reanimated 3
React Native Custom Floating Action Button (FAB) With Reanimated From Scratch
มุมมอง 2.7K11 หลายเดือนก่อน
React Native Custom Floating Action Button (FAB) With Reanimated From Scratch
React Native Accordion With Reanimated From Scratch
มุมมอง 6Kปีที่แล้ว
React Native Accordion With Reanimated From Scratch
React Native Stack Carousel / Card Animation With Reanimated And Gesture Handler From Scratch
มุมมอง 2.3Kปีที่แล้ว
React Native Stack Carousel / Card Animation With Reanimated And Gesture Handler From Scratch
React Native Onboarding Screen With Reanimated 3
มุมมอง 13Kปีที่แล้ว
React Native Onboarding Screen With Reanimated 3
React Native Custom Swipeable Toast With Reanimated From Scratch
มุมมอง 6Kปีที่แล้ว
React Native Custom Swipeable Toast With Reanimated From Scratch
React Native FlatList Grid or FlatList Columns With Reveal Animation Using Moti
มุมมอง 6Kปีที่แล้ว
React Native FlatList Grid or FlatList Columns With Reveal Animation Using Moti
React Native Basic Reveal Animation With Moti
มุมมอง 3.5Kปีที่แล้ว
React Native Basic Reveal Animation With Moti
React Native Custom Image Carousel with Pagination and Auto Play using Reanimated 2 From Scratch
มุมมอง 3.3Kปีที่แล้ว
React Native Custom Image Carousel with Pagination and Auto Play using Reanimated 2 From Scratch

ความคิดเห็น

  • @shfsakib339
    @shfsakib339 6 วันที่ผ่านมา

    How can I loop it. I want to show the cards again if its coming to its end. Please help!

  • @kerou4276
    @kerou4276 16 วันที่ผ่านมา

    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.

  • @hellolemons7340
    @hellolemons7340 17 วันที่ผ่านมา

    Would love to see this using flatlist or scrollview!!!

  • @azhara.2143
    @azhara.2143 17 วันที่ผ่านมา

    Mantap mas, terima kasih ilmunya perbanyak konten 3d react native mas khususnya r3f

  • @macon5696
    @macon5696 19 วันที่ผ่านมา

    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

  • @angerbadge773
    @angerbadge773 22 วันที่ผ่านมา

    can we do that with expo router

  • @ramiwang
    @ramiwang 25 วันที่ผ่านมา

    Thank you, that's very helpful.

  • @ChippalaLaxmi
    @ChippalaLaxmi 27 วันที่ผ่านมา

    Can I do the same in react native js

    • @rakhawibowo
      @rakhawibowo 26 วันที่ผ่านมา

      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

  • @user-hx1jw2zw4h
    @user-hx1jw2zw4h หลายเดือนก่อน

    can this be achieve using javascript only

  • @user-vt9co1pv4t
    @user-vt9co1pv4t หลายเดือนก่อน

    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?

  • @abdulhaseebkhan168
    @abdulhaseebkhan168 หลายเดือนก่อน

    Great video

  • @freeinformation7877
    @freeinformation7877 หลายเดือนก่อน

    Thank you very much for your source code dude, I appreciate it

  • @ricardocalixto4472
    @ricardocalixto4472 หลายเดือนก่อน

    Thanks for your content!

  • @rishujaryalls8325
    @rishujaryalls8325 หลายเดือนก่อน

    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

  • @ricardocalixto4472
    @ricardocalixto4472 หลายเดือนก่อน

    How can we add tooltip at the bar when selected?

  • @antonioteixeira1779
    @antonioteixeira1779 หลายเดือนก่อน

    ❤❤❤❤❤❤❤❤❤

  • @ricardocalixto4472
    @ricardocalixto4472 หลายเดือนก่อน

    What if I want a horizontal scrollable chart? How would it be possible? Thanks for the content, you are awesome!

  • @YuriiLutsyk0304
    @YuriiLutsyk0304 หลายเดือนก่อน

    Coooool

    • @rakhawibowo
      @rakhawibowo หลายเดือนก่อน

      Thanks bro!!!

  • @ashraf6625
    @ashraf6625 หลายเดือนก่อน

    permisi mas, saya mencoba mengikuti tutorial mas, tapi saya mengalami kendala saat install React Three Drei karena dependency conflict dengan Three js 🙏

    • @rakhawibowo
      @rakhawibowo หลายเดือนก่อน

      Boleh tau versi Dari React Three Drei sama Three nya mas ?

    • @ashraf6625
      @ashraf6625 หลายเดือนก่อน

      @@rakhawibowo React Three Drei versi 9.106.1, Three versi 0.165.0, saya lihat di reponya react three drei dependency nya pakai three versi "three": "^0.151.0" mas, Terimakasih udah balas mas🙏

    • @rakhawibowo
      @rakhawibowo หลายเดือนก่อน

      @@ashraf6625 Saya coba dengan versi yang sama, di saya normal mas, nggak ada dependency conflict

    • @ashraf6625
      @ashraf6625 หลายเดือนก่อน

      @@rakhawibowo boleh liat package.json nya mas?, btw saya ga pakai expo buat install react nativenya mas, terimakasih 🙏 Edit : Udah bisa mas, terimakasih ya mas 🙏

    • @rakhawibowo
      @rakhawibowo หลายเดือนก่อน

      Sip mas sama sama, saya yang sekarang kena conflict peer dependency hahaa, saya sudah coba open issue di reponya R3F

  • @remziogultum6697
    @remziogultum6697 หลายเดือนก่อน

    amazing content

    • @rakhawibowo
      @rakhawibowo หลายเดือนก่อน

      Thanks bro!!!

  • @collinsk8754
    @collinsk8754 หลายเดือนก่อน

    Really good 👏👏

    • @rakhawibowo
      @rakhawibowo หลายเดือนก่อน

      Thank you 🙌

  • @BarakerZeonlist
    @BarakerZeonlist หลายเดือนก่อน

    you deserve

    • @rakhawibowo
      @rakhawibowo หลายเดือนก่อน

      Thanks bro!!!

  • @jayr44402
    @jayr44402 หลายเดือนก่อน

    Can you teach me how to do animation pull refresh?

  • @HaakonJacobsen
    @HaakonJacobsen หลายเดือนก่อน

    Great video, thanks for sharing!🙌

    • @rakhawibowo
      @rakhawibowo หลายเดือนก่อน

      Thanks for watching 🙌

  • @pascalnouma1962
    @pascalnouma1962 หลายเดือนก่อน

    king

    • @rakhawibowo
      @rakhawibowo หลายเดือนก่อน

      Thanks bro 🔥🔥🔥

  • @amitmehta8554
    @amitmehta8554 หลายเดือนก่อน

    Will it impact on app size, if yes then how much

  • @Clytax
    @Clytax หลายเดือนก่อน

    But now when I change the min or max this new value becomes the boundary. so if I had 50 as min then select 60 as the min value, the next time I open the filters with the slider now 60 is the new lowest possible value :/

  • @akbarchannel2601
    @akbarchannel2601 หลายเดือนก่อน

    selalu, keren mas!

    • @rakhawibowo
      @rakhawibowo หลายเดือนก่อน

      Terimakasih mas 🔥🔥🔥

  • @akhari.dastak7029
    @akhari.dastak7029 หลายเดือนก่อน

    bro how much ex do you have?

    • @rakhawibowo
      @rakhawibowo หลายเดือนก่อน

      Broo 😭

  • @kinggrey2511
    @kinggrey2511 หลายเดือนก่อน

    Looks amazing 🤩😍🎉

    • @rakhawibowo
      @rakhawibowo หลายเดือนก่อน

      Thank you so much broo 🔥

  • @shahhussain5563
    @shahhussain5563 หลายเดือนก่อน

    Can we use widows laptop to build this ?

    • @Dira_1111
      @Dira_1111 หลายเดือนก่อน

      Yes

    • @rakhawibowo
      @rakhawibowo หลายเดือนก่อน

      Yes of course you can use it on Windows

  • @sefailyasoz
    @sefailyasoz 2 หลายเดือนก่อน

    I'm trying this with an Expo project but it still messes the whole thing, have you ever experienced a problem with this transition in an Expo app ?

  • @aabc0007
    @aabc0007 2 หลายเดือนก่อน

    Thanks a lot bro, subscribed😄

    • @rakhawibowo
      @rakhawibowo หลายเดือนก่อน

      Thank you so much for the sub 🙌

  • @WilliamPale-dh1qm
    @WilliamPale-dh1qm 2 หลายเดือนก่อน

    Thank you for this master tutorial!! I'm able to reproduce this component on my app but how to manage header background color and opacity when the main component (screen) is in a Stack Navigator?

  • @KB9191
    @KB9191 2 หลายเดือนก่อน

    First of all, thank you for this content. When I try this for another model, I get this error --> Unable to resolve "../assets/Models/Model.glb" from "components\Model.tsx". How can I solve it?

    • @KB9191
      @KB9191 2 หลายเดือนก่อน

      now I getting this error--> TypeError: gl.texImage3D is not a function (it is undefined)

  • @an.aminnazari
    @an.aminnazari 2 หลายเดือนก่อน

    👏👌

  • @an.aminnazari
    @an.aminnazari 2 หลายเดือนก่อน

    👏👌

  • @mosakibb
    @mosakibb 2 หลายเดือนก่อน

    Love the video. Just Amazing, Thanks

    • @rakhawibowo
      @rakhawibowo หลายเดือนก่อน

      Thanks bro 🔥

  • @unev
    @unev 2 หลายเดือนก่อน

    Great job! Is it possible to control the 3d character, so it performs arbitrary movements from within react native code?

  • @K.Huynh.
    @K.Huynh. 2 หลายเดือนก่อน

    Thank you for sharing! this tutorial is so cool! I love it.

    • @rakhawibowo
      @rakhawibowo หลายเดือนก่อน

      Thank you so much broo!!!

  • @5Growcooking
    @5Growcooking 2 หลายเดือนก่อน

    New react native window 10 install complete! Navigation problem not working for 5 project try not working 😢😢😢😢😢 help me TH-cam see

  • @kwesikayofficial3078
    @kwesikayofficial3078 2 หลายเดือนก่อน

    Great video

  • @ht1978
    @ht1978 2 หลายเดือนก่อน

    Very good project

  • @faicalfaical
    @faicalfaical 2 หลายเดือนก่อน

    Is it RTL compatible ?

  • @udaym4204
    @udaym4204 2 หลายเดือนก่อน

    wow cool can you make video on how to test react native app

  • @prashantchhibber6739
    @prashantchhibber6739 2 หลายเดือนก่อน

    when i implement slider in modal, slider changes can be stay in the previous stage on ios but on android it back to start stage

  • @ankitmahindrakar9365
    @ankitmahindrakar9365 2 หลายเดือนก่อน

    You are legend🙌

    • @rakhawibowo
      @rakhawibowo 2 หลายเดือนก่อน

      Thank you so much broo!! 🙌

  • @samuelgirmayesus3732
    @samuelgirmayesus3732 2 หลายเดือนก่อน

    You are awesome man, the quality and the creativity of your designs, top notch. You just got a subscriber with the bell on

    • @rakhawibowo
      @rakhawibowo 2 หลายเดือนก่อน

      Hey, thank you so much broo!! Really appreciate the support!!