Integrated 3D Development Environment(Template)

Originally : React Native Animation

• Original Git Repo is here. I ruined the git during the dev process, and failed to fork. But be sure to check on him!

Available Tutorials(Not Mine)

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!!!

Dependency Version

• 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	✅	🕐	🕐

Run Locally

Clone the project

git clone https://github.com/heeboy007/Integrated3DDevEnv.git
cd Integrated3DDevEnv

Install dependencies

npm install

or maybe this, if you prefer it this way.

npx expo install

For iOS, extra steps : (if you have mac)

npx pod-install

Start the server(for native builds for android or ios)

npm run native

you can press a or i after this to build out apps by react-native's internal build method.

Run on IOS

npm run ios

Disclaimer : 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 start

to start up the expo server, and download Expo Go on your testing device, scan it, then you can test the app for ios.

Run on ANDROID

npm run android

Run on Web

npm run webpack

i've managed to bundle the whole thing by webpack, but it's very buggy for now.

Preview

Web Version(Ubuntu, webpack, chrome)

iOS Version(Physical, iPad Air gen 5, expo go)

Android version(Physical, SM-A805N, os version 11)