- Original Git Repo is here. I ruined the git during the dev process, and failed to fork. But be sure to check on him!
Tutorials
This repository is a collection of results from the React Native Animation Tutorial on his YouTube Channel Rakha Wibowo
- React Native Custom Switch Using Reanimated 2
- React Native Custom Animated Check Box Component Using SVG and Reanimated 2
- React Native Custom Image Carousel with Pagination and Auto Play using Reanimated 2
- React Native Bottom Sheet with Back Drop from Scratch using Reanimated 2 and Gesture Handler
- React Native Custom Range Slider using Reanimated 2
- React Native FlatList Grid or FlatList Columns With Reveal Animation Using Moti
- React Native Onboarding Screen Using Reanimated 2
- React Native Custom Swipeable Toast From Scratch
- React Native Stack Carousel
- React Native Accordion
- React Native Floating Action Button
- React Native Onboarding Screen ( Change Color ) Using Reanimated
- React Native 3D Onboarding Screen Using Reanimated and React Three Fiber
- React Native Scrollable Bottom Sheet with Back Drop using Reanimated and Gesture Handler
- React Native 3D Loading 3D Model Using React Three Fiber and Drei
- React Native 3D Character With Animation
- React Native Shared Element Transition With Reanimated 3
- React Native Custom Drawer With Reanimated 3 and Gesture Handler From Scratch
- React Native Animated Donut Chart using Reanimated 3 and Skia
- React Native Animated Circular Progress Bar With Reanimated 3 and Skia
- React Native Onboarding Screen (Masking) With Reanimated 3 and Skia
- React Native 3D Shop App UI With React Three Fiber - ThreeJs
- React Native Carousel With Pagination, Auto Play and Infinite Loop
- React Native Dark Mode Switch
- React Native Animated Onboarding Screen (Inspired By Cuberto)
- React Native Card Swipe With Reanimated And Gesture Handler From Scratch
- React Native Bar Chart With Skia And Reanimated From Scratch
- React Native Custom Carousel with Reanimated 3
- React Native Line Chart With Reanimated 3, Skia and D3 From Scratch!!!
- React Native
- Reanimated
- React Native Gesture Handler
- React Native Skia
- React Three Fiber
- Moti
- Lottie
- D3
The version used in this repository:
- React Native v0.73.6
- React Native Web v0.19.6
- Reanimated v3.6.2
- React Native Gesture Handler v2.14.0
- Moti v0.28.1
- Lottie v6.7.0
- React Three Fiber v8.16.1
- React Three Drei v9.105.3 9.103.1 doesn't go well with android, ios, web, had to upgrade.
- Three.js v0.162.0
- Skia v1.0.5
- D3 v7.9.0
- React Native Bars v2.4.3 This is implemented ONLY for Android Edge-To-Edge Theme, which is every easy to use on AndroidManifest.xml
Example checks : ✅ : Everything is ok 🔶 : Partial support, bug exists. 🚫 : Straight up crahes 🕐 : Not Tested Yet.
| No. | Android | iOS | Web |
|---|---|---|---|
| 1 | ✅ | ✅ | ✅ |
| 2 | ✅ | ✅ | 🔶 |
| 3 | ✅ | ✅ | ✅ |
| 4 | ✅ | ✅ | 🔶 |
| 5 | ✅ | ✅ | 🔶 |
| 6 | ✅ | ✅ | 🔶 |
| 7 | ✅ | ✅ | 🔶 |
| 8 | ✅ | ✅ | 🔶 |
| 9 | ✅ | ✅ | 🔶 |
| 10 | ✅ | 🕐 | 🔶 |
| 11 | ✅ | 🕐 | 🚫 |
| 12 | ✅ | 🕐 | 🕐 |
| 13 | ✅ | 🕐 | 🕐 |
| 14 | ✅ | 🕐 | 🕐 |
| 15 | ✅ | ✅ | 🕐 |
| 16 | ✅ | ✅ | 🕐 |
| 17 | ✅ | ✅ | 🚫 |
| 18 | ✅ | 🔶 | 🚫 |
| 19 | ✅ | 🕐 | 🕐 |
| 20 | ✅ | 🕐 | 🕐 |
| 21 | ✅ | 🕐 | 🕐 |
| 22 | ✅ | 🕐 | 🕐 |
| 23 | ✅ | 🕐 | 🕐 |
| 24 | ✅ | 🕐 | 🕐 |
| 25 | ✅ | 🕐 | 🕐 |
| 26 | ✅ | 🕐 | 🕐 |
| 27 | ✅ | 🕐 | 🕐 |
| 28 | ✅ | 🕐 | 🕐 |
| 29 | ✅ | 🕐 | 🕐 |
| 30 | ✅ | 🕐 | 🕐 |
| 31 | ✅ | 🕐 | 🕐 |
| 32 | ✅ | 🕐 | 🕐 |
Clone the project
git clone https://github.com/heeboy007/Integrated3DDevEnv.git
cd Integrated3DDevEnvInstall dependencies
npm installor maybe this, if you prefer it this way.
npx expo installFor iOS, extra steps : (if you have mac)
npx pod-installStart the server(for native builds for android or ios)
npm run nativeyou can press a or i after this to build out apps by react-native's internal build method.
npm run iosDisclaimer : I've never tested on react-native by xcode, since i don't have mac on my hands now. But you could still try physical testing on expo go.
npm startto start up the expo server, and download Expo Go on your testing device, scan it, then you can test the app for ios.
npm run androidnpm run webpacki've managed to bundle the whole thing by webpack, but it's very buggy for now.
Web Version(Ubuntu, webpack, chrome)
iOS Version(Physical, iPad Air gen 5, expo go)
Android version(Physical, SM-A805N, os version 11)
